// Newsletter.jsx
function Newsletter() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState('');

  const onSubmit = (e) => {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setError('Revisa el email — algo no cuadra.');
      return;
    }
    setError('');
    setSubmitted(true);
  };

  return (
    <section className="im-newsletter" id="newsletter">
      <div className="im-newsletter-pattern" aria-hidden="true"></div>
      <div className="im-newsletter-inner">
        <span className="im-eyebrow im-eyebrow-onnavy">Newsletter semanal</span>
        <h2 className="im-newsletter-title">IA, CRM y automatización<br/>en tu inbox cada lunes.</h2>
        <p className="im-newsletter-lead">Un correo. Cinco minutos de lectura. Cero humo.</p>
        {submitted ? (
          <div className="im-newsletter-thanks">
            <span className="im-newsletter-tick">✓</span> Listo. Te escribo el lunes.
          </div>
        ) : (
          <form className="im-newsletter-form" onSubmit={onSubmit} noValidate>
            <input
              type="email"
              value={email}
              onChange={(e) => { setEmail(e.target.value); if (error) setError(''); }}
              placeholder="tu@email.com"
              className={`im-newsletter-input ${error ? 'has-error' : ''}`}
              aria-label="Email"
              aria-invalid={!!error}
            />
            <button type="submit" className="im-newsletter-btn">Suscribirme</button>
          </form>
        )}
        {error && !submitted && <div className="im-newsletter-error">{error}</div>}
        <p className="im-newsletter-fine">Sin spam. Te das de baja con un click.</p>
      </div>
    </section>
  );
}

window.Newsletter = Newsletter;