/* BookingModal — a click-thru same-day booking flow (3 steps + confirmation) */
function BookingModal({ open, onClose }) {
  const [step, setStep] = React.useState(0);
  const [reason, setReason] = React.useState(null);
  const [slot, setSlot] = React.useState(null);

  React.useEffect(() => { if (open) { setStep(0); setReason(null); setSlot(null); } }, [open]);
  if (!open) return null;

  const reasons = [
    { icon: 'thermometer', label: 'Feeling unwell', sub: 'Cold, flu, infection, fever' },
    { icon: 'bandage', label: 'Minor injury', sub: 'Cuts, sprains, rashes' },
    { icon: 'stethoscope', label: 'Checkup', sub: 'Physical, screening, wellness' },
    { icon: 'pill', label: 'Prescription', sub: 'Renewal or new script' },
    { icon: 'heart-pulse', label: 'Ongoing care', sub: 'Follow-up or chronic condition' },
    { icon: 'video', label: 'Virtual visit', sub: 'Phone or video, suitable concerns' },
  ];
  const slots = [
    { time: '11:20 am', wait: 'go', label: '~10 min wait' },
    { time: '12:00 pm', wait: 'go', label: '~10 min wait' },
    { time: '1:45 pm', wait: 'wait', label: '~30 min wait' },
    { time: '3:15 pm', wait: 'go', label: 'No wait' },
    { time: '4:30 pm', wait: 'wait', label: '~25 min wait' },
    { time: '6:00 pm', wait: 'go', label: 'No wait' },
  ];

  const steps = ['Reason', 'Time', 'Details', 'Done'];

  const card = { background: 'var(--surface)', border: '1.5px solid var(--line)', borderRadius: 'var(--r-md)', padding: 16, cursor: 'pointer', textAlign: 'left', transition: 'all var(--dur) var(--ease-out)', fontFamily: 'var(--font-sans)' };
  const cardSel = { ...card, borderColor: 'var(--teal-500)', boxShadow: 'var(--shadow-focus)', background: 'var(--teal-50)' };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(10,48,47,0.42)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: '100%', maxWidth: 580, background: 'var(--paper)', borderRadius: 'var(--r-xl)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
        {/* header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 26px', borderBottom: '1px solid var(--line)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <img src="assets/logo-mark.png" alt="" style={{ height: 28 }} />
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--teal-800)' }}>Book a same-day visit</span>
          </div>
          <button onClick={onClose} style={{ border: 0, background: 'transparent', cursor: 'pointer', color: 'var(--ink-500)', display: 'flex' }}><Icon name="x" size={22} /></button>
        </div>

        {/* progress */}
        {step < 3 && (
          <div style={{ display: 'flex', gap: 8, padding: '16px 26px 0' }}>
            {steps.slice(0, 3).map((s, i) => (
              <div key={s} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{ height: 4, borderRadius: 2, background: i <= step ? 'var(--teal-600)' : 'var(--line)', transition: 'background var(--dur)' }}></div>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: i <= step ? 'var(--teal-700)' : 'var(--ink-400)' }}>{s}</span>
              </div>
            ))}
          </div>
        )}

        <div style={{ padding: 26, overflowY: 'auto' }}>
          {step === 0 && (
            <div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 24, color: 'var(--ink-900)', margin: '0 0 4px' }}>What brings you in?</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--ink-500)', margin: '0 0 20px' }}>This helps us match you with the right provider.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {reasons.map((r) => (
                  <button key={r.label} onClick={() => setReason(r.label)} style={reason === r.label ? cardSel : card}>
                    <div style={{ color: 'var(--teal-700)', marginBottom: 8 }}><Icon name={r.icon} size={22} /></div>
                    <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--ink-900)' }}>{r.label}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-500)', marginTop: 2 }}>{r.sub}</div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 24, color: 'var(--ink-900)', margin: '0 0 4px' }}>Pick a time today</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--ink-500)', margin: '0 0 20px' }}>Live wait estimates, updated as the day goes.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                {slots.map((s) => (
                  <button key={s.time} onClick={() => setSlot(s.time)} style={{ ...(slot === s.time ? cardSel : card), display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontWeight: 700, fontSize: 16, color: 'var(--ink-900)' }}>{s.time}</span>
                    <Pill status={s.wait}>{s.label}</Pill>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 2 && (
            <div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 24, color: 'var(--ink-900)', margin: '0 0 4px' }}>Your details</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--ink-500)', margin: '0 0 20px' }}>So we can hold your spot and check you in.</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {[['Full name', 'Your name'], ['Phone number', '(604) 555-0000'], ['BC Services Card (MSP)', '0000 000 000']].map(([l, p]) => (
                  <Field key={l} label={l} placeholder={p} />
                ))}
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
                  <MSPBadge />
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--ink-500)' }}>Most visits are fully covered for eligible residents.</span>
                </div>
              </div>
            </div>
          )}

          {step === 3 && (
            <div style={{ textAlign: 'center', padding: '24px 8px' }}>
              <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'var(--go-100)', color: 'var(--go-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 18px' }}><Icon name="check" size={32} stroke={2.2} /></div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 26, color: 'var(--ink-900)', margin: '0 0 8px' }}>You're booked.</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.55, color: 'var(--ink-500)', margin: '0 auto', maxWidth: 380 }}>
                {reason || 'Your visit'} at <b style={{ color: 'var(--ink-900)' }}>{slot || '12:00 pm'}</b> today, Tidewell Family Health, Mount Pleasant. We'll text a check-in link to your phone.
              </p>
            </div>
          )}
        </div>

        {/* footer actions */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, padding: '18px 26px', borderTop: '1px solid var(--line)', background: 'var(--surface)' }}>
          {step > 0 && step < 3
            ? <Button variant="link" icon="arrow-left" onClick={() => setStep(step - 1)}>Back</Button>
            : <span></span>}
          {step < 2 && <Button onClick={() => setStep(step + 1)} iconRight="arrow-right" style={{ opacity: (step === 0 && !reason) || (step === 1 && !slot) ? 0.45 : 1, pointerEvents: (step === 0 && !reason) || (step === 1 && !slot) ? 'none' : 'auto' }}>Continue</Button>}
          {step === 2 && <Button onClick={() => setStep(3)} icon="calendar-check">Confirm booking</Button>}
          {step === 3 && <Button onClick={onClose}>Done</Button>}
        </div>
      </div>
    </div>
  );
}

function Field({ label, placeholder }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div>
      <label style={{ display: 'block', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--ink-700)', marginBottom: 7 }}>{label}</label>
      <input
        placeholder={placeholder}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{ width: '100%', fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--ink-900)', background: 'var(--surface)', border: '1.5px solid', borderColor: focus ? 'var(--teal-500)' : 'var(--line)', borderRadius: 'var(--r-md)', padding: '12px 14px', outline: 'none', boxShadow: focus ? 'var(--shadow-focus)' : 'none', boxSizing: 'border-box' }}
      />
    </div>
  );
}
window.BookingModal = BookingModal;