function SafePage() {
  return (
    <>
      <Nav route="safe" />
      <section className="page-head">
        <div className="wrap">
          <div className="eyebrow">Refugee safe space initiative</div>
          <h1>Safe spaces for children who’ve come a <span className="marker">long way.</span></h1>
          <p>Our Refugee Safe Space Initiative is about more than activities. It’s about creating moments of normalcy, joy, and belonging for children who have experienced disruption, displacement, and uncertainty.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <Reveal className="two-col">
            <div>
              <div className="eyebrow">In practice</div>
              <h2 style={{marginBottom:22}}>What a safe space looks like, on the ground.</h2>
              <p style={{fontSize:17,color:'var(--ink-soft)'}}>We design sessions that feel ordinary on purpose. No cameras on faces. No questions about where children came from. Just paint, music, snacks, and grown-ups who are glad they’re there.</p>
            </div>
            <ul className="practice-list">
              <li>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Working through partners who hold families’ trust
              </li>
              <li>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Child-led, culturally sensitive activities
              </li>
              <li>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Structured but fun. Not clinical, not performative.
              </li>
              <li>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                Consistent, reliable presence in partner communities
              </li>
            </ul>
          </Reveal>
        </div>
      </section>

      <section className="section" style={{background:'var(--paper-warm)'}}>
        <div className="wrap">
          <Reveal className="section-head">
            <div className="eyebrow">Our principles</div>
            <h2>Four things we <span className="marker">don’t</span> compromise on.</h2>
          </Reveal>
          <div className="principles">
            {[
              { n: '01', t: 'Safety first', p: 'All sessions safeguarded, risk-assessed, and staffed by DBS-checked adults with regular safeguarding refreshers.' },
              { n: '02', t: 'Community-led', p: 'We follow our partners’ and families’ lead. They know what’s needed. We bring the resources and the joy.' },
              { n: '03', t: 'Dignity', p: 'No photographing children without consent, never for external audiences. Our fundraising doesn’t depend on their vulnerability.' },
              { n: '04', t: 'Joy', p: 'We are not here to document hardship. We are here to create good days. That’s the whole programme.' },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 100} className="principle">
                <div className="principle-num">{p.n}</div>
                <div>
                  <h4>{p.t}</h4>
                  <p>{p.p}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad-sm">
        <div className="wrap">
          <Reveal className="vol-banner" style={{gridTemplateColumns:'1fr'}}>
            <div style={{textAlign:'center',maxWidth:620,margin:'0 auto'}}>
              <h2 style={{color:'#fff',marginBottom:18}}>Want to help us hold this space?</h2>
              <p style={{margin:'0 auto 24px',color:'rgba(255,255,255,.9)'}}>Volunteer your time, donate to the programme, or bring us in as a delivery partner for your refugee community work.</p>
              <div style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
                <a href="#/volunteer" className="btn btn-amber">Volunteer →</a>
                <a href="#/donate" className="btn btn-ghost">Donate →</a>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

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