/* =========================================================
   Email capture — footer newsletter + exit-intent modal
   Incentive: 15% off first order with code WELCOME15
   Persistence: sets localStorage 'clarion_email_captured' so
   the exit modal never re-fires for signups or dismissers.
   ========================================================= */

const EMAIL_STORE_KEY = 'clarion_email_captured';
const EMAIL_DISMISS_KEY = 'clarion_email_dismissed';
const PROMO_CODE = 'WELCOME15';

function isValidEmail(s) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((s || '').trim());
}

/* ---------------- Footer inline signup ---------------- */
function FooterSignup() {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | ok | err

  React.useEffect(() => {
    if (localStorage.getItem(EMAIL_STORE_KEY)) setStatus('ok');
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!isValidEmail(email)) { setStatus('err'); return; }
    localStorage.setItem(EMAIL_STORE_KEY, email);
    setStatus('ok');
    try { if (window.plausible) window.plausible('Email Signup', { props: { source: 'footer' } }); } catch {}
  };

  if (status === 'ok') {
    return (
      <div className="footer-signup footer-signup-success">
        <div className="footer-signup-ok-title">✓ Welcome.</div>
        <div className="footer-signup-ok-body">Check your inbox for your <strong>15% off</strong> code.</div>
      </div>
    );
  }

  return (
    <form className="footer-signup" onSubmit={submit}>
      <div className="footer-signup-eyebrow">NEWSLETTER · 15% OFF</div>
      <div className="footer-signup-title">Join the bench list.</div>
      <div className="footer-signup-sub">Quarterly research notes, new-lot alerts, and 15% off your first order.</div>
      <div className="footer-signup-row">
        <input
          type="email"
          value={email}
          onChange={e => { setEmail(e.target.value); if (status === 'err') setStatus('idle'); }}
          placeholder="you@institution.edu"
          aria-label="Email address"
          required
        />
        <button type="submit">Subscribe →</button>
      </div>
      {status === 'err' && <div className="footer-signup-err">Please enter a valid email address.</div>}
      <div className="footer-signup-fine">By subscribing you confirm you are a qualified researcher. Unsubscribe anytime.</div>
    </form>
  );
}

/* ---------------- Exit-intent modal ---------------- */
function ExitIntentModal() {
  const [open, setOpen] = React.useState(false);
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | err | success
  const shownRef = React.useRef(false);

  React.useEffect(() => {
    // Skip if already captured or previously dismissed
    if (localStorage.getItem(EMAIL_STORE_KEY)) return;
    if (localStorage.getItem(EMAIL_DISMISS_KEY)) return;

    // Mouse exit (desktop)
    const onMouseOut = (e) => {
      if (shownRef.current) return;
      if (e.clientY <= 10 && !e.relatedTarget) {
        shownRef.current = true;
        setOpen(true);
      }
    };
    // Time-based fallback (30s, mobile-friendly)
    const timer = setTimeout(() => {
      if (!shownRef.current) {
        shownRef.current = true;
        setOpen(true);
      }
    }, 30000);

    document.addEventListener('mouseout', onMouseOut);
    return () => {
      document.removeEventListener('mouseout', onMouseOut);
      clearTimeout(timer);
    };
  }, []);

  const dismiss = () => {
    localStorage.setItem(EMAIL_DISMISS_KEY, String(Date.now()));
    setOpen(false);
  };

  const submit = (e) => {
    e.preventDefault();
    if (!isValidEmail(email)) { setStatus('err'); return; }
    localStorage.setItem(EMAIL_STORE_KEY, email);
    setStatus('success');
    try { if (window.plausible) window.plausible('Email Signup', { source: 'exit-intent' }); } catch {}
  };

  const copyCode = () => {
    if (navigator.clipboard) navigator.clipboard.writeText(PROMO_CODE);
  };

  if (!open) return null;

  return (
    <div className="exit-overlay" role="dialog" aria-modal="true" aria-labelledby="exit-title">
      <div className="exit-modal">
        <button className="exit-close" onClick={dismiss} aria-label="Close">×</button>

        <div className="exit-left">
          <div className="eyebrow eyebrow-mint" style={{ marginBottom: 14 }}>
            {status === 'success' ? 'YOU\u2019RE IN' : 'BEFORE YOU GO'}
          </div>
          {status === 'success' ? (
            <>
              <h2 id="exit-title" className="exit-title">
                Welcome to the <span className="exit-title-accent">bench list.</span>
              </h2>
              <p className="exit-sub">
                We sent a confirmation to <strong>{email}</strong>. Your welcome code is ready — use it at checkout on any vial in the catalog.
              </p>
              <button className="btn btn-primary" onClick={dismiss} style={{ width: '100%', marginTop: 4 }}>
                Continue shopping →
              </button>
              <div className="exit-skip" style={{ textAlign: 'left', marginTop: 14, color: 'var(--ink-60)', textDecoration: 'none', cursor: 'default' }}>
                Code valid for 30 days. One use per customer.
              </div>
            </>
          ) : (
            <>
              <h2 id="exit-title" className="exit-title">
                Take <span className="exit-title-accent">15% off</span> your first order.
              </h2>
              <p className="exit-sub">
                Join the bench list. New-lot alerts, quarterly research notes, and a welcome code — good on any vial in the catalog.
              </p>
              <form onSubmit={submit} className="exit-form">
                <input
                  type="email"
                  value={email}
                  onChange={e => { setEmail(e.target.value); if (status === 'err') setStatus('idle'); }}
                  placeholder="you@institution.edu"
                  required
                  autoFocus
                />
                <button type="submit" className="btn btn-primary">Claim my 15% →</button>
                {status === 'err' && <div className="exit-form-err">Please enter a valid email address.</div>}
              </form>
              <button className="exit-skip" onClick={dismiss}>No thanks, I'll pay full price</button>
            </>
          )}
        </div>
        <div className="exit-right">
          {status === 'success' ? (
            <>
              <div className="exit-badge exit-badge-reveal">
                <div className="exit-badge-eyebrow">YOUR PROMO CODE</div>
                <button
                  type="button"
                  className="exit-badge-code exit-badge-code-btn"
                  onClick={copyCode}
                  title="Click to copy"
                >
                  {PROMO_CODE}
                </button>
                <div className="exit-badge-sub">15% OFF · TAP CODE TO COPY</div>
              </div>
              <div className="exit-pills">
                <div className="exit-pill"><strong>30d</strong><span>code validity</span></div>
                <div className="exit-pill"><strong>1×</strong><span>per customer</span></div>
                <div className="exit-pill"><strong>24h</strong><span>ship from order</span></div>
              </div>
            </>
          ) : (
            <>
              <div className="exit-valueprop">
                <div className="exit-valueprop-eyebrow">WHAT YOU GET</div>
                <ul className="exit-valueprop-list">
                  <li><span className="exit-vp-dot" />15% welcome code on your first order</li>
                  <li><span className="exit-vp-dot" />New-lot alerts before public release</li>
                  <li><span className="exit-vp-dot" />Quarterly research notes from our lab</li>
                </ul>
              </div>
              <div className="exit-pills">
                <div className="exit-pill"><strong>&gt;99%</strong><span>HPLC purity</span></div>
                <div className="exit-pill"><strong>8</strong><span>USP assays / lot</span></div>
                <div className="exit-pill"><strong>24h</strong><span>ship from order</span></div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FooterSignup, ExitIntentModal });