// Preschool.jsx — Phase page for 6 months to Grade 00
// Mint-accented. Mirrors HighSchool.jsx structure.

function PreschoolHero() {
  const eyebrow = 'Preschool · 6 months – Gr 00';
  const display =
  <h1 className="phase-hero-billboard__display">
      The Age of<br /><em>Discovery.</em>
    </h1>;

  const lede = 'This is a gentle first step into school. Days full of real things — water, sand, soil, paint, seeds, stories and singing — with teachers who know what young children actually need.';

  return (
    <section className="phase-hero-v phase-hero-v--brand">
      <div className="phase-hero-v__bg" style={{ backgroundImage: 'url(assets/photos/web/preschool-hero-bg.jpg)' }} />
      <div className="phase-hero-v__wash" />
      <div className="phase-hero-v__brand-shape" aria-hidden="true">
        <svg viewBox="0 0 1971.45 3189.75" preserveAspectRatio="xMinYMid meet">
          <path d="M1971.31,1595.85c2.19,55.76-21.55,112.3-70.91,149.56l-512.16,386.12L0,3189.75V0l1621.84,1236.28,278.56,210.01c49.36,37.26,73.1,93.8,70.91,149.56Z" fill="#0a2c4d" />
        </svg>
      </div>
      <div className="phase-hero-v__brand-spark" aria-hidden="true">
        <Dandelion size={140} variant="mint" animate={false} opacity={1} />
      </div>
      <div className="container phase-hero-v__frame">
        <div className="phase-hero-v__inner">
          <div className="phase-hero-v__copy">
            <div className="phase-hero-v__eyebrow">{eyebrow}</div>
            {display}
            <p className="phase-hero-v__lede">{lede}</p>
          </div>
          <div className="phase-hero-v__cutout phase-hero-v__cutout--shadow">
            <img src="assets/photos/web/preschool-cutout-waist.png" alt="Two Broadacres Preschool children" />
          </div>
        </div>
      </div>
    </section>);

}

function PreSubNav({ onJump }) {
  const items = [
  { id: 'approach', label: 'Our approach' },
  { id: 'day', label: 'A day in the life' },
  { id: 'curriculum', label: 'Curriculum' },
  { id: 'aftercare', label: 'Aftercare & transport' },
  { id: 'need-to-know', label: 'Need to know' },
  { id: 'gallery', label: 'Gallery' }];

  const [active, setActive] = React.useState(items[0].id);
  const [edges, setEdges] = React.useState({ left: false, right: false });
  const trackRef = React.useRef(null);
  const btnRefs = React.useRef({});

  React.useEffect(() => {
    const onScroll = () => {
      const ids = items.map((i) => i.id);
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.getBoundingClientRect().top - 140 <= 0) current = id;
      }
      setActive(current);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const measure = () => {
      const { scrollLeft, scrollWidth, clientWidth } = track;
      setEdges({ left: scrollLeft > 4, right: scrollLeft + clientWidth < scrollWidth - 4 });
    };
    measure();
    track.addEventListener('scroll', measure, { passive: true });
    window.addEventListener('resize', measure);
    return () => {track.removeEventListener('scroll', measure);window.removeEventListener('resize', measure);};
  }, []);

  const nudge = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    track.scrollBy({ left: dir * Math.round(track.clientWidth * 0.7), behavior: 'smooth' });
  };

  return (
    <nav className={`about-subnav${edges.left ? ' has-left' : ''}${edges.right ? ' has-right' : ''}`} aria-label="On this page">
      <SubNavMobile items={items} active={active} onJump={onJump} />
      <button type="button" className="about-subnav__chev about-subnav__chev--left" aria-label="Scroll left" tabIndex={edges.left ? 0 : -1} onClick={() => nudge(-1)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M15 6l-6 6 6 6" /></svg>
      </button>
      <div className="container about-subnav__inner" ref={trackRef}>
        <ul>
          {items.map((it) =>
          <li key={it.id}>
              <button ref={(el) => {btnRefs.current[it.id] = el;}} className={active === it.id ? 'is-active' : ''} onClick={() => onJump(it.id)}>{it.label}</button>
            </li>
          )}
        </ul>
      </div>
      <button type="button" className="about-subnav__chev about-subnav__chev--right" aria-label="Scroll right" tabIndex={edges.right ? 0 : -1} onClick={() => nudge(1)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M9 6l6 6-6 6" /></svg>
      </button>
    </nav>);

}

function PreschoolGallery({ images }) {
  const [idx, setIdx] = React.useState(0);
  const [imgAR, setImgAR] = React.useState(null);
  const stripRef = React.useRef(null);
  const active = images[idx];

  const go = (i) => setIdx((i + images.length) % images.length);
  const next = () => go(idx + 1);
  const prev = () => go(idx - 1);

  React.useEffect(() => {setImgAR(null);}, [idx]);

  React.useEffect(() => {
    const onKey = (e) => {
      const sec = document.getElementById('gallery');
      if (!sec) return;
      const r = sec.getBoundingClientRect();
      if (r.bottom < 0 || r.top > window.innerHeight) return;
      if (e.key === 'ArrowRight') next();else
      if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  React.useEffect(() => {
    const strip = stripRef.current;
    if (!strip) return;
    const activeThumb = strip.querySelector(`[data-i="${idx}"]`);
    if (activeThumb) {
      const r = activeThumb.getBoundingClientRect();
      const pr = strip.getBoundingClientRect();
      if (r.top < pr.top || r.bottom > pr.bottom) {
        activeThumb.scrollIntoView({ block: 'nearest' });
      }
    }
  }, [idx]);

  return (
    <section className="hs-gallery" id="gallery">
      <div className="container">
        <div className="hs-gallery__head">
          <div>
            <div className="eyebrow-txt">Gallery</div>
            <h2 className="phase-section__title" style={{ margin: '20px 0 0' }}>
              A few <em>moments.</em>
            </h2>
          </div>
          <div className="hs-gallery__counter">
            <span>{String(idx + 1).padStart(2, '0')}</span>
            <span className="hs-gallery__counter-sep">/</span>
            <span>{String(images.length).padStart(2, '0')}</span>
          </div>
        </div>

        <div className="hs-gallery__layout">
          <div className="hs-gallery__hero-wrap">
            <figure
              className="hs-gallery__hero"
              style={imgAR ? { aspectRatio: imgAR } : undefined}
              key={idx}>
              <img
                src={active.src}
                alt={active.caption}
                onLoad={(e) => setImgAR(`${e.target.naturalWidth} / ${e.target.naturalHeight}`)}
                draggable="false" />
              
              <figcaption className="hs-gallery__cap">
                <span className="hs-gallery__cap-idx">
                  {String(idx + 1).padStart(2, '0')} <span className="hs-gallery__cap-sep">/</span> {String(images.length).padStart(2, '0')}
                </span>
                <span className="hs-gallery__cap-text">{active.caption}</span>
              </figcaption>

              <button className="hs-gallery__arrow hs-gallery__arrow--prev" aria-label="Previous image" onClick={prev}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M15 6l-6 6 6 6" /></svg>
              </button>
              <button className="hs-gallery__arrow hs-gallery__arrow--next" aria-label="Next image" onClick={next}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M9 6l6 6-6 6" /></svg>
              </button>
            </figure>
          </div>

          <div className="hs-gallery__strip" ref={stripRef} role="tablist" aria-label="Gallery thumbnails">
            {images.map((g, i) =>
            <button
              key={i}
              data-i={i}
              role="tab"
              aria-selected={i === idx}
              aria-label={`Show image ${i + 1}: ${g.caption}`}
              className={`hs-gallery__thumb${i === idx ? ' is-active' : ''}`}
              onClick={() => go(i)}>
                <img src={g.src} alt="" draggable="false" />
                <span className="hs-gallery__thumb-num">{String(i + 1).padStart(2, '0')}</span>
              </button>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function Preschool({ onNavigate, tweaks }) {
  React.useEffect(() => {window.scrollTo({ top: 0 });}, []);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  const day = [
  { time: 'Arrival', body: 'Welcome songs and a quiet check-in with teachers they know by name.' },
  { time: 'Morning', body: <>Language-rich mornings that build <em>early literacy</em>.</> },
  { time: 'Hands-on', body: <>Maths through <em>real materials</em>. Counting, sorting, matching.</> },
  { time: 'Outdoors', body: <>Play and movement in the <em>Syringa bush</em>.</> },
  { time: 'Creative', body: <>Art that is the <em>child’s own work</em>, not a template.</> },
  { time: 'Rhythm', body: 'Music, rhythm, story and a snack prepared together.' },
  { time: 'Rest', body: 'Rest, reading and a calm close to the morning.' }];


  const programmes = [
  { name: <>ISASA <em>ECD framework</em></>, body: 'Our Preschool follows the ISASA guidelines for Early Childhood Development, keeping developmental milestones on track from 6 months to Grade 00.' },
  { name: <><em>Key to Learning</em></>, body: 'From Grade 000, we extend the ECD curriculum with Key to Learning modules. For our 4 and 5 year-olds we guide logical thought formation, story telling, maths and visual spacial integration.' },
  { name: <>Music <em>Programme</em></>, body: 'Music is taught to be appreciated, to have fun. Instrument exposure helps develop musical talents.' },
  { name: <>Buzzi Body <em>movement</em></>, body: 'Every child gets a half-hour Buzzi Body movement session each week. Co-ordination, balance and confident, joyful bodies — included in fees.' }];


  const gallery = [
  { src: 'assets/photos/web/preschool-gal-4.jpg', caption: 'A busy morning in the classroom' },
  { src: 'assets/photos/web/preschool-gal-2.jpg', caption: 'Morning movement in the toddler room' },
  { src: 'assets/photos/web/preschool-gal-3.jpg', caption: 'Sandpit play, morning session' },
  { src: 'assets/photos/web/preschool-gal-1.jpg', caption: 'The Syringa campus playground' },
  { src: 'assets/photos/web/preschool-gal-5.jpg', caption: 'Imaginative play, animals out', objectPosition: '22% center' },
  { src: 'assets/photos/web/preschool-gal-6.jpg', caption: 'Games and movement on the lawn' },
  { src: 'assets/photos/web/preschool-gal-7.jpg', caption: 'Happy in the sandpit', objectPosition: '15% center' }];


  return (
    <div className="phase-root phase-root--preschool">

      {/* 1. HERO */}
      <PreschoolHero />

      {/* 2. SUB-NAV */}
      <PreSubNav onJump={jump} />

      {/* 3. APPROACH */}
      <section className="phase-section phase-philosophy" id="approach">
        <div className="container">
          <div className="eyebrow-txt">Our approach</div>
          <h2 className="phase-section__title">
            A first school that feels like <em>real life.</em>
          </h2>
          <div className="campuses__grid campuses__grid--phase">

            <article className="campus-card">
              <div className="campus-card__media">
                <img src="assets/photos/web/preschool-natural.jpg" alt="The Preschool outdoor play environment at the Syringa campus" />
              </div>
              <div className="campus-card__body">
                <h3 className="campus-card__name">A <em>natural</em> environment</h3>
                <p>
                  Our Preschool is surrounded by indigenous bush at the Syringa campus. Children spend much of their day outside, gardening, watching weather, measuring shadows, and finding things that do not appear on a worksheet.
                </p>
              </div>
            </article>

            <article className="campus-card">
              <div className="campus-card__media">
                <img src="assets/photos/web/preschool-play.jpg" alt="A Preschool child playing on the slide in the Syringa campus garden" />
              </div>
              <div className="campus-card__body">
                <h3 className="campus-card__name">Learning <em>through play</em></h3>
                <p>
                  At this age, play is learning. Hands-on, sensory-rich, language-rich days build strong cognitive and social foundations. Every activity is designed with intent.
                </p>
              </div>
            </article>

            <article className="campus-card">
              <div className="campus-card__media">
                <img src="assets/photos/web/preschool-known.jpg" alt="A teacher engaging with toddlers in a sunny Preschool classroom" />
              </div>
              <div className="campus-card__body">
                <h3 className="campus-card__name">Genuinely <em>known</em></h3>
                <p>Small groups led by qualified teachers where every child is known by name, by quirks, by favourite colour. This is where friendly, confident children are made, one warm relationship at a time.

                </p>
              </div>
            </article>

          </div>
        </div>
      </section>

      {/* 4. DAY IN THE LIFE */}
      <section className="phase-section phase-section--day" id="day">
        <div className="container">
          <div className="eyebrow-txt">A day in the life</div>
          <h2 className="phase-section__title" style={{ maxWidth: '22ch' }}>
            The morning has a <em>rhythm.</em>
          </h2>
          <DayRhythm items={day} />
        </div>
      </section>

      {/* 5. CURRICULUM */}
      <section className="phase-section phase-curric" id="curriculum">
        <div className="container">
          <div className="eyebrow-txt">Curriculum</div>
          <h2 className="phase-section__title">
            A real programme, built <em>for the age.</em>
          </h2>
          <div className="phase-curric__grid">
            <div className="programme-list">
              {programmes.map((p, i) =>
              <div className="programme-row" key={i}>
                  <div className="programme-row__name">{p.name}</div>
                  <div className="programme-row__body">{p.body}</div>
                </div>
              )}
            </div>
            <aside className="phase-curric__note">
              <div className="phase-curric__note-head">
                <img src="assets/photos/web/preschool-painting.jpg" alt="" aria-hidden="true" />
                <h3>Play is <em>serious work</em></h3>
              </div>
              <div className="phase-curric__note-copy">
                <p>At Preschool, the programme is designed around how young children actually learn. Real materials in the hands; stories and songs to build language; time outside to move, notice, and ask.

                </p>
                <p>
                  Each programme above runs alongside the ECD framework, not on top of it.
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* 6. AFTERCARE + TRANSPORT — Meals-pattern card */}
      <section className="phase-section phase-aftercare" id="aftercare">
        <div className="phase-aftercare__watermark" aria-hidden="true">
          <Dandelion size={620} variant="mint" animate={false} opacity={1} />
        </div>
        <div className="container">
          <div className="phase-aftercare__head">
            <div className="eyebrow-txt">Aftercare & transport</div>
            <h2 className="phase-aftercare__title">
              After school is <em>still school.</em>
            </h2>
            <p className="phase-aftercare__lead">The afternoon matters as much as the morning. Aftercare runs in-house, with food and supervision included, and our shuttle links Syringa to Chartwell for families with older siblings.

            </p>
          </div>

          <div className="phase-aftercare__card">
            <div className="phase-aftercare__card-body">
              <div className="phase-aftercare__col">
                <div className="phase-aftercare__eyebrow">Our Little Village · Aftercare</div>
                <h3 className="phase-aftercare__headline">
                  Aftercare, <em>included in fees.</em>
                </h3>
                <p>
                  Our aftercare and holiday programme is run by our in-house brand, <strong>Our Little Village</strong>. Afternoons run to <strong>17:00</strong> with gates closing at 17:30, including a cooked lunch, structured supervision and a light afternoon snack. This service is included in Preschool fees for the 14:00 or 17:00 offering.
                </p>
                <p>
                  There is no aftercare on half-term and end-of-term days. Holiday care runs internally, with minimal closures across the year.
                </p>
              </div>

              <div className="phase-aftercare__col phase-aftercare__col--divider">
                <div className="phase-aftercare__eyebrow">Transport</div>
                <h3 className="phase-aftercare__headline">
                  Getting <em>to and from Syringa.</em>
                </h3>
                <p>
                  Parents are responsible for Preschool transport to and from our Syringa campus. Our bus service is currently offered for Preparatory and High School only. A <strong>shuttle</strong> runs between Syringa and Chartwell for families with older siblings at Senior Prep or High School — speak to the office for the current timetable.
                </p>
                <p>
                  For safety, <strong>Uber or similar drop-off is not permitted</strong> without a parent or guardian present.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 7. NEED TO KNOW */}
      <section className="phase-section" id="need-to-know">
        <div className="container">
          <div className="eyebrow-txt">Need to know</div>
          <h2 className="phase-section__title" style={{ maxWidth: '18ch' }}>The <em>practical</em> detail.</h2>
          <dl className="ntk-def">
            <div className="ntk-def__row"><dt>Ages</dt><dd>6 months to <em>Grade 00 (turning 5)</em></dd></div>
            <div className="ntk-def__row"><dt>Campus</dt><dd>Syringa campus, Broadacres</dd></div>
            <div className="ntk-def__row"><dt>Hours</dt><dd><span className="ntk-lines"><span>6 months – 3 years: 08:30 — 12:00</span><span>4 years – 5 years: 08:00 — 12:30</span></span></dd></div>
            <div className="ntk-def__row"><dt>Aftercare</dt><dd><em>Included in fees</em> for the 14:00 or 17:00 offering. Our Little Village to 17:00, gates close 17:30.</dd></div>
            <div className="ntk-def__row"><dt>Class sizes</dt><dd>Small. <em>Every child is genuinely known.</em></dd></div>
            <div className="ntk-def__row"><dt>Curriculum</dt><dd>ISASA ECD, extended with <em>Key to Learning</em>.</dd></div>
            <div className="ntk-def__row"><dt>Movement</dt><dd>Buzzi Body session weekly, included in fees</dd></div>
            <div className="ntk-def__row"><dt>Meals</dt><dd>Nutritious whole-food meals, <em>included</em></dd></div>
            <div className="ntk-def__row"><dt>Holidays</dt><dd>Our Little Village holiday care, with minimal closure through the year</dd></div>
          </dl>
        </div>
      </section>

      {/* 8. GALLERY */}
      <PhaseMasonryGallery images={gallery} />

      {/* 9. CTA — walkabout photo */}
      <section className="phase-cta-photo">
        <div
          className="phase-cta-photo__bg"
          style={{ backgroundImage: `url(assets/photos/web/preschool-walkabout.jpg)` }} />
        
        <div className="container">
          <div className="phase-cta-photo__grid">
            <h2 className="phase-cta-photo__title">
              Come and see Preschool <em>for yourself.</em>
            </h2>
            <div className="phase-cta-photo__actions">
              <a className="btn btn-primary" href={window.WALKABOUT_URL} target="_blank" rel="noopener noreferrer">
                Book a walkabout
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
              </a>
              <a className="btn btn-ghost-light" href="https://fees.broadacres.com" target="_blank" rel="noopener noreferrer">View fees</a>
            </div>
          </div>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </div>);

}

Object.assign(window, { Preschool });