function HomePage() {
  const lightbox = useLightbox(ALL_IMAGES);
  const scrapRef = React.useRef(null);
  const scrollScrap = (dir) => {
    if (!scrapRef.current) return;
    scrapRef.current.scrollBy({ left: dir * 360, behavior: 'smooth' });
  };

  return (
    <>
      <Nav route="home" overHero />

      {/* HERO */}
      <section className="hero">
        <div className="hero-bg" style={{ backgroundImage: `url(${IMAGES.cafe})` }} />
        <div className="hero-inner">
          <div>
            <div className="hero-eyebrow">A London children's charity · Est. 2023</div>
            <h1>
              Bringing <span className="underline-word">joy<svg viewBox="0 0 100 8" preserveAspectRatio="none"><path d="M2 5 C 25 1, 75 9, 98 3" /></svg></span>{' '}
              to children who need it most
            </h1>
            <p className="hero-sub">
              Little Smiles is a London-based charity organising activities, trips, and creative sessions for refugee and vulnerable children, working through trusted community partners across the city.
            </p>
            <div className="hero-ctas">
              <a href="#/donate" className="btn btn-amber">Donate Now <span className="btn-arrow">→</span></a>
              <a href="#/involved" className="btn btn-ghost">Get Involved</a>
            </div>
            <div className="hero-meta">
              <span><span className="dot"></span> London, UK</span>
            </div>
          </div>
          <div className="hero-polaroids" aria-hidden="true">
            <div className="polaroid p1">
              <img src={IMAGES.watercolour} alt="" />
              <span className="cap">painting day '25</span>
            </div>
            <div className="polaroid p2">
              <img src={IMAGES.trampFoam} alt="" />
              <span className="cap">foam pit chaos</span>
            </div>
            <div className="polaroid p3">
              <img src={IMAGES.facePaint} alt="" />
              <span className="cap">face paint club</span>
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="stats">
        <div className="wrap">
          <Reveal className="stats-grid">
            <div className="stat">
              <Counter to={100} suffix="+" />
              <div className="stat-label">Children reached through sessions & trips</div>
            </div>
            <div className="stat">
              <Counter to={3} suffix="" />
              <div className="stat-label">Years running across London</div>
            </div>
            <div className="stat">
              <Counter to={20} suffix="+" />
              <div className="stat-label">Active volunteers on the ground</div>
            </div>
            <div className="stat">
              <Counter to={5} suffix="+" />
              <div className="stat-label">Partner organisations citywide</div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* WHAT WE DO */}
      <section className="section">
        <div className="wrap">
          <Reveal className="section-head">
            <div className="eyebrow">What we do</div>
            <h2 className="section-title">Real days out. <span className="marker">Hands-on</span> creativity. Moments that stick.</h2>
            <p className="section-sub">Four things sit at the heart of what we deliver, each one designed with partner organisations and shaped around what the children in their care actually want.</p>
          </Reveal>

          <div className="wwd-grid">
            {[
              { img: IMAGES.watercolour, tag: 'Creative sessions', title: 'Arts & Crafts', body: 'Painting, drawing, face painting, and hands-on making sessions at partner locations. All materials provided, ages 4 to 14.', section: 'arts' },
              { img: IMAGES.trampAction, tag: 'Days out', title: 'Trips & Outings', body: 'Trampoline parks, the seaside, parks, farms. Experiences children would otherwise miss, with transport and supervision sorted.', section: 'trips' },
              { img: IMAGES.xmasCom, tag: 'Gatherings', title: 'Community Events', body: 'Seasonal celebrations and gatherings that bring children, families, and volunteers together as one community.', section: 'events' },
              { img: IMAGES.mentor, tag: 'Long-term', title: 'Mentoring', body: 'One-to-one and group mentoring for older children. Consistent, trusted adult relationships that go beyond a single session.', section: 'mentoring' },
            ].map((c, i) => (
              <Reveal key={i} delay={i * 120} className="wwd-card">
                <div className="wwd-img" style={{ backgroundImage: `url(${c.img})` }} />
                <div className="wwd-body">
                  <div className="wwd-tag">{c.tag}</div>
                  <h3>{c.title}</h3>
                  <p>{c.body}</p>
                  <button onClick={() => goToWork(c.section)} className="wwd-foot">See this in action <span>→</span></button>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section how">
        <div className="wrap">
          <Reveal className="section-head">
            <div className="eyebrow">What we do</div>
            <h2 className="section-title">Plan it. Show up. Give kids a day <span className="marker">they'll never forget.</span></h2>
          </Reveal>

          <div className="how-grid">
            {[
              { n: '01', t: 'We plan every detail', p: 'Activities, materials, transport, food: everything is sorted in advance so families just need to show up and enjoy.' },
              { n: '02', t: 'Our volunteers make it happen', p: 'DBS-checked, trained, and genuinely passionate people who give their time to run sessions, lead activities, and be present.' },
              { n: '03', t: 'Children get to just be kids', p: 'No barriers, no worries. Just laughter, creativity, and the chance to feel like they belong.' },
            ].map((s, i) => (
              <Reveal key={i} delay={i * 120} className="how-step">
                <div className="how-num">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* GALLERY */}
      <section className="gallery">
        <div className="wrap">
          <Reveal className="section-head">
            <div className="eyebrow">From the scrapbook</div>
            <h2 className="section-title">The proof is in the <span style={{color:'var(--amber)'}}>smiles.</span></h2>
            <p className="section-sub">Real photographs from real sessions. No stock photos, no staging. Click any to open.</p>
          </Reveal>
        </div>

        <div className="scrap-row" ref={scrapRef}>
          {[
            { src: IMAGES.cafe, cap: 'café afternoon', p: false },
            { src: IMAGES.mentor, cap: 'umar & the crew', p: true },
            { src: IMAGES.artwork, cap: 'watercolour spread', p: true },
            { src: IMAGES.trampExtra, cap: 'trampoline park', p: false },
            { src: IMAGES.facePaint, cap: 'face painting', p: true },
            { src: IMAGES.xmas3, cap: 'christmas cards', p: true },
            { src: IMAGES.bus, cap: 'bus to the park', p: false },
            { src: IMAGES.xmasCom, cap: 'winter gathering', p: true },
            { src: IMAGES.trampFoam, cap: 'foam pit crew', p: false },
            { src: IMAGES.volGifts, cap: 'gift-wrapping', p: true },
          ].map((s, i) => (
            <button key={i} className={`scrap ${s.p ? 'portrait' : ''}`} onClick={() => {
              const idx = ALL_IMAGES.indexOf(s.src);
              lightbox.open(idx >= 0 ? idx : 0);
            }}>
              <img src={s.src} alt={s.cap} />
              <span className="cap">{s.cap}</span>
            </button>
          ))}
        </div>

        <div className="gallery-controls">
          <button className="gallery-btn" onClick={() => scrollScrap(-1)} aria-label="Previous photos">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <button className="gallery-btn" onClick={() => scrollScrap(1)} aria-label="Next photos">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
      </section>

      {/* VOLUNTEER CTA BANNER */}
      <section className="section-pad-sm">
        <div className="wrap">
          <Reveal className="vol-banner">
            <div>
              <div className="tag" style={{background:'rgba(255,255,255,.15)',color:'#fff'}}>Volunteers wanted</div>
              <h2 style={{marginTop:18,marginBottom:18}}>Become a Little Smiles volunteer.</h2>
              <p>Our volunteers are at the heart of everything we do. Join a team of passionate people giving their time to make a real difference. Weekends, weeknights, one-off trips. Whatever you can give.</p>
              <div className="vol-cta">
                <a href="#/volunteer" className="btn btn-amber">Sign Up to Volunteer <span className="btn-arrow">→</span></a>
                <a href="#/involved" className="btn btn-ghost">Other ways to help</a>
              </div>
            </div>
            <div className="vol-stack" aria-hidden="true">
              <div className="polaroid">
                <img src={IMAGES.arts} alt="" />
                <span className="cap">session team</span>
              </div>
              <div className="polaroid">
                <img src={IMAGES.sessionOct} alt="" />
                <span className="cap">oct sesh</span>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer />
      {lightbox.view}
    </>
  );
}

window.HomePage = HomePage;