// ContactCta.jsx — between proof and footer
const ContactCta = () => {
  const [sent, setSent] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.currentTarget).entries());
    // Stub: real implementation would POST to an endpoint here.
    // We keep the captured values around so the confirmation can echo them.
    setSubmitted(data);
    setSent(true);
  };

  return (
    <section className="sect" id="estudio" data-screen-label="ContactCTA">
      <div className="container">
        <div className="card card--premium" style={{ padding: '72px 56px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="sect__eyebrow"><span className="jet-trail" aria-hidden="true"></span>Próximo passo</div>
            <h2 className="display-m" style={{ marginTop: 16 }}>Conta o que precisa <em>lançar</em>.</h2>
            <p className="lead" style={{ marginTop: 16, maxWidth: '38ch' }}>
              Resposta em até 1 dia útil pela equipe. Sem formulário robô, sem briefing extenso para começar.
            </p>
          </div>
          {!sent ? (
            <form onSubmit={handleSubmit} aria-label="Pedir proposta" style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="field">
                <label htmlFor="contact-company">Empresa</label>
                <input
                  id="contact-company"
                  name="company"
                  className="input"
                  type="text"
                  autoComplete="organization"
                  placeholder="Acme"
                  required
                />
              </div>
              <div className="field">
                <label htmlFor="contact-email">E-mail corporativo</label>
                <input
                  id="contact-email"
                  name="email"
                  className="input"
                  type="email"
                  autoComplete="email"
                  placeholder="você@acme.com"
                  required
                />
              </div>
              <div className="field">
                <label htmlFor="contact-brief">O que você quer lançar?</label>
                <textarea
                  id="contact-brief"
                  name="brief"
                  className="textarea"
                  rows="3"
                  placeholder="Site institucional, e-commerce, landing…"
                ></textarea>
              </div>
              <button type="submit" className="btn" style={{ alignSelf: 'flex-start', marginTop: 6 }}>
                Enviar para a equipe <span className="arrow" aria-hidden="true">→</span>
              </button>
            </form>
          ) : (
            <div className="card" role="status" aria-live="polite" style={{ padding: 28, background: 'var(--surface-2)' }}>
              <div className="micro" style={{ marginBottom: 8 }}>RECEBIDO</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700, marginBottom: 8 }}>
                Obrigado{submitted?.company ? `, ${submitted.company}` : ''}. Resposta em até <em style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--jet-champagne)' }}>1 dia útil</em>.
              </div>
              <p style={{ fontSize: 14, color: 'var(--fg-2)', margin: 0 }}>
                A Mariana ou o Tiago vão escrever de volta direto pelo e-mail informado.
              </p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

window.ContactCta = ContactCta;