function ProgrammesPage({ openTour }) {
  const bands = [
    {
      id: 'infants', label: 'Infants & Toddlers', age: '9 months – 3 years', tier: 'Pre-KG entry path',
      color: 'var(--c-magenta)', img: 'media/gallery-08.webp',
      pitch: 'A gentle, sensory-rich introduction to days away from home. Sleep, feeding and comfort routines are respected — and learning starts the moment a baby tracks a face.',
      points: [
        ['Care', 'Attachment-led key-teacher system'],
        ['Routine', 'Naps, bottles, meals on your child\'s rhythm'],
        ['Learning', 'Sensory trays, music, language modelling'],
        ['Comms', 'Daily photo + sleep/meal update'],
      ]
    },
    {
      id: 'preKG', label: 'Pre-KG', age: '3 – 4 years',
      color: 'var(--c-teal)', img: 'media/gallery-03.webp',
      pitch: 'Children become explorers. Long uninterrupted play in art, blocks, dramatic-play, sand and water — with teachers gently weaving in language, numeracy and self-regulation.',
      points: [
        ['Care', '2 key teachers per group'],
        ['Routine', 'Full-day or half-day'],
        ['Learning', 'Inquiry projects, story sequencing, early letters'],
        ['Languages', 'Arabic ×2/wk · French ×1/wk *'],
      ]
    },
    {
      id: 'kg1', label: 'KG1', age: '4 – 5 years',
      color: 'var(--c-green)', img: 'media/gallery-01.webp',
      pitch: 'Friendships deepen. Children take more responsibility for their day — choosing projects, helping friends and beginning to read, write and reason about number.',
      points: [
        ['Care', 'Specialist subject teachers join the team'],
        ['Routine', 'Full-day with PE & enrichment'],
        ['Learning', 'Reading, writing, maths foundations'],
        ['Social', 'Project-based learning'],
      ]
    },
    {
      id: 'kg2', label: 'KG2', age: '5 – 6 years', tier: 'Big-school readiness',
      color: 'var(--c-red)', img: 'media/curriculum-03.webp',
      pitch: 'The bridge to Year 1 / Grade 1. Confident readers and curious mathematicians, ready for the next school — with a portfolio of learning to take with them.',
      points: [
        ['Care', 'Transition coaching with families'],
        ['Routine', 'Full-day, structured for primary'],
        ['Learning', 'Common-Core aligned readiness'],
        ['Outcome', 'KHDA-registered KG2 completion'],
      ]
    },
  ];

  return (
    <main className="page-enter" data-screen-label="03 Programmes">
      <section className="container" style={{ paddingTop: 24 }}>
        <div className="page-banner">
          <img src="media/admissions-banner.webp" alt="Children 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)' }}>Programmes & ages</div>
            <h1 style={{ marginTop: 12 }}>From first steps to first chapter books — four programmes, one curriculum.</h1>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gap: 24 }}>
            {bands.map((b, i) => (
              <article key={b.id} style={{ display: 'grid', gridTemplateColumns: i % 2 ? '1fr 1.1fr' : '1.1fr 1fr', gap: 32, alignItems: 'center', background: 'white', borderRadius: 32, padding: 24, border: '1px solid var(--line)' }}>
                <div style={{ aspectRatio: '4/3', borderRadius: 22, overflow: 'hidden', position: 'relative', order: i % 2 ? 2 : 1 }}>
                  <img src={b.img} alt={`${b.label} at IDEA ELC`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  <div style={{ position: 'absolute', left: 16, top: 16, display: 'flex', gap: 6 }}>
                    {b.tier && <span style={{ background: 'rgba(0,0,0,.55)', color: 'white', padding: '6px 10px', borderRadius: 999, fontSize: 12, fontWeight: 700 }}>{b.tier}</span>}
                  </div>
                </div>
                <div style={{ order: i % 2 ? 1 : 2, padding: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span style={{ width: 44, height: 44, borderRadius: 12, background: b.color, color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'Fredoka', fontWeight: 600, fontSize: 22 }}>{['I','D','E','A'][i]}</span>
                    <div>
                      <h2 style={{ fontSize: 28 }}>{b.label}</h2>
                      <div style={{ color: 'var(--ink-2)', fontWeight: 700, fontSize: 14 }}>{b.age}</div>
                    </div>
                  </div>
                  <p style={{ color: 'var(--ink-2)', fontSize: 17, marginTop: 16 }}>{b.pitch}</p>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 20 }}>
                    {b.points.map(([k, v]) => (
                      <div key={k} style={{ padding: '10px 14px', background: 'var(--cream)', borderRadius: 12, fontSize: 13 }}>
                        <div style={{ fontWeight: 700, color: 'var(--ink)', textTransform: 'uppercase', letterSpacing: '.08em', fontSize: 11 }}>{k}</div>
                        <div style={{ color: 'var(--ink-2)', marginTop: 2 }}>{v}</div>
                      </div>
                    ))}
                  </div>
                  <div style={{ marginTop: 22, display: 'flex', gap: 10 }}>
                    <button className="btn btn-primary btn-sm" onClick={() => openTour(b.id)}><Icon.Calendar size={14} /> Tour the {b.label.split(' ')[0]} room</button>
                    <a className="btn btn-light btn-sm" href="mailto:admissions@ideaelc.ae">Ask admissions</a>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <p style={{ marginTop: 22, fontSize: 13, color: 'var(--muted)' }}>* Languages & ratios reported by third-party reviews — to be confirmed with the centre. Minimum starting age in transition (9 months currently; 45-day-old infants planned per WSA).</p>
        </div>
      </section>

      {/* Enrichment */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container">
          <SectionHeader eyebrow="Beyond the classroom" title="Extra-curricular & holiday camps" sub="Additional enrichment, on-campus, at extra cost. Line-up to be confirmed each term." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
            {[
              ['Music & movement', 'var(--c-magenta)'],
              ['Football',          'var(--c-teal)'],
              ['Karate',            'var(--c-green)'],
              ['Dance',             'var(--c-red)'],
              ['Gymnastics',        'var(--c-sun)'],
            ].map(([t, c]) => (
              <div key={t} style={{ padding: 24, borderRadius: 22, background: 'var(--cream)', border: '1px solid var(--line)', textAlign: 'center' }}>
                <div style={{ width: 44, height: 44, borderRadius: 14, background: c, margin: '0 auto 12px' }} />
                <div style={{ fontWeight: 700 }}>{t}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 24, padding: 20, background: 'var(--cream-2)', borderRadius: 22, fontSize: 14, color: 'var(--ink-2)' }}>
            <strong>Holiday camps</strong> — themed weeks of activities through school breaks. Open to existing & visiting families.
          </div>
        </div>
      </section>

      <CtaBand openTour={openTour} />
      <div style={{ height: 80 }} />
    </main>
  );
}
window.ProgrammesPage = ProgrammesPage;