// VarB_Exclusive — quiet closing section. Exclusive, "by invitation" tone.
// Designed to sit between the bgAlt Compliance section and the darkBg footer.
// Uses the cream `bg` so the page ends with a soft editorial beat before the
// dark footer takes over.

function VarB_Exclusive() {
  const isMobile = useIsMobile();
  const [email, setEmail] = React.useState('');
  const [hp, setHp] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | sending | success | error
  const [error, setError] = React.useState('');
  const submitted = status === 'success';

  const isValidEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);

  const handle = async (e) => {
    e.preventDefault();
    if (status === 'sending') return; // prevent double-submit
    setError('');
    if (hp) { setStatus('success'); return; } // honeypot — silently accept bots
    if (!isValidEmail(email)) {
      setError('Please enter a valid email address.');
      return;
    }
    setStatus('sending');
    try {
      const res = await fetch('/api/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, hp, source: 'witheddy.ai / homepage' }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) throw new Error(data.error || 'request_failed');
      setStatus('success');
    } catch (err) {
      setStatus('error');
      setError("We couldn't send that. Please email hello@witheddy.ai directly.");
    }
  };

  return (
    <section id="work-with-us" style={{
      padding: isMobile ? '72px 20px 80px' : '140px 56px 160px',
      background: B_PALETTE.bg,
      borderTop: `1px solid ${B_PALETTE.rule}`,
      position: 'relative',
    }}>
      {/* tiny eyebrow — kept here because the tone is intimate */}
      <div style={{
        display:'flex', alignItems:'center', gap: 14,
        marginBottom: isMobile ? 28 : 48,
        fontFamily: '"Inter", sans-serif', fontSize: 11,
        letterSpacing: '0.22em', textTransform:'uppercase',
        color: B_PALETTE.mute, fontWeight: 600,
      }}>
        <span style={{ width: 6, height: 6, background: B_PALETTE.accent, borderRadius: 99, flex:'0 0 auto' }}/>
        <span>Working with Eddy · 2026</span>
      </div>

      <div style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.2fr 1fr',
        gap: isMobile ? 40 : 96,
        alignItems: 'start',
      }}>
        <div>
          <h2 style={{
            fontFamily: '"Source Serif Pro", Georgia, serif',
            fontSize: 'clamp(40px, 7.5vw, 88px)', lineHeight: 1.0, letterSpacing: '-0.035em',
            color: B_PALETTE.ink, fontWeight: 400, margin: 0,
            textWrap: 'balance', WebkitTextWrap: 'balance',
          }}>
            Ready to scale your{isMobile ? ' ' : <br/>}<span style={{fontStyle:'italic'}}>creator campaigns?</span>
          </h2>

          <p style={{
            marginTop: 40, fontFamily:'"Source Serif Pro", Georgia, serif',
            fontSize: 22, lineHeight: 1.4, letterSpacing: '-0.005em',
            color: B_PALETTE.body, maxWidth: 520, fontWeight: 400,
          }}>
            Eddy is currently working with a small number of brand partners through 2026.
            We take the work, and the people we do it for, seriously.
          </p>
          <p style={{
            marginTop: 24, fontFamily:'"Inter", sans-serif',
            fontSize: 15, lineHeight: 1.6, color: B_PALETTE.body, maxWidth: 520,
          }}>
            If you're thinking about patient or HCP creator work — whether it's a single
            indication this year or an infrastructure conversation for the next three — we'd like
            to hear from you. We review introductions weekly.
          </p>
        </div>

        {/* card — understated, not a hard CTA */}
        <div style={{
          background: B_PALETTE.cardBg,
          border: `1px solid ${B_PALETTE.rule}`,
          padding: isMobile ? '28px 22px 24px' : '36px 36px 32px',
          marginTop: isMobile ? 0 : 12,
          fontFamily: '"Inter", sans-serif',
          position: 'relative',
        }}>
          <div style={{
            fontSize: 10.5, letterSpacing: '0.22em', textTransform:'uppercase',
            color: B_PALETTE.mute, fontWeight: 600, marginBottom: 18,
            display:'flex', justifyContent:'space-between', alignItems:'baseline',
          }}>
            <span>Request an introduction</span>
            <span style={{color: B_PALETTE.accent, fontWeight: 600}}>By invitation</span>
          </div>

          <div style={{
            fontFamily:'"Source Serif Pro", Georgia, serif',
            fontSize: 24, lineHeight: 1.25, letterSpacing: '-0.01em',
            color: B_PALETTE.ink, marginBottom: 24, fontWeight: 400,
          }}>
            A short note goes to the founding team — no sales desk in between.
          </div>

          {!submitted ? (
            <form onSubmit={handle} noValidate style={{ display:'flex', flexDirection:'column', gap: 12 }}>
              {/* honeypot — hidden from real users, visible to bots */}
              <div aria-hidden="true" style={{position:'absolute', left:'-9999px', width:1, height:1, overflow:'hidden'}}>
                <label htmlFor="company">Company (leave blank)</label>
                <input
                  id="company" name="company" type="text" tabIndex={-1} autoComplete="off"
                  value={hp} onChange={e=>setHp(e.target.value)}
                />
              </div>
              <div>
                <label htmlFor="lead-email" style={{ fontSize: 10.5, letterSpacing: '0.18em', textTransform:'uppercase', color: B_PALETTE.mute, fontWeight: 600, display:'block', marginBottom: 6 }}>
                  Work email
                </label>
                <input
                  id="lead-email" name="email" type="email" required
                  autoComplete="email" inputMode="email"
                  value={email} onChange={e=>setEmail(e.target.value)}
                  placeholder="you@brand.com"
                  aria-invalid={!!error}
                  aria-describedby={error ? 'lead-error' : 'lead-help'}
                  disabled={status === 'sending'}
                  style={{
                    width: '100%', background: 'transparent',
                    border: 'none', borderBottom: `1px solid ${error ? '#B44A3A' : B_PALETTE.rule}`,
                    padding: '8px 0 10px', fontSize: 16, color: B_PALETTE.ink,
                    fontFamily:'"Inter", sans-serif', outline: 'none',
                  }}
                  onFocus={e=>e.currentTarget.style.borderBottomColor = error ? '#B44A3A' : B_PALETTE.ink}
                  onBlur={e=>e.currentTarget.style.borderBottomColor = error ? '#B44A3A' : B_PALETTE.rule}
                />
              </div>
              {error && (
                <div id="lead-error" role="alert" style={{
                  fontSize: 12.5, color: '#B44A3A', marginTop: 4, lineHeight: 1.4,
                  fontFamily:'"Inter", sans-serif',
                }}>{error}</div>
              )}
              <button type="submit" disabled={status === 'sending'} style={{
                alignSelf: 'flex-start', marginTop: 18,
                background: B_PALETTE.ink, color: B_PALETTE.bg, border: 'none',
                padding: '14px 22px', fontSize: 13.5, fontWeight: 550, letterSpacing: '0.01em',
                cursor: status === 'sending' ? 'wait' : 'pointer',
                opacity: status === 'sending' ? 0.7 : 1,
                fontFamily:'"Inter", sans-serif',
              }}>
                {status === 'sending' ? 'Sending…' : 'Request an introduction →'}
              </button>
              <div id="lead-help" style={{ fontSize: 11.5, color: B_PALETTE.mute, marginTop: 10, lineHeight: 1.5 }}>
                We respond within seven days. Or reach the team directly at{' '}
                <a href="mailto:hello@witheddy.ai" style={{color: B_PALETTE.ink, textDecoration: 'underline', textUnderlineOffset: 3, textDecorationColor: B_PALETTE.rule}}>
                  hello@witheddy.ai
                </a>.
              </div>
            </form>
          ) : (
            <div role="status" aria-live="polite" style={{
              padding: '18px 0', fontSize: 14, color: B_PALETTE.ink, lineHeight: 1.55,
            }}>
              <div style={{ fontFamily:'"Source Serif Pro", Georgia, serif', fontSize: 22, fontStyle:'italic', marginBottom: 8, letterSpacing:'-0.01em' }}>
                Thank you.
              </div>
              We've received your note and will be in touch within the week.
            </div>
          )}
        </div>
      </div>

      {/* footnote line */}
      <div style={{
        marginTop: isMobile ? 56 : 88, paddingTop: 24,
        borderTop: `1px solid ${B_PALETTE.rule}`,
        display:'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent:'space-between',
        alignItems: isMobile ? 'flex-start' : 'baseline',
        gap: isMobile ? 12 : 0,
        fontFamily:'"Inter", sans-serif', fontSize: 11,
        letterSpacing: '0.18em', textTransform:'uppercase',
        color: B_PALETTE.mute, fontWeight: 600,
      }}>
        <span>Founding team only · No outbound sales</span>
        <span>NYC · Remote-first · hello@witheddy.ai</span>
      </div>
    </section>
  );
}

window.VarB_Exclusive = VarB_Exclusive;