// pages-3.jsx — Admissions, About, Contact, and root App
const AdmissionsPage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  const [openFaq, setOpenFaq] = React.useState(0);
  return (
    <div className="page-enter">
      <section className="hero" style={{ paddingTop: 64 }}>
        <div className="container">
          <span className="eyebrow">Admissions</span>
          <h1 style={{ maxWidth: 920, marginTop: 18, marginBottom: 24 }}>
            Four steps from enquiry to your child's first day.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 720, lineHeight: 1.55 }}>
            We move at your pace. Most families finish the process in two to three weeks; some take longer
            and that's fine. The steps below stay the same.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {D.admissionsSteps.map((s, i) => (
              <div key={i} className="card" style={{ padding: 28, position: 'relative' }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, color: 'var(--leaf)', lineHeight: 1, marginBottom: 18 }}>
                  {s.n}
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 10 }}>{s.t}</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Fees */}
      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">Fees</span>
              <h2 style={{ margin: '12px 0 22px' }}>We share the fee structure on request.</h2>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 16 }}>
                Fees vary by branch and age group and are set under the Kids First Group framework, within
                Dubai's KHDA fee policy. We share the current structure as part of your enquiry — there are
                no hidden levies.
              </p>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 22 }}>
                Ask us about staggered start dates, sibling discounts, and full-day vs. half-day options
                during your tour.
              </p>
              <button className="btn btn-primary btn-lg" onClick={onBookTour}>
                Request the fee structure <Icon name="arrow" size={16} />
              </button>
            </div>
            <div style={{ padding: 32, background: 'var(--paper)', borderRadius: 'var(--r-xl)', border: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {[
                  ["Registration", "One-off · refundable conditions apply"],
                  ["Term fees", "Across three terms · per age group"],
                  ["Settling-in week", "Included in your child's first term"],
                  ["Sibling discount", "Available — confirm at enquiry"]
                ].map(([l, v], i) => (
                  <div key={i} style={{ padding: '14px 0', borderBottom: i < 3 ? '1px solid var(--line)' : '0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                    <div>
                      <div style={{ fontWeight: 600, color: 'var(--brand-brown)', fontSize: 14 }}>{l}</div>
                      <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{v}</div>
                    </div>
                    <span style={{ fontSize: 11, fontFamily: 'ui-monospace, monospace', color: 'var(--muted)', letterSpacing: '0.05em' }}>BY ENQUIRY</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQs */}
      <section className="section">
        <div className="container">
          <div className="shead">
            <span className="eyebrow">FAQs</span>
            <h2>Things parents most often ask.</h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, maxWidth: 880 }}>
            {D.faqs.map((f, i) => (
              <div key={i} style={{
                background: openFaq === i ? 'var(--paper-soft)' : 'var(--paper)',
                border: '1px solid ' + (openFaq === i ? 'var(--line-strong)' : 'var(--line)'),
                borderRadius: 'var(--r-md)',
                overflow: 'hidden',
                transition: 'all .2s ease'
              }}>
                <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  style={{ width: '100%', padding: '20px 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textAlign: 'left' }}>
                  <span style={{ fontWeight: 600, fontSize: 16, color: 'var(--brand-brown)', fontFamily: 'var(--serif)' }}>{f.q}</span>
                  <span style={{ transform: openFaq === i ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform .2s', color: 'var(--ink-soft)' }}>
                    <Icon name="chevDown" size={18} />
                  </span>
                </button>
                {openFaq === i && (
                  <div style={{ padding: '0 24px 22px', fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6 }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ---------- About ----------
const AboutPage = ({ navigate, onBookTour }) => (
  <div className="page-enter">
    <section className="hero" style={{ paddingTop: 64 }}>
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="eyebrow">About Odyssey</span>
            <h1 style={{ marginTop: 18, marginBottom: 24, fontSize: 'clamp(40px, 5vw, 70px)' }}>
              We exist for artistic parents raising the <em style={{ color: 'var(--leaf)', fontStyle: 'italic' }}>creative leaders</em> of tomorrow.
            </h1>
            <p style={{ fontSize: 18, color: 'var(--ink-soft)', lineHeight: 1.55, marginBottom: 28 }}>
              Odyssey Nursery began with a single Dubai campus and a simple conviction: that early-years
              learning should be done <em>with</em> children, not <em>to</em> them. Twelve years on, that
              conviction runs across six Dubai branches and a faculty of Reggio-trained educators.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button className="btn btn-primary" onClick={onBookTour}>Book a tour <Icon name="arrow" size={14} /></button>
              <button className="btn btn-ghost" onClick={() => navigate("curriculum")}>Read our approach</button>
            </div>
          </div>
          <div className="photo" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-xl)' }}>
            <img src="assets/about-us.webp" alt="Odyssey staff and child" />
            <span className="consent-badge"><Icon name="shield" size={12} /> Consent-cleared</span>
          </div>
        </div>
      </div>
    </section>

    <section className="section" style={{ background: 'var(--paper-soft)' }}>
      <div className="container">
        <div className="shead-row">
          <div className="shead">
            <span className="eyebrow">Our Story · Timeline</span>
            <h2>A short history.</h2>
          </div>
          <span className="chip"><Icon name="sun" size={12} /> Established year TBC with client</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderRadius: 'var(--r-lg)', overflow: 'hidden', border: '1px solid var(--line)' }}>
          {[
            { y: "2013", e: "First Dubai branch", d: "Burj Al Arab opens in Umm Al Sheif, KHDA-listed." },
            { y: "2015–18", e: "Reggio expansion", d: "Umm Suqeim adds the French-immersion stream; Living Legends opens." },
            { y: "2019–22", e: "JBR + Meydan", d: "Beachfront and District One campuses join the group." },
            { y: "2023+", e: "City Walk · SZR", d: "Sixth Dubai branch, name being finalised with the client." }
          ].map((s, i) => (
            <div key={i} style={{ padding: 28, background: 'var(--paper)', borderRight: i < 3 ? '1px solid var(--line)' : 0 }}>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 32, color: 'var(--leaf)', marginBottom: 8 }}>{s.y}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--brand-brown)', marginBottom: 10 }}>{s.e}</div>
              <p style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
            { t: "Kids First Group", d: "We're part of the Kids First Group portfolio — the UAE's larger early-years operator. Shared safeguarding, HR and training systems sit behind every campus.", l: "kidsfirstgroup.com" },
            { t: "Great Place to Work", d: "Self-attributed certification (current year confirmation pending). Our staff retention drives the consistency families notice term to term.", l: null },
            { t: "Parent Education Academy", d: "Live talks and workshops for Odyssey parents — from sleep and weaning to early bilingualism — run by the wider Kids First network.", l: "pea.kidsfirstgroup.com" }
          ].map((p, i) => (
            <div key={i} className="card" style={{ padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--paper-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={["heart", "star", "book"][i]} size={20} />
                </div>
                <h3 style={{ fontSize: 19 }}>{p.t}</h3>
              </div>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.6, marginBottom: p.l ? 16 : 0 }}>{p.d}</p>
              {p.l && <a href={"https://" + p.l} target="_blank" rel="noopener" style={{ fontSize: 13, color: 'var(--brand-brown)', fontWeight: 600 }}>{p.l} ↗</a>}
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Testimonial placeholder */}
    <section className="section" style={{ background: 'var(--paper-soft)' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <span className="eyebrow">Parent testimonials</span>
          <div className="quote" style={{ marginTop: 22, marginBottom: 22 }}>
            Permissioned parent testimonials will appear here. Until written consent is on file, we leave the space honestly empty.
          </div>
          <span className="chip"><Icon name="shield" size={12} /> Awaiting consent forms · placeholder only</span>
        </div>
      </div>
    </section>
  </div>
);

// ---------- Contact ----------
const ContactPage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  return (
    <div className="page-enter">
      <section className="hero" style={{ paddingTop: 64, paddingBottom: 24 }}>
        <div className="container">
          <span className="eyebrow">Contact</span>
          <h1 style={{ maxWidth: 920, marginTop: 18, marginBottom: 24 }}>How can we help today?</h1>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 680, lineHeight: 1.55 }}>
            We reply within one working day. WhatsApp is usually fastest; the toll-free line is staffed
            during admissions hours.
          </p>
        </div>
      </section>

      <section className="section-sm">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {[
              { ic: "phone", t: "Call us", v: "800-REGGIO", h: D.contact.mobile, href: "tel:800-REGGIO" },
              { ic: "wa", t: "WhatsApp", v: D.contact.mobileShort, h: "Usually fastest", href: D.contact.waLink },
              { ic: "mail", t: "Email", v: D.contact.emailGeneral, h: "Group admissions", href: "mailto:" + D.contact.emailGeneral }
            ].map((c, i) => (
              <a key={i} href={c.href} target={c.ic === "wa" ? "_blank" : undefined} rel="noopener"
                className="card" style={{ padding: 28, display: 'block', textDecoration: 'none' }}>
                <div style={{ width: 48, height: 48, borderRadius: 12, background: 'var(--paper-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, color: 'var(--brand-brown)' }}>
                  <Icon name={c.ic} size={22} />
                </div>
                <div className="eyebrow brown">{c.t}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 24, color: 'var(--brand-brown)', marginTop: 8 }}>{c.v}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 6 }}>{c.h}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div className="shead">
            <span className="eyebrow">By branch</span>
            <h2>Direct lines for each campus.</h2>
            <p>Mobile <strong style={{ color: 'var(--brand-brown)' }}>+971 52 347 2059</strong> reaches all branches.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            {D.branches.map(b => (
              <div key={b.id} style={{ padding: 22, background: 'var(--paper)', borderRadius: 'var(--r-md)', border: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center' }}>
                <div>
                  <h3 style={{ fontSize: 19, marginBottom: 4 }}>{b.name}</h3>
                  <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginBottom: 10 }}>{b.address}</div>
                  <div style={{ display: 'flex', gap: 14, fontSize: 13, color: 'var(--brand-brown)', fontWeight: 500, flexWrap: 'wrap' }}>
                    <a href={"tel:" + b.tel}><Icon name="phone" size={12} /> {b.phone}</a>
                    <a href={"mailto:" + b.email}><Icon name="mail" size={12} /> Email branch</a>
                  </div>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={() => navigate("branch", b.id)}>
                  Visit <Icon name="arrow" size={12} />
                </button>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { AdmissionsPage, AboutPage, ContactPage });