// Demo / Request a demo

function DemoPage() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    name:'', email:'', restaurant:'', city:'',
    covers:'80-150', concept:'fine-dining', stack:'', when:'this-week',
  });
  const update = (k,v) => setForm(f=>({ ...f, [k]: v }));

  return (
    <div className="site">
      <PublicNav current="demo" minimal/>
      <main>
        <section style={{ paddingTop:64, paddingBottom:80 }}>
          <div className="wrap">
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'start' }}>
              {/* Left — pitch */}
              <div style={{ position:'sticky', top:96 }}>
                <Eyebrow>Request a demo</Eyebrow>
                <h1 className="display display-lg" style={{ marginTop:24 }}>
                  Thirty minutes,<br/>
                  <em className="display-italic ink-gold">your numbers</em>.
                </h1>
                <p className="copy" style={{ marginTop:24, fontSize:14.5 }}>
                  Tell us about your room. We'll set up a 30-minute video call with one of our founders —
                  not a sales rep. We import your last 90 days of bookings before we meet, so the
                  conversation starts from your floor, not a deck.
                </p>

                <div style={{ marginTop:40, display:'flex', flexDirection:'column' }}>
                  {[
                    ['I',  'You fill in this form'],
                    ['II', 'We import 90 days of your data'],
                    ['III','You meet a founder, on your floor or on Zoom'],
                    ['IV', 'You decide. No follow-up sequence.'],
                  ].map(([n,t])=>(
                    <div key={n} style={{ display:'grid', gridTemplateColumns:'40px 1fr', gap:16, padding:'14px 0', borderTop:'1px solid var(--site-hair)' }}>
                      <span style={{ fontFamily:'var(--font-display)', fontSize:18, color:'var(--site-gold)' }}>{n}</span>
                      <span style={{ fontSize:13.5, color:'var(--site-ink-mute)', lineHeight:1.5 }}>{t}</span>
                    </div>
                  ))}
                </div>

                <div style={{ marginTop:32, padding:'18px 20px', background:'var(--site-bg-tint)', border:'1px solid var(--site-hair)', borderRadius:6 }}>
                  <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--site-ink-dim)', marginBottom:8 }}>Or — we're easy to reach</div>
                  <div style={{ fontSize:13.5, color:'var(--site-ink-mute)' }}>
                    <span className="ink" style={{ fontWeight:600 }}>+46 8 123 45 67</span><br/>
                    <span className="ink" style={{ fontWeight:600 }}>hello@bord.app</span><br/>
                    Skeppargatan 12, 114 52 Stockholm
                  </div>
                </div>
              </div>

              {/* Right — form */}
              <div style={{ border:'1px solid var(--site-hair)', borderRadius:8, padding:40, background:'var(--site-bg-tint)' }}>
                {step !== 4 && (
                  <div style={{ display:'flex', gap:6, marginBottom:32 }}>
                    {[1,2,3].map(i => (
                      <div key={i} style={{ flex:1, height:3, background: i <= step ? 'var(--site-gold)' : 'var(--site-hair)', borderRadius:999 }}/>
                    ))}
                  </div>
                )}

                {step === 1 && (
                  <div className="fade-in">
                    <div className="display display-md" style={{ fontWeight:500, marginBottom:6 }}>Who are you?</div>
                    <p className="copy" style={{ marginBottom:24, fontSize:13.5 }}>So we know who's calling.</p>
                    <Field label="Your name"><input value={form.name} onChange={e=>update('name', e.target.value)} placeholder="Magnus Forsberg" style={inputStyle()}/></Field>
                    <Field label="Email"><input value={form.email} onChange={e=>update('email', e.target.value)} placeholder="magnus@bjorkochhagel.se" style={inputStyle()}/></Field>
                    <Field label="Restaurant"><input value={form.restaurant} onChange={e=>update('restaurant', e.target.value)} placeholder="Björk & Hagel" style={inputStyle()}/></Field>
                    <Field label="City"><input value={form.city} onChange={e=>update('city', e.target.value)} placeholder="Stockholm" style={inputStyle()}/></Field>
                    <button onClick={()=>setStep(2)} className="btn btn-primary" style={{ marginTop:8, width:'100%', justifyContent:'center', padding:'14px 18px' }}>Continue</button>
                  </div>
                )}

                {step === 2 && (
                  <div className="fade-in">
                    <div className="display display-md" style={{ fontWeight:500, marginBottom:6 }}>Tell us about the room.</div>
                    <p className="copy" style={{ marginBottom:24, fontSize:13.5 }}>So we tailor what we show you.</p>
                    <Field label="Covers per night">
                      <RadioGroup value={form.covers} onChange={v=>update('covers',v)}
                        options={[['<40','Under 40'],['40-80','40 – 80'],['80-150','80 – 150'],['150+','150+']]}/>
                    </Field>
                    <Field label="Concept">
                      <RadioGroup value={form.concept} onChange={v=>update('concept',v)}
                        options={[['fine-dining','Fine-dining'],['bistro','Bistro / wine bar'],['hotel','Hotel restaurant'],['group','Restaurant group']]}/>
                    </Field>
                    <Field label="What you're using today">
                      <input value={form.stack} onChange={e=>update('stack',e.target.value)} placeholder="e.g. SevenRooms + Fortnox + Spreadsheets" style={inputStyle()}/>
                    </Field>
                    <div style={{ display:'flex', gap:8 }}>
                      <button onClick={()=>setStep(1)} className="btn btn-ghost" style={{ flex:1, justifyContent:'center', padding:'14px 18px' }}>Back</button>
                      <button onClick={()=>setStep(3)} className="btn btn-primary" style={{ flex:2, justifyContent:'center', padding:'14px 18px' }}>Continue</button>
                    </div>
                  </div>
                )}

                {step === 3 && (
                  <div className="fade-in">
                    <div className="display display-md" style={{ fontWeight:500, marginBottom:6 }}>When suits you?</div>
                    <p className="copy" style={{ marginBottom:24, fontSize:13.5 }}>We'll send three slots in your time zone.</p>
                    <Field label="Soonest sensible">
                      <RadioGroup value={form.when} onChange={v=>update('when',v)}
                        options={[['this-week','This week'],['next-week','Next week'],['this-month','This month'],['just-curious','Just curious for now']]}/>
                    </Field>
                    <div style={{ marginTop:8, padding:'16px 18px', background:'var(--site-bg)', border:'1px solid var(--site-hair)', borderRadius:6 }}>
                      <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--site-ink-dim)', marginBottom:6 }}>What we'll prepare</div>
                      <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:6 }}>
                        {['Your last 90 days, imported','Your menu, costed','Your covers, by source, projected','A printable pre-shift briefing'].map(x=>(
                          <li key={x} style={{ display:'flex', gap:10, fontSize:12.5, color:'var(--site-ink-mute)' }}>
                            <span style={{ width:5, height:5, background:'var(--site-gold)', transform:'rotate(45deg)', marginTop:7, flexShrink:0 }}/>{x}
                          </li>
                        ))}
                      </ul>
                    </div>
                    <div style={{ display:'flex', gap:8, marginTop:18 }}>
                      <button onClick={()=>setStep(2)} className="btn btn-ghost" style={{ flex:1, justifyContent:'center', padding:'14px 18px' }}>Back</button>
                      <button onClick={()=>setStep(4)} className="btn btn-primary" style={{ flex:2, justifyContent:'center', padding:'14px 18px' }}>Send request</button>
                    </div>
                  </div>
                )}

                {step === 4 && (
                  <div className="fade-in" style={{ textAlign:'center', padding:'24px 0' }}>
                    <div style={{ width:56, height:56, borderRadius:999, background:'var(--site-gold)', color:'#1a1606', display:'inline-flex', alignItems:'center', justifyContent:'center', marginBottom:24 }}>
                      <Icon.check size={26} color="#1a1606"/>
                    </div>
                    <div className="display display-md" style={{ fontWeight:500, marginBottom:12 }}>We've got it.</div>
                    <p className="copy" style={{ margin:'0 auto', maxWidth:340, fontSize:14 }}>
                      Lina or Pär will reach you at <span className="ink" style={{ fontWeight:600 }}>{form.email || 'your address'}</span> within four business hours, with three time slots and a draft import of your last 90 days.
                    </p>
                    <div style={{ marginTop:32 }}>
                      <a href="/" className="btn btn-ghost">Back to home</a>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </section>
      </main>
      <PublicFooter/>
    </div>
  );
}

const inputStyle = () => ({
  width:'100%', padding:'12px 14px', fontSize:14,
  background:'var(--site-bg)', border:'1px solid var(--site-hair-strong)',
  color:'var(--site-ink)', borderRadius:5, fontFamily:'inherit', outline:'none',
});

function Field({ label, children }) {
  return (
    <div style={{ marginBottom:16 }}>
      <label style={{ fontSize:11, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--site-ink-dim)', marginBottom:8, display:'block' }}>{label}</label>
      {children}
    </div>
  );
}

function RadioGroup({ value, onChange, options }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
      {options.map(([v, l]) => (
        <button key={v} type="button" onClick={()=>onChange(v)}
          style={{
            padding:'12px 14px',
            background: value===v ? 'rgba(233,195,73,0.08)' : 'var(--site-bg)',
            border:`1px solid ${value===v ? 'var(--site-gold)' : 'var(--site-hair-strong)'}`,
            color: value===v ? 'var(--site-ink)' : 'var(--site-ink-mute)',
            borderRadius:5, fontFamily:'inherit', fontSize:13, fontWeight:500, textAlign:'left',
            cursor:'pointer', transition:'all 140ms ease',
          }}>{l}</button>
      ))}
    </div>
  );
}

window.DemoPage = DemoPage;