// Admissions page \u2014 process, fees note, FAQ, contact form.

function Admissions({ navigate, openTour }) {
  const steps = [
    { n: '01', t: 'Enquire', d: 'Tell us your child\u2019s age and your preferred branch. We\u2019ll route you to the right room.' },
    { n: '02', t: 'Visit',   d: 'Walk through with the branch manager. 45 minutes. Bring your child if you can.' },
    { n: '03', t: 'Register', d: 'Complete the registration pack and submit required documents.' },
    { n: '04', t: 'Start',   d: 'A gentle settling-in plan with the room educator before you start full-time.' },
  ];

  const faqs = [
    ['What ages do you take?', 'From 45 days to 6 years (across all UAE branches).'],
    ['Are you KHDA-licensed?', 'Yes \u2014 our Dubai branches are KHDA-licensed Early Childhood Centres. Abu Dhabi is ADEK-regulated. KHDA does not star-grade nurseries, so we don\u2019t publish a rating badge.'],
    ['What does it cost?', 'Fees vary by branch, age band, and attendance pattern. Please enquire for a current schedule \u2014 we don\u2019t publish unverified third-party figures.'],
    ['Are meals included?', 'The Dibber Meal is part of the curriculum. Confirm menu, allergens and inclusion with your branch.'],
    ['Do you support multiple languages?', 'English is the medium of instruction. Arabic provision is in line with UAE early-years requirements \u2014 confirm scope with your branch.'],
    ['How does settling-in work?', 'A short, staged settling-in plan with the room educator over the first week. Pace adjusted to your child.'],
  ];

  return (
    <div data-screen-label="06 Admissions">
      <section style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="wrap">
          <SectionHead eyebrow="Admissions"
                       title="Four simple steps."
                       lead="Most families enquire, tour, and register within two weeks. We try to make it gentle for you and for your child." />
        </div>
      </section>

      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="grid grid-4">
            {steps.map(s => (
              <div key={s.n} style={{ padding: '32px 28px', background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 18 }}>
                <div className="serif" style={{ fontSize: 48, color: 'var(--sprout)', fontWeight: 600, lineHeight: 1 }}>{s.n}</div>
                <div className="serif" style={{ fontSize: 22, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 16 }}>{s.t}</div>
                <p style={{ marginTop: 8, color: 'var(--muted)', fontSize: 14 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fees note */}
      <section className="section-sand">
        <div className="wrap-tight">
          <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 22, padding: '40px 44px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'center' }}>
            <div>
              <div className="eyebrow">Fees</div>
              <h2 className="serif" style={{ marginTop: 14, fontSize: 36 }}>Enquire for current fees.</h2>
            </div>
            <div>
              <p style={{ fontSize: 16, color: 'var(--ink)' }}>
                Fees vary by branch, age band, and whether you choose full-day or flexible attendance.
                We publish a current schedule on request \u2014 so you get the price for <em>your</em> branch and <em>your</em> child, not a stale aggregator estimate.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 20, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={openTour}>Request a fee schedule</button>
                <a className="btn btn-ghost" href="https://wa.link/95m057" target="_blank">Ask on WhatsApp</a>
              </div>
              <div className="flag mt-4">Third-party sources show AED 26k\u201349k \u2014 not used here</div>
            </div>
          </div>
        </div>
      </section>

      {/* Documents */}
      <section>
        <div className="wrap-tight">
          <SectionHead eyebrow="Documents" title="What we&rsquo;ll need from you." />
          <div className="grid grid-2 mt-8">
            {[
              ['Child', 'Birth certificate, recent passport photos, vaccination record, Emirates ID or passport copy.'],
              ['Parent', 'Emirates ID or passport copy, contact details, employer letter where applicable.'],
            ].map(([k, v]) => (
              <div key={k} style={{ padding: '24px 26px', background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 16 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--dibber-green-2)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{k}</div>
                <p style={{ marginTop: 8, color: 'var(--ink)', fontSize: 15 }}>{v}</p>
              </div>
            ))}
          </div>
          <div className="flag mt-4">Final document list \u2014 client to confirm per branch</div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section-sand">
        <div className="wrap-tight">
          <SectionHead eyebrow="Common questions" title="Things parents ask." align="center" />
          <div className="mt-12" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {faqs.map(([q, a]) => <FAQ key={q} q={q} a={a} />)}
          </div>
        </div>
      </section>

      <section>
        <div className="wrap">
          <div style={{ background: 'var(--dibber-green)', color: 'var(--cream)', borderRadius: 28, padding: '56px 52px', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -40, bottom: -40, opacity: 0.1 }}><DibberMark size={260} color="#FBF8F0" /></div>
            <div style={{ position: 'relative', maxWidth: 640 }}>
              <div className="eyebrow on-dark">Ready when you are</div>
              <h2 className="serif" style={{ marginTop: 14, color: 'var(--cream)' }}>Start with a 45-minute tour.</h2>
              <p style={{ marginTop: 14, color: 'rgba(251,248,240,0.85)', maxWidth: 520, fontSize: 17 }}>
                We&rsquo;ll show you a real classroom, a real day, and answer every question \u2014 ratios, allergies, settling-in, fees.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap' }}>
                <button className="btn btn-sun" onClick={openTour}>Book a tour</button>
                <a className="btn btn-ghost-light" href="https://wa.link/95m057" target="_blank">WhatsApp us</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function FAQ({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden' }}>
      <button onClick={() => setOpen(!open)} style={{ width: '100%', padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', textAlign: 'left' }}>
        <span className="serif" style={{ fontSize: 18, color: 'var(--dibber-green)', fontWeight: 600 }}>{q}</span>
        <span style={{ fontSize: 22, color: 'var(--dibber-green-2)', transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .2s' }}>+</span>
      </button>
      {open && (
        <div style={{ padding: '0 24px 22px', color: 'var(--muted)', fontSize: 15 }}>{a}</div>
      )}
    </div>
  );
}

Object.assign(window, { Admissions });