/* global React */
const { useState: useStateSec3 } = React;

// ============================================================
// CONSELHO CLÍNICO
// ============================================================
const CONSELHO = [
  { nome: 'Dra. Marina Castelli', spec: 'Obstetra · CRM-SP', avatar: 'M' },
  { nome: 'Dra. Helena Rocha', spec: 'Pediatra · CRM-SP', avatar: 'H' },
  { nome: 'Dra. Júlia Andrade', spec: 'Psicóloga perinatal · CRP', avatar: 'J' },
  { nome: 'Camila Vieira', spec: 'Doula sênior · ABENFO', avatar: 'C' },
  { nome: 'Dra. Letícia Brum', spec: 'Dermatologia gestacional', avatar: 'L' },
  { nome: 'Renata Souto', spec: 'Nutricionista materno-infantil', avatar: 'R' },
];

function Conselho() {
  return (
    <section className="block" id="conselho">
      <div className="container">
        <div className="conselho-grid">
          <div className="conselho-text">
            <span className="eyebrow">Conselho clínico</span>
            <h2 className="h-section" style={{ marginTop: 16, marginBottom: 24 }}>
              Cada caixa passa<br/>por <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>6 mãos especialistas.</em>
            </h2>
            <p className="lead" style={{ marginBottom: 24 }}>
              Toda recomendação, todo produto, toda peça de conteúdo passa por um conselho
              clínico multidisciplinar antes de chegar na sua casa. Sem patrocínios cruzados.
            </p>
            <a href="#" className="btn-link">Conhecer o conselho completo →</a>
          </div>
          <div className="conselho-list">
            {CONSELHO.map((p, i) => (
              <div key={i} className="conselho-item">
                <div className="conselho-avatar">{p.avatar}</div>
                <div>
                  <div style={{ fontWeight: 600, color: 'var(--vinculo)', fontSize: 15 }}>{p.nome}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>{p.spec}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
const FAQS = [
  {
    q: 'Quando minha primeira caixa chega?',
    a: 'Ao assinar, você informa sua Data Provável do Parto (DPP). Com base nela, identificamos sua semana gestacional e enviamos automaticamente a caixa do trimestre em que você está. Se você já está no 2º trimestre, sua primeira caixa será a do 2º — não cobramos por uma caixa que você não vai aproveitar.',
  },
  {
    q: 'Posso pausar ou cancelar a assinatura?',
    a: 'Sim, sem burocracia. Você pausa ou cancela em um clique pelo painel da assinante, a qualquer momento. Nada de fidelidade obrigatória ou cobrança surpresa.',
  },
  {
    q: 'O que acontece se eu tiver uma perda gestacional?',
    a: 'Sentimos muito. Pause sua assinatura no painel ou nos avise por WhatsApp e congelamos tudo imediatamente, sem nenhuma cobrança. Nossa psicóloga perinatal está disponível para uma sessão gratuita sempre que você quiser.',
  },
  {
    q: 'Os produtos são seguros para gestantes?',
    a: 'Cada item passa por nosso checklist de ingredientes restritos para gestação (sem retinoides, sem óleos essenciais contraindicados, sem fragrâncias agressivas) e é validado pelo conselho clínico antes de entrar em uma caixa.',
  },
  {
    q: 'Posso presentear alguém?',
    a: 'Sim! O plano Presente é exatamente para isso: você escolhe o trimestre da gestante, escreve um cartão personalizado e a gente envia em embalagem-presente na data que você quiser. Funciona muito bem como presente de chá de bebê ou de descoberta da gestação.',
  },
  {
    q: 'Vocês atendem fora de Jundiaí e Campinas?',
    a: 'Sim! Entregamos para todo o Brasil. O atendimento presencial pós-parto (almoço com outras mães + sessão com doula) acontece em Jundiaí e Campinas neste primeiro ciclo. Em 2026 expandimos para a capital paulista.',
  },
  {
    q: 'Como funciona o grupo da semana gestacional?',
    a: 'Você entra em um grupo privado no WhatsApp com mulheres na mesma semana que a sua (mesma DPP, com tolerância de ±2 semanas). É moderado por uma doula sênior. Não é grupo de venda, não é grupo de palpite — é um lugar seguro para conversar.',
  },
];

function FaqItem({ q, a, open, onToggle }) {
  return (
    <div className={`faq-item ${open ? 'is-open' : ''}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq-icon"><Icon name={open ? 'minus' : 'plus'} /></span>
      </button>
      <div className="faq-a-wrap">
        <p className="faq-a">{a}</p>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useStateSec3(0);
  return (
    <section className="block" id="faq">
      <div className="container">
        <div className="faq-layout">
          <div>
            <span className="eyebrow">Perguntas</span>
            <h2 className="h-section" style={{ marginTop: 16, marginBottom: 24 }}>
              O que a gente<br/><em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>mais ouve.</em>
            </h2>
            <p className="lead" style={{ marginBottom: 24 }}>
              Não achou sua dúvida? Manda no WhatsApp, alguém da equipe responde de verdade.
            </p>
            <a href="#" className="btn btn-accent">
              <Icon name="heart" />
              <span>Falar com a UAUBaby</span>
            </a>
          </div>
          <div className="faq-list">
            {FAQS.map((f, i) => (
              <FaqItem key={i} q={f.q} a={f.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// NEWSLETTER
// ============================================================
function Newsletter() {
  const [email, setEmail] = useStateSec3('');
  const [sent, setSent] = useStateSec3(false);
  return (
    <section className="block-sm" style={{ background: 'var(--acolhimento)', overflow: 'hidden', position: 'relative' }}>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="newsletter-grid">
          <div>
            <span className="kicker" style={{ fontSize: 22, color: 'var(--vinculo-deep)' }}>Oi, mãe.</span>
            <h2 className="h-section" style={{ color: 'var(--vinculo-deep)', marginTop: 8, fontSize: 'clamp(28px, 3.4vw, 44px)' }}>
              Uma carta por semana.<br/>Sem pressa, sem ruído.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--vinculo-deep)', opacity: 0.8, maxWidth: 520, marginTop: 16 }}>
              Receba uma mensagem curta, escrita à mão, sobre o que faz sentido na sua semana gestacional.
              Pode cancelar quando quiser.
            </p>
          </div>
          <form className="newsletter-form" onSubmit={e => { e.preventDefault(); setSent(true); }}>
            {sent ? (
              <div className="newsletter-success">
                <Icon name="check" />
                <span>Pronto. Em breve uma carta chega para você.</span>
              </div>
            ) : (
              <>
                <input
                  type="email"
                  placeholder="seu melhor e-mail"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  required
                />
                <button type="submit" className="btn btn-primary">
                  Quero receber
                  <Icon name="arrow" />
                </button>
              </>
            )}
          </form>
        </div>
      </div>
      <div style={{
        position: 'absolute', right: -80, top: -40, opacity: 0.18,
        fontFamily: 'var(--font-serif)', fontStyle: 'italic',
        fontSize: 280, color: 'var(--vinculo-deep)', pointerEvents: 'none', lineHeight: 1
      }}>
        ~
      </div>
    </section>
  );
}

Object.assign(window, { Conselho, FAQ, Newsletter });