// waitlist.jsx — pre-launch email capture for ReturnScribe.
// Native, controlled form that POSTs the email straight to Kit's subscriptions
// API and renders OUR OWN success / error message. We dropped Kit's ck.5.js
// embed: on the free plan it injects a Creator Network "recommendations" modal
// that can't be disabled, and its post-subscribe render fails under our CSP.
//
// The input + button reuse the .formkit-form / .formkit-input / .formkit-submit
// classes so the existing ledger.css styling applies unchanged (same dark
// input, same orange Subscribe button). No native <form> submit — a button
// onClick handler does the fetch, so there's no full-page navigation.

const KIT_ENDPOINT = 'https://app.kit.com/forms/9621386/subscriptions';
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

const Waitlist = () => {
  const [email, setEmail] = React.useState('');
  // 'idle' | 'submitting' | 'success' | 'error'
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  const submit = async () => {
    if (status === 'submitting') return;
    const value = email.trim();
    if (!value || !EMAIL_RE.test(value)) {
      setStatus('error');
      setErrorMsg('Please enter a valid email address.');
      return;
    }
    setStatus('submitting');
    setErrorMsg('');
    try {
      const res = await fetch(KIT_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email_address: value }),
      });
      if (res.ok) {
        setStatus('success');
      } else {
        setStatus('error');
        setErrorMsg('Something went wrong — please try again.');
      }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Something went wrong — please try again.');
    }
  };

  const onKeyDown = (e) => {
    if (e.key === 'Enter') { e.preventDefault(); submit(); }
  };

  return (
    <section className="section waitlist" id="waitlist" data-screen-label="Waitlist">
      <div className="container">
        <div className="waitlist-inner" data-reveal>
          <div className="eyebrow">Join the waitlist</div>
          <h2 className="section-title">Be first to know <em>when ReturnScribe launches</em>.</h2>
          <p className="section-lead waitlist-sub">
            The iPhone app that catches what slips past you after you buy — return
            windows about to close, free trials about to charge you, and subscriptions
            you forgot you&rsquo;re paying for. Get notified the moment we launch.
          </p>

          <div className="waitlist-form">
            <div className="formkit-form" data-uid="af7382e1d6">
              {status === 'success' ? (
                <p className="waitlist-msg waitlist-success" role="status" aria-live="polite">
                  Success! You&rsquo;re on the list — check your email to confirm your subscription.
                </p>
              ) : (
                <React.Fragment>
                  <div className="formkit-fields" data-stacked="false">
                    <div className="formkit-field">
                      <input
                        className="formkit-input"
                        type="email"
                        name="email_address"
                        placeholder="Email Address"
                        aria-label="Email Address"
                        autoComplete="email"
                        value={email}
                        disabled={status === 'submitting'}
                        onChange={(e) => {
                          setEmail(e.target.value);
                          if (status === 'error') { setStatus('idle'); setErrorMsg(''); }
                        }}
                        onKeyDown={onKeyDown}
                      />
                    </div>
                    <button
                      type="button"
                      className="formkit-submit"
                      onClick={submit}
                      disabled={status === 'submitting'}
                    >
                      <span>{status === 'submitting' ? 'Subscribing…' : 'Subscribe'}</span>
                    </button>
                  </div>
                  {status === 'error' && (
                    <p className="waitlist-msg waitlist-error" role="alert" aria-live="assertive">
                      {errorMsg}
                    </p>
                  )}
                </React.Fragment>
              )}
            </div>
          </div>

          <p className="waitlist-fine">
            We&rsquo;ll only email you about the ReturnScribe launch — no spam, unsubscribe
            anytime. <a href="/privacy">Privacy policy</a>.
          </p>
        </div>
      </div>
    </section>
  );
};

window.Waitlist = Waitlist;