function FormSection() {
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
  return (
    <section id="formulario" style={{ background: 'var(--navy-900)', padding: '120px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', padding: '0 32px', position: 'relative' }}>
        <div data-anim="fade-up" style={{ textAlign: 'center', marginBottom: 48 }}>
          <span className="eyebrow" style={{ marginBottom: 24, display: 'inline-flex' }}>
            <Bars size={14}/>
            Diagnóstico gratuito
          </span>
          <h2 className="h2" style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: 'clamp(32px, 4.4vw, 52px)', lineHeight: 1.08,
            letterSpacing: '-0.025em', color: 'var(--cream-50)',
            margin: '24px 0 16px', textWrap: 'balance',
          }}>
            Descubra se sua empresa está pronta{' '}
            <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--magenta-400)' }}>
              para vender para o governo
            </span>
          </h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--cream-200)', margin: 0, maxWidth: 640, marginInline: 'auto' }}>
            Em 48h te mostramos exatamente o que falta para participar dos primeiros pregões.
          </p>
        </div>

        <form data-anim="fade-up" data-anim-delay="2" onSubmit={onSubmit} style={{
          background: 'var(--navy-800)',
          border: '1px solid var(--border-on-dark-strong)',
          borderRadius: 32, padding: 40,
          boxShadow: '0 30px 80px -20px rgba(0,0,0,.55)',
        }}>
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '32px 0' }}>
              <div style={{ width: 56, height: 56, borderRadius: 999, background: 'rgba(46,154,107,.2)', color: '#5BD49B', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <h3 style={{ margin: '0 0 8px', color: 'var(--cream-50)', fontWeight: 600, fontSize: 22 }}>Recebemos sua solicitação</h3>
              <p style={{ margin: 0, color: 'var(--cream-200)', fontSize: 16 }}>Nossa equipe entra em contato em até 48h.</p>
            </div>
          ) : (
            <>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }} className="two-col">
                <div className="field">
                  <input id="f-nome" placeholder=" " />
                  <label htmlFor="f-nome">Nome completo</label>
                </div>
                <div className="field">
                  <input id="f-whats" placeholder=" " />
                  <label htmlFor="f-whats">WhatsApp com DDD</label>
                </div>
              </div>
              <div className="field" style={{ marginBottom: 24 }}>
                <input id="f-seg" placeholder=" " />
                <label htmlFor="f-seg">Segmento da sua empresa (opcional)</label>
              </div>
              <button type="submit" className="btn btn-primary magnetic" data-magnet="0.10" style={{ width: '100%', padding: '18px 24px', fontSize: 16 }}>
                Quero minha avaliação gratuita
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
              </button>
              <p style={{ marginTop: 16, marginBottom: 0, textAlign: 'center', fontSize: 13, color: 'rgba(246,241,230,.55)' }}>
                Seus dados são usados exclusivamente para a avaliação. Conformidade LGPD.
              </p>
            </>
          )}
        </form>
      </div>
    </section>
  );
}
window.FormSection = FormSection;