// Programmes page \u2014 age bands + attendance patterns + camps.

function Programmes({ navigate, openTour }) {
  return (
    <div data-screen-label="03 Programmes">
      <section style={{ paddingTop: 56, paddingBottom: 32 }}>
        <div className="wrap">
          <SectionHead eyebrow="Programmes &amp; ages"
                       title="From 45 days old to school-ready."
                       lead="Four age bands across all branches, with full-day and flexible attendance options, plus seasonal camps. Drop-off from 7:00 AM at some branches; pick-up by 6:00 PM." />
        </div>
      </section>

      {/* Age bands */}
      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="grid grid-2" style={{ gap: 32 }}>
            {AGE_BANDS.map((a, i) => (
              <div key={a.id} style={{ padding: '36px 36px', background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 22, position: 'relative', overflow: 'hidden' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--dibber-green-2)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{a.label}</div>
                  <div className="serif" style={{ fontSize: 38, color: 'var(--sprout)', fontWeight: 600 }}>0{i+1}</div>
                </div>
                <div className="serif" style={{ fontSize: 34, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 6 }}>{a.range}</div>
                <p style={{ marginTop: 16, color: 'var(--ink)', fontSize: 16 }}>{a.desc}</p>
                <div style={{ marginTop: 24, padding: '14px 16px', background: 'var(--sand)', borderRadius: 12, fontSize: 13, color: 'var(--muted)' }}>
                  Available at all six branches. Infant rooms with attached sleeping areas at Damac Hills and Pavilion.
                </div>
              </div>
            ))}
          </div>
          <div className="flag mt-6">Aggregator sources have said &ldquo;birth to 4 yrs&rdquo; \u2014 we use the official &ldquo;45 days to 6 yrs&rdquo; on edu.dibber.com.</div>
        </div>
      </section>

      {/* Attendance */}
      <section className="section-sand">
        <div className="wrap">
          <SectionHead eyebrow="Attendance" title="Choose how often, and how long." lead="A schedule that fits your family. Many branches offer flexible attendance \u2014 confirm exact options on tour." />
          <div className="grid grid-2 mt-12">
            {PROGRAMMES.map((p, i) => (
              <div key={p.name} style={{ padding: '28px 32px', background: 'var(--cream)', borderRadius: 18, border: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'flex-start' }}>
                <div>
                  <div className="serif" style={{ fontSize: 26, color: 'var(--dibber-green)', fontWeight: 600 }}>{p.name}</div>
                  <div style={{ marginTop: 8, color: 'var(--muted)', fontSize: 15 }}>{p.hours}</div>
                  <div style={{ marginTop: 14, fontSize: 13, color: 'var(--muted)' }}>{p.note}</div>
                </div>
                <div style={{ width: 60, height: 60, borderRadius: 30, background: 'var(--sprout-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <DibberMark size={28} color="#13452A" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* A day in the life timeline */}
      <section>
        <div className="wrap">
          <SectionHead eyebrow="A day at Dibber" title="What happens between drop-off and pick-up." />
          <div className="mt-12" style={{ position: 'relative' }}>
            {/* Vertical line */}
            <div style={{ position: 'absolute', left: 80, top: 0, bottom: 0, width: 2, background: 'var(--line)' }}></div>
            {[
              ['07:00', 'Complimentary early drop-off', 'A calm welcome at the door. Coats go in the cubby, shoes off, hellos to the educator.', '#7FB069'],
              ['08:30', 'Morning circle', 'Heart Culture begins the day. Songs, the calendar, what we\u2019ll do today, who is here, who is missing.', '#E89B3C'],
              ['09:30', 'Project explorations', 'Small groups work with the seven characters \u2014 numbers, language, art, nature, music, movement.', '#1F6B3B'],
              ['12:00', 'The Dibber Meal', 'Lunch as curriculum. Pouring, serving, naming, thanking. Conversation is the lesson.', '#B23A48'],
              ['13:00', 'Rest and quiet', 'Bedrolls out for the youngest. Quiet stories and individual reading for older children.', '#8FCAE0'],
              ['15:00', 'Outdoor + open studio', 'Climbing, drawing, role play, sandbox. Movement is treated as learning.', '#9D6BAA'],
              ['18:00', 'Pick-up', 'Goodbyes, the day\u2019s drawing taken home, a small story for tomorrow.', '#13452A'],
            ].map(([time, title, desc, color]) => (
              <div key={time} style={{ display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24, paddingLeft: 0, marginBottom: 28, position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                  <div className="serif" style={{ fontSize: 22, color: 'var(--dibber-green)', fontWeight: 600, paddingLeft: 0 }}>{time}</div>
                </div>
                <div style={{ position: 'relative', paddingLeft: 36 }}>
                  <div style={{ position: 'absolute', left: -8, top: 4, width: 18, height: 18, borderRadius: 9, background: color, border: '3px solid var(--cream)' }}></div>
                  <div className="serif" style={{ fontSize: 20, color: 'var(--dibber-green)', fontWeight: 600 }}>{title}</div>
                  <p style={{ marginTop: 4, color: 'var(--muted)', fontSize: 15, maxWidth: 600 }}>{desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Camps */}
      <section className="section-dark">
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow on-dark">Seasonal camps</div>
              <h2 className="serif" style={{ marginTop: 14 }}>Spring, Summer, Winter.</h2>
              <p className="lead" style={{ marginTop: 20, color: 'rgba(251,248,240,0.85)' }}>
                Half-term and holiday camps for ages from 2. Cooking, gardening, music, story \u2014
                same Nordic principles, slightly louder soundtrack.
              </p>
              <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
                <button className="btn btn-sun" onClick={openTour}>Reserve a place</button>
                <a className="btn btn-ghost-light" href="https://wa.link/95m057" target="_blank">Ask on WhatsApp</a>
              </div>
              <div className="flag mt-6" style={{ background: 'rgba(255,244,221,0.1)', color: '#F6D9A8', borderColor: 'rgba(217,168,95,0.4)' }}>
                Dates and ages confirmed per intake \u2014 client to supply schedule
              </div>
            </div>
            <div className="grid grid-3">
              {[
                ['Spring', 'Mar / Apr', '#7FB069'],
                ['Summer', 'Jul / Aug', '#E89B3C'],
                ['Winter', 'Dec / Jan', '#8FCAE0'],
              ].map(([name, dates, color]) => (
                <div key={name} style={{ padding: '32px 24px', background: 'rgba(251,248,240,0.07)', borderRadius: 16, textAlign: 'center' }}>
                  <div style={{ width: 56, height: 56, borderRadius: 28, background: color, display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
                    <DibberMark size={26} color="#13452A" />
                  </div>
                  <div className="serif" style={{ fontSize: 22, marginTop: 16, color: 'var(--cream)', fontWeight: 600 }}>{name}</div>
                  <div style={{ fontSize: 13, color: 'rgba(251,248,240,0.7)', marginTop: 4 }}>{dates}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Programmes });