/* === FAQ + CTA === */
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'A consulta é realmente gratuita?', a: 'Sim. A consulta no JurisID é 100% gratuita, ilimitada e sem necessidade de cadastro para qualquer cidadão. Esse é um princípio inegociável da plataforma — quanto mais fácil for verificar, menos golpes acontecem. O modelo de receita é a assinatura dos advogados profissionais.' },
    { q: 'De onde vêm os dados dos advogados?', a: 'Cruzamos três fontes: (1) o cadastro nacional da OAB via API oficial; (2) certificação digital ICP-Brasil dos próprios advogados; (3) a base proprietária JurisID, com canais oficiais autodeclarados pelo profissional e validados por SMS, e-mail e selfie com OAB.' },
    { q: 'Como o sistema antifraude detecta golpistas?', a: 'Combinamos análise de padrões de mensagem, denúncias de usuários, blocklists colaborativas, verificação cruzada de números e modelos de IA treinados em mais de 200 mil casos reais de golpe jurídico. Quando um número é flagrado, ele aparece marcado mesmo que tente se passar por um advogado real.' },
    { q: 'Quanto tempo leva para meu cadastro de advogado ser aprovado?', a: 'O cadastro inicial leva cerca de 5 minutos. Após a validação automatizada (OAB ativa + certificado ICP-Brasil ou selfie com documento), seu perfil fica verificado em até 24 horas úteis. Escritórios em massa têm processo dedicado.' },
    { q: 'Posso cancelar a assinatura a qualquer momento?', a: 'Sim. Sem fidelidade, sem multa. O cancelamento é feito pelo painel do advogado e o acesso permanece até o fim do ciclo já pago. O selo de verificação pode ser desativado a qualquer momento.' },
    { q: 'O JurisID é certificado pela OAB?', a: 'Somos um projeto independente que opera em conformidade com a OAB e mantemos integração técnica oficial com o Cadastro Nacional dos Advogados. Não emitimos credenciais de advocacia — apenas validamos as existentes.' },
  ];

  return (
    <section id="faq" className="section-pad" style={{ background: 'var(--paper)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'flex-start' }} className="faq-grid">
          <div style={{ position: 'sticky', top: 120 }}>
            <div className="eyebrow" style={{ color: 'var(--ink-3)', marginBottom: 18 }}>PERGUNTAS FREQUENTES</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4vw, 52px)', margin: 0, color: 'var(--navy-900)' }}>
              Dúvidas?<br /><span style={{ fontStyle: 'italic' }}>Aqui estão as respostas.</span>
            </h2>
            <p style={{ marginTop: 20, fontSize: 15, color: 'var(--ink-3)', maxWidth: 320 }}>
              Não encontrou o que procurava? <a href="#" style={{ color: 'var(--navy-800)' }}>Fale com nosso time</a>.
            </p>
          </div>
          <div>
            {items.map((it, i) => (
              <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                  width: '100%', padding: '24px 0', background: 'none', border: 'none', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
                  textAlign: 'left', fontFamily: 'var(--font-display)', fontSize: 22,
                  color: 'var(--navy-900)', fontVariationSettings: '"opsz" 96',
                  lineHeight: 1.25,
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    width: 32, height: 32, borderRadius: 16, border: '1px solid var(--line-strong)',
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                    transform: open === i ? 'rotate(45deg)' : 'none',
                    transition: 'transform 0.25s',
                    background: open === i ? 'var(--navy-900)' : 'transparent',
                    color: open === i ? '#fff' : 'var(--navy-900)',
                  }}>
                    <Icon.plus s={14} />
                  </span>
                </button>
                <div style={{
                  maxHeight: open === i ? 400 : 0, overflow: 'hidden',
                  transition: 'max-height 0.3s ease, padding 0.3s ease',
                  paddingBottom: open === i ? 24 : 0,
                }}>
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.65, color: 'var(--ink-2)', maxWidth: 640 }}>
                    {it.a}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-grid > div:first-child { position: static !important; }
        }
      `}</style>
    </section>
  );
};

/* === Final CTA === */
const FinalCTA = () => (
  <section id="cadastro" style={{ background: 'var(--white)', padding: '100px 0', borderTop: '1px solid var(--line)' }}>
    <div className="container">
      <div style={{
        background: 'var(--navy-900)',
        borderRadius: 24,
        padding: '80px 64px',
        color: '#fff',
        position: 'relative',
        overflow: 'hidden',
      }} className="cta-card">
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px)`,
          backgroundSize: '48px 48px', opacity: 0.4,
          maskImage: 'radial-gradient(ellipse 50% 60% at 90% 50%, black, transparent)',
          WebkitMaskImage: 'radial-gradient(ellipse 50% 60% at 90% 50%, black, transparent)',
        }}></div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }} className="cta-grid">
          <div>
            <div className="eyebrow" style={{ color: 'var(--blue-300)', marginBottom: 18 }}>JUNTE-SE A NÓS</div>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 4.5vw, 60px)', margin: 0, lineHeight: 1.05 }}>
              Sua credibilidade,<br />
              <span style={{ fontStyle: 'italic', color: 'var(--blue-200)' }}>protegida por menos de R$1 por dia.</span>
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, color: 'var(--blue-200)', maxWidth: 540, lineHeight: 1.5 }}>
              Cadastre-se em 5 minutos. Validação OAB automática, selo digital e alertas em tempo real.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="#cadastro" className="btn btn-light btn-lg" style={{ justifyContent: 'space-between' }}>
              <span>Sou advogado · Cadastrar</span>
              <Icon.arrow s={16} />
            </a>
            <a href="#verificar" className="btn btn-ghost btn-lg" style={{ justifyContent: 'space-between' }}>
              <span>Verificar contato grátis</span>
              <Icon.arrow s={16} />
            </a>
            <div style={{ marginTop: 16, fontSize: 12, color: 'var(--blue-300)', display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'center' }}>
              <Icon.lock s={12} /> Pagamento seguro · Sem fidelidade
            </div>
          </div>
        </div>
      </div>
    </div>
    <style>{`
      @media (max-width: 880px) {
        .cta-card { padding: 56px 32px !important; }
        .cta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      }
    `}</style>
  </section>
);

window.FAQ = FAQ;
window.FinalCTA = FinalCTA;