// API key lives server-side in /api/waitlist.js (Vercel env var BREVO_API_KEY)

// ── WaitlistPage ─────────────────────────────────────────────
function WaitlistPage() {
  const { t } = window.useT();
  const [name,    setName]    = React.useState('');
  const [email,   setEmail]   = React.useState('');
  const [consent, setConsent] = React.useState(false);
  const [status,  setStatus]  = React.useState('idle'); // idle | loading | success | error
  const [errMsg,  setErrMsg]  = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    if (!consent) {
      setErrMsg(t('wl.error.consent'));
      return;
    }

    setStatus('loading');
    setErrMsg('');

    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ name, email }),
      });

      const data = await res.json().catch(() => ({}));
      if (res.ok) {
        setStatus('success');
      } else {
        throw new Error(data.error || t('wl.error.general'));
      }
    } catch (err) {
      setStatus('error');
      setErrMsg(t('wl.error.general') + ' ' + err.message);
    }
  }

  return (
    <div className="wl-page">
      <window.Nav />

      <main className="wl-main">

        {/* ── Left: product image ── */}
        <div className="wl-visual">
          <img
            src="/assets/mouthpiece.webp"
            alt={t('wl.mouthpiece.alt')}
            className="wl-product-img"
            draggable="false"
          />
        </div>

        {/* ── Right: form ── */}
        <div className="wl-form-wrap">
          {status === 'success' ? (
            <div className="wl-success">
              <div className="wl-success-icon">
                <svg viewBox="0 0 48 48" width="48" height="48" fill="none" aria-hidden="true">
                  <path d="M13 26 L21 34 L35 17" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h2>{t('wl.success.title')}</h2>
              <p>{t('wl.success.text')}</p>
              <a href="/" className="btn btn-primary" style={{marginTop: 24}}>
                {t('wl.success.back')}
              </a>
            </div>
          ) : (
            <form className="wl-form" onSubmit={handleSubmit} noValidate>
              <p className="wl-eyebrow">{t('wl.eyebrow')}</p>
              <div className="wl-wordmark">
                <span className="wl-dent">dent</span><span className="wl-son">son</span>
              </div>

              <div className="wl-fields">
                <input
                  className="wl-input"
                  type="text"
                  placeholder="Name"
                  value={name}
                  onChange={e => setName(e.target.value)}
                  required
                  disabled={status === 'loading'}
                />
                <input
                  className="wl-input"
                  type="email"
                  placeholder="E-Mail"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  required
                  disabled={status === 'loading'}
                />
              </div>

              <label className="wl-consent">
                <input
                  type="checkbox"
                  checked={consent}
                  onChange={e => { setConsent(e.target.checked); setErrMsg(''); }}
                  disabled={status === 'loading'}
                />
                <span>
                  {t('wl.consent.text')}{' '}
                  <a href="/legal/datenschutz/" target="_blank" rel="noopener noreferrer">
                    {t('wl.consent.link')}
                  </a>.
                </span>
              </label>

              {errMsg && (
                <p className="wl-error">{errMsg}</p>
              )}

              <button
                type="submit"
                className="btn btn-primary wl-submit"
                disabled={status === 'loading'}
              >
                {status === 'loading' ? (
                  <span className="wl-spinner" />
                ) : (
                  <>{t('wl.submit')} <span>→</span></>
                )}
              </button>
            </form>
          )}
        </div>

      </main>

      <window.MiniFooter />
    </div>
  );
}

window.WaitlistPage = WaitlistPage;