/* global React */

/* === MARQUEE / SOCIAL PROOF === */
const Marquee = ({ items }) => (
  <div style={{
    background: "#FFCB47",
    padding: "16px 0",
    overflow: "hidden",
    borderTop: "3px solid #1A0B33",
    borderBottom: "3px solid #1A0B33",
  }}>
    <div style={{
      display: "flex",
      gap: 48,
      animation: "marquee 28s linear infinite",
      whiteSpace: "nowrap",
    }}>
      {[...items, ...items, ...items].map((item, i) => (
        <span key={i} style={{ fontSize: 18, fontWeight: 800, color: "#1A0B33", letterSpacing: "-0.01em" }}>
          {item} <span style={{ color: "#FF6B57", margin: "0 8px" }}>★</span>
        </span>
      ))}
    </div>
    <style>{`
      @keyframes marquee {
        from { transform: translateX(0); }
        to { transform: translateX(-33.33%); }
      }
    `}</style>
  </div>
);

/* === PROBLEM SECTION === */
const Problem = () => {
  const pains = [
    { icon: "😵‍💫", title: "Tecnologia que consome seus fins de semana", text: "WordPress, hospedagem, plugins, tema, integrações… Quando você percebe, o domingo acabou e o site continua sem produto cadastrado." },
    { icon: "📉", title: "Não sabe nem por onde começar", text: "Tutorial no YouTube é confuso, cada um fala uma coisa, e você fica travado antes mesmo de publicar o primeiro produto." },
    { icon: "😬", title: "Site amador não converte", text: "Site no improviso transmite desconfiança. Visitante desconfiado não clica, não compra, não volta." },
    { icon: "⏱️", title: "80 horas pra encontrar e cadastrar produto", text: "Garimpar 100 produtos com link de afiliado, foto e preço atualizado dá uma semana inteira de trabalho — e ainda nem começou a divulgar." },
    { icon: "✍️", title: "Não é designer nem redator", text: "Banner, copy de produto, post de blog… cada item desses é mais uma dor de cabeça que te tira do que importa: divulgar." },
    { icon: "💸", title: "Medo de gastar errado", text: "Pagar R$3.000 num curso e não conseguir aplicar nada. Comprar tema caro e ficar travado. Já viu esse filme." },
  ];

  return (
    <section className="bg-white-soft section-pad" id="beneficios">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
          <span className="eyebrow">Você se identifica?</span>
          <h2 style={{ marginTop: 14, marginBottom: 16 }}>
            Ser afiliado do Mercado Livre poderia ser simples. Quem já tentou, sabe que <span className="text-coral">não é.</span>
          </h2>
          <p style={{ fontSize: 18, color: "var(--ink-500)" }}>
            Você provavelmente já passou por isso (ou tá passando agora):
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20 }}>
          {pains.map((p, i) => (
            <div key={i} style={{
              background: "white",
              borderRadius: 22,
              padding: 28,
              boxShadow: "var(--sh-card)",
              border: "1px solid var(--purple-100)",
              transition: "transform 0.25s, box-shadow 0.25s",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = "var(--sh-card-lg)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "var(--sh-card)"; }}>
              <div style={{
                width: 56, height: 56, borderRadius: 16,
                background: "var(--purple-100)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: 28, marginBottom: 18,
              }}>{p.icon}</div>
              <h3 style={{ fontSize: 18, marginBottom: 10, lineHeight: 1.25 }}>{p.title}</h3>
              <p style={{ color: "var(--ink-500)", fontSize: 14.5 }}>{p.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* === SOLUTION / O QUE É === */
const Solution = () => (
  <section className="bg-purple-soft section-pad">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }} className="solution-grid">
        <div>
          <span className="eyebrow">O que é a UPCOM</span>
          <h2 style={{ marginTop: 14, marginBottom: 20 }}>
            A UPCOM entrega seu site <span className="text-purple">pronto pra começar a faturar</span>.
          </h2>
          <p style={{ fontSize: 17, color: "var(--ink-500)", marginBottom: 28 }}>
            A gente não vende curso, não cobra mensalidade e não promete enriquecimento. Vendemos um site profissional de afiliado do Mercado Livre, entregue populado com produtos do seu nicho e configurado com seu link de afiliado.
          </p>

          <div className="stack" style={{ gap: 16 }}>
            {[
              "Site WordPress profissional, rápido e responsivo",
              "Produtos do seu nicho já cadastrados com seu link de afiliado",
              "Painel simplificado pra você atualizar produtos sem mexer em código",
              "Vídeo-tutorial de 15 minutos mostrando como usar",
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <Check />
                <span style={{ fontSize: 16, color: "var(--ink-900)", fontWeight: 500 }}>{t}</span>
              </div>
            ))}
          </div>

          <a href="#planos" className="btn btn-primary btn-lg" style={{ marginTop: 32 }}>
            Quero começar agora <ArrowRight />
          </a>
        </div>

        {/* Visual mockup card */}
        <div style={{ position: "relative" }}>
          <div style={{
            background: "linear-gradient(135deg, #4A1D85, #7B2DD6)",
            borderRadius: 28,
            padding: 36,
            boxShadow: "0 30px 80px -20px rgba(58, 22, 104, 0.5)",
            color: "white",
            position: "relative",
            overflow: "hidden",
          }}>
            <div className="blob" style={{ width: 240, height: 240, background: "#FFCB47", top: -80, right: -60, opacity: 0.3 }} />

            <div style={{ position: "relative" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24 }}>
                <span style={{ fontSize: 12, opacity: 0.7, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase" }}>casaemoferta.com.br</span>
                <div style={{ display: "flex", gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 5, background: "#FF6B57" }} />
                  <span style={{ width: 10, height: 10, borderRadius: 5, background: "#FFCB47" }} />
                  <span style={{ width: 10, height: 10, borderRadius: 5, background: "#25D366" }} />
                </div>
              </div>

              <div style={{ fontSize: 14, opacity: 0.8, marginBottom: 6 }}>Site entregue com sucesso</div>
              <div style={{ fontSize: 48, fontWeight: 900, letterSpacing: "-0.03em", marginBottom: 4 }}>
                120 <span style={{ fontSize: 24, opacity: 0.7 }}>produtos</span>
              </div>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(37,211,102,0.2)", color: "#7CFFB0", padding: "4px 10px", borderRadius: 999, fontSize: 13, fontWeight: 700 }}>
                ✅ Cadastrados com seu afiliado
              </div>

              <div style={{ height: 1, background: "rgba(255,255,255,0.15)", margin: "28px 0 24px" }} />

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <Stat label="Nicho" value="Casa & Deco" />
                <Stat label="Posts de blog" value="15 posts" />
                <Stat label="Suporte" value="15 dias" />
                <Stat label="Entrega" value="3 dias" />
              </div>

              {/* mini chart */}
              <div style={{ marginTop: 24, display: "flex", alignItems: "flex-end", gap: 6, height: 60 }}>
                {[28, 42, 35, 60, 48, 75, 92, 70, 88, 100, 85, 96].map((h, i) => (
                  <div key={i} style={{
                    flex: 1,
                    height: `${h}%`,
                    background: i > 8 ? "#FFCB47" : "rgba(255,255,255,0.4)",
                    borderRadius: "4px 4px 0 0",
                  }} />
                ))}
              </div>
            </div>
          </div>

          {/* Floating badge */}
          <div style={{
            position: "absolute",
            top: -20,
            right: -20,
            background: "#FF6B57",
            color: "white",
            padding: "14px 20px",
            borderRadius: 16,
            boxShadow: "0 14px 28px -8px rgba(232, 85, 64, 0.5)",
            transform: "rotate(6deg)",
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.9 }}>Entregue em</div>
            <div style={{ fontSize: 20, fontWeight: 900 }}>3 dias úteis</div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .solution-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
        }
      `}</style>
    </div>
  </section>
);

const Stat = ({ label, value }) => (
  <div>
    <div style={{ fontSize: 12, opacity: 0.7, marginBottom: 4 }}>{label}</div>
    <div style={{ fontSize: 18, fontWeight: 800 }}>{value}</div>
  </div>
);

/* === DELIVERABLES === */
const Deliverables = () => {
  const items = [
    { num: "01", title: "Site WordPress profissional", text: "Tema otimizado, rápido, responsivo (funciona perfeito no celular). Visual de loja, não de blog improvisado.", color: "#FF6B57" },
    { num: "02", title: "Produtos cadastrados", text: "60 ou 120 produtos do seu nicho (depende do plano), com fotos, preços, descontos e seu link de afiliado.", color: "#7B2DD6" },
    { num: "03", title: "Painel simplificado", text: "WordPress configurado em modo cliente — você só vê o que precisa pra atualizar produtos, posts e banners.", color: "#FFCB47" },
    { num: "04", title: "Banners e visual prontos", text: "Hero rotativo, banners de categoria, layout pronto. Sem precisar contratar designer.", color: "#25D366" },
    { num: "05", title: "Vídeo-tutorial de uso", text: "Loom de 15min mostrando como trocar produto, criar post e mudar banner. Sem precisar perguntar nada.", color: "#FF6B57" },
    { num: "06", title: "Suporte de 15 dias", text: "Qualquer bug ou problema técnico no que entregamos, a gente corrige sem custo.", color: "#7B2DD6" },
  ];

  return (
    <section className="bg-white-soft section-pad">
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }}>
          <span className="eyebrow">O que você recebe</span>
          <h2 style={{ marginTop: 14, marginBottom: 16 }}>
            Seu site sai do nosso forno <span className="text-coral">completo e funcionando</span>.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
          {items.map((it) => (
            <div key={it.num} style={{
              background: "white",
              borderRadius: 22,
              padding: "32px 28px",
              boxShadow: "var(--sh-card)",
              border: "1px solid var(--purple-100)",
              position: "relative",
              overflow: "hidden",
            }}>
              <div style={{
                position: "absolute", top: 18, right: 18,
                fontSize: 56, fontWeight: 900,
                color: it.color, opacity: 0.18,
                lineHeight: 1, letterSpacing: "-0.04em",
              }}>{it.num}</div>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: it.color,
                marginBottom: 18,
                display: "flex", alignItems: "center", justifyContent: "center",
                color: "white", fontWeight: 900, fontSize: 14,
              }}>{it.num}</div>
              <h3 style={{ fontSize: 19, marginBottom: 10 }}>{it.title}</h3>
              <p style={{ color: "var(--ink-500)", fontSize: 15 }}>{it.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Marquee = Marquee;
window.Problem = Problem;
window.Solution = Solution;
window.Deliverables = Deliverables;