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

function FAQ() {
  const items = [
    {
      q: 'Tenho histórico de pré-eclâmpsia na família — isso me coloca em risco?',
      a: 'Sim. História familiar de pré-eclâmpsia é um dos fatores de risco reconhecidos pelo modelo de rastreamento da Fetal Medicine Foundation. O rastreamento multiparamétrico de primeiro trimestre permite quantificar esse risco com precisão, individualizando a conduta para cada gestante — porque o mesmo histórico familiar pode representar riscos muito diferentes dependendo de outros marcadores presentes.'
    },
    {
      q: 'Já tive pré-eclâmpsia em gestação anterior. A aspirina realmente funciona?',
      a: 'Sim, quando iniciada no momento correto. O ensaio ASPRE — o maior estudo randomizado sobre prevenção de pré-eclâmpsia já realizado — demonstrou redução de 62% na incidência de pré-eclâmpsia pré-termo com aspirina 150 mg/dia, iniciada entre 11 e 16 semanas de gestação³. Por isso a janela do primeiro trimestre é insubstituível: após 16 semanas, esse benefício não se aplica. Gestantes com histórico de pré-eclâmpsia têm risco aumentado reconhecido e se beneficiam especialmente do rastreamento precoce.'
    },
    {
      q: 'Qual é a diferença entre o ultrassom de rotina e o rastreamento FMF de pré-eclâmpsia?',
      a: 'O ultrassom obstétrico de rotina avalia a morfologia, o crescimento e o bem-estar do bebê — não foi desenvolvido para rastrear pré-eclâmpsia. O rastreamento FMF de pré-eclâmpsia é um protocolo específico que combina cinco marcadores: características maternas, pressão arterial média (medida por protocolo padronizado), Doppler das artérias uterinas, Doppler da artéria oftálmica e marcadores bioquímicos séricos (PlGF e PAPP-A). O resultado é um risco individualizado calculado por algoritmo validado internacionalmente — não uma avaliação qualitativa.'
    },
    {
      q: 'Posso fazer o rastreamento no 2º ou 3º trimestre se perdi a janela do 1º?',
      a: 'Sim — e o rastreamento nos trimestres seguintes tem valor clínico importante. No 2º trimestre (19–23 semanas), o protocolo combinado detecta mais de 80% dos casos de pré-eclâmpsia pré-termo. No 3º trimestre (35–37 semanas), a avaliação identifica gestantes com risco de pré-eclâmpsia iminente, orientando a monitorização e o momento ideal do parto. No entanto, a janela do 1º trimestre é a única que permite iniciar aspirina preventiva com benefício comprovado — o que não é mais possível nos trimestres seguintes.'
    },
    {
      q: 'O cálcio previne pré-eclâmpsia?',
      a: 'Não, segundo as evidências mais atuais. Durante muitos anos, o cálcio foi recomendado como estratégia de prevenção da pré-eclâmpsia. No entanto, a revisão sistemática Cochrane mais recente (Cluver et al., 2025), que incorporou ensaios clínicos com critérios metodológicos mais rigorosos, não demonstrou benefício consistente da suplementação de cálcio na redução do risco de pré-eclâmpsia. Com base nessa evidência, a Comissão Nacional de Hipertensão na Gestação da Febrasgo e a Rede Brasileira de Estudos sobre Hipertensão na Gravidez (RBEHG) retiraram, em março de 2026, a recomendação do cálcio para essa finalidade. A intervenção preventiva com maior nível de evidência permanece o uso de aspirina em baixa dose, iniciado antes de 16 semanas, em gestantes identificadas como alto risco pelo rastreamento de primeiro trimestre.'
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <div className="faq-list">
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className={'faq-item' + (isOpen ? ' open' : '')}>
            <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
              <span>{it.q}</span>
              <span className="plus"><i className="fa-solid fa-plus"></i></span>
            </button>
            <div className="faq-a">
              <p style={{ margin: '4px 0 0' }}>{it.a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function LeadForm() {
  const [data, setData] = useState({ name: '', phone: '', week: '', reason: 'rastreio' });
  const [sent, setSent] = useState(false);
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const onSubmit = (e) => {
    e.preventDefault();
    if (!data.name || !data.phone) return;
    setSent(true);
  };
  const reasons = [
    { id: 'rastreio', label: 'Rastreamento de pré-eclâmpsia' },
    { id: 'alto-risco', label: 'Gestação de alto risco' },
    { id: 'retorno', label: 'Retorno / acompanhamento' },
    { id: 'outro', label: 'Outro' },
  ];
  if (sent) {
    return (
      <div className="form-card">
        <div className="form-ok">
          <div className="check"><i className="fa-solid fa-check"></i></div>
          <h3>Recebido, {data.name.split(' ')[0]}!</h3>
          <p>A equipe do Dr. Alan entrará em contato pelo WhatsApp em até 1 dia útil para agendar sua consulta.</p>
          <a className="btn btn-whats" href="https://wa.me/5511941167292?text=Olá%2C+Dr.+Alan%21+Vi+o+site+sobre+rastreamento+de+pré-eclâmpsia+e+gostaria+de+agendar+uma+consulta." target="_blank" rel="noopener">
            <i className="fa-brands fa-whatsapp"></i> Falar agora no WhatsApp
          </a>
        </div>
      </div>
    );
  }
  return (
    <form className="form-card" onSubmit={onSubmit}>
      <h3>Solicite seu agendamento</h3>
      <p className="hint">Resposta em até 1 dia útil pela equipe do Dr. Alan.</p>

      <div className="field">
        <label>Nome completo</label>
        <input type="text" value={data.name} onChange={e => update('name', e.target.value)} placeholder="Seu nome" required />
      </div>
      <div className="field">
        <label>Telefone / WhatsApp</label>
        <input type="tel" value={data.phone} onChange={e => update('phone', e.target.value)} placeholder="(11) 9 0000-0000" required />
      </div>
      <div className="field">
        <label>Semana gestacional atual</label>
        <input type="text" value={data.week} onChange={e => update('week', e.target.value)} placeholder="Ex: 12 semanas — ou planejando" />
      </div>
      <div className="field">
        <label>Motivo principal</label>
        <div className="radio-grid">
          {reasons.map(r => (
            <label key={r.id} className={'radio-tile' + (data.reason === r.id ? ' checked' : '')}>
              <input type="radio" name="reason" value={r.id} checked={data.reason === r.id} onChange={() => update('reason', r.id)} />
              {r.label}
            </label>
          ))}
        </div>
      </div>

      <button type="submit" className="btn btn-amber form-submit">
        Quero agendar minha consulta <i className="fa-solid fa-arrow-right"></i>
      </button>
      <p className="privacy">
        Seus dados são tratados com confidencialidade e usados exclusivamente para o agendamento.
      </p>
    </form>
  );
}

Object.assign(window, { FAQ, LeadForm });
