/* global React */

// ============================================================
// PILARES
// ============================================================
const PILARES = [
  {
    eyebrow: 'Pilar 01',
    titulo: 'Acompanhamento clínico',
    desc: 'Cada caixa passa por nosso conselho de obstetras, doulas, dermatologistas pediátricos e psicólogas perinatais.',
    selo: '12 especialistas no conselho',
  },
  {
    eyebrow: 'Pilar 02',
    titulo: 'Curadoria sensível',
    desc: 'Itens escolhidos por trimestre, com checklist de ingredientes seguros e prioridade para marcas brasileiras pequenas.',
    selo: '180+ produtos avaliados em 2025',
  },
  {
    eyebrow: 'Pilar 03',
    titulo: 'Comunidade real',
    desc: 'Grupo fechado por DPP — você conversa com mulheres na mesma semana gestacional que a sua, com moderação profissional.',
    selo: '4.8/5 satisfação da comunidade',
  },
  {
    eyebrow: 'Pilar 04',
    titulo: 'Conteúdo confiável',
    desc: 'Diário UAUBaby: artigos escritos com nossos médicos, sem clickbait, sem listas infinitas. Só o que importa naquela semana.',
    selo: 'Sem patrocínios cruzados',
  },
];

function Pilares() {
  return (
    <section className="block" id="sobre">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 64 }}>
          <span className="eyebrow">Por que a UAUBaby</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Não vendemos um produto para a gravidez.<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>Acompanhamos uma transformação.</em>
          </h2>
        </div>
        <div className="pilares-grid">
          {PILARES.map((p, i) => (
            <article key={i} className="pilar-card">
              <span className="eyebrow" style={{ color: 'var(--ritual)', opacity: 1 }}>{p.eyebrow}</span>
              <h3 className="h-card pilar-titulo" style={{ fontFamily: 'var(--font-serif)', fontWeight: 400, fontSize: 30, marginTop: 14, marginBottom: 12 }}>
                {p.titulo}
              </h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.55, marginBottom: 28 }}>{p.desc}</p>
              <div className="pilar-selo">
                <Icon name="check" />
                <span>{p.selo}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PLANOS
// ============================================================
const PLANOS = [
  {
    nome: 'Mensal',
    desc: 'Uma caixa por mês, sem fidelidade. Cancela quando quiser.',
    preco: '349',
    unidade: '/mês · cobrança mensal',
    cta: 'Começar mensal',
    primary: false,
    features: [
      '1 caixa por mês, sincronizada com sua semana',
      'Curadoria por fase (3 trimestres + 2 do bebê)',
      'Grupo da sua semana gestacional',
      'Diário UAUBaby ilimitado',
      'Cancele a qualquer momento',
    ],
  },
  {
    nome: 'Anual',
    desc: 'O plano que acompanha a jornada inteira. R$ 50 de desconto por mês.',
    preco: '299',
    unidade: '/mês · 12x · economia de R$ 600',
    cta: 'Quero o plano anual',
    primary: true,
    badge: 'Mais escolhido',
    features: [
      'Tudo do plano Mensal',
      'R$ 50 de desconto em cada caixa',
      '3 sessões clínicas (obstetra, psicóloga, doula)',
      'Caixa "Primeiro Contato" exclusiva no pós-parto',
      'Encontro presencial pós-parto (Jundiaí/Campinas)',
      'Camiseta de algodão pima de presente',
    ],
  },
];

function Planos() {
  return (
    <section className="block" id="planos" style={{ background: 'var(--vinculo)', color: 'var(--leveza)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
          <span className="eyebrow" style={{ color: 'var(--acolhimento)', opacity: 1 }}>Assinatura</span>
          <h2 className="h-section" style={{ marginTop: 16, color: 'var(--leveza)' }}>
            Escolha o ritmo<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--acolhimento)' }}>do seu cuidado.</em>
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 17, lineHeight: 1.6, marginTop: 20 }}>
            Uma caixa por mês, do começo da gestação até três meses depois do parto.
            Frete não incluído. Cancele a qualquer momento, sem multa.
          </p>
        </div>
        <div className="planos-grid">
          {PLANOS.map((p, i) => (
            <article key={i} className={`plano-card ${p.primary ? 'is-primary' : ''}`}>
              {p.badge && <div className="plano-badge">{p.badge}</div>}
              <header>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 34, fontWeight: 400, margin: 0, color: p.primary ? 'var(--vinculo)' : 'var(--leveza)' }}>
                  {p.nome}
                </h3>
                <p className="plano-desc" style={{ fontSize: 14, color: p.primary ? 'var(--ink-soft)' : 'rgba(255,255,255,0.7)', margin: '8px 0 0', lineHeight: 1.5 }}>{p.desc}</p>
              </header>
              <div className="plano-preco">
                <span className="plano-preco-moeda">R$</span>
                <span className="plano-preco-valor">{p.preco}</span>
                <span className="plano-preco-unidade">{p.unidade}</span>
              </div>
              <ul className="plano-features">
                {p.features.map((f, idx) => (
                  <li key={idx}>
                    <Icon name="check" />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="quiz.html" className={`btn btn-lg ${p.primary ? 'btn-primary' : 'btn-ghost'}`} style={{
                background: p.primary ? 'var(--vinculo)' : 'transparent',
                color: p.primary ? 'var(--leveza)' : 'var(--leveza)',
                borderColor: p.primary ? 'var(--vinculo)' : 'rgba(255,255,255,0.3)',
                width: '100%'
              }}>
                {p.cta}
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// DEPOIMENTOS
// ============================================================
const DEPOIMENTOS = [
  {
    quote: 'O cartão da primeira caixa dizia "você não precisa viver essa jornada sozinha". Chorei. Foi a primeira vez na gravidez que eu senti que alguém estava pensando em mim, e não só no bebê.',
    autora: 'Marina',
    cidade: 'Campinas · 2º trimestre',
  },
  {
    quote: 'Minha doula virtual já tinha respondido três áudios meus às 23h quando eu entrei em pânico com uma dor. Por R$ 249 a caixa, é o presente mais útil que ganhei na vida.',
    autora: 'Júlia',
    cidade: 'Jundiaí · 3º trimestre',
  },
  {
    quote: 'A caixa do pós-parto chegou no dia 23 depois do nascimento da Iris. Veio um bálsamo, uma máscara de dormir e uma carta. Foi a primeira coisa que abri pensando em mim em três semanas.',
    autora: 'Beatriz',
    cidade: 'São Paulo · pós-parto',
  },
];

function Depoimentos() {
  return (
    <section className="block">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Mães UAUBaby</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>Histórias</em><br/>
              de quem está com a gente.
            </h2>
          </div>
          <p style={{ fontSize: 14, color: 'var(--ink-soft)' }}>
            Validamos cada depoimento. Pedimos permissão explícita. Nenhum foi pago.
          </p>
        </div>
        <div className="depoimentos-grid">
          {DEPOIMENTOS.map((d, i) => (
            <article key={i} className="depoimento-card">
              <div style={{ color: 'var(--acolhimento)', marginBottom: 16 }}>
                <Icon name="quote" />
              </div>
              <blockquote style={{
                fontFamily: 'var(--font-serif)', fontSize: 22, lineHeight: 1.35, fontWeight: 400,
                color: 'var(--vinculo)', margin: 0, fontStyle: 'normal'
              }}>
                {d.quote}
              </blockquote>
              <footer style={{ marginTop: 'auto', paddingTop: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%',
                  background: 'var(--acolhimento)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--vinculo)', fontWeight: 700, fontSize: 14
                }}>
                  {d.autora[0]}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--vinculo)' }}>{d.autora}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--ink-mute)' }}>{d.cidade}</div>
                </div>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// PESQUISA / SOBRE
// ============================================================
function Pesquisa({ showStats = true }) {
  return (
    <section className="block" style={{ background: 'var(--essencia)' }}>
      <div className="container">
        <div className="pesquisa-grid">
          <div>
            <span className="eyebrow">Pesquisa & propósito</span>
            <h2 className="h-section" style={{ marginTop: 16, marginBottom: 24 }}>
              Por que a maternidade brasileira <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>precisa de outra conversa.</em>
            </h2>
            <p className="lead" style={{ marginBottom: 32 }}>
              A UAUBaby nasceu de uma escuta longa. Conversamos com mais de 600 mulheres e mapeamos
              o que faltava: alguém que reconhecesse a mulher por trás da gestação — racional,
              cansada, sobrecarregada de informação contraditória, e ao mesmo tempo cheia de ritual.
            </p>
            <a href="#" className="btn-link">Ler nosso manifesto completo →</a>
          </div>
          {showStats && (
            <div className="stats-grid">
              <div className="stat">
                <div className="stat-num">1 em 3</div>
                <div className="stat-label">gestantes brasileiras vivencia ansiedade clínica durante a gravidez.</div>
                <div className="stat-source">Ministério da Saúde · 2024</div>
              </div>
              <div className="stat">
                <div className="stat-num">225 mil</div>
                <div className="stat-label">nascimentos por ano só no estado de São Paulo. Quase 73 mil em Campinas.</div>
                <div className="stat-source">IBGE · 2024</div>
              </div>
              <div className="stat">
                <div className="stat-num">30,7 anos</div>
                <div className="stat-label">é a idade média da maternidade para mulheres com ensino superior — e cresce a cada ano.</div>
                <div className="stat-source">IBGE · 2022</div>
              </div>
              <div className="stat">
                <div className="stat-num">53,18 mi</div>
                <div className="stat-label">brasileiras com saúde suplementar — público que valida com especialistas antes de confiar.</div>
                <div className="stat-source">ANS · 2025</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// GRUPO UAU — lastro de confiança
// ============================================================
const GRUPO_UAU_STATS = [
  { num: 'desde 2018', label: 'criando experiências de assinatura no Brasil' },
  { num: '+350 mil', label: 'pessoas já atendidas pelo grupo' },
  { num: '+2 milhões', label: 'de caixas entregues com carinho' },
];

function GrupoUau() {
  return (
    <section className="block" id="grupo-uau">
      <div className="container">
        <div className="grupo-uau-band">
          <div className="grupo-uau-intro">
            <span className="eyebrow" style={{ color: 'var(--acolhimento)', opacity: 1 }}>Uma marca do Grupo UAU</span>
            <h2 className="h-section" style={{ marginTop: 16, color: 'var(--leveza)' }}>
              Marca nova, experiência <em style={{ fontStyle: 'italic', color: 'var(--acolhimento)' }}>de quem já entrega cuidado.</em>
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 17, lineHeight: 1.6, marginTop: 20 }}>
              A UAUBaby nasceu dentro do Grupo UAU — a mesma casa da UAUBox, referência em caixas
              de assinatura no Brasil desde 2018. Toda a curadoria, a logística e o relacionamento
              que sustentam cada caixa já são testados há anos. Você não está apostando em uma promessa
              nova: está com quem já entregou mais de 2 milhões de caixas para mais de 350 mil pessoas.
            </p>
          </div>
          <div className="grupo-uau-stats">
            {GRUPO_UAU_STATS.map((s, i) => (
              <div key={i} className="grupo-uau-stat">
                <div className="grupo-uau-stat-num">{s.num}</div>
                <div className="grupo-uau-stat-label">{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pilares, Planos, Depoimentos, Pesquisa, GrupoUau });