function WorkPage() {
  const lb = useLightbox(ALL_IMAGES);
  React.useEffect(() => {
    const section = sessionStorage.getItem('workSection');
    if (section) {
      sessionStorage.removeItem('workSection');
      setTimeout(() => {
        const el = document.getElementById(section);
        if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 150);
    }
  }, []);
  const masonryImgs = [
    IMAGES.cafe, IMAGES.trampAction, IMAGES.mentor, IMAGES.artwork, IMAGES.watercolour,
    IMAGES.bus, IMAGES.xmasCom, IMAGES.facePaint, IMAGES.trampFoam, IMAGES.xmas3,
    IMAGES.volGifts, IMAGES.arts, IMAGES.sessionOct, IMAGES.trampExtra, IMAGES.xmas2,
    IMAGES.xmas4, IMAGES.tramp1, IMAGES.xmas5, IMAGES.xmas6, IMAGES.heroSign
  ].filter(Boolean);

  return (
    <>
      <Nav route="work" />
      <section className="page-head">
        <div className="wrap">
          <div className="eyebrow">Our work</div>
          <h1>What we’ve been <span className="marker">up to.</span></h1>
          <p>From creative sessions to days out, here’s a look at the activities we’ve delivered for children across London over the last three years.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <Reveal id="arts" className="prog-row">
            <div className="prog-img">
              <img src={IMAGES.watercolour} alt="" className="main" />
              <img src={IMAGES.artwork} alt="" className="accent" />
            </div>
            <div className="prog-text">
              <div className="eyebrow">Creative sessions</div>
              <h3>Arts &amp; Crafts</h3>
              <p>Volunteer-led watercolour painting, drawing, and face painting: the kind of unhurried creative time every kid deserves. All materials are provided, and sessions run at partner venues so families don’t have to travel.</p>
              <div className="prog-meta">
                <span className="chip chip-teal">Ages 4–14</span>
                <span className="chip chip-amber">Materials provided</span>
                <span className="chip">Monthly</span>
                <span className="chip">Wembley</span>
              </div>
            </div>
          </Reveal>

          <Reveal id="trips" className="prog-row flip">
            <div className="prog-text">
              <div className="eyebrow">Days out</div>
              <h3>Trips &amp; Outings</h3>
              <p>Trampoline parks, the seaside by coach or train, picnics in the park, and farm visits. Experiences most families would struggle to access on their own, planned end-to-end with transport, supervision and snacks covered.</p>
              <div className="prog-meta">
                <span className="chip chip-teal">Transport included</span>
                <span className="chip chip-amber">DBS-checked team</span>
                <span className="chip">Seasonal</span>
              </div>
            </div>
            <div className="prog-img">
              <img src={IMAGES.trampAction} alt="" className="main" />
              <img src={IMAGES.bus} alt="" className="accent" />
            </div>
          </Reveal>

          <Reveal id="events" className="prog-row">
            <div className="prog-img">
              <img src={IMAGES.xmasCom} alt="" className="main" />
              <img src={IMAGES.xmas3} alt="" className="accent" />
            </div>
            <div className="prog-text">
              <div className="eyebrow">Gatherings</div>
              <h3>Seasonal Events</h3>
              <p>Christmas celebrations, Eid gatherings, and end-of-term community events. Big spaces, warm food, small gifts, and a lot of laughter. The moments that turn a programme into a community.</p>
              <div className="prog-meta">
                <span className="chip chip-teal">Families welcome</span>
                <span className="chip chip-amber">Gifts &amp; food</span>
              </div>
            </div>
          </Reveal>

          <Reveal id="mentoring" className="prog-row flip">
            <div className="prog-text">
              <div className="eyebrow">Long-term support</div>
              <h3>Mentoring</h3>
              <p>We are building a mentoring programme for older children. One-to-one and small group sessions with consistent, trusted adult volunteers who show up over months, not just for a single event. For young people navigating school, identity, and their futures in a new country, a reliable relationship matters as much as any activity.</p>
              <div className="prog-meta">
                <span className="chip chip-teal">Ages 11 and up</span>
                <span className="chip chip-amber">Ongoing commitment</span>
                <span className="chip">Building now</span>
              </div>
            </div>
            <div className="prog-img">
              <img src={IMAGES.mentor} alt="" className="main" />
              <img src={IMAGES.arts} alt="" className="accent" />
            </div>
          </Reveal>

        </div>
      </section>

      <section className="section" style={{background:'var(--paper-warm)'}}>
        <div className="wrap">
          <Reveal className="section-head">
            <div className="eyebrow">The full archive</div>
            <h2>Every photo, every session.</h2>
            <p className="section-sub">Click any image to open. 21 real photographs from three years of Little Smiles. No stock, no staging.</p>
          </Reveal>
          <div className="masonry">
            {masonryImgs.map((src, i) => (
              <div key={i} className="m-item" onClick={() => {
                const idx = ALL_IMAGES.indexOf(src);
                lb.open(idx >= 0 ? idx : 0);
              }}>
                <img src={src} alt="" loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
      {lb.view}
    </>
  );
}
window.WorkPage = WorkPage;