/* Demo access request — minimal email-capture funnel for Lab */
function DemoPage() {
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [useCase, setUseCase] = React.useState('');
  const [state, setState] = React.useState('idle');
  const [error, setError] = React.useState(null);

  async function handleSubmit(e) {
    e.preventDefault();
    setState('submitting');
    setError(null);
    try {
      const res = await fetch('https://app.gen-data.io/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, company, useCase, source: 'gen-data.io/demo' }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || 'Something went wrong.');
      }
      setState('success');
      setEmail(''); setCompany(''); setUseCase('');
    } catch (err) {
      setState('error');
      setError(err && err.message ? err.message : 'Something went wrong.');
    }
  }

  return (
    <div className="min-h-screen flex flex-col bg-paper">
      <PublicNav/>
      <main className="flex-1">
        <section className="mx-auto max-w-[640px] px-8 lg:px-16 pt-24 pb-20">
          <div className="mono text-[10px] text-mute">REQUEST ACCESS · LAB</div>
          <h1 className="mt-4 text-[40px] sm:text-[52px] leading-[1.05] font-semibold tracking-[-0.025em]">
            Access the live <span className="grad-word">Lab</span>.
          </h1>
          <p className="mt-6 text-[16px] text-mute leading-relaxed max-w-xl">
            Industry-Ready Causal Analysis across verticals. Premium Automotive Aftersales is live today, more roll out on request. Drop your email and we&apos;ll set up a working session within 5 business days.
          </p>

          {state === 'success' ? (
            <div className="mt-12 rounded-2xl border border-line bg-off p-8">
              <div className="mono text-[10px] text-mute">REQUEST RECEIVED</div>
              <p className="mt-3 text-[18px] text-ink">Thanks — we&apos;ll be in touch within 5 business days.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="mt-12 flex flex-col gap-5">
              <label className="flex flex-col gap-2">
                <span className="mono text-[10px] text-mute">WORK EMAIL</span>
                <input type="email" required value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={state === 'submitting'}
                  className="h-11 px-4 rounded-full border border-line bg-paper text-[14px] text-ink focus:outline-none focus:border-ink/40 transition-colors"
                />
              </label>
              <label className="flex flex-col gap-2">
                <span className="mono text-[10px] text-mute">COMPANY</span>
                <input type="text" value={company}
                  onChange={(e) => setCompany(e.target.value)}
                  disabled={state === 'submitting'}
                  className="h-11 px-4 rounded-full border border-line bg-paper text-[14px] text-ink focus:outline-none focus:border-ink/40 transition-colors"
                />
              </label>
              <label className="flex flex-col gap-2">
                <span className="mono text-[10px] text-mute">USE CASE (OPTIONAL)</span>
                <textarea rows="3" value={useCase}
                  onChange={(e) => setUseCase(e.target.value)}
                  disabled={state === 'submitting'}
                  placeholder="e.g., Premium-OEM aftersales, dealer benchmark, pilot scope…"
                  className="px-4 py-3 rounded-2xl border border-line bg-paper text-[14px] text-ink focus:outline-none focus:border-ink/40 transition-colors resize-none"
                />
              </label>

              {state === 'error' && (
                <div className="text-[13px] text-red-600">{error}</div>
              )}

              <button type="submit" disabled={state === 'submitting'}
                className="self-start rounded-full bg-ink text-paper hover:bg-ink/90 disabled:opacity-60 px-6 py-3 text-[14px] font-medium inline-flex items-center gap-2 transition-colors">
                {state === 'submitting' ? 'Sending…' : <>Request Access <Icon.Arrow className="w-4 h-4"/></>}
              </button>
            </form>
          )}
        </section>
      </main>
      <Footer/>
    </div>
  );
}

window.DemoPage = DemoPage;