const { Button, Card, Field, Input, Select, Radio, Checkbox, Icon } = window.AILifeDesignSystem_20a7b9;

function WaitlistPage({ go }) {
  const [done, setDone] = React.useState(false);
  const [interest, setInterest] = React.useState('nourishmom');
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [err, setErr] = React.useState('');

  const submit = e => {
    e.preventDefault();
    if (!email.includes('@')) { setErr('Enter a valid email address.'); return; }
    setErr(''); setDone(true);
  };

  return (
    <main className="sec"><div className="wrap" style={{ maxWidth:'var(--width-narrow)' }}>
      {done ? (
        <Card variant="tinted" padding="lg" className="reveal">
          <Icon name="check-circle-2" size={26} style={{ color:'var(--text-brand)' }} />
          <h1 className="display--3" style={{ marginTop:'var(--space-4)' }}>You're on the list.</h1>
          <p className="prose" style={{ marginTop:'var(--space-3)' }}>
            We'll let you know when there is something useful to share{name ? `, ${name}` : ''}.
          </p>
          <div style={{ marginTop:'var(--space-6)' }}>
            <Button variant="secondary" onClick={() => go('home')}>Back to AILife</Button>
          </div>
        </Card>
      ) : (
        <>
          <h1 className="display--2">Join the AILife waitlist.</h1>
          <p className="lead" style={{ marginTop:'var(--space-4)' }}>
            Be among the first to hear about NourishMom and future AILife products.
          </p>
          <Card padding="lg" style={{ marginTop:'var(--space-10)' }}>
            <form onSubmit={submit} style={{ display:'grid', gap:'var(--space-6)' }}>
              <Field label="First name" htmlFor="fn">
                <Input id="fn" value={name} onChange={e => setName(e.target.value)} placeholder="Amina" />
              </Field>
              <Field label="Email address" htmlFor="em" error={err}
                     hint="Only used for AILife product updates.">
                <Input id="em" type="email" invalid={!!err} value={email}
                       onChange={e => setEmail(e.target.value)} placeholder="you@example.com" />
              </Field>
              <Field label="Country" htmlFor="co">
                <Select id="co" placeholder="Select a country"
                        options={['United Arab Emirates','Saudi Arabia','Other']} />
              </Field>
              <div>
                <div style={{ font:'var(--text-body-sm)', fontWeight:600, marginBottom:'var(--space-3)' }}>I am interested in</div>
                <div style={{ display:'grid', gap:'var(--space-3)' }}>
                  <Radio name="int" value="nourishmom" checked={interest==='nourishmom'} onChange={setInterest} label="NourishMom" />
                  <Radio name="int" value="future" checked={interest==='future'} onChange={setInterest} label="Future AILife products" />
                  <Radio name="int" value="partner" checked={interest==='partner'} onChange={setInterest} label="Partnerships" />
                </div>
              </div>
              <Checkbox label="Send me product updates"
                        description="Joining does not require consent to research, model improvement or commercial personalization."
                        defaultChecked />
              <Button type="submit" size="lg" fullWidth>Join the waitlist</Button>
            </form>
          </Card>
          <p className="muted" style={{ font:'var(--text-caption)', marginTop:'var(--space-5)' }}>
            By joining, you agree to receive AILife product updates. You can unsubscribe at any time.
          </p>
        </>
      )}
    </div></main>
  );
}
Object.assign(window, { WaitlistPage });