vyndr/web/src/components/NewsletterCapture.tsx

'use client';

import { useState, type FormEvent } from 'react';

/**
 * THE VYNDR REPORT capture (Session S7, a1) — email field for the daily
 * newsletter. Dark terminal surface, mono for data (the email IS data),
 * VOICE v1.1 copy: deadpan, no exclamation points.
 *
 * States:
 *   idle → busy → sent  ("Confirmation sent. Check your inbox.")
 *                 soon  (backend not configured → "Signups open soon.")
 *                 error (bad email / transient upstream)
 *
 * Double opt-in is real: the backend asks Listmonk to send a confirmation;
 * nothing lands on the list until the reader clicks it. The note under the
 * field says exactly that.
 */
export default function NewsletterCapture({ compact = false }: { compact?: boolean }) {
  const [email, setEmail] = useState('');
  const [website, setWebsite] = useState(''); // honeypot — humans never see it
  const [state, setState] = useState<'idle' | 'busy' | 'sent' | 'soon' | 'error'>('idle');
  const [message, setMessage] = useState('');

  const submit = async (e: FormEvent) => {
    e.preventDefault();
    if (state === 'busy') return;
    setState('busy');
    setMessage('');
    try {
      const res = await fetch('/api/newsletter/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), website }),
      });
      const data = await res.json().catch(() => ({ ok: false, reason: 'not configured' }));
      if (data.ok) {
        setState('sent');
      } else if (res.status === 400) {
        setState('error');
        setMessage(data.error || 'Enter a valid email.');
      } else {
        // 'not configured' or transient upstream — calm either way.
        setState('soon');
      }
    } catch {
      setState('soon');
    }
  };

  if (state === 'sent') {
    return (
      <div
        className="surface"
        style={{ padding: compact ? '16px 18px' : '22px 24px', border: '1px solid var(--border)', borderRadius: 8 }}
      >
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--g-a)', marginBottom: 6 }}>
          THE VYNDR REPORT
        </div>
        <p style={{ fontSize: 13, color: 'var(--text-secondary)', margin: 0 }}>
          Confirmation sent. Check your inbox — nothing arrives until you click it.
        </p>
      </div>
    );
  }

  return (
    <div
      className="surface"
      style={{ padding: compact ? '16px 18px' : '22px 24px', border: '1px solid var(--border)', borderRadius: 8 }}
    >
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--g-a)', marginBottom: 6 }}>
        THE VYNDR REPORT
      </div>
      <p style={{ fontSize: compact ? 13 : 14, color: 'var(--text-0, var(--text-primary))', margin: '0 0 12px' }}>
        The slate, the signals, the settle. Daily. Free.
      </p>

      {state === 'soon' ? (
        <p className="mono" style={{ fontSize: 12, color: 'var(--text-secondary)', margin: 0 }}>
          Signups open soon.
        </p>
      ) : (
        <form onSubmit={submit} style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {/* Honeypot — visually hidden, tab-skipped. Bots fill it, humans don't. */}
          <input
            type="text"
            name="website"
            value={website}
            onChange={(e) => setWebsite(e.target.value)}
            tabIndex={-1}
            autoComplete="off"
            aria-hidden="true"
            style={{ position: 'absolute', left: -9999, width: 1, height: 1, opacity: 0 }}
          />
          <input
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@wherever.com"
            aria-label="Email for THE VYNDR REPORT"
            className="mono"
            style={{
              flex: '1 1 200px',
              minWidth: 0,
              background: 'var(--bg-2, transparent)',
              border: '1px solid var(--border)',
              borderRadius: 6,
              padding: '10px 12px',
              fontSize: 13,
              color: 'var(--text-0, var(--text-primary))',
              outline: 'none',
            }}
          />
          <button
            type="submit"
            disabled={state === 'busy'}
            className="mono"
            style={{
              background: 'var(--g-a, var(--grade-a))',
              color: '#04140f',
              border: '1px solid var(--g-a, var(--grade-a))',
              borderRadius: 6,
              padding: '10px 18px',
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: '0.08em',
              cursor: state === 'busy' ? 'wait' : 'pointer',
              opacity: state === 'busy' ? 0.6 : 1,
            }}
          >
            {state === 'busy' ? 'SENDING' : 'SUBSCRIBE'}
          </button>
        </form>
      )}

      {state === 'error' && message && (
        <p className="mono" style={{ fontSize: 12, color: 'var(--miss, #ff8a8a)', margin: '8px 0 0' }}>
          {message}
        </p>
      )}

      {state !== 'soon' && (
        <p style={{ fontSize: 11, color: 'var(--text-tertiary, var(--text-secondary))', margin: '10px 0 0', lineHeight: 1.5 }}>
          Double opt-in — a confirmation email lands first; nothing sends until you click it.
          Unsubscribe is one click, forever. 21+.
        </p>
      )}
    </div>
  );
}