/* Contact page — simple form posting to app.gen-data.io waitlist endpoint */
function ContactPage() {
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [message, setMessage] = 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, name, company, message, 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(''); 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">CONTACT</div>
          <h1 className="mt-4 text-[40px] sm:text-[52px] leading-[1.05] font-semibold tracking-[-0.025em]">
            Talk to us.
          </h1>
          <p className="mt-6 text-[16px] text-mute leading-relaxed max-w-xl">
            Demo access, partnership questions, or research collaboration — 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>
              <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">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>
              <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;