// ========== Lead capture · formulario de email reutilizable ==========
// Captura email en momentos de alta intención (landing, recomendador, footer).
// POST a /api/lead. Degrada con gracia si el backend no persiste todavía.
//
// Props:
//   source   string  origen del lead: 'landing' | 'recomendador' | 'footer' | ...
//   meta     object   contexto opcional (ramo, edad, presupuesto, etc.)
//   cta      string   texto del botón (default "Quiero saber más")
//   compact  bool     layout horizontal compacto (para footer)
//   onDone   fn       callback tras envío ok

const { useState: useLead } = React;

const LEAD_EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function LeadCaptureForm({ source = 'otro', meta = null, cta = 'Quiero saber más', compact = false, onDone }) {
  const [email, setEmail] = useLead('');
  const [status, setStatus] = useLead('idle'); // idle | sending | done | error
  const [error, setError] = useLead('');

  const submit = async (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const v = email.trim().toLowerCase();
    if (!LEAD_EMAIL_RE.test(v)) {
      setError('Ingresá un email válido.');
      setStatus('error');
      return;
    }
    setStatus('sending');
    setError('');
    try {
      const r = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: v, source, meta }),
      });
      const j = await r.json().catch(() => ({}));
      if (r.ok && j.ok) {
        setStatus('done');
        if (onDone) onDone(v);
      } else {
        setError(j.error || 'No pudimos guardar tu email. Probá de nuevo.');
        setStatus('error');
      }
    } catch {
      setError('Sin conexión. Probá de nuevo en un momento.');
      setStatus('error');
    }
  };

  if (status === 'done') {
    return (
      <div className="hstack" style={{ gap: 10, justifyContent: compact ? 'flex-start' : 'center', fontWeight: 700, fontSize: 15 }}>
        <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <I.check size={13} />
        </span>
        ¡Listo! Te escribimos a tu correo.
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{ width: '100%' }}>
      <div className="lead-row" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'stretch' }}>
        <input
          type="email"
          inputMode="email"
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (status === 'error') { setStatus('idle'); setError(''); } }}
          placeholder="tu@email.com"
          aria-label="Email"
          disabled={status === 'sending'}
          style={{
            flex: '1 1 220px', minWidth: 0,
            padding: compact ? '12px 16px' : '15px 18px',
            fontSize: compact ? 14 : 16,
            border: '1.5px solid var(--line)', borderRadius: 12, outline: 'none',
            fontFamily: 'inherit', boxSizing: 'border-box', background: 'var(--bg)', color: 'var(--ink)',
          }}
        />
        <button
          type="submit"
          className={compact ? 'btn btn-accent' : 'btn btn-accent btn-lg'}
          disabled={status === 'sending'}
          style={{ flexShrink: 0, justifyContent: 'center' }}>
          {status === 'sending' ? 'Enviando…' : cta}
        </button>
      </div>
      {status === 'error' && (
        <div style={{ marginTop: 8, color: '#E84545', fontSize: 13, fontWeight: 600 }}>{error}</div>
      )}
      {!compact && status !== 'error' && (
        <div className="muted" style={{ marginTop: 8, fontSize: 12 }}>
          Sin spam. Te escribimos solo para ayudarte con tus seguros.
        </div>
      )}
    </form>
  );
}

window.LeadCaptureForm = LeadCaptureForm;