/* The contact form of this site. Same endpoint and the same fields as the
   form that ran before it (src/contact.jsx), so nothing changes behind
   it; only the page around the form is ours. Arriving via #/demo
   pre-selects the demo reason, as before. */
function ContactPage2() {
  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.');
    }
  }

  const busy = state === 'submitting';
  const field = 'h-11 px-4 rounded-full border border-line bg-paper text-[14px] text-ink '
    + 'focus:outline-none focus:border-ink/40 transition-colors disabled:opacity-60';
  const Label = ({ children }) => <span className="mono text-[10px] text-mute">{children}</span>;

  const steps = [
    'We read your message and answer within two business days.',
    'A first call: your steering questions, and how the chain would run on them.',
    'If it fits, a scoped look at what your own data would add.',
  ];

  return (
    <Page>
      <div className="mx-auto w-full max-w-[1440px] px-8 lg:px-16 pt-14 sm:pt-20 pb-24">
        <div className="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_560px] gap-12 lg:gap-20 items-start">

          {/* ── what this is ── */}
          <div>
            <Eyebrow>{isDemo ? 'REQUEST A WALKTHROUGH' : 'GET IN TOUCH'}</Eyebrow>
            <h1 className="mt-4 font-semibold tracking-[-0.022em] leading-[1.06]"
              style={{ fontSize: 'clamp(30px, 3.6vw, 48px)' }}>
              {isDemo
                ? <>See the system on a{' '}<span className="grad-word">live case.</span></>
                : <>Talk to us —{' '}<span className="grad-word">about the causes you can steer.</span></>}
            </h1>
            <p className="mt-6 text-[17px] sm:text-[18px] text-mute leading-relaxed max-w-[52ch]">
              {isDemo
                ? 'Thirty minutes on the automotive case: the chain, the checks behind it, and what a measure is worth. Then we talk about what it would take on your data.'
                : 'A pilot, a partnership, an investment, a question about the method — write us a line. We answer within two business days.'}
            </p>

            <div className="mt-10 rounded-[24px] border border-line p-6 sm:p-7 max-w-[560px]">
              <Eyebrow>WHAT HAPPENS NEXT</Eyebrow>
              <ol className="mt-4 space-y-3">
                {steps.map((s, i) => (
                  <li key={s} className="flex items-baseline gap-3 text-[14.5px] leading-snug">
                    <span className="mono text-[10px] text-mute shrink-0 w-[22px]">0{i + 1}</span>
                    <span>{s}</span>
                  </li>
                ))}
              </ol>
            </div>

            <p className="mt-8 text-[13.5px] text-mute">
              Or write directly to{' '}
              <a href="mailto:moritz.gentner@gen-data.io"
                className="text-ink underline decoration-line underline-offset-2 hover:decoration-ink transition-colors">
                moritz.gentner@gen-data.io
              </a>
            </p>
          </div>

          {/* ── the form ── */}
          <div className="rounded-[24px] border border-line bg-off p-6 sm:p-8">
            {state === 'success' ? (
              <div className="py-6">
                <Eyebrow>MESSAGE RECEIVED</Eyebrow>
                <p className="mt-3 text-[20px] font-semibold tracking-tight">Thanks — we will be in touch shortly.</p>
                <p className="mt-3 text-[14px] text-mute leading-relaxed">
                  Within two business days, from a person, not a system.
                </p>
                <a href="#/" className="mt-8 inline-flex items-center gap-2 rounded-full border border-line hover:border-ink/40 px-5 py-2.5 text-[13.5px] text-ink transition-colors">
                  Back to the start <Icon.Arrow className="w-4 h-4"/>
                </a>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col gap-5">
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  <label className="flex flex-col gap-2">
                    <Label>NAME</Label>
                    <input type="text" required value={name} onChange={e => setName(e.target.value)}
                      disabled={busy} autoComplete="name" className={field}/>
                  </label>
                  <label className="flex flex-col gap-2">
                    <Label>COMPANY (OPTIONAL)</Label>
                    <input type="text" value={company} onChange={e => setCompany(e.target.value)}
                      disabled={busy} autoComplete="organization" className={field}/>
                  </label>
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  <label className="flex flex-col gap-2">
                    <Label>EMAIL</Label>
                    <input type="email" required value={email} onChange={e => setEmail(e.target.value)}
                      disabled={busy} autoComplete="email" className={field}/>
                  </label>
                  <label className="flex flex-col gap-2">
                    <Label>REASON</Label>
                    <select required value={reason} onChange={e => setReason(e.target.value)}
                      disabled={busy} className={field + ' 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">
                  <Label>MESSAGE</Label>
                  <textarea required value={message} rows={5} onChange={e => setMessage(e.target.value)}
                    disabled={busy}
                    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 disabled:opacity-60"/>
                </label>
                <label className="flex items-start gap-3 cursor-pointer">
                  <input type="checkbox" checked={newsletter} onChange={e => setNewsletter(e.target.checked)}
                    disabled={busy} 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 updates on what we find. Unsubscribe any time.
                  </span>
                </label>
                <div className="flex flex-wrap items-center justify-between gap-4 mt-1">
                  <span className="text-[12.5px] text-mute leading-snug max-w-[30ch]">
                    We keep what you send us only to answer it —{' '}
                    <a href="#/datenschutz" className="underline decoration-line underline-offset-2 hover:text-ink transition-colors">privacy notice</a>.
                  </span>
                  <button type="submit" disabled={busy}
                    className="h-11 px-6 rounded-full bg-ink text-paper text-[13.5px] font-medium hover:bg-ink/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-2">
                    {busy ? 'Sending…' : <>Send message <Icon.Arrow className="w-4 h-4"/></>}
                  </button>
                </div>
                {error && <p className="text-[13px]" style={{ color: '#B42318' }}>{error}</p>}
              </form>
            )}
          </div>
        </div>
      </div>
    </Page>
  );
}
window.ContactPage2 = ContactPage2;