/* Field Notes — public newsletter signup for the Rep by Rep marketing site.
   Sits between Blog and FAQ. Charcoal-on-sapphire-edge composition. */

const Newsletter = () => {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const valid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  const submit = async (e) => {
    e.preventDefault();
    if (!valid) return;
    await window.rxrMailerLite(email, '', window.MAILERLITE_GROUPS.newsletter);
    setSubmitted(true);
  };

  return (
    <section id="newsletter" className="bg-dark" style={{ padding: '96px 0' }}>
      <div className="wrap m-1 m-gap" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--rxr-sapphire-tint)' }}>Field Notes · In Your Inbox</div>
          <h2 className="h-section" style={{ marginTop: 12 }}>The posts, delivered.<br/>Twice a month.</h2>
          <div className="rule" />
          <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', maxWidth: '52ch', marginTop: 28 }}>
            Field Notes is where I write down what I&apos;m thinking. A training observation. A nutrition reframe. Sometimes a quick story from a client&apos;s process. Subscribe and the new ones land in your inbox, twice a month. No need to come looking.
          </p>
          <div style={{ display: 'flex', gap: 32, marginTop: 28, flexWrap: 'wrap' }}>
            {[
              ['Twice a month.', 'No more, no less.'],
              ['No hype.', 'No affiliate spam.'],
              ['Unsubscribe anytime.', 'One click.'],
            ].map(([a, b]) => (
              <div key={a} style={{ minWidth: 140 }}>
                <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--rxr-sapphire-tint)' }}>{a}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 6,
          padding: 32,
        }}>
          {!submitted ? (
            <form onSubmit={submit}>
              <label style={{
                fontSize: 10,
                fontWeight: 600,
                letterSpacing: '0.22em',
                textTransform: 'uppercase',
                color: 'var(--rxr-sapphire-tint)',
                display: 'block',
                marginBottom: 10,
              }}>
                Your Email
              </label>
              <input
                type="email"
                placeholder="your@email.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                style={{
                  width: '100%',
                  fontFamily: 'var(--font-body)',
                  fontSize: 16,
                  padding: '14px 16px',
                  borderRadius: 6,
                  border: '1px solid rgba(255,255,255,0.18)',
                  background: 'rgba(255,255,255,0.05)',
                  color: '#fff',
                  outline: 'none',
                  transition: 'border 200ms cubic-bezier(.16,1,.3,1), background 200ms cubic-bezier(.16,1,.3,1)',
                }}
                onFocus={e => { e.target.style.borderColor = 'var(--rxr-sapphire-tint)'; e.target.style.background = 'rgba(255,255,255,0.08)'; }}
                onBlur={e => { e.target.style.borderColor = 'rgba(255,255,255,0.18)'; e.target.style.background = 'rgba(255,255,255,0.05)'; }}
              />

              <button
                type="submit"
                disabled={!valid}
                style={{
                  width: '100%',
                  marginTop: 14,
                  background: '#fff',
                  color: 'var(--rxr-charcoal)',
                  border: 0,
                  padding: '15px 24px',
                  fontFamily: 'var(--font-body)',
                  fontSize: 13,
                  fontWeight: 600,
                  textTransform: 'uppercase',
                  letterSpacing: '0.1em',
                  borderRadius: 6,
                  cursor: valid ? 'pointer' : 'not-allowed',
                  opacity: valid ? 1 : 0.4,
                  transition: 'background 200ms cubic-bezier(.16,1,.3,1)',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 10,
                }}
                onMouseEnter={e => { if (valid) e.target.style.background = 'var(--rxr-haze)'; }}
                onMouseLeave={e => { if (valid) e.target.style.background = '#fff'; }}
              >
                Subscribe →
              </button>

              <div style={{
                marginTop: 18,
                fontSize: 11,
                color: 'rgba(255,255,255,0.45)',
                lineHeight: 1.5,
              }}>
                By subscribing you agree to receive emails from Rep by Rep. Your address never leaves us — no third-party sharing, ever.
              </div>
            </form>
          ) : (
            <div style={{ textAlign: 'center', padding: '12px 0' }}>
              <div style={{
                width: 48, height: 48, borderRadius: 24,
                background: 'var(--rxr-volt)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff',
                marginBottom: 18,
              }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div style={{
                fontFamily: 'var(--font-headline)',
                fontWeight: 600,
                fontSize: 22,
                textTransform: 'uppercase',
                letterSpacing: '0.02em',
                color: '#fff',
                marginBottom: 10,
              }}>
                You&apos;re in.
              </div>
              <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, maxWidth: '36ch', margin: '0 auto' }}>
                First note hits your inbox within two weeks, then twice a month after that. Check your spam folder if you don&apos;t see it. Field Notes lives in your "Promotions" tab on Gmail unless you drag it over.
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Newsletter });