function CTA() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.cta;
  const [form, setForm] = React.useState({ name: '', email: '', msg: '' });
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.email) return;
    setSent(true);
  };

  return (
    <section id="cta" className="section" style={{ background: 'var(--bone)', borderTop: '1px solid var(--border)' }} data-screen-label="cta">
      <div className="container">
        <div className="reveal surface-dark" style={{
          background: 'var(--ink)', color: 'var(--bone)', borderRadius: 12,
          padding: 'clamp(40px, 6vw, 72px)',
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'flex-start',
          position: 'relative', overflow: 'hidden',
        }}>
          <div>
            <div className="kicker" style={{ color: 'var(--ochre)', marginBottom: 18 }}>{C.kicker[lang]}</div>
            <h2 className="h-section" style={{ color: 'var(--bone)', marginBottom: 20 }}>
              {C.h2[lang][0]} <em style={{ color: 'var(--ochre)' }}>{C.h2[lang][1]}</em>
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, opacity: 0.78, maxWidth: '46ch', color: 'var(--bone)' }}>
              {C.body[lang]}
            </p>

            <ul style={{ listStyle: 'none', margin: '32px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {(lang === 'es' ? [
                ['Sin pitch', '30 minutos, agenda directa.'],
                ['Honestidad', 'Si no es para nosotros, te decimos quién sí.'],
                ['Respuesta', 'Menos de 24 horas hábiles.'],
              ] : [
                ['No pitch', '30 minutes, direct agenda.'],
                ['Honesty', 'If we\'re not the fit, we tell you who is.'],
                ['Reply', 'Under 24 business hours.'],
              ]).map(([k, v]) => (
                <li key={k} style={{ display: 'flex', gap: 14, fontSize: 14, color: 'var(--bone)', opacity: 0.85 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ochre)', minWidth: 80, paddingTop: 2 }}>↳ {k}</span>
                  <span>{v}</span>
                </li>
              ))}
            </ul>
          </div>

          <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <label className="kicker" style={{ color: 'var(--bone)', opacity: 0.55 }}>{lang === 'es' ? 'Nombre' : 'Name'}</label>
            <input type="text" className="fuse-input" placeholder={C.placeholder_name[lang]} value={form.name} onChange={set('name')} />

            <label className="kicker" style={{ color: 'var(--bone)', opacity: 0.55, marginTop: 4 }}>Email</label>
            <input required type="email" className="fuse-input" placeholder={C.placeholder_email[lang]} value={form.email} onChange={set('email')} />

            <label className="kicker" style={{ color: 'var(--bone)', opacity: 0.55, marginTop: 4 }}>{lang === 'es' ? 'En una línea' : 'In one line'}</label>
            <textarea className="fuse-input" rows={3} placeholder={C.placeholder_msg[lang]} value={form.msg} onChange={set('msg')} style={{ resize: 'vertical', minHeight: 80, fontFamily: 'var(--font-sans)' }} />

            <button type="submit" className="btn btn-on-dark" style={{ marginTop: 10, alignSelf: 'flex-start', padding: '14px 22px' }}>
              {sent ? C.submitted[lang] : <>{C.submit[lang]} <span style={{ fontFamily: 'var(--font-display)' }}>→</span></>}
            </button>

            <p className="caption" style={{ color: 'var(--bone)', opacity: 0.5, margin: '4px 0 0' }}>
              {C.direct[lang]} <a href="mailto:hola@fuse.studio" style={{ color: 'var(--bone)', opacity: 1 }}>hola@fuse.studio</a>.
            </p>
          </form>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          #cta .container > div { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

window.CTA = CTA;