// Offer.jsx — Broadacres Academy, "What we offer" page
// Whole-school view: Learning Naturally, curriculum, sports, pathways, class sizes,
// aftercare, meals, transport. Phase-specific detail lives on phase pages.
//
// Block order (per Iris): hero → sub-nav → Learning Naturally → Curriculum →
//   Sports & co-curricular → Class sizes → Aftercare → Meals → Transport →
//   Four pathways to thrive → Apply banner

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

  return (
    <>
      <OfferHero dandelion={tweaks?.dandelion !== false} />
      <OfferSubNav onJump={scrollTo} />
      <LearningNaturally dandelion={tweaks?.dandelion !== false} />
      <Curriculum />
      <SportsAndCulture />
      <ClassSizes />
      <Aftercare />
      <Meals />
      <Transport onNavigate={onNavigate} />
      <FourPathways />
      <ApplyBanner
        compact
        photo="assets/photos/web/about-hero-house.jpg"
        onApply={() => {onNavigate?.('contact');setTimeout(() => {const el = document.getElementById('enquire');if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 80, behavior: 'smooth' });}, 500);}}
        dandelion={false} />
      
      <Footer />
    </>);

}

/* ---------- 1. Hero ---------- */
function OfferHero({ dandelion }) {
  return (
    <section className="offer-hero">
      <div className="offer-hero__media">
        <img
          src="assets/photos/web/offer-hero-reading-circle.jpg"
          alt="Broadacres pupils reading outdoors with their teacher at a stone bench" />
        
      </div>
      <div className="offer-hero__tint" />
      {dandelion &&
      <div className="offer-hero__dandelion" aria-hidden="true">
          <Dandelion size={520} variant="mint" opacity={0.55} />
        </div>
      }
      <div className="offer-hero__inner">
        <div className="offer-hero__eyebrow">What we offer</div>
        <h1 className="offer-hero__headline">
          A rich offering,<br />
          <em>across every sphere.</em>
        </h1>
        <p className="offer-hero__sub">
          From the classroom to the field to the person each child becomes.
        </p>
      </div>
    </section>);

}

/* ---------- 2. Sub-nav (sticky, scroll-aware) ---------- */
function OfferSubNav({ onJump }) {
  const items = [
  { id: 'learning-naturally', label: 'Learning' },
  { id: 'curriculum', label: 'Curriculum' },
  { id: 'sports', label: 'Co-curricular' },
  { id: 'aftercare', label: 'Aftercare' },
  { id: 'transport', label: 'Transport' },
  { id: 'pathways', label: 'Thrive' }];

  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({});

  // Track active section
  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;
        const top = el.getBoundingClientRect().top;
        if (top - 140 <= 0) current = id;
      }
      setActive(current);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Measure scroll overflow on the track
  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);
    };
  }, []);

  // When active changes, keep it in view within the track
  React.useEffect(() => {
    const btn = btnRefs.current[active];
    const track = trackRef.current;
    if (!btn || !track) return;
    const btnLeft = btn.offsetLeft;
    const btnRight = btnLeft + btn.offsetWidth;
    const viewLeft = track.scrollLeft;
    const viewRight = viewLeft + track.clientWidth;
    const pad = 24;
    if (btnLeft < viewLeft + pad) {
      track.scrollTo({ left: btnLeft - pad, behavior: 'smooth' });
    } else if (btnRight > viewRight - pad) {
      track.scrollTo({ left: btnRight - track.clientWidth + pad, behavior: 'smooth' });
    }
  }, [active]);

  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 sections left"
        tabIndex={edges.left ? 0 : -1}
        onClick={() => nudge(-1)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
          <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 sections right"
        tabIndex={edges.right ? 0 : -1}
        onClick={() => nudge(1)}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
          <path d="M9 6l6 6-6 6" />
        </svg>
      </button>
    </nav>);

}

/* ---------- 3. Learning Naturally (lead section, mint accent on dark) ---------- */
function LearningNaturally({ dandelion }) {
  const lnFigRef = React.useRef(null);
  React.useEffect(() => {
    const el = lnFigRef.current;
    if (!el) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {el.classList.add('is-in');return;}
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.88 && r.bottom > 0) {el.classList.add('is-in');detach();}
    };
    const detach = () => {
      window.removeEventListener('scroll', reveal, true);
      window.removeEventListener('resize', reveal);
    };
    reveal();
    window.addEventListener('scroll', reveal, true);
    window.addEventListener('resize', reveal);
    const t1 = setTimeout(reveal, 250);
    return () => {detach();clearTimeout(t1);};
  }, []);
  const principles = [
  {
    n: '01',
    title: 'Alongside, not in front of',
    body: 'A teacher works beside each child, pitching every task just beyond what they can already do, and stepping back as they grow into it.'
  },
  {
    n: '02',
    title: 'Hands first, then ideas',
    body: 'Learning starts with real materials, real tasks and real-world contexts — and then moves through models and into abstract thought.'
  },
  {
    n: '03',
    title: 'Language-rich rooms',
    body: 'Classrooms are full of talk. Children explain, question and argue their way into understanding, with adults who listen carefully.'
  },
  {
    n: '04',
    title: 'Play is serious work',
    body: 'From Preschool upward, play is treated as the real thing — where children test ideas, build relationships and practise being themselves.'
  }];

  return (
    <section className="ln" id="learning-naturally">
      <div className="container ln__inner">
        <div className="ln__head">
          <div className="eyebrow-txt eyebrow-light">Our approach</div>
          <h2 className="ln__title">
            Learning,<br /><em>naturally.</em>
          </h2>
          <p className="ln__deck">This is the way Broadacres teaches: every day, in every classroom, across every phase.

          </p>
        </div>

        <figure className="ln__figure" aria-hidden="true" ref={lnFigRef}>
          <img src="assets/photos/web/ln-paint-hands.jpg" alt="" />
        </figure>

        <ol className="ln__principles">
          {principles.map((p) =>
          <li key={p.n} className="ln-principle">
              <div className="ln-principle__num">{p.n}</div>
              <h3 className="ln-principle__title">{p.title}</h3>
              <p className="ln-principle__body">{p.body}</p>
            </li>
          )}
        </ol>

        <blockquote className="ln__signature">
          <p>
            The tradition behind this is Vygotskian constructivism. It sits closely with the African truth that <em>a person becomes a person through other people.</em>
          </p>
          <p className="ln__signature-foot">
            It is how children were built to learn. We just don't get in the way.
          </p>
        </blockquote>

        <div className="ln__aside">
          <div className="ln__aside-eyebrow">Want the longer version?</div>
          <p>Each School Head walks families through the full philosophy — Vygotsky, the Zone of Proximal Development, scaffolding, and what it all looks like in a real classroom.</p>
          <a href={window.WALKABOUT_URL} target="_blank" rel="noreferrer" className="ln__aside-link">
            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>
        </div>
      </div>
    </section>);

}

/* ---------- 4. Curriculum & academics ---------- */
function Curriculum() {
  const bridgeRef = React.useRef(null);
  React.useEffect(() => {
    const el = bridgeRef.current;
    if (!el) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {el.classList.add('is-in');return;}
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.86 && r.bottom > 0) {el.classList.add('is-in');detach();}
    };
    const detach = () => {
      window.removeEventListener('scroll', reveal, true);
      window.removeEventListener('resize', reveal);
    };
    reveal();
    window.addEventListener('scroll', reveal, true);
    window.addEventListener('resize', reveal);
    const t1 = setTimeout(reveal, 250);
    return () => {detach();clearTimeout(t1);};
  }, []);
  const prepSubjects = [
  'English',
  'Afrikaans or isiZulu',
  'Mathematics',
  'Life Skills',
  'Physical Education',
  'Natural Science & Technology',
  'Social Sciences',
  'Creative Arts'];

  const highSubjects = [
  'English',
  'Afrikaans or isiZulu',
  'Mathematics or Mathematical Literacy',
  'Life Orientation',
  'Electives across the Sciences',
  'Electives across the Humanities',
  'Electives across Commerce'];

  return (
    <section className="curric" id="curriculum">
      <div className="container">
        <div className="curric__head">
          <div className="eyebrow-txt">Curriculum & academics</div>
          <h2 className="curric__title">
            CAPS curriculum,<br /><em>IEB for matric assessment.</em>
          </h2>
          <p className="curric__intro">
            CAPS gives us a strong, nationally recognised foundation. The IEB gives our High School students an internationally benchmarked matric certificate, accepted at universities across South Africa and abroad.
          </p>
          <div className="curric__lead">
            <p>
              Our academic programme is delivered by qualified, experienced teachers who believe in <em>depth as well as breadth.</em> We give particular focus to mastery in the subjects that open doors later — English, Mathematics and the Sciences — and we teach every other subject with that same care and intention.
            </p>
          </div>
        </div>
        <div className="curric__grid">
          <article className="subj-card subj-card--accent">
            <div className="subj-card__mark">CAPS</div>
            <h3 className="subj-card__title">Preparatory School subjects</h3>
            <div className="subj-card__meta">Grade 0 — Grade 6</div>
            <ul className="subj-list">
              {prepSubjects.map((s) => <li key={s}>{s}</li>)}
            </ul>
          </article>
          <article className="subj-card subj-card--accent">
            <div className="subj-card__mark">IEB</div>
            <h3 className="subj-card__title">High School subjects</h3>
            <div className="subj-card__meta">Grade 7 — Grade 12</div>
            <ul className="subj-list">
              {highSubjects.map((s) => <li key={s}>{s}</li>)}
            </ul>
            <p className="subj-card__foot">Full elective list confirmed with families at enrolment.</p>
          </article>
        </div>
      </div>
      {/* Circular lifestyle photo bridging up into the Learning Naturally section */}
      <div className="curric__bridge" aria-hidden="true" ref={bridgeRef}>
        <img src="assets/photos/web/sp-reading.jpg" alt="" />
        <svg className="curric__bridge-ring" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
          <path d="M50 1 A49 49 0 0 1 50 99" pathLength="1" fill="none" stroke="#03abb4" strokeWidth="0.21" />
        </svg>
      </div>
    </section>);

}

/* ---------- 5. Sports & co-curricular ---------- */
function SportsAndCulture() {
  const sportRef = React.useRef(null);
  React.useEffect(() => {
    const root = sportRef.current;
    if (!root) return;
    const els = [...root.querySelectorAll('.reveal-up')];
    if (!els.length) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {els.forEach((e) => e.classList.add('is-in'));return;}
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      let remaining = false;
      els.forEach((e) => {
        if (e.classList.contains('is-in')) return;
        const r = e.getBoundingClientRect();
        if (r.top < vh * 0.88 && r.bottom > 0) e.classList.add('is-in');else
        remaining = true;
      });
      if (!remaining) detach();
    };
    const detach = () => {
      window.removeEventListener('scroll', reveal, true);
      window.removeEventListener('resize', reveal);
    };
    reveal();
    window.addEventListener('scroll', reveal, true);
    window.addEventListener('resize', reveal);
    const t1 = setTimeout(reveal, 250);
    return () => {detach();clearTimeout(t1);};
  }, []);
  const sports = [
  'Swimming', 'Rugby', 'Soccer',
  'Netball', 'Tennis', 'Basketball', 'Chess'];

  const cultural = [
  'Choir', 'Drama', 'Music', 'Public Speaking',
  'Debating', 'Art', 'Eco Club', 'Marimba'];

  return (
    <section className="sport" id="sports" ref={sportRef}>
      <div className="container">
        <div className="sport__head">
          <div className="eyebrow-txt">Sports & co-curricular</div>
          <h2 className="sport__title">
            Designed for participation, <em>not performance only.</em>
          </h2>
          <p className="sport__lead">
            Every child finds a place in our sports and co-curricular programme. Offerings vary by phase, and a full list is available from the school.
          </p>
        </div>
        <div className="sport__grid reveal-up">
          <div className="sport-col sport-col--sport">
            <div className="sport-col__media">
              <img src="assets/photos/web/sports-rugby-tackle.jpg" alt="Broadacres pupil training with a tackle bag on the sports field" />
            </div>
            <div className="sport-col__body">
              <div className="sport-col__label">Sports</div>
              <ul>
                {sports.map((s) => <li key={s}>{s}</li>)}
              </ul>
            </div>
          </div>
          <div className="sport-col sport-col--culture">
            <div className="sport-col__media">
              <img src="assets/photos/web/cultural-marimba.jpg" alt="Broadacres Prep pupils playing marimbas together" />
            </div>
            <div className="sport-col__body">
              <div className="sport-col__label">Cultural</div>
              <ul>
                {cultural.map((s) => <li key={s}>{s}</li>)}
              </ul>
            </div>
          </div>
        </div>
        <div className="sport__outreach reveal-up">
          <div className="sport__outreach-head">
            <img src="assets/photos/web/outreach-community.jpg" alt="" aria-hidden="true" />
            <h3>Outreach &amp; <em>community</em></h3>
          </div>
          <div className="sport__outreach-copy">
            <p>
            Outreach is part of the school calendar. Each phase partners with a community cause through the year, and children take part in age-appropriate ways — from collection drives in Preschool to service projects and conservation work in High School. A child who contributes meaningfully is one of the four pathways we care about most.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 6. Four pathways to thrive ---------- */
function FourPathways() {
  const pathways = [
  {
    key: 'summit',
    label: 'Summit Climbers',
    copy: 'Children who stretch themselves, who set goals, take on hard things, and climb with courage — academically, creatively and personally.'
  },
  {
    key: 'habit',
    label: 'Habit Champions',
    copy: 'Children who build the small, steady routines that make a life: Study, sleep, effort, kindness, finishing what they start.'
  },
  {
    key: 'rel',
    label: 'Relationship Builders',
    copy: 'Children who know how to be with people, who listen, care, collaborate, and live the truth that a person becomes a person through other people.'
  },
  {
    key: 'contrib',
    label: 'Meaningful Contributors',
    copy: 'Children who look outward, who bring something of themselves to the world — through outreach, service, craft, ideas, and the everyday act of turning up well.'
  }];

  return (
    <section className="paths" id="pathways">
      <div className="container">
        <div className="paths__head">
          <div className="eyebrow-txt">Four pathways to thrive</div>
          <h2 className="paths__title">
            The kind of adults <em>we help children become.</em>
          </h2>
          <p className="paths__lead">
            Broadacres, as part of the ThriveEd family, develops the whole child through four pathways to thrive. These are not school subjects. They are the outcomes we care about most.
          </p>
        </div>
        <div className="paths__grid">
          {pathways.map((p, i) =>
          <article key={p.key} className={`grey-block path-card path-card--${p.key}`}>
              <div className="path-card__num">
                <span>{String(i + 1).padStart(2, '0')}</span>
              </div>
              <h3 className="path-card__label">
                {p.label.split(' ').map((w, wi) =>
              <React.Fragment key={wi}>{wi > 0 && <br />}{w}</React.Fragment>
              )}
              </h3>
              <p>{p.copy}</p>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 7. Class sizes (editorial, photo background) ---------- */
function ClassSizes() {
  return (
    <section className="classsize" id="class-sizes">
      <div className="classsize__media" aria-hidden="true">
        <img src="assets/photos/web/classsize-art-trio.jpg" alt="" />
        <div className="classsize__wash" />
      </div>
      <div className="container classsize__inner">
        <div className="eyebrow-txt eyebrow-light">Class sizes</div>
        <h2 className="classsize__title">
          Small enough for every child to be <em>genuinely known.</em>
        </h2>
        <p className="classsize__body">Class sizes vary slightly by phase, and stay within the range that lets a teacher see every child every day. Our students are not numbers... they are individuals.

        </p>
      </div>
    </section>);

}

/* ---------- 8. Aftercare & holiday programme ---------- */
function Aftercare() {
  const items = [
  { label: 'Ages', value: 'Preschool through Grade\u00A06' },
  { label: 'Aftercare', value: 'Until 17:30 on school days' },
  { label: 'Gates close', value: '17:30' },
  { label: 'Holiday programme', value: 'Available during school breaks' }];

  return (
    <section className="aftercare" id="aftercare">
      <div className="aftercare__dandelion" aria-hidden="true">
        <Dandelion size={336} variant="teal" animate={false} opacity={1} />
      </div>
      <div className="container aftercare__grid">
        <div className="eyebrow-txt aftercare__eyebrow">Aftercare & holidays</div>
        <div className="aftercare__row">
        <div className="aftercare__text">
          <h2 className="aftercare__title">
            Structured, warm, and built for <em>busy families.</em>
          </h2>
          <p>Aftercare is available for children up to Grade 6, running from the end of the academic day until 17:30. Children are supervised, fed and comfortable — somewhere between school and home, not an afterthought.

            </p>
          <p>
            A holiday care programme runs during school breaks, with a few closed days over December and January.
          </p>
        </div>
        <aside className="grey-block aftercare__card" aria-label="Aftercare at a glance">
          <div className="aftercare__card-eyebrow">At a glance</div>
          <ul>
            {items.map((it) =>
              <li key={it.label}>
                <span className="aftercare__k">{it.label}</span>
                <span className="aftercare__v">{it.value}</span>
              </li>
              )}
          </ul>
        </aside>
        </div>
      </div>
    </section>);

}

/* ---------- 9. Meals ---------- */
function Meals() {
  return (
    <section className="meals" id="meals">
      <div className="container">
        <div className="meals__head">
          <div className="eyebrow-txt">Meals</div>
          <h2 className="meals__title">
            Well-fed children, <em>every day.</em>
          </h2>
          <p className="meals__lead">
            Good food is part of the day, not an afterthought. How we handle meals shifts with age — included in the programme for our youngest, a healthy cafeteria for everyone else.
          </p>
        </div>
        <div className="meals__card">
          <div className="meals__card-media">
            <img src="assets/photos/meals-hall.jpg" alt="Broadacres pupils in the dining hall and cafeteria" />
          </div>
          <div className="meals__card-body">
            <div className="meals__col">
              <div className="meals__eyebrow">Preschool</div>
              <h3 className="meals__headline">
                Whole-food meals, <em>included in the day.</em>
              </h3>
              <p>Meals for our Preschool children are part of the daily programme, based on their attendance option. The meals are cooked on site, planned around the age of the child.

              </p>
            </div>
            <div className="meals__col meals__col--divider">
              <div className="meals__eyebrow">Junior Prep, Senior Prep & High School</div>
              <h3 className="meals__headline">
                A healthy cafeteria,<br /><em>pre-orderable by families.</em>
              </h3>
              <p>
                From Grade 0 up, we run a healthy cafeteria service. Meals can be pre-ordered so the lunchbox question is solved before the week starts.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 10. Transport ---------- */
function Transport({ onNavigate }) {
  const areas = ['Broadacres', 'Fourways', 'Dainfern', 'Chartwell', 'Cedar Lakes', 'Lonehill'];
  return (
    <section className="transport" id="transport">
      <div className="container transport__inner">
        <div className="eyebrow-txt eyebrow-light transport__eyebrow">Transport</div>
        <div className="transport__text">
          <h2 className="transport__title">
            A bus service on <em>selected routes.</em>
          </h2>
          <p>
            A bus service runs between our Syringa and Chartwell campuses daily, as well as on selected routes across our surrounding neighbourhoods. Routes and capacity change year to year. Please speak to admissions for the latest options.
          </p>
          <a href="#" className="btn btn-primary" onClick={(e) => {e.preventDefault();onNavigate?.('contact');setTimeout(() => {const el = document.getElementById('enquire');if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 80, behavior: 'smooth' });}, 500);}}>
            Speak to admissions
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
        </div>
        <ul className="transport__areas" aria-label="Areas currently served">
          {areas.map((a) =>
          <li key={a}><span className="transport__dot" />{a}</li>
          )}
          <li className="transport__more">Subject to change.</li>
        </ul>
      </div>
    </section>);

}

Object.assign(window, {
  Offer, OfferHero, OfferSubNav,
  LearningNaturally, Curriculum, SportsAndCulture, FourPathways,
  ClassSizes, Aftercare, Meals, Transport
});