function ApproachPage({ openTour, navigate }) {
  return (
    <main className="page-enter" data-screen-label="02 Approach">
      <section className="container" style={{ paddingTop: 24 }}>
        <div className="page-banner">
          <img src="media/curriculum-banner.webp" alt="Children engaged in creative play" />
          <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)' }}>Our approach</div>
            <h1 style={{ marginTop: 12 }}>The Creative Curriculum, for inquisitive young Dubai learners.</h1>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container curr-grid">
          <div>
            <h2>An award-winning, US-developed framework — translated into a warm Dubai classroom.</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 18 }}>
              The Creative Curriculum is built on <strong>75 years</strong> of child-development research. It's <strong>hands-on, inquiry-based and collaborative</strong>, and it's fully aligned to the United States Federal Head Start Child Development Framework and Common Core State Standards.
            </p>
            <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 14 }}>
              Translated into our day, that means children spend long stretches in real, uninterrupted play — investigating with materials, building things, asking questions, and learning to put feelings into words.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {[
              { c: 'var(--c-magenta)', n: '38', l: 'objectives across development & learning' },
              { c: 'var(--c-teal)',    n: '10', l: 'domains, from social-emotional to the arts' },
              { c: 'var(--c-green)',   n: 'Head Start', l: 'aligned to US Federal framework' },
              { c: 'var(--c-red)',     n: 'Common Core', l: 'aligned to state standards' },
            ].map((s,i) => (
              <div key={i} style={{ padding: 24, borderRadius: 22, background: 'white', border: '1px solid var(--line)' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: s.c, marginBottom: 14 }} />
                <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 24 }}>{s.n}</div>
                <div style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 6 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 10 domains */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container">
          <SectionHeader
            eyebrow="The 38 objectives, simplified"
            title="Ten domains. One whole child."
            sub="Every observation, learning story and family update we share is tied back to one of these — so families always know what their child is working on."
          />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
            {[
              ['Social–emotional', 'var(--c-magenta)', 'Self-regulation, friendships, identity'],
              ['Physical',         'var(--c-teal)',    'Gross & fine motor coordination'],
              ['Language',         'var(--c-green)',   'Listening, speaking, vocabulary'],
              ['Cognitive',        'var(--c-red)',     'Thinking, problem-solving, memory'],
              ['Literacy',         'var(--c-sun)',     'Print awareness, phonics, writing'],
              ['Mathematics',      'var(--c-sky)',     'Number, pattern, measurement'],
              ['Science & Tech',   'var(--c-magenta)', 'Inquiry, observation, tools'],
              ['Social Studies',   'var(--c-teal)',    'Self, family, community, place'],
              ['The Arts',         'var(--c-green)',   'Visual, music, drama, movement'],
              ['English Lang.',    'var(--c-red)',     'For non-English-home learners'],
            ].map(([t, c, sub]) => (
              <div key={t} style={{ padding: 20, borderRadius: 18, background: 'var(--cream)', border: '1px solid var(--line)' }}>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: c, marginBottom: 12 }} />
                <div style={{ fontWeight: 700, fontSize: 15 }}>{t}</div>
                <div style={{ color: 'var(--ink-2)', fontSize: 13, marginTop: 4 }}>{sub}</div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 24, fontSize: 13, color: 'var(--muted)' }}>Source: <em>The Creative Curriculum</em>, ideaelc.ae/the-creative-curriculum.</p>
        </div>
      </section>

      {/* A day at IDEA */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="A typical day" title="What does a day in our classrooms actually look like?" align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
            {[
              { t: 'Morning meeting', s: 'Songs, calendar, weather, choice-time planning.', c: 'var(--c-magenta)' },
              { t: 'Choice & inquiry', s: 'Long uninterrupted play in art, blocks, sand, library, dramatic-play areas.', c: 'var(--c-teal)' },
              { t: 'Snack & outdoor', s: 'Garden time — climbing, gardening, tricycle track, mud-play.', c: 'var(--c-green)' },
              { t: 'Small-group focus', s: 'Phonics, numeracy, language enrichment in small groups.', c: 'var(--c-red)' },
              { t: 'Lunch & rest', s: 'Family-style lunch, calm music, sleep for the youngest.', c: 'var(--c-sun)' },
              { t: 'Languages', s: 'Arabic ×2 / French ×1 weekly *', c: 'var(--c-sky)' },
              { t: 'Story & reflection', s: 'Books, drawing, what-did-we-notice-today moments.', c: 'var(--c-magenta)' },
              { t: 'Handover home', s: 'Daily photo updates and a chat with your teacher.', c: 'var(--c-teal)' },
            ].map((d, i) => (
              <div key={i} style={{ padding: 22, borderRadius: 22, background: 'white', border: '1px solid var(--line)' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                  <span className="chip" style={{ background: 'transparent', border: '1px solid var(--line)' }}>
                    <span className="chip-dot" style={{ background: d.c }} /> Step {i + 1}
                  </span>
                </div>
                <h4 style={{ fontFamily: 'Fredoka', fontSize: 18 }}>{d.t}</h4>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 6 }}>{d.s}</p>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 18, fontSize: 13, color: 'var(--muted)' }}>* Reported by third-party reviews — to be confirmed with the centre.</p>
        </div>
      </section>

      <CtaBand openTour={openTour} title="See the curriculum in action." sub="Walk a real classroom morning with our principal — it's the fastest way to feel the difference." />
      <div style={{ height: 80 }} />
    </main>
  );
}
window.ApproachPage = ApproachPage;