// founding.jsx — application form
const { useState: useFState } = React;

const Field = ({label, type='text', placeholder, value, onChange, required, options}) => (
  <label className="col" style={{gap:8}}>
    <span style={{fontSize:12, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--grey-70)'}}>{label}{required && ' *'}</span>
    {options ? (
      <select value={value} onChange={e=>onChange(e.target.value)} style={{padding:'14px 16px', borderRadius:12, border:'1px solid var(--grey-10)', fontSize:15, fontFamily:'var(--font-sans)', background:'white'}}>
        <option value="">Select...</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    ) : type === 'textarea' ? (
      <textarea value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} rows={4} style={{padding:'14px 16px', borderRadius:12, border:'1px solid var(--grey-10)', fontSize:15, fontFamily:'var(--font-sans)', resize:'vertical'}}/>
    ) : (
      <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} style={{padding:'14px 16px', borderRadius:12, border:'1px solid var(--grey-10)', fontSize:15, fontFamily:'var(--font-sans)'}}/>
    )}
  </label>
);

const FApply = () => {
  const [form, setForm] = useFState({clinic:'',name:'',email:'',role:'',pracs:'',disciplines:'',pms:'',why:''});
  const [submitted, setSubmitted] = useFState(false);
  const update = k => v => setForm(f => ({...f, [k]: v}));

  if (submitted) {
    return (
      <section style={{minHeight:'80vh', display:'flex', alignItems:'center', justifyContent:'center', padding:'120px var(--site-pad)', background:'linear-gradient(160deg, var(--warm-cream), var(--soft-mint))'}}>
        <div className="reveal text-center" style={{maxWidth:600}}>
          <div className="center" style={{width:80, height:80, borderRadius:'50%', background:'white', margin:'0 auto 32px', boxShadow:'0 10px 30px rgba(11,18,40,0.08)'}}>
            <span className="mi mi-fill" style={{fontSize:40, color:'#1a7a3d'}}>check_circle</span>
          </div>
          <h1 className="h1" style={{maxWidth:'18ch', margin:'0 auto'}}>Application received.</h1>
          <p className="lead" style={{margin:'24px auto 0'}}>We review every founding clinic application personally. Expect to hear back within 48 hours.</p>
        </div>
      </section>
    );
  }

  return (
    <section style={{padding:'140px var(--site-pad) 80px', background:'var(--paper)'}}>
      <div style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'start'}}>
        <div className="reveal" style={{position:'sticky', top:120}}>
          <div className="tag-pill" style={{marginBottom:24, background:'var(--brand-primary)', color:'white', borderColor:'transparent'}}><span className="dot" style={{background:'var(--mark-cyan)'}}></span>Founding cohort · Limited</div>
          <h1 className="h1" style={{maxWidth:'14ch'}}>Apply for <em>founding access.</em></h1>
          <p className="lead mt-24">Locked pricing. Co-marketing. Direct line to the team. Built with you.</p>
          <div className="col gap-16 mt-32">
            {[
              {i:'lock', t:'Founding rate, kept for life'},
              {i:'campaign', t:'We build with your story'},
              {i:'forum', t:'Weekly product calls'},
              {i:'rocket_launch', t:'First access to every release'},
            ].map((b, i) => (
              <div key={i} className="row gap-12" style={{alignItems:'center'}}>
                <div className="center" style={{width:36, height:36, borderRadius:10, background:'var(--brand-tertiary)', color:'var(--brand-primary)'}}><span className="mi" style={{fontSize:18}}>{b.i}</span></div>
                <div style={{fontSize:14, fontWeight:500}}>{b.t}</div>
              </div>
            ))}
          </div>
        </div>
        <form className="reveal delay-1 surface" style={{padding:40, display:'flex', flexDirection:'column', gap:20}} onSubmit={e=>{e.preventDefault(); setSubmitted(true); window.scrollTo({top:0, behavior:'smooth'});}}>
          <div style={{fontFamily:'var(--serif)', fontSize:24, fontWeight:500, marginBottom:8}}>Tell us about your clinic</div>
          <Field label="Clinic name" placeholder="Step Up Clinic" value={form.clinic} onChange={update('clinic')} required/>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
            <Field label="Your name" placeholder="Dr. Amara Okafor" value={form.name} onChange={update('name')} required/>
            <Field label="Your role" value={form.role} onChange={update('role')} options={['Owner','Office Manager','Practitioner','Other']} required/>
          </div>
          <Field label="Work email" type="email" placeholder="amara@stepupclinic.ca" value={form.email} onChange={update('email')} required/>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16}}>
            <Field label="Practitioners" value={form.pracs} onChange={update('pracs')} options={['1-3','4-10','11-25','25+']}/>
            <Field label="Current PMS" placeholder="JaneApp, Cliniko..." value={form.pms} onChange={update('pms')}/>
          </div>
          <Field label="Disciplines offered" placeholder="Physio, Massage, Chiro, Acupuncture..." value={form.disciplines} onChange={update('disciplines')}/>
          <Field label="What's broken right now?" type="textarea" placeholder="Be honest. The messier the better." value={form.why} onChange={update('why')}/>
          <button type="submit" className="btn btn-primary mt-16" style={{padding:'16px 24px', fontSize:15, justifyContent:'center'}}>Submit Application <span className="arrow">→</span></button>
          <div style={{fontSize:12, color:'var(--grey-60)', textAlign:'center'}}>Reviewed within 48 hours. By a person.</div>
        </form>
      </div>
    </section>
  );
};

const FPage = () => { useReveal(); return (<div><Nav active="provideros"/><FApply/><Footer/></div>); };
ReactDOM.createRoot(document.getElementById('root')).render(<FPage/>);