/* Sections: About, ContentProof, SocialProof, Authority */
const Reveal2 = window.Reveal;

/* ---------- About the Product ---------- */
function About() {
  const modules = [
    { n: "01", title: "O método dos 21 dias", desc: "Plano semana a semana para acelerar o metabolismo no pós-parto sem efeito sanfona." },
    { n: "02", title: "Cardápio das 4 fases", desc: "Lactogênica, queima rápida, sustentação e manutenção. Cada fase com receitas exclusivas." },
    { n: "03", title: "Lista de compras inteligente", desc: "Tudo o que cabe no orçamento e se encontra em qualquer supermercado brasileiro." },
    { n: "04", title: "Guia anticólica", desc: "O que tirar do prato hoje para o bebê dormir melhor essa noite." },
    { n: "05", title: "Receitas de 5 minutos", desc: "Para o caso de o bebê acordar antes da fome chegar — porque ele sempre acorda." },
    { n: "06", title: "Marmitas da semana", desc: "Como preparar 21 refeições em apenas 1 hora de domingo." },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }} id="sobre">
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "0.9fr 1.1fr",
          gap: 64,
          alignItems: "center"
        }} className="about-grid">
          <Reveal2>
            <div style={{ position: "relative" }}>
              <div className="ph" style={{ aspectRatio: "3/4", borderRadius: 20, fontSize: 12 }}>
                Mockup do e-book aberto + tablet · 3:4
              </div>
              <div style={{
                position: "absolute", right: -16, top: 24,
                background: "var(--ink)",
                color: "var(--cream)",
                padding: "14px 18px",
                borderRadius: 14,
                boxShadow: "var(--shadow-md)",
                fontSize: 13,
                fontWeight: 600,
                lineHeight: 1.3
              }}>
                <div style={{ color: "#FFCDA8", fontSize: 11, letterSpacing: ".1em", marginBottom: 2 }}>ACESSO IMEDIATO</div>
                E-book + App + Bônus
              </div>
            </div>
          </Reveal2>

          <div>
            <Reveal2><span className="eyebrow">O que você recebe</span></Reveal2>
            <Reveal2 delay={60}>
              <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.02, marginTop: 16, marginBottom: 20 }}>
                Tudo que você precisa<br />em <span className="serif-it" style={{ color: "var(--rust)" }}>um único lugar.</span>
              </h2>
            </Reveal2>
            <Reveal2 delay={120}>
              <p style={{ fontSize: 17, color: "var(--ink-2)", marginBottom: 32 }}>
                Um material completo, didático e direto ao ponto. Sem enrolação, sem ingredientes caros, sem tabelas confusas.
              </p>
            </Reveal2>

            <div style={{ display: "grid", gap: 0 }}>
              {modules.map((m, i) => (
                <Reveal2 key={i} delay={i * 50}>
                  <div style={{
                    display: "grid",
                    gridTemplateColumns: "48px 1fr auto",
                    gap: 20,
                    padding: "20px 0",
                    borderTop: i === 0 ? "1px solid var(--line)" : "0",
                    borderBottom: "1px solid var(--line)",
                    alignItems: "center"
                  }}>
                    <span className="serif" style={{ fontSize: 28, color: "var(--rust)", letterSpacing: ".02em" }}>
                      {m.n}
                    </span>
                    <div>
                      <h4 style={{ fontSize: 17, fontWeight: 700, marginBottom: 4 }}>{m.title}</h4>
                      <p style={{ fontSize: 14, color: "var(--muted)" }}>{m.desc}</p>
                    </div>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--sage)" strokeWidth="2.5">
                      <path d="M20 6L9 17l-5-5"/>
                    </svg>
                  </div>
                </Reveal2>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Content Proof ---------- */
function ContentProof() {
  const pages = [
    "Cardápio · semana 1",
    "Receita: bowl lactogênico",
    "Lista de compras",
    "Guia anticólica",
    "App: timer de mamada",
  ];

  return (
    <section className="section" style={{ background: "#1B1610", color: "var(--cream)", overflow: "hidden" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
          <div style={{ maxWidth: 620 }}>
            <Reveal2>
              <span className="eyebrow" style={{ color: "#FFCDA8" }}>Veja por dentro</span>
            </Reveal2>
            <Reveal2 delay={60}>
              <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.02, marginTop: 16, color: "#FAF6EE" }}>
                Não é mais um <span className="serif-it" style={{ color: "#FFCDA8" }}>PDF qualquer.</span>
              </h2>
            </Reveal2>
          </div>
          <Reveal2 delay={120}>
            <p style={{ maxWidth: 380, color: "#C9BCA3", fontSize: 16 }}>
              Mais de 280 páginas ilustradas, 200+ receitas testadas e um aplicativo de apoio para acompanhar tudo do celular.
            </p>
          </Reveal2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          gap: 16,
        }} className="proof-grid">
          {pages.map((p, i) => (
            <Reveal2 key={i} delay={i * 80}>
              <div className="ph dark" style={{
                aspectRatio: "3/4",
                borderRadius: 14,
                fontSize: 10,
                transform: i % 2 === 0 ? "translateY(0)" : "translateY(20px)",
                transition: "transform .4s ease"
              }}
              onMouseEnter={(e) => e.currentTarget.style.transform = "translateY(-8px)"}
              onMouseLeave={(e) => e.currentTarget.style.transform = i % 2 === 0 ? "translateY(0)" : "translateY(20px)"}>
                {p}
              </div>
            </Reveal2>
          ))}
        </div>

        <Reveal2 delay={300}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            gap: 24,
            marginTop: 80,
            paddingTop: 40,
            borderTop: "1px solid rgba(255,255,255,.1)"
          }}>
            {[
              { n: "280+", l: "Páginas" },
              { n: "200+", l: "Receitas" },
              { n: "21", l: "Dias de plano" },
              { n: "4", l: "Bônus exclusivos" },
            ].map((s, i) => (
              <div key={i}>
                <div className="serif" style={{ fontSize: 56, lineHeight: 1, color: "#FFCDA8", letterSpacing: "-.02em" }}>{s.n}</div>
                <div style={{ fontSize: 13, color: "#C9BCA3", marginTop: 6, letterSpacing: ".05em", textTransform: "uppercase" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal2>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .proof-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Social Proof ---------- */
function SocialProof() {
  const testimonials = [
    {
      name: "Juliana Mendes",
      city: "São Paulo, SP",
      baby: "Bebê de 4 meses",
      result: "-9kg em 6 semanas",
      text: "Eu chorava todos os dias me olhando no espelho. Em 6 semanas perdi 9kg e meu leite só aumentou. O Theo passou a dormir melhor por causa do guia anticólica.",
      initials: "JM",
      color: "#E8765A"
    },
    {
      name: "Carla Rodrigues",
      city: "Belo Horizonte, MG",
      baby: "Bebê de 7 meses",
      result: "-12kg",
      text: "Já tentei de tudo. De jejum a chá. Esse cardápio é o único que funcionou sem secar meu leite. Voltei a usar minhas calças jeans depois de quase 1 ano.",
      initials: "CR",
      color: "#C99A3F"
    },
    {
      name: "Amanda Souza",
      city: "Curitiba, PR",
      baby: "Gêmeos, 5 meses",
      result: "-7kg em 30 dias",
      text: "Sou mãe de gêmeos e achava impossível ter tempo. As receitas de 5 minutos salvaram minha rotina. Voltei a me reconhecer.",
      initials: "AS",
      color: "#6B7F5B"
    },
    {
      name: "Letícia Prado",
      city: "Recife, PE",
      baby: "Bebê de 3 meses",
      result: "-2,4kg na 1ª semana",
      text: "Confesso que entrei desconfiada. Mas na primeira semana já tinha perdido 2,4kg e meu marido percebeu sem eu falar nada. Vale cada centavo.",
      initials: "LP",
      color: "#8C2E3A"
    },
  ];

  return (
    <section className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 760, margin: "0 auto 64px" }}>
          <Reveal2><span className="eyebrow">+12 mil mães transformadas</span></Reveal2>
          <Reveal2 delay={60}>
            <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.02, marginTop: 16, marginBottom: 16 }}>
              Histórias que <span className="serif-it" style={{ color: "var(--rust)" }}>nos emocionam</span> todos os dias.
            </h2>
          </Reveal2>
          <Reveal2 delay={120}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span className="stars" style={{ fontSize: 18 }}>★★★★★</span>
              <span style={{ fontSize: 15, color: "var(--muted)" }}><strong style={{ color: "var(--ink)" }}>4.9/5</strong> · baseado em 3.241 avaliações</span>
            </div>
          </Reveal2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 20
        }}>
          {testimonials.map((t, i) => (
            <Reveal2 key={i} delay={i * 80}>
              <div style={{
                background: "var(--warm-white)",
                border: "1px solid var(--line)",
                borderRadius: 18,
                padding: "28px 26px",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                gap: 18
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <span className="stars" style={{ fontSize: 14 }}>★★★★★</span>
                  <span style={{
                    background: "var(--sage-soft)", color: "#3E4F33",
                    fontSize: 11, fontWeight: 700, padding: "4px 10px",
                    borderRadius: 999, letterSpacing: ".04em"
                  }}>{t.result}</span>
                </div>
                <p className="serif" style={{ fontSize: 21, lineHeight: 1.25, color: "var(--ink)", flex: 1 }}>
                  "{t.text}"
                </p>
                <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                  <div style={{
                    width: 42, height: 42, borderRadius: "50%",
                    background: t.color,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    color: "#fff", fontWeight: 700, fontSize: 14
                  }}>{t.initials}</div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>{t.name}</div>
                    <div style={{ fontSize: 12, color: "var(--muted)" }}>{t.city} · {t.baby}</div>
                  </div>
                </div>
              </div>
            </Reveal2>
          ))}
        </div>

        {/* Mention strip */}
        <Reveal2 delay={300}>
          <div style={{ marginTop: 80, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
            <div style={{ textAlign: "center", fontSize: 12, letterSpacing: ".15em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 24 }}>
              Citado em
            </div>
            <div className="marquee-wrap">
              <div className="marquee">
                {[..."Mães de Verdade · Pais & Filhos · Crescer · Brasil Materno · Vida & Saúde · Bem-Estar Hoje · Mães de Verdade · Pais & Filhos · Crescer · Brasil Materno · Vida & Saúde · Bem-Estar Hoje".split(" · ")].map((m, i) => (
                  <span key={i} className="serif" style={{ fontSize: 28, color: "var(--ink-2)", opacity: .55, whiteSpace: "nowrap" }}>
                    {m}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </Reveal2>
      </div>
    </section>
  );
}

/* ---------- Authority ---------- */
function Authority() {
  return (
    <section className="section" style={{ background: "var(--warm-white)" }}>
      <div className="container">
        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.2fr",
          gap: 64,
          alignItems: "center"
        }} className="authority-grid">
          <Reveal2>
            <div style={{ position: "relative" }}>
              <div style={{
                aspectRatio: "1/1",
                borderRadius: "50%",
                boxShadow: "var(--shadow-lg)",
                overflow: "hidden",
                border: "1px solid var(--line)"
              }}>
                <img src="images/dra-marina.jpg" alt="Dra. Marina Albuquerque"
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
              <div style={{
                position: "absolute", bottom: 12, right: -12,
                background: "var(--rust)",
                color: "#fff",
                padding: "14px 18px",
                borderRadius: 16,
                boxShadow: "var(--shadow-md)",
                fontSize: 12,
                fontWeight: 600,
                lineHeight: 1.4,
                maxWidth: 180
              }}>
                <div style={{ fontSize: 11, letterSpacing: ".1em", opacity: .9 }}>CRN-3</div>
                <div style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 14, marginTop: 2 }}>38.412-P</div>
              </div>
            </div>
          </Reveal2>

          <div>
            <Reveal2><span className="eyebrow">Quem está por trás</span></Reveal2>
            <Reveal2 delay={60}>
              <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.02, marginTop: 16, marginBottom: 20 }}>
                Dra. Marina Albuquerque, <span className="serif-it" style={{ color: "var(--rust)" }}>nutricionista materno-infantil</span>.
              </h2>
            </Reveal2>
            <Reveal2 delay={120}>
              <p style={{ fontSize: 17, color: "var(--ink-2)", marginBottom: 32 }}>
                Há 14 anos atendendo mães no pós-parto, Marina desenvolveu o método depois de viver na pele o desafio de emagrecer amamentando — sem perder leite e sem prejudicar a bebê.
              </p>
            </Reveal2>

            <Reveal2 delay={180}>
              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
                gap: 24,
                paddingTop: 24,
                borderTop: "1px solid var(--line)"
              }}>
                {[
                  { n: "14", l: "Anos de experiência" },
                  { n: "8.2k", l: "Atendimentos individuais" },
                  { n: "USP", l: "Pós-graduação" },
                  { n: "CRN-3", l: "Registro ativo" },
                ].map((s, i) => (
                  <div key={i}>
                    <div className="serif" style={{ fontSize: 32, lineHeight: 1, color: "var(--rust)" }}>{s.n}</div>
                    <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4, letterSpacing: ".04em", textTransform: "uppercase" }}>{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal2>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .authority-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

window.About = About;
window.ContentProof = ContentProof;
window.SocialProof = SocialProof;
window.Authority = Authority;