/* eslint-disable react/prop-types */
/**
 * Newsletter · "Creamos lo Extraordinario"
 *
 * Sección de suscripción con tono editorial — no transaccional ni invasivo.
 * Promesa: una idea cada quince días sobre originación, lectura urbana
 * y casos de distritos en operación. Sin spam.
 *
 * En el codebase real esto conecta con ConvertKit / Mailchimp / Beehiiv.
 * Aquí el form valida el email en cliente y muestra confirmación visual.
 */

const { useState: uS_Nl } = React;

function Newsletter() {
  const [email, setEmail] = uS_Nl('');
  const [status, setStatus] = uS_Nl('idle'); // idle | submitting | success | error

  const onSubmit = (e) => {
    e.preventDefault();
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      setStatus('error');
      return;
    }
    setStatus('submitting');
    // EDITAR: reemplazar con call real al provider (ConvertKit, Mailchimp, Beehiiv)
    setTimeout(() => {
      setStatus('success');
      setEmail('');
    }, 700);
  };

  return (
    <section
      data-screen-label="10b Newsletter"
      style={nlStyles.section}
    >
      {/* Video silente de fondo: distrito en operación al atardecer, tranvía,
          ciudadanía caminando. Funciona como tono atmosférico, nunca compite
          con el copy ni con el form. Se respeta prefers-reduced-motion. */}
      <video
        style={nlStyles.bgVideo}
        src="assets/video/prosperia-newsletter-boulevard-distrito.mp4"
        poster="assets/video/prosperia-newsletter-boulevard-distrito-poster.jpg"
        autoPlay
        muted
        loop
        playsInline
        preload="metadata"
        aria-hidden="true"
      />
      <div style={nlStyles.bgOverlay} aria-hidden="true" />

      <div className="container" style={nlStyles.inner}>
        <window.Reveal style={nlStyles.left}>
          <span style={nlStyles.eyebrow}>BOLETÍN EDITORIAL</span>
          <h2 style={nlStyles.title}>
            <em style={nlStyles.titleEm}>Creamos lo Extraordinario</em>
          </h2>
          <p style={nlStyles.desc}>
            Una idea cada quince días sobre originación, lectura urbana y los distritos que están cambiando cómo se hacen las ciudades. Escrito por el equipo de Prosperia. Sin frecuencia agresiva. Sin promociones.
          </p>
        </window.Reveal>

        <window.Reveal delay={160} style={nlStyles.right}>
          <form onSubmit={onSubmit} style={nlStyles.form} noValidate>
            <label htmlFor="newsletter-email" style={nlStyles.label}>
              Tu correo
            </label>
            <div style={nlStyles.inputRow}>
              <input
                id="newsletter-email"
                type="email"
                placeholder="nombre@empresa.com"
                value={email}
                onChange={(e) => { setEmail(e.target.value); if (status === 'error') setStatus('idle'); }}
                style={{
                  ...nlStyles.input,
                  borderColor: status === 'error' ? '#c0392b' : 'rgba(255,255,255,0.32)',
                }}
                disabled={status === 'submitting' || status === 'success'}
                autoComplete="email"
              />
              <button
                type="submit"
                className="btn btn-copper"
                data-cursor="link"
                style={nlStyles.btn}
                disabled={status === 'submitting' || status === 'success'}
              >
                {status === 'submitting' ? 'Enviando…' : status === 'success' ? '✓ Suscrito' : 'Suscribirme'}
              </button>
            </div>
            <p style={{
              ...nlStyles.helper,
              color: status === 'error' ? '#ff8a7a' : status === 'success' ? 'var(--color-mint-soft)' : 'rgba(255,255,255,0.55)',
            }}>
              {status === 'error'
                ? 'Necesitamos un correo válido.'
                : status === 'success'
                ? 'Listo. Te llegará el primer envío el próximo viernes.'
                : 'Sin spam. Baja en un clic cuando quieras.'}
            </p>
          </form>
        </window.Reveal>
      </div>
    </section>
  );
}

const nlStyles = {
  section: {
    position: 'relative',
    background: 'var(--color-navy-deep)',
    color: '#fff',
    paddingBlock: 'clamp(64px, 8vw, 112px)',
    overflow: 'hidden',
    isolation: 'isolate',
  },
  bgVideo: {
    position: 'absolute',
    inset: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
    objectPosition: 'center',
    zIndex: 0,
    opacity: 0.45,
  },
  bgOverlay: {
    position: 'absolute',
    inset: 0,
    zIndex: 1,
    background: 'linear-gradient(180deg, rgba(15,27,35,0.78) 0%, rgba(15,27,35,0.88) 60%, rgba(15,27,35,0.94) 100%)',
  },
  inner: {
    position: 'relative',
    zIndex: 2,
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 'clamp(32px, 5vw, 64px)',
    alignItems: 'start',
  },
  left: {
    display: 'flex',
    flexDirection: 'column',
    gap: 16,
    maxWidth: 540,
  },
  eyebrow: {
    fontWeight: 700,
    fontSize: 'clamp(12px, 0.9vw, 14px)',
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--color-copper-fallback)',
  },
  title: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(32px, 4.5vw, 56px)',
    lineHeight: 1.05,
    letterSpacing: '-0.01em',
  },
  titleEm: {
    fontStyle: 'italic',
    fontWeight: 700,
  },
  desc: {
    margin: 0,
    fontSize: 'clamp(15px, 1.2vw, 17px)',
    lineHeight: 1.65,
    color: 'rgba(255,255,255,0.78)',
  },
  right: {
    display: 'flex',
    flexDirection: 'column',
    gap: 12,
    maxWidth: 520,
    width: '100%',
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
  },
  label: {
    fontSize: 11,
    fontWeight: 700,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.6)',
  },
  inputRow: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: 12,
  },
  input: {
    flex: '1 1 240px',
    minHeight: 52,
    paddingInline: 18,
    fontSize: 16,
    background: 'rgba(255,255,255,0.06)',
    border: '1px solid rgba(255,255,255,0.32)',
    color: '#fff',
    borderRadius: 3,
    fontFamily: 'inherit',
    transition: 'border-color 200ms ease, background 200ms ease',
  },
  btn: {
    minHeight: 52,
    paddingInline: 28,
    fontSize: 14,
    fontWeight: 700,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    border: 'none',
    cursor: 'pointer',
    whiteSpace: 'nowrap',
  },
  helper: {
    margin: 0,
    fontSize: 13,
    color: 'rgba(255,255,255,0.55)',
  },
};

const nlMQ = document.createElement('style');
nlMQ.textContent = `
  section[data-screen-label="10b Newsletter"] input:focus {
    outline: none !important;
    border-color: var(--color-copper-fallback) !important;
    background: rgba(255,255,255,0.10) !important;
  }
  section[data-screen-label="10b Newsletter"] input::placeholder {
    color: rgba(255,255,255,0.42);
  }
  @media (min-width: 900px) {
    section[data-screen-label="10b Newsletter"] > div:last-child {
      grid-template-columns: 1.1fr 1fr !important;
      gap: 80px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    section[data-screen-label="10b Newsletter"] video {
      display: none !important;
    }
    section[data-screen-label="10b Newsletter"] {
      background-image: url("assets/video/prosperia-newsletter-boulevard-distrito-poster.jpg") !important;
      background-size: cover !important;
      background-position: center !important;
    }
  }
`;
document.head.appendChild(nlMQ);

window.Newsletter = Newsletter;