/* Single inbound form. Topic pre-filled to "demo" when arriving via /demo. */
function ContactPage() {
  const isDemo = (window.location.hash || '').startsWith('#/demo');
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [reason, setReason] = React.useState(isDemo ? 'demo' : '');
  const [message, setMessage] = React.useState('');
  const [newsletter, setNewsletter] = React.useState(false);
  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, reason, message, newsletter, source: 'gen-data.io/contact' }),
      });
      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
        throw new Error(body.error || 'Something went wrong.');
      }
      setState('success');
      setName(''); setEmail(''); setCompany(''); setReason(''); setMessage('');
    } 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-[720px] px-8 lg:px-16 pt-24 pb-20">
          <div className="mono text-[10px] text-mute">{isDemo ? 'REQUEST DEMO' : 'GET IN TOUCH'}</div>
          <h1 className="mt-4 text-[40px] sm:text-[52px] leading-[1.05] font-semibold tracking-[-0.025em]">
            {isDemo ? <>See the live <span className="grad-word">Atlas</span>.</> : 'Talk to us.'}
          </h1>
          <p className="mt-6 text-[16px] text-mute leading-relaxed max-w-xl">
            {isDemo
              ? <>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.</>
              : <>Partnerships, investor relations, press, careers, or general questions — drop us a line and we&apos;ll get back within 2 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">MESSAGE RECEIVED</div>
              <p className="mt-3 text-[18px] text-ink">Thanks — we&apos;ll be in touch shortly.</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">COMPANY (OPTIONAL)</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>
              </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">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">REASON</span>
                  <select required value={reason}
                    onChange={(e) => setReason(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 appearance-none">
                    <option value="">Select a reason…</option>
                    <option value="demo">Demo / Product Walkthrough</option>
                    <option value="partnership">Partnership</option>
                    <option value="investor">Investor / Funding</option>
                    <option value="press">Press / Media</option>
                    <option value="career">Career / Hiring</option>
                    <option value="other">Other</option>
                  </select>
                </label>
              </div>
              <label className="flex flex-col gap-2">
                <span className="mono text-[10px] text-mute">MESSAGE</span>
                <textarea
                  required value={message} rows={5}
                  onChange={(e) => setMessage(e.target.value)}
                  disabled={state === 'submitting'}
                  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-y"
                />
              </label>
              <label className="flex items-start gap-3 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>
              <div className="flex items-center justify-between gap-4 mt-2">
                <span className="mono text-[10px] text-mute">
                  Or write to <a href="mailto:moritz.gentner@gen-data.io" className="underline decoration-line underline-offset-2 hover:text-ink transition-colors">moritz.gentner@gen-data.io</a>
                </span>
                <button
                  type="submit" disabled={state === 'submitting'}
                  className="h-11 px-6 rounded-full bg-ink text-paper text-[13px] font-medium hover:bg-ink/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {state === 'submitting' ? 'Sending…' : 'Send message'}
                </button>
              </div>
              {error && <p className="text-[13px] text-red-600 dark:text-red-400">{error}</p>}
            </form>
          )}
        </section>
      </main>
      <Footer/>
    </div>
  );
}
window.ContactPage = ContactPage;