/* global React */

/* === GUARANTEE === */
const Guarantee = () => (
  <section className="section-pad-sm" style={{ background: "var(--purple-100)" }}>
    <div className="container">
      <div style={{
        background: "white",
        borderRadius: 28,
        padding: "48px 56px",
        display: "grid",
        gridTemplateColumns: "auto 1fr auto",
        gap: 40,
        alignItems: "center",
        boxShadow: "var(--sh-card)",
      }} className="guarantee-card">
        <div style={{
          width: 130, height: 130, borderRadius: "50%",
          background: "linear-gradient(135deg, #FFCB47, #FF6B57)",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: "white", fontWeight: 900, textAlign: "center",
          boxShadow: "0 14px 32px -8px rgba(232, 85, 64, 0.4)",
        }}>
          <div>
            <div style={{ fontSize: 44, lineHeight: 1 }}>15</div>
            <div style={{ fontSize: 12, letterSpacing: "0.1em", marginTop: 2 }}>DIAS</div>
          </div>
        </div>
        <div>
          <span className="eyebrow">Compra 100% segura</span>
          <h3 style={{ fontSize: 28, marginTop: 10, marginBottom: 10 }}>
            Garantia técnica de 15 dias. Bug nosso? <span className="text-coral">A gente corrige.</span>
          </h3>
          <p style={{ color: "var(--ink-500)", fontSize: 16 }}>
            O que entregamos funciona. Se aparecer qualquer problema técnico dentro de 15 dias, corrigimos sem custo. O site também é 100% seu: hospedagem na Hostinger, domínio no seu nome, sem ficar preso a ninguém.
          </p>
        </div>
        <a href="https://wa.me/5511999999999" className="btn btn-primary btn-lg" style={{ alignSelf: "center" }}>
          Começar sem risco <ArrowRight />
        </a>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .guarantee-card { grid-template-columns: 1fr !important; text-align: center !important; padding: 32px !important; }
          .guarantee-card > div:first-child { margin: 0 auto; }
        }
      `}</style>
    </div>
  </section>
);

/* === MAINTENANCE === */
const Maintenance = () => (
  <section className="bg-white-soft section-pad-sm">
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <span className="eyebrow">Manutenção opcional</span>
        <h2 style={{ marginTop: 14, marginBottom: 12 }}>
          E quando seu site precisar de uma <span className="text-coral">renovada</span>?
        </h2>
        <p style={{ fontSize: 17, color: "var(--ink-500)" }}>
          Sem mensalidade fixa. Você contrata só quando quiser.
        </p>
      </div>

      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
        gap: 24,
        maxWidth: 720,
        margin: "0 auto",
      }}>
        {[
          {
            icon: "📦",
            name: "Manutenção Vitrine",
            price: "R$ 99",
            items: [
              "50 produtos novos",
              "Revisão e correção de links quebrados",
              "Entrega em até 2 dias úteis",
            ],
          },
          {
            icon: "📦",
            name: "Manutenção Completa",
            price: "R$ 297",
            items: [
              "50 produtos novos",
              "5 posts novos no blog",
              "Revisão geral do site",
              "Entrega em até 3 dias úteis",
            ],
          },
        ].map((pkg) => (
          <div key={pkg.name} style={{
            background: "white",
            borderRadius: 22,
            padding: "32px 28px",
            boxShadow: "var(--sh-card)",
            border: "1px solid var(--purple-100)",
          }}>
            <div style={{ fontSize: 36, marginBottom: 16 }}>{pkg.icon}</div>
            <h3 style={{ fontSize: 20, marginBottom: 8 }}>{pkg.name}</h3>
            <div style={{ fontSize: 36, fontWeight: 900, color: "var(--purple-700)", marginBottom: 20 }}>{pkg.price}</div>
            <div className="stack" style={{ gap: 10 }}>
              {pkg.items.map((item, i) => (
                <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5 }}>
                  <Check color="#7B2DD6" />
                  <span style={{ lineHeight: 1.4, color: "var(--ink-500)" }}>{item}</span>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <p style={{ textAlign: "center", marginTop: 28, fontSize: 15, color: "var(--ink-500)", fontStyle: "italic" }}>
        Você decide quando contratar. Pode ser todo mês, a cada 3 meses, ou nunca. O site é seu — você manda.
      </p>
    </div>
  </section>
);

/* === FAQ === */
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "Eu nunca usei WordPress. Vou conseguir mexer?", a: "Sim! O painel é simplificado especialmente pra você. Vai parecer Instagram: tem botão pra adicionar produto, criar post e mudar banner. E você recebe um vídeo-tutorial de 15min mostrando tudo passo a passo." },
    { q: "Preciso ter conta no Mercado Livre Afiliados?", a: "Sim. É grátis e leva 5 minutos pra criar. Se você ainda não tiver, te ajudamos no processo." },
    { q: "Quanto custa a hospedagem?", a: "Entre R$15 e R$25 por mês na Hostinger. Você contrata direto com eles, no seu CPF, no seu nome. Não passamos por intermediário." },
    { q: "E se um produto sair de estoque ou mudar de preço?", a: "Você atualiza no painel (é simples, mostramos como). Se não quiser fazer, contrata um pacote de manutenção avulso por R$99 ou R$297." },
    { q: "Posso escolher qualquer nicho?", a: "Atendemos os principais: Casa e Decoração, Pet, Beleza, Eletrônicos, Esportes, Moda, Infantil. Outros nichos sob consulta." },
    { q: "Em quanto tempo recebo o site?", a: "Em até 3 dias úteis após o pagamento e o envio dos seus dados (acesso à Hostinger e ID de afiliado)." },
    { q: "Vou precisar pagar mensalidade pra vocês?", a: "Não. Pagamento único. Quer atualizações futuras? Contrata pacote avulso quando quiser. Sem amarra." },
    { q: "Posso parcelar?", a: "Sim, em até 12x no cartão de crédito (com juros da operadora)." },
    { q: "Quanto eu posso ganhar com isso?", a: "Não prometemos números. Afiliação depende de divulgação, nicho e estratégia. O que garantimos é entregar uma estrutura profissional pronta — o resultado depende do seu trabalho de divulgação." },
  ];

  return (
    <section className="bg-white-soft section-pad" id="faq">
      <div className="container" style={{ maxWidth: 880 }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="eyebrow">Perguntas frequentes</span>
          <h2 style={{ marginTop: 14 }}>Tirando todas as <span className="text-coral">dúvidas</span></h2>
        </div>

        <div className="stack" style={{ gap: 14 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: "white",
              borderRadius: 18,
              border: open === i ? "2px solid var(--purple-500)" : "1px solid var(--purple-100)",
              overflow: "hidden",
              transition: "border-color 0.2s",
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: "100%", padding: "22px 26px",
                display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20,
                textAlign: "left",
              }}>
                <span style={{ fontSize: 17, fontWeight: 700, color: "var(--ink-900)" }}>{it.q}</span>
                <span style={{
                  width: 32, height: 32, borderRadius: "50%",
                  background: open === i ? "var(--coral-500)" : "var(--purple-100)",
                  color: open === i ? "white" : "var(--purple-700)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 22, fontWeight: 700, flexShrink: 0,
                  transition: "all 0.2s",
                  transform: open === i ? "rotate(45deg)" : "none",
                }}>+</span>
              </button>
              {open === i && (
                <div style={{ padding: "0 26px 24px", color: "var(--ink-500)", fontSize: 16, lineHeight: 1.6 }}>
                  {it.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* === FINAL CTA === */
const FinalCTA = () => (
  <section className="bg-purple-deep section-pad" id="contato" style={{ overflow: "hidden", position: "relative" }}>
    <div className="blob" style={{ width: 600, height: 600, background: "#FF6B57", top: "-30%", left: "30%", opacity: 0.25 }} />
    <div className="blob" style={{ width: 400, height: 400, background: "#FFCB47", bottom: "-20%", right: "20%", opacity: 0.2 }} />

    <div className="container" style={{ position: "relative", textAlign: "center", maxWidth: 800 }}>
      <h2 style={{ color: "white", fontSize: "clamp(36px, 5vw, 56px)", marginBottom: 22 }}>
        Pronto pra ter seu site de afiliado <span style={{ color: "#FFCB47" }}>funcionando</span>?
      </h2>
      <p style={{ fontSize: 19, color: "rgba(255,255,255,0.85)", marginBottom: 36 }}>
        Mais um cliente faturando essa semana. O próximo pode ser você.
      </p>
      <div className="row" style={{ justifyContent: "center", gap: 16 }}>
        <a href="https://wa.me/5511999999999" className="btn btn-ghost btn-lg">
          Quero o Vitrine — R$ 797 <ArrowRight />
        </a>
        <a href="https://wa.me/5511999999999" className="btn btn-primary btn-lg">
          Quero a Loja Completa — R$ 1.497 <ArrowRight />
        </a>
      </div>

      <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 14, marginTop: 32 }}>
        Entrega em 3 dias úteis · Pagamento em até 12x · Garantia técnica de 15 dias · Sem mensalidade
      </p>
    </div>
  </section>
);

/* === FOOTER === */
const Footer = () => (
  <footer style={{ background: "#1A0B33", color: "white", padding: "56px 0 32px" }}>
    <div className="container">
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.5fr 1fr 1fr",
        gap: 40,
        marginBottom: 40,
      }} className="footer-grid">
        <div>
          <Logo />
          <p style={{ color: "rgba(255,255,255,0.6)", marginTop: 18, fontSize: 14, lineHeight: 1.6, maxWidth: 320 }}>
            Sites prontos de afiliado do Mercado Livre. Entrega em 3 dias úteis, pagamento único, sem mensalidade.
          </p>
        </div>
        <FooterCol title="Produto" links={["Como funciona", "Planos", "FAQ"]} />
        <FooterCol title="Contato" links={["WhatsApp", "E-mail"]} />
      </div>

      <div style={{
        paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.1)",
        color: "rgba(255,255,255,0.5)", fontSize: 13,
      }}>
        <p style={{ marginBottom: 8 }}>© 2026 UPCOM Digital · Criação de Sites em Londrina</p>
        <p>Este produto não é afiliado, endossado ou patrocinado pelo Mercado Livre. Mercado Livre é marca registrada de seus respectivos proprietários.</p>
      </div>
    </div>
    <style>{`
      @media (max-width: 900px) {
        .footer-grid { grid-template-columns: 1fr 1fr !important; }
      }
    `}</style>
  </footer>
);

const FooterCol = ({ title, links }) => (
  <div>
    <h4 style={{ fontSize: 14, fontWeight: 800, letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16, color: "#FFCB47" }}>{title}</h4>
    <div className="stack" style={{ gap: 10 }}>
      {links.map(l => <a key={l} href="#" style={{ color: "rgba(255,255,255,0.7)", fontSize: 14 }}>{l}</a>)}
    </div>
  </div>
);

/* === FLOATING WHATSAPP === */
const FabWhatsApp = () => (
  <a href="https://wa.me/5511999999999" className="fab-whatsapp" aria-label="Falar no WhatsApp">
    <WhatsAppIcon size={32} />
  </a>
);

window.Guarantee = Guarantee;
window.Maintenance = Maintenance;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.FabWhatsApp = FabWhatsApp;