function DonatePage() {
  const [amt, setAmt] = React.useState(25);
  const [custom, setCustom] = React.useState('');
  const [freq, setFreq] = React.useState('once');
  const presets = [
    { v: 10, d: 'Art materials for one session' },
    { v: 25, d: "A child's place on a day trip" },
    { v: 50, d: 'A full creative workshop' },
    { v: 100, d: 'Helps run a community event' },
  ];
  const effective = custom ? Number(custom) : amt;

  return (
    <>
      <Nav route="donate" />
      <section className="page-head">
        <div className="wrap">
          <div className="eyebrow">Donate</div>
          <h1>Help us bring more <span className="marker">smiles.</span></h1>
          <p>Your donation goes directly towards activities, trips, materials, and events for refugee and vulnerable children across London.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="donate-wrap">
            <div>
              <div className="freq-toggle">
                <button className={freq==='once'?'on':''} onClick={()=>setFreq('once')}>One-off</button>
                <button className={freq==='monthly'?'on':''} onClick={()=>setFreq('monthly')}>Monthly</button>
              </div>

              <div className="amount-grid">
                {presets.map(p => (
                  <button key={p.v} className={`amt ${!custom && amt===p.v?'sel':''}`} onClick={()=>{setAmt(p.v);setCustom('');}}>
                    <span className="amt-value">£{p.v}</span>
                    <span className="amt-desc">{p.d}</span>
                  </button>
                ))}
              </div>

              <div className="custom-wrap">
                <span className="prefix">£</span>
                <input
                  type="number"
                  placeholder="Other amount"
                  value={custom}
                  onChange={e => setCustom(e.target.value.replace(/[^0-9.]/g,''))}
                  onFocus={()=>setAmt(0)}
                />
              </div>

              <div style={{marginTop:28,display:'flex',gap:12,flexWrap:'wrap',alignItems:'center'}}>
                <a
                  href={`mailto:umar.khan@littlesmiles.org.uk?subject=Donation%20enquiry%20%E2%80%94%20%C2%A3${effective||0}${freq==='monthly'?'%20per%20month':''}&body=Hi%20Umar%2C%0A%0AI%27d%20like%20to%20donate%20%C2%A3${effective||0}${freq==='monthly'?'%20per%20month':''}.%20Please%20let%20me%20know%20how%20to%20proceed.%0A%0AThanks`}
                  className="btn btn-amber"
                >
                  Donate £{effective||0}{freq==='monthly'?' / month':''} <span className="btn-arrow">→</span>
                </a>
                <span style={{fontSize:13,color:'var(--mute)'}}>We'll reply within 48 hours with payment details</span>
              </div>

              <p style={{marginTop:40,color:'var(--ink-soft)',fontSize:15,maxWidth:540}}>
                We're a registered charity (No. 1212909). UK taxpayers can add <strong>Gift Aid</strong> and boost every pound you give by 25% at no extra cost to you. We'll send you a Gift Aid declaration with your confirmation.
              </p>
            </div>

            <aside className="donate-side">
              <h3>What your money funds</h3>
              <ul>
                <li>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Art materials, paint, paper &amp; face paint
                </li>
                <li>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Transport, coach hire &amp; trip tickets
                </li>
                <li>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Food at community events
                </li>
                <li>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Christmas and Eid gifts for children
                </li>
                <li>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                  Safeguarding &amp; DBS checks for volunteers
                </li>
              </ul>
              <div className="trust">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                <div>
                  <div>Registered Charity No. 1212909</div>
                  <div style={{fontWeight:500,color:'var(--ink-soft)',fontSize:12,marginTop:2}}>England &amp; Wales · Gift Aid eligible</div>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

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