// demo.jsx — book demo with interactive slot picker
const { useState: useDState } = React;

const DemoFlow = () => {
  const [step, setStep] = useDState(1);
  const [slot, setSlot] = useDState(null);
  const [form, setForm] = useDState({name:'',email:'',clinic:''});

  const days = [
    {date:'Tue · Oct 28', slots:['9:30 AM','11:00 AM','2:00 PM','4:00 PM']},
    {date:'Wed · Oct 29', slots:['10:00 AM','1:00 PM','3:30 PM']},
    {date:'Thu · Oct 30', slots:['9:00 AM','11:30 AM','2:30 PM','5:00 PM']},
  ];

  return (
    <section style={{padding:'140px var(--site-pad) 80px', background:'var(--paper)', minHeight:'80vh'}}>
      <div style={{maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.3fr', gap:80, alignItems:'start'}}>
        <div className="reveal" style={{position:'sticky', top:120}}>
          <div className="tag-pill" style={{marginBottom:24}}><span className="dot"></span>30-min walkthrough</div>
          <h1 className="h1" style={{maxWidth:'14ch'}}>See your clinic on <em>ProviderOS.</em></h1>
          <p className="lead mt-24">No slides. Just the platform — built around your practice.</p>
          <div className="col gap-16 mt-32">
            {[
              {i:'schedule', t:'30 minutes, your timezone'},
              {i:'videocam', t:'Google Meet · zero friction'},
              {i:'verified_user', t:'Your data stays yours'},
            ].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>

        <div className="reveal delay-1 surface" style={{padding:36}}>
          <div className="row gap-8" style={{marginBottom:24}}>
            {[1,2,3].map(s => (
              <div key={s} style={{flex:1, height:6, borderRadius:99, background: s <= step ? 'var(--brand-primary)' : 'var(--grey-10)'}}/>
            ))}
          </div>

          {step === 1 && (
            <div>
              <div style={{fontFamily:'var(--serif)', fontSize:26, fontWeight:500, marginBottom:8}}>Pick a time</div>
              <div style={{fontSize:14, color:'var(--grey-60)', marginBottom:24}}>All times Eastern. We'll convert if needed.</div>
              {days.map(d => (
                <div key={d.date} style={{marginBottom:18}}>
                  <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--brand-primary)', marginBottom:10}}>{d.date}</div>
                  <div className="row gap-8" style={{flexWrap:'wrap'}}>
                    {d.slots.map(t => {
                      const id = `${d.date} · ${t}`;
                      const active = slot === id;
                      return (
                        <button key={t} onClick={()=>setSlot(id)} style={{
                          padding:'10px 16px', borderRadius:12, border: active ? '2px solid var(--brand-primary)' : '1px solid var(--grey-10)',
                          background: active ? 'var(--brand-primary)' : 'white',
                          color: active ? 'white' : 'var(--ink)',
                          fontSize:14, fontWeight:600, cursor:'pointer', fontFamily:'var(--font-sans)',
                          transition:'all .2s',
                        }}>{t}</button>
                      );
                    })}
                  </div>
                </div>
              ))}
              <button disabled={!slot} onClick={()=>setStep(2)} className="btn btn-primary mt-32" style={{width:'100%', justifyContent:'center', padding:'14px 22px', opacity: slot ? 1 : 0.4, cursor: slot ? 'pointer' : 'not-allowed'}}>Continue <span className="arrow">→</span></button>
            </div>
          )}

          {step === 2 && (
            <div>
              <div style={{fontFamily:'var(--serif)', fontSize:26, fontWeight:500, marginBottom:8}}>Tell us about you</div>
              <div style={{fontSize:14, color:'var(--grey-60)', marginBottom:24}}>{slot}</div>
              <div className="col gap-16">
                {[
                  {k:'name', l:'Your name', p:'Dr. Amara Okafor'},
                  {k:'email', l:'Work email', p:'amara@stepupclinic.ca', t:'email'},
                  {k:'clinic', l:'Clinic name', p:'Step Up Clinic'},
                ].map(f => (
                  <label key={f.k} className="col" style={{gap:8}}>
                    <span style={{fontSize:12, fontWeight:600, letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--grey-70)'}}>{f.l}</span>
                    <input type={f.t || 'text'} value={form[f.k]} onChange={e=>setForm({...form, [f.k]:e.target.value})} placeholder={f.p} style={{padding:'14px 16px', borderRadius:12, border:'1px solid var(--grey-10)', fontSize:15, fontFamily:'var(--font-sans)'}}/>
                  </label>
                ))}
              </div>
              <div className="row gap-12 mt-32">
                <button onClick={()=>setStep(1)} className="btn btn-secondary" style={{padding:'14px 22px'}}>← Back</button>
                <button disabled={!form.name||!form.email||!form.clinic} onClick={()=>setStep(3)} className="btn btn-primary flex-1" style={{justifyContent:'center', padding:'14px 22px', opacity:(form.name&&form.email&&form.clinic)?1:0.4}}>Confirm Booking <span className="arrow">→</span></button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="text-center" style={{padding:'20px 0'}}>
              <div className="center" style={{width:72, height:72, borderRadius:'50%', background:'var(--soft-mint)', margin:'0 auto 24px'}}>
                <span className="mi mi-fill" style={{fontSize:36, color:'#1a7a3d'}}>check_circle</span>
              </div>
              <div style={{fontFamily:'var(--serif)', fontSize:32, fontWeight:500, marginBottom:8}}>You're booked.</div>
              <div style={{fontSize:15, color:'var(--grey-70)', marginBottom:24}}>{slot}</div>
              <div className="surface" style={{padding:20, background:'var(--paper-2)', textAlign:'left', maxWidth:380, margin:'0 auto'}}>
                <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--brand-primary)', marginBottom:8}}>What's next</div>
                <div style={{fontSize:14, lineHeight:1.6, color:'var(--ink)'}}>Calendar invite on its way to <strong>{form.email}</strong>. We'll come prepared with a tour of {form.clinic} on ProviderOS.</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

const DPage = () => { useReveal(); return (<div><Nav/><DemoFlow/><Footer/></div>); };
ReactDOM.createRoot(document.getElementById('root')).render(<DPage/>);