function InvolvedPage() {
  return (
    <>
      <Nav route="involved" />
      <section className="page-head">
        <div className="wrap">
          <div className="eyebrow">Get involved</div>
          <h1>There are lots of ways to <span className="marker">help.</span></h1>
          <p>Whether you want to volunteer, donate, or partner with us: every contribution helps us reach more children across London.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="path-grid">
            <Reveal className="path">
              <div className="path-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
              </div>
              <h3>Donate</h3>
              <p>Your donations fund activities, transport, materials, and events. Every pound goes directly toward moments of joy for children who need them most.</p>
              <a href="#/donate" className="btn btn-amber">Donate now <span className="btn-arrow">→</span></a>
            </Reveal>

            <Reveal delay={120} className="path">
              <div className="path-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg>
              </div>
              <h3>Partner with us</h3>
              <p>If you work with refugee or vulnerable families in London and want to collaborate on programmes, we’d love to hear from you.</p>
              <a href="mailto:umar.khan@littlesmiles.org.uk" className="btn btn-outline">Email the team <span className="btn-arrow">→</span></a>
            </Reveal>

            <Reveal delay={240} className="path">
              <div className="path-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              </div>
              <h3>Join our community</h3>
              <p>Connect with our volunteers, supporters, and team on WhatsApp. Get updates on upcoming sessions, events, and ways to get involved.</p>
              <a href="https://chat.whatsapp.com/CmWHkQYLRNqB2uIvCYtDYc?mode=gi_t" target="_blank" rel="noopener noreferrer" className="btn btn-teal">Join the WhatsApp group <span className="btn-arrow">→</span></a>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section" style={{background:'var(--teal-tint)'}}>
        <div className="wrap">
          <Reveal className="two-col">
            <img src={IMAGES.xmas4} alt="" style={{borderRadius:28,width:'100%',aspectRatio:'4/5',objectFit:'cover',boxShadow:'var(--shadow-md)'}}/>
            <div>
              <div className="eyebrow">Why it matters</div>
              <h2 style={{marginBottom:22}}>Every hour, every pound. Directly into children’s hands.</h2>
              <p style={{fontSize:17,color:'var(--ink-soft)'}}>We’re a tiny team with no office overhead. That means your time and money go straight into the programme: paint, bus fares, face paint, sandwiches, Christmas gifts, trampoline tickets. The things kids remember.</p>
              <div style={{display:'flex',gap:14,flexWrap:'wrap',marginTop:10}}>
                <a href="#/donate" className="btn btn-amber">Donate →</a>
                <a href="#/volunteer" className="btn btn-teal">Volunteer →</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer />
    </>
  );
}
window.InvolvedPage = InvolvedPage;