function Faq() {
  const qs = [['Who can enter?', 'Any Amity student aged 9 to 18. Juniors compete in the 9–12 division, seniors in the 13–18 division. No previous debating experience is required.'], ['Do students need a team?', 'No. Enter individually and the conveners will place you in a team of three within your division, or enter with two named teammates.'], ['What does it cost?', 'The programme is arranged by the school; there is no separate entry fee for students. Confirmation of your place is sent by email.'], ['What should students bring?', 'A notebook and pen. All motions, briefing packs and session materials are provided by IYS Festival Ltd.'], ['Are certificates issued?', 'Every participant receives a participation certificate from Amity International School and IYS Festival Ltd. Trophies go to the winning teams and best speakers in each division.']];
  return (
    <Section id="faq" eyebrow="Before you register" title="Questions parents ask">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(300px,1fr))', gap: 20 }}>
        {qs.map(([q, a]) => (
          <Card key={q} variant="plain">
            <h3 style={{ font: 'var(--type-h3)', color: 'var(--text-heading)', margin: 0 }}>{q}</h3>
            <p style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)', margin: '10px 0 0' }}>{a}</p>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function RegisterScreen({ onSubmitted }) {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ name: '', dob: '', cls: '', house: '', division: '', team: '', guardian: '', relation: '', mobile: '', email: '', notes: '' });
  const [agree, setAgree] = React.useState(false);
  const [media, setMedia] = React.useState(false);
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const steps = ['Student details', 'Parent details', 'Confirm'];
  const complete = form.name && form.cls && form.division;
  const contactDone = form.guardian && form.mobile && form.email;
  return (
    <div>
      <div style={{ background: 'var(--surface-tint)', borderBottom: '1px solid var(--amity-navy-100)', padding: '40px 0' }}>
        <Wrap>
          <div style={{ font: 'var(--type-eyebrow)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--intent-alert)' }}>Registration closes 20 October 2026</div>
          <h1 style={{ font: 'var(--type-h1)', color: 'var(--text-heading)', margin: '8px 0 0' }}>Register for the championship</h1>
          <p style={{ font: 'var(--type-body)', color: 'var(--neutral-700)', maxWidth: '62ch', marginTop: 12 }}>Registration covers the training week and the Amity International Debate Championship. You will receive confirmation of the division and team placement by email within three working days.</p>
        </Wrap>
      </div>
      <Wrap style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.6fr) minmax(0,.8fr)', gap: 40, padding: '48px 24px' }} className="reg-grid">
        <Card variant="raised" padding="32px">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
            {steps.map((s, i) => (
              <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: i <= step ? 1 : .45 }}>
                <span style={{ width: 24, height: 24, borderRadius: '50%', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: i <= step ? 'var(--accent-primary)' : 'var(--neutral-200)', color: i <= step ? '#fff' : 'var(--neutral-500)', font: 'var(--type-label)', fontSize: 12 }}>{i + 1}</span>
                <span style={{ font: 'var(--type-label)', color: 'var(--text-heading)' }}>{s}</span>
              </div>
            ))}
          </div>
          {step === 0 && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 20 }}>
              <Input label="Student's full name" required placeholder="As entered on school records" value={form.name} onChange={set('name')} />
              <Input label="Date of birth" type="date" required value={form.dob} onChange={set('dob')} />
              <Select label="Class and section" required options={['Class IV', 'Class V', 'Class VI', 'Class VII', 'Class VIII', 'Class IX', 'Class X', 'Class XI', 'Class XII']} value={form.cls} onChange={set('cls')} />
              <Select label="House" options={['Blue House', 'Yellow House', 'Red House', 'Green House']} value={form.house} onChange={set('house')} />
              <Select label="Division" required options={['Junior · 9–12 years', 'Senior · 13–18 years']} help="Confirmed by the conveners against date of birth" value={form.division} onChange={set('division')} />
              <Select label="Team preference" options={['Place me in a team', 'I am entering with named teammates']} value={form.team} onChange={set('team')} />
            </div>
          )}
          {step === 1 && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: 20 }}>
              <Input label="Parent / guardian name" required value={form.guardian} onChange={set('guardian')} />
              <Select label="Relationship" options={['Mother', 'Father', 'Guardian']} value={form.relation} onChange={set('relation')} />
              <Input label="Mobile number" type="tel" required placeholder="+91" value={form.mobile} onChange={set('mobile')} />
              <Input label="Email address" type="email" required help="Confirmation and briefing packs are sent here" value={form.email} onChange={set('email')} />
              <Input label="Anything the conveners should know" multiline rows={3} placeholder="Medical or access requirements, previous debating experience" value={form.notes} onChange={set('notes')} style={{ gridColumn: '1 / -1' }} />
            </div>
          )}
          {step === 2 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div style={{ background: 'var(--surface-sunken)', border: '1px solid var(--border-subtle)', borderRadius: 4, padding: 20 }}>
                <FactList rows={[['Student', form.name || '—'], ['Class', form.cls || '—'], ['Division', form.division || '—'], ['Parent / guardian', form.guardian || '—'], ['Email', form.email || '—'], ['Mobile', form.mobile || '—']]} />
              </div>
              <Checkbox label="I confirm the information above is correct" description="Students are expected to attend all five training sessions and the championship day." checked={agree} onChange={e => setAgree(e.target.checked)} />
              <Checkbox label="I consent to photography during the programme" description="Photographs may be used in school communications and on the school's social media." checked={media} onChange={e => setMedia(e.target.checked)} />
            </div>
          )}
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--border-subtle)' }}>
            <Button variant="ghost" disabled={step === 0} onClick={() => setStep(s => Math.max(0, s - 1))}>Back</Button>
            {step < 2
              ? <Button onClick={() => setStep(s => s + 1)} disabled={step === 0 ? !complete : !contactDone} iconRight={<Icon name="arrow-right" size={16} />}>Continue</Button>
              : <Button variant="secondary" disabled={!agree} onClick={onSubmitted}>Submit registration</Button>}
          </div>
        </Card>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Card variant="tinted">
            <div style={{ font: 'var(--type-h3)', color: 'var(--text-heading)', marginBottom: 16 }}>Key dates</div>
            <FactList rows={[['Registration closes', '20 Oct 2026'], ['Places confirmed', '23 Oct 2026'], ['Training week', '26–30 Oct 2026'], ['Championship', '31 Oct 2026']]} />
          </Card>
          <Card variant="plain">
            <div style={{ font: 'var(--type-label)', color: 'var(--text-heading)' }}>What registration commits you to</div>
            <ul style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)', margin: '12px 0 0', paddingLeft: 18 }}>
              <li>Five training sessions, one each afternoon</li>
              <li>Three preliminary rounds on championship day</li>
              <li>Attendance at the awards ceremony</li>
            </ul>
          </Card>
          <Card variant="plain">
            <div style={{ font: 'var(--type-label)', color: 'var(--text-heading)' }}>Need help?</div>
            <p style={{ font: 'var(--type-body-sm)', color: 'var(--neutral-700)', margin: '12px 0 0' }}>Write to <a href="mailto:debate@amityinternational.edu.in">debate@amityinternational.edu.in</a> or ask your class teacher to register on your behalf.</p>
          </Card>
        </div>
      </Wrap>
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { Faq, RegisterScreen });