function VolunteerPage() {
  const [form, setForm] = React.useState({ name:'', email:'', phone:'', borough:'', why:'', avail:'', dbs:'' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target ? e.target.value : e }));

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Please enter your name';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) errs.email = 'Valid email please';
    if (!form.phone.trim()) errs.phone = 'Phone number needed';
    if (!form.why.trim() || form.why.trim().length < 10) errs.why = 'A few words, please';
    if (!form.avail) errs.avail = 'Pick one';
    if (!form.dbs) errs.dbs = 'Pick one';
    setErrors(errs);
    if (Object.keys(errs).length === 0) {
      setSent(true);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  };

  return (
    <>
      <Nav route="involved" />
      <section className="page-head">
        <div className="wrap">
          <div className="eyebrow">Volunteer sign-up</div>
          <h1>Become a Little Smiles <span className="marker">volunteer.</span></h1>
          <p>Our volunteers make everything possible. We’re looking for enthusiastic people to help run activities, trips, and events for children across London. DBS check required. Full induction provided.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap-narrow">
          {sent ? (
            <Reveal className="form-success">
              <div style={{fontSize:44,marginBottom:8}}>🎉</div>
              <h3>Application received, {form.name.split(' ')[0]}!</h3>
              <p style={{color:'var(--ink-soft)'}}>We’ll be in touch within a week to arrange a quick chat and next steps on DBS. Welcome to the team.</p>
              <a href="#/home" className="btn btn-teal" style={{marginTop:12}}>Back to home</a>
            </Reveal>
          ) : (
            <>
              <Reveal className="expectations">
                <h3 style={{marginBottom:18,fontSize:22}}>What to expect</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>
                    Arts &amp; crafts sessions, trips, and 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>
                    Working alongside our programmes team
                  </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>
                    Flexible: one-off events or regular commitment
                  </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>
                    Full safeguarding induction &amp; DBS support
                  </li>
                </ul>
              </Reveal>

              <form onSubmit={submit}>
                <div className="form-grid">
                  <div className={`field ${errors.name?'error':''}`}>
                    <label>Full name</label>
                    <input value={form.name} onChange={set('name')} placeholder="e.g. Aisha Khan" />
                    <span className="err">{errors.name}</span>
                  </div>
                  <div className={`field ${errors.email?'error':''}`}>
                    <label>Email</label>
                    <input type="email" value={form.email} onChange={set('email')} placeholder="you@email.com" />
                    <span className="err">{errors.email}</span>
                  </div>
                  <div className={`field ${errors.phone?'error':''}`}>
                    <label>Phone</label>
                    <input value={form.phone} onChange={set('phone')} placeholder="07..." />
                    <span className="err">{errors.phone}</span>
                  </div>
                  <div className="field">
                    <label>London borough</label>
                    <input value={form.borough} onChange={set('borough')} placeholder="e.g. Brent, Newham, Tower Hamlets" />
                  </div>
                  <div className={`field full ${errors.why?'error':''}`}>
                    <label>Why do you want to volunteer?</label>
                    <textarea value={form.why} onChange={set('why')} placeholder="Tell us a little about you. What draws you to this work, and any relevant experience."></textarea>
                    <span className="err">{errors.why}</span>
                  </div>

                  <div className={`field full ${errors.avail?'error':''}`}>
                    <label>Availability</label>
                    <div className="radio-row">
                      {['Weekdays','Weekends','Both','One-off only'].map(opt => (
                        <button type="button" key={opt} className={`radio-pill ${form.avail===opt?'on':''}`} onClick={()=>setForm(f=>({...f, avail:opt}))}>{opt}</button>
                      ))}
                    </div>
                    <span className="err">{errors.avail}</span>
                  </div>

                  <div className={`field full ${errors.dbs?'error':''}`}>
                    <label>Do you have a current DBS check?</label>
                    <div className="radio-row">
                      {['Yes','No','Not sure'].map(opt => (
                        <button type="button" key={opt} className={`radio-pill ${form.dbs===opt?'on':''}`} onClick={()=>setForm(f=>({...f, dbs:opt}))}>{opt}</button>
                      ))}
                    </div>
                    <span className="err">{errors.dbs}</span>
                  </div>
                </div>

                <div style={{marginTop:28,display:'flex',gap:14,alignItems:'center',flexWrap:'wrap'}}>
                  <button type="submit" className="btn btn-teal">Send my application <span className="btn-arrow">→</span></button>
                  <span style={{fontSize:13,color:'var(--mute)'}}>We reply within a week. No spam, ever.</span>
                </div>
              </form>
            </>
          )}
        </div>
      </section>

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