/* Demo access request — minimal email-capture funnel for Lab */
function DemoPage() {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [role, setRole] = React.useState('');
  const [useCase, setUseCase] = React.useState('');
  const [newsletter, setNewsletter] = React.useState(true);
  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, name, company, role, useCase, newsletter, source: 'gen-data.io/demo' }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || 'Something went wrong.');
      }
      setState('success');
      setName(''); setEmail(''); setCompany(''); setRole(''); 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 DEMO</div>
          <h1 className="mt-4 text-[40px] sm:text-[52px] leading-[1.05] font-semibold tracking-[-0.025em]">
            See the live <span className="grad-word">Atlas</span>.
          </h1>
          <p className="mt-6 text-[16px] text-mute leading-relaxed max-w-xl">
            We&apos;ll set up a guided 30-minute walkthrough — quantified drivers, confidence intervals, and intervention recommendations for your industry. Premium Automotive is live today, more verticals roll out on request.
          </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">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <label className="flex flex-col gap-2">
                  <span className="mono text-[10px] text-mute">NAME</span>
                  <input type="text" required value={name}
                    onChange={(e) => setName(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">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>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                <label className="flex flex-col gap-2">
                  <span className="mono text-[10px] text-mute">COMPANY</span>
                  <input type="text" required 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">ROLE (OPTIONAL)</span>
                  <input type="text" value={role}
                    onChange={(e) => setRole(e.target.value)}
                    disabled={state === 'submitting'}
                    placeholder="e.g., Head of CX, CMO, Analyst"
                    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>
              </div>
              <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>

              <label className="flex items-start gap-3 mt-1 cursor-pointer">
                <input type="checkbox" checked={newsletter}
                  onChange={(e) => setNewsletter(e.target.checked)}
                  disabled={state === 'submitting'}
                  className="mt-0.5 h-4 w-4 rounded border-line text-ink focus:ring-ink"
                />
                <span className="text-[13px] text-mute leading-relaxed">
                  Send me occasional product updates and Causal-AI insights. Unsubscribe anytime.
                </span>
              </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 Demo <Icon.Arrow className="w-4 h-4"/></>}
              </button>
            </form>
          )}
        </section>
      </main>
      <Footer/>
    </div>
  );
}

window.DemoPage = DemoPage;