/* Sections: Offer, Guarantee, FAQ, FinalCTA, Footer */
const { useState: useState3 } = React;
const Reveal3 = window.Reveal;

/* ---------- Offer ---------- */
function Offer() {
  const { h, m, sec } = window.useCountdown(23*3600 + 47*60 + 12);
  const bonuses = [
    { v: "R$ 97", t: "Guia anticólica completo", d: "Lista de alimentos vilões + substitutos práticos" },
    { v: "R$ 87", t: "App Mãe Leve", d: "Acompanhamento diário, timer de mamada e check-ins" },
    { v: "R$ 67", t: "Receitas express 5 min", d: "30 receitas para o bebê que acordou cedo demais" },
    { v: "R$ 47", t: "Grupo VIP no WhatsApp", d: "Acesso direto à Dra. Marina e à comunidade" },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }} id="oferta">
      <div className="container container-tight">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <Reveal3>
            <span className="tag">
              <span style={{
                width: 6, height: 6, borderRadius: "50%", background: "var(--rust)",
                animation: "pulse 1.6s infinite"
              }} />
              Oferta termina em {h}:{m}:{sec}
            </span>
          </Reveal3>
          <Reveal3 delay={60}>
            <h2 className="serif" style={{ fontSize: "clamp(40px, 6vw, 64px)", lineHeight: 1.02, marginTop: 20, marginBottom: 16 }}>
              Tudo isso por <span className="serif-it" style={{ color: "var(--rust)" }}>menos que um almoço.</span>
            </h2>
          </Reveal3>
          <Reveal3 delay={120}>
            <p style={{ fontSize: 18, color: "var(--ink-2)" }}>
              Valor total dos bônus + produto principal: <s style={{ color: "var(--muted)" }}>R$ 595</s>
            </p>
          </Reveal3>
        </div>

        <Reveal3 delay={180}>
          <div style={{
            background: "var(--warm-white)",
            border: "1.5px solid var(--ink)",
            borderRadius: 24,
            padding: 0,
            boxShadow: "var(--shadow-lg)",
            overflow: "hidden",
            position: "relative"
          }}>
            {/* Top stripe */}
            <div style={{
              background: "var(--ink)",
              color: "var(--cream)",
              padding: "12px 24px",
              textAlign: "center",
              fontSize: 12,
              letterSpacing: ".15em",
              textTransform: "uppercase",
              fontWeight: 600
            }}>
              ⚡ Plano completo + 4 bônus exclusivos
            </div>

            <div style={{ padding: "40px 36px" }} className="offer-pad">
              {/* Price block */}
              <div style={{ textAlign: "center", marginBottom: 32 }}>
                <div style={{ fontSize: 14, color: "var(--muted)", marginBottom: 8 }}>
                  De <s>R$ 297</s> por apenas
                </div>
                <div style={{ display: "inline-flex", alignItems: "flex-start", gap: 4 }}>
                  <span className="serif" style={{ fontSize: 40, color: "var(--rust)", marginTop: 18 }}>R$</span>
                  <span className="serif" style={{ fontSize: 140, lineHeight: 1, color: "var(--rust)", letterSpacing: "-.04em", fontVariantNumeric: "tabular-nums" }}>
                    47
                  </span>
                  <span className="serif" style={{ fontSize: 40, color: "var(--rust)", marginTop: 18 }}>,00</span>
                </div>
                <div style={{ fontSize: 15, color: "var(--ink-2)", marginTop: 8 }}>
                  ou <strong>5x de R$ 10,84</strong> sem juros no cartão
                </div>
              </div>

              {/* Bonuses */}
              <div style={{ marginBottom: 36 }}>
                <div style={{
                  fontSize: 13, letterSpacing: ".12em", textTransform: "uppercase",
                  color: "var(--muted)", marginBottom: 16, textAlign: "center"
                }}>
                  + Você leva também
                </div>
                <div style={{ display: "grid", gap: 12 }}>
                  {bonuses.map((b, i) => (
                    <div key={i} style={{
                      display: "grid",
                      gridTemplateColumns: "auto 1fr auto",
                      gap: 16,
                      alignItems: "center",
                      padding: "14px 18px",
                      background: "var(--cream)",
                      borderRadius: 12,
                      border: "1px solid var(--line)"
                    }}>
                      <div style={{
                        width: 32, height: 32, borderRadius: "50%",
                        background: "var(--sage-soft)", color: "#3E4F33",
                        display: "flex", alignItems: "center", justifyContent: "center"
                      }}>
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>
                      </div>
                      <div>
                        <div style={{ fontSize: 15, fontWeight: 700 }}>{b.t}</div>
                        <div style={{ fontSize: 13, color: "var(--muted)" }}>{b.d}</div>
                      </div>
                      <div style={{ fontSize: 13, fontWeight: 700, color: "var(--rust)" }}>{b.v}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* CTA */}
              <div style={{ textAlign: "center" }}>
                <a href="#oferta" className="btn-primary large pulse" style={{ width: "100%", maxWidth: 460 }}>
                  Sim! Quero meu cardápio agora
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </a>
                <div style={{
                  display: "flex", justifyContent: "center", gap: 24, marginTop: 20,
                  fontSize: 12, color: "var(--muted)", flexWrap: "wrap"
                }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    Pagamento seguro
                  </span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L4 6v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V6l-8-4z"/></svg>
                    7 dias de garantia
                  </span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
                    Acesso imediato
                  </span>
                </div>
              </div>
            </div>
          </div>
        </Reveal3>
      </div>

      <style>{`
        @media (max-width: 600px) {
          .offer-pad { padding: 28px 20px !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Guarantee ---------- */
function Guarantee() {
  return (
    <section className="section-sm" style={{ background: "var(--warm-white)" }}>
      <div className="container container-tight">
        <div style={{
          display: "grid",
          gridTemplateColumns: "auto 1fr",
          gap: 40,
          alignItems: "center",
          padding: "48px 40px",
          background: "var(--cream)",
          borderRadius: 24,
          border: "1px solid var(--line)"
        }} className="guarantee-grid">
          <Reveal3>
            {/* Seal */}
            <div style={{ position: "relative", width: 160, height: 160 }}>
              <svg viewBox="0 0 160 160" style={{ width: "100%", height: "100%" }}>
                <defs>
                  <path id="curve" d="M 80,80 m -64,0 a 64,64 0 1,1 128,0 a 64,64 0 1,1 -128,0" />
                </defs>
                <circle cx="80" cy="80" r="74" fill="none" stroke="var(--rust)" strokeWidth="1.5" strokeDasharray="3 4" />
                <circle cx="80" cy="80" r="60" fill="var(--rust)" />
                <circle cx="80" cy="80" r="54" fill="none" stroke="rgba(255,255,255,.3)" strokeWidth="1" />
                <text fill="#FFCDA8" fontSize="9" letterSpacing="2" fontFamily="Manrope" fontWeight="700">
                  <textPath href="#curve" startOffset="0">GARANTIA INCONDICIONAL · 7 DIAS · GARANTIA INCONDICIONAL · 7 DIAS · </textPath>
                </text>
                <text x="80" y="72" textAnchor="middle" fill="#fff" fontSize="34" fontFamily="Instrument Serif" letterSpacing="-1">7</text>
                <text x="80" y="92" textAnchor="middle" fill="#FFCDA8" fontSize="10" letterSpacing="3" fontWeight="700">DIAS</text>
                <text x="80" y="106" textAnchor="middle" fill="#fff" fontSize="9" letterSpacing="2" opacity=".8">SEM RISCO</text>
              </svg>
            </div>
          </Reveal3>
          <div>
            <Reveal3>
              <span className="eyebrow">Garantia</span>
            </Reveal3>
            <Reveal3 delay={60}>
              <h2 className="serif" style={{ fontSize: "clamp(28px, 4vw, 42px)", lineHeight: 1.05, marginTop: 12, marginBottom: 16 }}>
                Se em 7 dias você não estiver encantada, devolvemos <span className="serif-it" style={{ color: "var(--rust)" }}>cada centavo</span>.
              </h2>
            </Reveal3>
            <Reveal3 delay={120}>
              <p style={{ fontSize: 16, color: "var(--ink-2)" }}>
                Você tem uma semana inteira para testar o cardápio, conhecer as receitas e sentir os primeiros resultados. Se por qualquer motivo não for para você, basta um email e devolvemos 100% do valor. Sem perguntas, sem burocracia.
              </p>
            </Reveal3>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 700px) {
          .guarantee-grid { grid-template-columns: 1fr !important; text-align: center; padding: 32px 24px !important; gap: 24px !important; }
          .guarantee-grid > div:first-child { margin: 0 auto; }
        }
      `}</style>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useState3(0);
  const items = [
    {
      q: "Posso emagrecer mesmo amamentando? Não é perigoso?",
      a: "Sim, e é exatamente esse o ponto. O método foi desenvolvido por uma nutricionista materno-infantil para você emagrecer com segurança, mantendo (e até aumentando) a produção de leite. Todas as receitas têm valor nutricional calculado para a fase de lactação."
    },
    {
      q: "Em quanto tempo vou começar a ver resultados?",
      a: "A maioria das mães percebe diferença na primeira semana — entre 1,5 e 2,5kg eliminados, mais energia e queda no inchaço. Resultados completos costumam aparecer entre a 3ª e a 6ª semana."
    },
    {
      q: "As receitas são caras ou difíceis?",
      a: "Pelo contrário. Foram desenhadas com ingredientes encontrados em qualquer supermercado brasileiro. Mais de 60% das receitas ficam prontas em até 15 minutos."
    },
    {
      q: "E se meu bebê tiver alergias ou intolerâncias?",
      a: "O guia tem um módulo específico para bebês com APLV, refluxo e cólicas. Você consegue adaptar todas as receitas sem perder o efeito do método."
    },
    {
      q: "Como recebo o material após a compra?",
      a: "O acesso é imediato. Em até 2 minutos após o pagamento, você recebe um email com o login da plataforma e os links para baixar o PDF e instalar o app."
    },
    {
      q: "Preciso fazer exercícios?",
      a: "Não. O método foi desenhado pensando em mães com rotina exaustiva. Exercícios são bem-vindos, mas não obrigatórios — os resultados vêm da nutrição."
    },
    {
      q: "Funciona se eu tive cesárea / parto há mais tempo?",
      a: "Sim. O método é eficaz tanto para mães no pós-parto recente quanto para quem está amamentando há mais tempo. Há ajustes específicos para cada fase."
    },
    {
      q: "E se eu não gostar?",
      a: "Você tem 7 dias de garantia incondicional. Basta enviar um email e devolvemos 100% do valor pago, sem questionar."
    },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }} id="faq">
      <div className="container container-tight">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <Reveal3><span className="eyebrow">Perguntas frequentes</span></Reveal3>
          <Reveal3 delay={60}>
            <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.02, marginTop: 16 }}>
              As dúvidas <span className="serif-it" style={{ color: "var(--rust)" }}>que toda mãe tem.</span>
            </h2>
          </Reveal3>
        </div>

        <div style={{ display: "grid", gap: 0, border: "1px solid var(--line)", borderRadius: 16, overflow: "hidden", background: "var(--warm-white)" }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: i < items.length - 1 ? "1px solid var(--line)" : "0" }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: "100%",
                  textAlign: "left",
                  padding: "22px 26px",
                  display: "grid",
                  gridTemplateColumns: "1fr auto",
                  gap: 16,
                  alignItems: "center",
                  fontSize: 17,
                  fontWeight: 600,
                  color: "var(--ink)"
                }}
              >
                <span>{it.q}</span>
                <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: open === i ? "var(--rust)" : "var(--cream-2)",
                  color: open === i ? "#fff" : "var(--ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  transition: "all .25s",
                  flexShrink: 0
                }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"
                    style={{ transform: open === i ? "rotate(45deg)" : "none", transition: "transform .25s" }}>
                    <path d="M12 5v14M5 12h14"/>
                  </svg>
                </span>
              </button>
              <div style={{
                maxHeight: open === i ? 320 : 0,
                overflow: "hidden",
                transition: "max-height .35s ease"
              }}>
                <div style={{ padding: "0 26px 22px", color: "var(--ink-2)", fontSize: 16, maxWidth: 720 }}>
                  {it.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  const { h, m, sec } = window.useCountdown(23*3600 + 47*60 + 12);
  return (
    <section className="section" style={{ background: "var(--ink)", color: "var(--cream)", overflow: "hidden", position: "relative" }}>
      {/* decorative arcs */}
      <svg style={{ position: "absolute", top: -100, right: -100, opacity: .08, pointerEvents: "none" }} width="600" height="600" viewBox="0 0 600 600">
        <circle cx="300" cy="300" r="280" fill="none" stroke="#FFCDA8" strokeWidth="1" />
        <circle cx="300" cy="300" r="220" fill="none" stroke="#FFCDA8" strokeWidth="1" />
        <circle cx="300" cy="300" r="160" fill="none" stroke="#FFCDA8" strokeWidth="1" />
        <circle cx="300" cy="300" r="100" fill="none" stroke="#FFCDA8" strokeWidth="1" />
      </svg>

      <div className="container container-tight" style={{ position: "relative", textAlign: "center" }}>
        <Reveal3>
          <span className="tag" style={{ background: "rgba(255,205,168,.15)", color: "#FFCDA8" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#FFCDA8", animation: "pulse 1.6s infinite" }} />
            Última chamada · {h}:{m}:{sec}
          </span>
        </Reveal3>
        <Reveal3 delay={60}>
          <h2 className="serif" style={{ fontSize: "clamp(40px, 7vw, 88px)", lineHeight: 0.98, marginTop: 24, marginBottom: 24, color: "#FAF6EE" }}>
            Sua próxima semana<br />pode começar <span className="serif-it" style={{ color: "#FFCDA8" }}>2kg mais leve.</span>
          </h2>
        </Reveal3>
        <Reveal3 delay={120}>
          <p style={{ fontSize: 19, color: "#C9BCA3", maxWidth: 580, margin: "0 auto 40px" }}>
            Ou você continua adiando — e olhando para o espelho com a mesma frustração de ontem. A escolha é sua.
          </p>
        </Reveal3>
        <Reveal3 delay={180}>
          <a href="#" className="btn-primary large pulse" style={{ background: "#C04A26" }}>
            Começar agora por R$ 47
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
        </Reveal3>
        <Reveal3 delay={240}>
          <div style={{ marginTop: 28, fontSize: 13, color: "#9A8E7A" }}>
            ✓ Acesso imediato &nbsp;·&nbsp; ✓ 7 dias de garantia &nbsp;·&nbsp; ✓ Pagamento 100% seguro
          </div>
        </Reveal3>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer style={{ background: "#0F0C08", color: "#7A7060", padding: "56px 0 32px", fontSize: 13 }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr",
          gap: 48,
          paddingBottom: 40,
          borderBottom: "1px solid rgba(255,255,255,.06)"
        }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
              <div style={{ width: 24, height: 24, borderRadius: "50%", background: "radial-gradient(circle at 35% 30%, #E8765A, #9A3A1D)" }} />
              <span className="serif" style={{ fontSize: 20, color: "#FAF6EE" }}>Mãe Leve</span>
            </div>
            <p style={{ maxWidth: 380, lineHeight: 1.6 }}>
              O Cardápio Infalível para Mães Lactantes é um infoproduto digital. Não substitui consulta médica ou nutricional individualizada. Resultados podem variar.
            </p>
          </div>
          <div>
            <div style={{ color: "#C9BCA3", fontWeight: 700, marginBottom: 14, letterSpacing: ".05em", textTransform: "uppercase", fontSize: 11 }}>Institucional</div>
            <div style={{ display: "grid", gap: 8 }}>
              <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Sobre nós</a>
              <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Termos de uso</a>
              <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Política de privacidade</a>
              <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Política de reembolso</a>
            </div>
          </div>
          <div>
            <div style={{ color: "#C9BCA3", fontWeight: 700, marginBottom: 14, letterSpacing: ".05em", textTransform: "uppercase", fontSize: 11 }}>Suporte</div>
            <div style={{ display: "grid", gap: 8 }}>
              <a href="mailto:contato@maeleve.com.br" style={{ color: "inherit", textDecoration: "none" }}>contato@maeleve.com.br</a>
              <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Central de ajuda</a>
              <a href="#" style={{ color: "inherit", textDecoration: "none" }}>WhatsApp</a>
              <a href="#faq" style={{ color: "inherit", textDecoration: "none" }}>Perguntas frequentes</a>
            </div>
          </div>
        </div>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16,
          paddingTop: 32, fontSize: 12
        }}>
          <div>© 2026 Mãe Leve · CNPJ 00.000.000/0001-00 · Todos os direitos reservados.</div>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <span>Pagamento processado por parceiro seguro</span>
          </div>
        </div>

        <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.06)", fontSize: 11, color: "#5A5347", lineHeight: 1.6 }}>
          <strong>Aviso legal:</strong> Este produto não garante resultados específicos. Cada organismo responde de maneira diferente. Os depoimentos representam experiências reais, mas não constituem promessa de resultado. Consulte sempre um profissional de saúde antes de iniciar qualquer mudança alimentar, especialmente durante a amamentação.
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>
  );
}

window.Offer = Offer;
window.Guarantee = Guarantee;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
