function AdmissionsPage({ openTour }) {
  const [openFaq, setOpenFaq] = React.useState(0);
  const faqs = [
    { q: 'What is the minimum starting age?', a: 'The site headline states 9 months. The curriculum copy refers to "45 days" and an expanded baby unit accepting infants from 45 days is in transition. We will confirm the current accepted minimum age with you at the tour.' },
    { q: 'Do you offer full-day or half-day?', a: 'Full-day is standard; half-day options exist for some programmes. Hours and exact session times are confirmed at the tour.' },
    { q: 'How much are the fees?', a: 'Fees are on request — we provide a current schedule when you enquire. Please do not rely on third-party fee ranges quoted on listing sites; they conflict and aren\'t official.' },
    { q: 'Are you KHDA-registered?', a: 'Yes. IDEA Early Learning Center is registered with the KHDA Early Childhood Centre directory (CenterID 501848).' },
    { q: 'What languages are taught?', a: 'English is the language of instruction. Arabic and French enrichment sessions are part of the timetable (reported by third-party reviews — to be confirmed term-by-term).' },
    { q: 'Where exactly is the centre?', a: 'Victory Heights, within Dubai Sports City. Ten minutes from Arabian Ranches, Motor City, JGE, JVT, Remraam and Dubailand. The exact villa & map link will be confirmed before publishing.' },
  ];

  return (
    <main className="page-enter" data-screen-label="05 Admissions">
      <section className="container" style={{ paddingTop: 24 }}>
        <div className="page-banner">
          <img src="media/admissions-banner.webp" alt="Admissions at IDEA ELC" />
          <div className="pb-content">
            <div className="idea-rule" style={{ marginBottom: 16 }}><span/><span/><span/><span/></div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,.75)' }}>Admissions & fees</div>
            <h1 style={{ marginTop: 12 }}>A simple, parent-friendly admissions process.</h1>
          </div>
        </div>
      </section>

      {/* Steps */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="How it works" title="Four steps. Two visits. One easy yes-or-no." align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {[
              { n: '01', t: 'Book a tour', s: 'Spend 45 minutes with our principal. See the rooms. Ask anything.', c: 'var(--c-magenta)' },
              { n: '02', t: 'Trial visit', s: 'Your child joins their age group for a short trial morning — at no obligation.', c: 'var(--c-teal)' },
              { n: '03', t: 'Application', s: 'Submit the application form, child documents and proof of residence.', c: 'var(--c-green)' },
              { n: '04', t: 'Confirm & settle', s: 'Place confirmed. We agree a gentle settling-in schedule.', c: 'var(--c-red)' },
            ].map((s, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 24, padding: 24, border: '1px solid var(--line)', position: 'relative' }}>
                <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 36, color: s.c, lineHeight: 1 }}>{s.n}</div>
                <h3 style={{ marginTop: 12, fontSize: 20 }}>{s.t}</h3>
                <p style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 8 }}>{s.s}</p>
                {i === 0 && (
                  <button className="btn btn-primary btn-sm" onClick={() => openTour()} style={{ marginTop: 18 }}>
                    <Icon.Calendar size={14} /> Book a Tour
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fees + documents */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 36 }}>
          <div style={{ background: 'var(--ink)', color: 'white', borderRadius: 28, padding: 36, position: 'relative', overflow: 'hidden' }}>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,.7)' }}>Fees</div>
            <h2 style={{ color: 'white', marginTop: 12, fontSize: 36 }}>Fees on request.</h2>
            <p style={{ color: 'rgba(255,255,255,.75)', marginTop: 12, maxWidth: 440 }}>
              We share our current, official fee schedule directly with families once you've enquired. We deliberately don't publish third-party ranges because they conflict and aren't current.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="mailto:admissions@ideaelc.ae?subject=Fee%20request">Request fees</a>
              <a className="btn btn-light" href="tel:8004332352" style={{ background: 'transparent', color: 'white', borderColor: 'rgba(255,255,255,.3)' }}><Icon.Phone /> 800 4332 352</a>
            </div>
            <svg style={{ position: 'absolute', right: -40, bottom: -40, opacity: .15 }} width="240" height="240" viewBox="0 0 240 240">
              <circle cx="160" cy="160" r="80" fill="var(--c-sun)" />
              <circle cx="80" cy="180" r="40" fill="var(--c-teal)" />
            </svg>
          </div>
          <div>
            <div className="eyebrow">What to bring</div>
            <h2 style={{ marginTop: 12, fontSize: 32 }}>Application documents</h2>
            <ul className="feature-list" style={{ marginTop: 24 }}>
              <li><span className="bullet" style={{ background: 'var(--c-magenta)' }}><Icon.Check size={14} /></span><div><strong>Child's passport & residence visa</strong> copies</div></li>
              <li><span className="bullet" style={{ background: 'var(--c-teal)' }}><Icon.Check size={14} /></span><div><strong>Emirates ID</strong> (parents & child if issued)</div></li>
              <li><span className="bullet" style={{ background: 'var(--c-green)' }}><Icon.Check size={14} /></span><div><strong>Vaccination card</strong> (up-to-date)</div></li>
              <li><span className="bullet" style={{ background: 'var(--c-red)' }}><Icon.Check size={14} /></span><div><strong>Recent passport-style photo</strong></div></li>
              <li><span className="bullet" style={{ background: 'var(--c-sun)' }}><Icon.Check size={14} /></span><div><strong>Proof of residence</strong> (Ejari / DEWA / tenancy)</div></li>
            </ul>
            <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 16 }}>Document list to be confirmed with the centre admissions team.</p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container" style={{ maxWidth: 880 }}>
          <SectionHeader eyebrow="Common questions" title="Quick answers, before the tour." align="center" />
          <div style={{ display: 'grid', gap: 10 }}>
            {faqs.map((f, i) => (
              <button key={i} onClick={() => setOpenFaq(openFaq === i ? -1 : i)} style={{ background: 'white', border: '1px solid var(--line)', borderRadius: 18, padding: '20px 24px', textAlign: 'left', display: 'block', width: '100%' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                  <strong style={{ fontSize: 17 }}>{f.q}</strong>
                  <span style={{ width: 28, height: 28, borderRadius: '50%', background: openFaq === i ? 'var(--c-red)' : 'var(--cream-2)', color: openFaq === i ? 'white' : 'var(--ink)', display: 'grid', placeItems: 'center', transition: 'all .15s', flex: 'none', transform: openFaq === i ? 'rotate(45deg)' : 'none' }}>+</span>
                </div>
                {openFaq === i && (
                  <p style={{ color: 'var(--ink-2)', marginTop: 12, fontSize: 15 }}>{f.a}</p>
                )}
              </button>
            ))}
          </div>
        </div>
      </section>

      <CtaBand openTour={openTour} title="Ready to start the conversation?" sub="The tour is the first — and only — step we ask families to commit to." />
      <div style={{ height: 80 }} />
    </main>
  );
}
window.AdmissionsPage = AdmissionsPage;