/* ===== Booking modal — interactive 4-step flow (all fake) ===== */
function Booking({ open, onClose }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({ service: null, mode: null, date: null, time: null });
  React.useEffect(() => { if (open) { setStep(0); setData({ service: null, mode: null, date: null, time: null }); } }, [open]);
  if (!open) return null;

  const services = ['Counseling & Psychotherapy', 'Mental Health Consultation', 'Psychiatric Consultation', 'Psychological Assessment'];
  const dates = ['Mon 8', 'Tue 9', 'Wed 10', 'Thu 11', 'Fri 12', 'Sat 13'];
  const times = ['9:00 AM', '10:30 AM', '1:00 PM', '2:30 PM', '4:00 PM'];
  const steps = ['Service', 'Format', 'Date & time', 'Confirm'];
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));
  const canNext = [data.service, data.mode, data.date && data.time, true][step];

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(31,78,94,.42)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, animation: 'hsFade .2s ease' }}>
      <div onClick={e => e.stopPropagation()} style={{ background: '#fff', borderRadius: 'var(--r-xl)', width: 'min(560px,100%)', maxHeight: '92vh', overflow: 'auto', boxShadow: 'var(--shadow-lg)', animation: 'hsRise .28s var(--ease-soft)' }}>
        {/* header */}
        <div style={{ padding: '22px 28px', borderBottom: '1px solid var(--hs-line-soft)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Logo variant="mark" height={34} />
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17, color: 'var(--hs-teal)' }}>Book a session</div>
          </div>
          <button onClick={onClose} style={{ background: 'none', border: 0, cursor: 'pointer', color: 'var(--hs-ink-2)' }}><Icon name="x" size={22} /></button>
        </div>
        {/* progress */}
        <div style={{ display: 'flex', gap: 6, padding: '16px 28px 0' }}>
          {steps.map((s, i) => (
            <div key={s} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <div style={{ height: 5, borderRadius: 99, background: i <= step ? 'var(--hs-sky)' : 'var(--hs-line)' }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 11, color: i <= step ? 'var(--hs-sky-deep)' : 'var(--hs-ink-3)' }}>{s}</span>
            </div>
          ))}
        </div>
        {/* body */}
        <div style={{ padding: '24px 28px 8px', minHeight: 220 }}>
          {step === 0 && <Choices options={services} value={data.service} onPick={v => set('service', v)} />}
          {step === 1 && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[['video', 'Online', 'Secure video session'], ['map-pin', 'In-Person', 'At our Lipa City clinic']].map(([ic, t, d]) => (
                <button key={t} onClick={() => set('mode', t)} style={{
                  textAlign: 'left', cursor: 'pointer', background: data.mode === t ? 'var(--hs-sky-soft)' : '#fff',
                  border: `1.5px solid ${data.mode === t ? 'var(--hs-sky)' : 'var(--hs-line)'}`, borderRadius: 'var(--r-md)', padding: '20px 18px',
                }}>
                  <Icon name={ic} size={24} color="var(--hs-sky-deep)" />
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--hs-teal)', margin: '10px 0 4px' }}>{t}</div>
                  <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--hs-ink-2)' }}>{d}</div>
                </button>
              ))}
            </div>
          )}
          {step === 2 && (
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, color: 'var(--hs-teal)', marginBottom: 10 }}>Pick a day</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 22 }}>
                {dates.map(d => <Pill key={d} active={data.date === d} onClick={() => set('date', d)}>{d}</Pill>)}
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13, color: 'var(--hs-teal)', marginBottom: 10 }}>Pick a time</div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {times.map(t => <Pill key={t} active={data.time === t} onClick={() => set('time', t)}>{t}</Pill>)}
              </div>
            </div>
          )}
          {step === 3 && (
            <div style={{ textAlign: 'center', padding: '8px 0' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--hs-sprout-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
                <Icon name="check" size={32} color="var(--hs-sprout-deep)" />
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: 'var(--hs-teal)', marginBottom: 8 }}>You’re all set!</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--hs-ink-2)', margin: '0 auto 18px', maxWidth: 320, lineHeight: 1.55 }}>We’ll confirm your request shortly. Everything stays confidential.</p>
              <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 8, textAlign: 'left', background: 'var(--hs-cream)', borderRadius: 'var(--r-md)', padding: '16px 22px' }}>
                <Summary k="Service" v={data.service} /><Summary k="Format" v={data.mode} /><Summary k="When" v={`${data.date} · ${data.time}`} />
              </div>
            </div>
          )}
        </div>
        {/* footer */}
        <div style={{ padding: '16px 28px 24px', display: 'flex', justifyContent: 'space-between', gap: 12 }}>
          {step > 0 && step < 3 ? <Btn kind="outline" onClick={() => setStep(step - 1)}>Back</Btn> : <span />}
          {step < 3 && <Btn kind="primary" onClick={() => canNext && setStep(step + 1)} style={{ opacity: canNext ? 1 : .45, pointerEvents: canNext ? 'auto' : 'none', marginLeft: 'auto' }}>{step === 2 ? 'Confirm booking' : 'Continue'}</Btn>}
          {step === 3 && <Btn kind="primary" onClick={onClose} style={{ marginLeft: 'auto' }}>Done</Btn>}
        </div>
      </div>
    </div>
  );
}

function Choices({ options, value, onPick }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {options.map(o => (
        <button key={o} onClick={() => onPick(o)} style={{
          textAlign: 'left', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          background: value === o ? 'var(--hs-sky-soft)' : '#fff',
          border: `1.5px solid ${value === o ? 'var(--hs-sky)' : 'var(--hs-line)'}`,
          borderRadius: 'var(--r-md)', padding: '15px 18px',
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, color: 'var(--hs-teal)',
        }}>
          {o}{value === o && <Icon name="check" size={18} color="var(--hs-sky-deep)" />}
        </button>
      ))}
    </div>
  );
}
function Pill({ children, active, onClick }) {
  return <button onClick={onClick} style={{
    cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14,
    padding: '10px 18px', borderRadius: 'var(--r-pill)',
    background: active ? 'var(--hs-sky)' : '#fff', color: active ? '#fff' : 'var(--hs-teal)',
    border: `1.5px solid ${active ? 'var(--hs-sky)' : 'var(--hs-line)'}`,
  }}>{children}</button>;
}
function Summary({ k, v }) {
  return <div style={{ display: 'flex', gap: 14, fontSize: 14 }}>
    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, color: 'var(--hs-ink-3)', width: 64 }}>{k}</span>
    <span style={{ fontFamily: 'var(--font-body)', fontWeight: 600, color: 'var(--hs-teal)' }}>{v}</span>
  </div>;
}
Object.assign(window, { Booking });