// HighSchool.jsx — Phase page for Grade 7 – Grade 12
// Simplified hero (no meta tiles). Philosophy uses .campus-card style.
// .about-subnav replaces the phase-nav. Gallery between NTK and CTA.

/* ------------------------------------------------------------------
   PhaseHero
   Variant gallery for the HS billboard:
     - 'wedge'    : original — photo wedge on right, navy on left (backup)
     - 'duotone'  : facilities photo as navy/teal duotone backdrop, cutout floats right
     - 'postcard' : full-bleed facilities photo, strong left navy gradient + vignette
     - 'portrait' : facilities held in a rounded "card" right-hand panel
   ------------------------------------------------------------------ */
function PhaseHero({ variant = 'natural' }) {
  const eyebrow = 'High School · Grade 7 – Grade 12';
  const display =
  <h1 className="phase-hero-billboard__display">
      The Age of<br /><em>Becoming.</em>
    </h1>;

  const lede = 'High School is the phase of “what do I think?”, where independence grows. On our Chartwell High School campus, students get six years of real responsibility, real challenge, and the time to figure out what they’re good at.';

  // ---- BACKUP (wedge) ----
  if (variant === 'wedge') {
    return (
      <section
        className="phase-hero-billboard phase-hero-billboard--simple"
        style={{ '--phase-hero-img': 'url(assets/photos/web/campus-high.jpg)' }}>
        <div className="container">
          <div className="phase-hero-billboard__inner">
            <div className="phase-hero-billboard__copy">
              <div className="phase-hero-billboard__eyebrow">{eyebrow}</div>
              {display}
              <p className="phase-hero-billboard__lede">{lede}</p>
            </div>
            <div className="phase-hero-billboard__cutout">
              <img src="assets/photos/web/hs-girl-cutout-tight.png" alt="A Broadacres Academy High School student" />
            </div>
          </div>
        </div>
      </section>);

  }

  // ---- NATURAL ----
  // Facilities photo kept in its own vibrant colour (no duotone, no navy wash).
  // Just a soft left-to-right dark gradient so the headline stays readable,
  // plus a slim bottom scrim for the lede. Matches the Home hero treatment.
  if (variant === 'natural') {
    return (
      <section className="phase-hero-v phase-hero-v--brand">
        <div className="phase-hero-v__bg" style={{ backgroundImage: 'url(assets/photos/web/hs-facilities.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="red" 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/hs-girl-cutout-tight.png" alt="A Broadacres Academy High School student" />
            </div>
          </div>
        </div>
      </section>);

  }

  // ---- DUOTONE ----
  // Facilities photo washed to navy + teal, full-bleed.
  // Cutout kids stay in full colour, pushed right, anchored to bottom.
  // A thin vertical teal rule + uppercase gutter label gives the composite
  // a deliberate, editorial feel rather than a random collage.
  if (variant === 'duotone') {
    return (
      <section className="phase-hero-v phase-hero-v--duotone">
        <div className="phase-hero-v__bg" style={{ backgroundImage: 'url(assets/photos/web/hs-facilities.jpg)' }} />
        <div className="phase-hero-v__wash" />
        <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">
              <img src="assets/photos/web/hs-girl-cutout-tight.png" alt="A Broadacres Academy High School student" />
            </div>
          </div>
        </div>
      </section>);

  }

  // ---- POSTCARD ----
  // Full-bleed facilities photo, heavy navy-to-transparent gradient from the
  // left so headline reads cleanly. Subtle vignette. Cutout kids bleed from
  // the right edge and carry a soft drop-shadow to seat them against the
  // architecture instead of floating over it.
  if (variant === 'postcard') {
    return (
      <section className="phase-hero-v phase-hero-v--postcard">
        <div className="phase-hero-v__bg" style={{ backgroundImage: 'url(assets/photos/web/hs-facilities.jpg)' }} />
        <div className="phase-hero-v__wash" />
        <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/hs-girl-cutout-tight.png" alt="A Broadacres Academy High School student" />
            </div>
          </div>
        </div>
      </section>);

  }

  // ---- PORTRAIT ----
  // Solid navy left; facilities photo held inside a tall rounded window on
  // the right (like a portrait orientation inset). Cutout kids overlap the
  // window boundary — a third of them sit outside the frame — which signals
  // a deliberate layered composition, not a collage accident.
  return (
    <section className="phase-hero-v phase-hero-v--portrait">
      <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__window">
            <div className="phase-hero-v__window-media" style={{ backgroundImage: 'url(assets/photos/web/hs-facilities.jpg)' }} />
            <div className="phase-hero-v__window-label">Our Fourways campus</div>
            <div className="phase-hero-v__cutout phase-hero-v__cutout--overlap">
              <img src="assets/photos/web/hs-girl-cutout-tight.png" alt="A Broadacres Academy High School student" />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function HSSubNav({ onJump }) {
  const items = [
  { id: 'philosophy', label: 'Our approach' },
  { id: 'subjects', label: 'Subjects' },
  { id: 'technology', label: 'Technology' },
  { 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;
        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);
  }, []);

  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);};
  }, []);

  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>);

}

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

  // Scroll "appear up" reveal for any element tagged .reveal-up
  React.useEffect(() => {
    const els = [...document.querySelectorAll('.phase-root--highschool .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.9 && 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 heroVar = tweaks && tweaks.hsHero || 'natural';

  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 subjects = [
  { group: 'Languages', name: 'English', aside: 'Home Language', badge: 'Gr 7–12' },
  { group: 'Languages', name: 'Afrikaans or isiZulu', aside: 'First Additional Language', badge: 'Gr 7–12' },
  { group: 'Mathematics', name: 'Mathematics or Mathematical Literacy', aside: 'Maths Lit in Gr 10–12', badge: 'Gr 7–12' },
  { group: 'Life skills', name: 'Life Orientation', badge: 'Gr 7–12' },
  { group: 'Sciences', name: 'Natural Sciences', aside: 'Life & Physical Sciences in Gr 10–12', badge: 'Gr 7–12' },
  { group: 'Humanities', name: 'Social Sciences', aside: 'History & Geography in Gr 10–12', badge: 'Gr 7–12' },
  { group: 'Technology', name: 'Technology, Entrepreneurial Sciences, Coding & Robotics', badge: 'Gr 7–9' },
  { group: 'Creative', name: 'Arts & Culture', badge: 'Gr 7–9' },
  { group: 'Commerce', name: 'Economic Management Sciences', aside: 'Accounting & Business Studies in Gr 10–12', badge: 'Gr 7–12' },
  { group: 'Elective', name: 'Computer Applications Technology', badge: 'Gr 10–12' },
  { group: 'Elective', name: 'Sport & Exercise Science', badge: 'Gr 10–12' }];


  // Gallery — editorial masonry grid (see reference). 7 tiles.
  // To swap: edit the src / caption values, keeping the order:
  //   [0] tall portrait (left)   [1] left mid   [2] left lower
  //   [3] wide (right top)       [4]+[5] paired portraits   [6] wide (right lower)
  const gallery = [
  { src: 'assets/photos/web/hs-gal-1.jpg', caption: 'On the courts' },
  { src: 'assets/photos/web/hs-gal-2.jpg', caption: 'Downtime in the common area' },
  { src: 'assets/photos/web/hs-gal-3.jpg', caption: 'Between classes' },
  { src: 'assets/photos/web/hs-gal-4.jpg', caption: 'Contact session on the field' },
  { src: 'assets/photos/web/hs-gal-5.jpg', caption: 'Focused in class' },
  { src: 'assets/photos/web/hs-gal-6.jpg', caption: 'The communal learning area' },
  { src: 'assets/photos/web/hs-gal-7.jpg', caption: 'The Chartwell campus' },
  { src: 'assets/photos/web/hs-gal-8.jpg', caption: 'The campus from above' },
  { src: 'assets/photos/web/hs-gal-9.jpg', caption: 'The 25m pool' }];


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

      {/* ========== 1. BILLBOARD HERO (variants) ========== */}
      <PhaseHero variant={heroVar} />

      {/* ========== 2. SUB-NAV (matches About/Offer pattern) ========== */}
      <HSSubNav onJump={jump} />

      {/* ========== 3. PHILOSOPHY — campus-card style ========== */}
      <section className="phase-section phase-philosophy" id="philosophy">
        <div className="container">
          <div className="eyebrow-txt">Our approach</div>
          <h2 className="phase-section__title">
            Breadth, then depth. Students who <em>defend their thinking.</em>
          </h2>
          <div className="campuses__grid campuses__grid--phase">

            <article className="campus-card">
              <div className="campus-card__media">
                <img src="assets/photos/web/hs-ieb-matric.jpg" alt="Broadacres High School students in the science laboratory" />
              </div>
              <div className="campus-card__body">
                <h3 className="campus-card__name">An <em>Independent Examinations Board</em> matric</h3>
                <p>Our Grade 12s sit the South African National Senior Certificate under the IEB which is nationally recognised, internationally benchmarked, accepted at universities in South Africa and abroad. Teaching that goes deep, not just wide.

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

            <article className="campus-card">
              <div className="campus-card__media">
                <img src="assets/photos/web/hs-communal-learning-area.jpg" alt="Communal Learning Area at Broadacres High School" />
              </div>
              <div className="campus-card__body">
                <h3 className="campus-card__name">The <em>Communal Learning Areas</em></h3>
                <p>Indoor and outdoor CLAs sit at the heart of our High School. These are multi-use spaces for research, project work, art, design and technology, where students consolidate classroom learning under a teacher's guidance. It's learning that travels beyond the four walls of the classroom.

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

            <article className="campus-card">
              <div className="campus-card__media">
                <img src="assets/photos/web/hs-learn-by-doing.jpg" alt="Students working together around a laptop" />
              </div>
              <div className="campus-card__body">
                <h3 className="campus-card__name">Learn by doing, <em>defend your thinking</em></h3>
                <p>Our constructivist approach means students are engaged contributors, not passive recipients. Arguments built with evidence; original writing; real debates;  work they can explain, and when needed, defend.

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

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

      {/* ========== 4. SUBJECTS ========== */}
      <section className="phase-section phase-section--tint phase-section--subjects" id="subjects">
        <div className="container">
          <div className="eyebrow-txt">Subjects</div>
          <h2 className="phase-section__title">
            A full academic load, with <em>room to specialise.</em>
          </h2>

          <div className="phase-subjects__grid phase-subjects__grid--cols">
            <ul className="subject-schedule">
              {subjects.slice(0, Math.ceil(subjects.length / 2)).map((s, i) =>
              <li key={i}>
                  <span className="subject-schedule__group">{s.group}</span>
                  <span className="subject-schedule__meta">
                    <strong>{s.name}</strong>
                    {s.aside && <span>{s.aside}</span>}
                  </span>
                  <span className="subject-schedule__grade">{s.badge}</span>
                </li>
              )}
            </ul>
            <ul className="subject-schedule">
              {subjects.slice(Math.ceil(subjects.length / 2)).map((s, i) =>
              <li key={i}>
                  <span className="subject-schedule__group">{s.group}</span>
                  <span className="subject-schedule__meta">
                    <strong>{s.name}</strong>
                    {s.aside && <span>{s.aside}</span>}
                  </span>
                  <span className="subject-schedule__grade">{s.badge}</span>
                </li>
              )}
            </ul>
          </div>
          <aside className="phase-subjects__aside phase-subjects__aside--horizontal">
            <div className="phase-subjects__aside-head">
              <picture>
                <source srcSet="assets/photos/web/students-uniform-pair.webp" type="image/webp" />
                <img src="assets/photos/web/students-uniform-pair.jpg" alt="" aria-hidden="true" loading="lazy" decoding="async" />
              </picture>
              <h3>Electives are <em>set at Grade 10</em></h3>
            </div>
            <div className="phase-subjects__aside-copy">
              <p>
                Grade 7 to Grade 9 is a broad academic grounding. From Grade 10, students choose the subjects that carry them into matric, balanced across the Sciences, Humanities and Commerce.
              </p>
              <p>
                The full Grade 10 to 12 electives panel is confirmed with families during subject selection.
              </p>
              <div className="small-note">
                Subjects offered in Grade 10 to 12 are dependent on student numbers.
              </div>
            </div>
          </aside>
        </div>
      </section>

      {/* ========== 5. TECHNOLOGY ========== */}
      <section className="phase-section phase-tech" id="technology">
        <div className="container">
          <div className="phase-tech__grid">
            <div className="phase-tech__lead">
              <div className="eyebrow-txt eyebrow-light">Technology</div>
              <h2 className="phase-tech__title">
                Thinking <em>hands</em> first.
              </h2>
              <p>
                Broadacres is a Microsoft school. Students use Microsoft Teams to collaborate with teachers and with each other. Our digital literacy programme runs from pre-primary all the way through to matric.
              </p>
              <p>From Grade 7, students bring their own device.

              </p>
              <p>
                Coding and robotics are taught in a progression of tools, chosen for the age and the skill.
              </p>
            </div>
            <div className="phase-tech__body reveal-up">
              <figure className="phase-tech__photo">
                <img src="assets/photos/web/hs-robotics.jpg" alt="Students building with Lego Spike Prime robotics kits" />
              </figure>
              <div className="phase-tech__tools">
                <div className="tech-chip">
                  <div className="tech-chip__label">Coding · Foundation</div>
                  <div className="tech-chip__value">Scratch</div>
                </div>
                <div className="tech-chip">
                  <div className="tech-chip__label">Coding · Senior</div>
                  <div className="tech-chip__value">Python in Pieces</div>
                </div>
                <div className="tech-chip">
                  <div className="tech-chip__label">Robotics</div>
                  <div className="tech-chip__value">Lego Spike Prime</div>
                </div>
                <div className="tech-chip">
                  <div className="tech-chip__label">Collaboration</div>
                  <div className="tech-chip__value">Microsoft Teams</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========== 6. NEED TO KNOW — definition layout ========== */}
      <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>Grades</dt><dd>Grade 7 to Grade 12</dd></div>
            <div className="ntk-def__row"><dt>Curriculum</dt><dd>CAPS through the junior grades, <em>IEB for matric</em></dd></div>
            <div className="ntk-def__row"><dt>Hours</dt><dd><span className="ntk-lines"><span>07:30 — 14:30 Mon, Tue, Thu</span><span>07:30 — 13:30 Wed &amp; Fri</span></span></dd></div>
            <div className="ntk-def__row"><dt>Aftercare</dt><dd>Not offered at High School</dd></div>
            <div className="ntk-def__row"><dt>Class sizes</dt><dd>Small. <em>Designed for discussion, not lecture.</em></dd></div>
            <div className="ntk-def__row"><dt>Devices</dt><dd>BYOD from Grade 7</dd></div>
            <div className="ntk-def__row"><dt>Cellphones</dt><dd>Not used during the academic day. Stored securely.</dd></div>
            <div className="ntk-def__row"><dt>Co-curriculars</dt><dd>At least one per term — <em>sport, cultural, outreach</em></dd></div>
            <div className="ntk-def__row"><dt>Included in fees</dt><dd>All core academics, Physical Education, co-curricular activities</dd></div>
          </dl>
        </div>
      </section>

      {/* ========== 7. GALLERY — single-image slider ========== */}
      <HSGallery images={gallery} />

      {/* ========== 8. CTA — SOCCER IMAGE BACKGROUND ========== */}
      <section className="phase-cta-photo">
        <div
          className="phase-cta-photo__bg"
          style={{ backgroundImage: `url(assets/photos/web/hs-soccer.jpg)` }} />
        
        <div className="container">
          <div className="phase-cta-photo__grid">
            <h2 className="phase-cta-photo__title">
              Come and<br />see High{'\u00A0'}School<br /><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>);

}
function HSGallery({ images }) {
  const gridRef = React.useRef(null);

  React.useEffect(() => {
    const grid = gridRef.current;
    if (!grid) return;
    const tiles = [...grid.querySelectorAll('.hs-grid__tile')];
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {tiles.forEach((t) => t.classList.add('is-in'));return;}
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      let remaining = false;
      tiles.forEach((t) => {
        if (t.classList.contains('is-in')) return;
        const r = t.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > 0) t.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);
    const t2 = setTimeout(reveal, 1200);
    return () => {detach();clearTimeout(t1);clearTimeout(t2);};
  }, []);

  const Tile = ({ g, cls }) =>
  <figure className={`hs-grid__tile ${cls || ''}`}>
      {g.slot ?
    <image-slot
      id={g.slot}
      class="hs-grid__slot"
      shape="rounded"
      radius="18"
      placeholder={g.placeholder || 'Drop an image'}
      src={g.src || undefined}></image-slot> :

    <img src={g.src} alt={g.caption} loading="lazy" draggable="false" />
    }
    </figure>;

  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>

        <div className="hs-grid" ref={gridRef}>
          <div className="hs-grid__col">
            <Tile g={images[0]} cls="hs-grid__tile--tall" />
            <Tile g={images[1]} cls="hs-grid__tile--land" />
            <Tile g={images[2]} cls="hs-grid__tile--land" />
          </div>
          <div className="hs-grid__col">
            <Tile g={images[3]} cls="hs-grid__tile--wide" />
            <div className="hs-grid__pair">
              <Tile g={images[4]} cls="hs-grid__tile--portrait" />
              <Tile g={images[5]} cls="hs-grid__tile--portrait" />
            </div>
            <Tile g={images[6]} cls="hs-grid__tile--wide" />
          </div>
        </div>
        {images.length > 7 &&
        <div className="hs-grid-extra">
            {images.slice(7).map((g, i) =>
          <Tile key={i} g={g} cls="hs-grid__tile--land" />
          )}
          </div>
        }
      </div>
    </section>);

}

Object.assign(window, { HighSchool });