/* === Booking — multi-step flow with real reservation wiring ========= */

/* Real channels for reservation system */
const RESERVATION = {
  whatsapp: '9779848860565',
  email:    'maheshworihotel33@gmail.com',
};

function genRef() {
  const d = new Date();
  const ymd = `${d.getFullYear()}${String(d.getMonth()+1).padStart(2,'0')}${String(d.getDate()).padStart(2,'0')}`;
  const rnd = Math.random().toString(36).slice(2, 6).toUpperCase();
  return `NMH-${ymd}-${rnd}`;
}

function buildReservationText(data, ref, t) {
  const lines = [
    `New Maheshwori Hotel — Reservation Request`,
    `Ref: ${ref}`,
    ``,
    `Guest:    ${data.firstName} ${data.lastName}`,
    `Email:    ${data.email}`,
    `Phone:    ${data.phone}`,
    ``,
    `Check-In:  ${data.checkIn}`,
    `Check-Out: ${data.checkOut}`,
    `Nights:    ${data.nights}`,
    `Guests:    ${data.adults} adults${data.children ? ` + ${data.children} children` : ''}`,
    ``,
    `Room: ${data.room.name} (${data.room.size}, ${data.room.beds})`,
    `Rate: NPR ${data.room.price.toLocaleString()} / night`,
  ];
  if (data.addons.length) {
    lines.push('', 'Add-ons:');
    data.addons.forEach(a => lines.push(`  • ${a.name} — NPR ${a.price.toLocaleString()}`));
  }
  if (data.requests) lines.push('', `Notes: ${data.requests}`);
  lines.push('', `Estimated Total: NPR ${computeTotal(data).toLocaleString()}`);
  return lines.join('\n');
}

function BookingOverlay({ open, onClose }) {
  const t = useT();
  const [step, setStep] = useState(0);
  const [confirmed, setConfirmed] = useState(null); // { ref, text }
  const [data, setData] = useState(() => {
    const today = new Date();
    const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1);
    return {
    checkIn: formatBookingDate(today),
    checkOut: formatBookingDate(tomorrow),
    nights: 1,
    adults: 2,
    children: 0,
    room: ROOM_DEFS[0],
    addons: [],
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    requests: '',
    };
  });

  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
      setStep(0);
      setConfirmed(null);
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  /* Resolve room name dynamically from translations */
  const tRoom = useMemo(() => {
    const r = data.room;
    return { ...r, name: t(r.nameKey || ''), priceLabel: `NPR ${r.price.toLocaleString()}` };
  }, [data.room, t]);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const handleConfirm = useCallback(() => {
    const enriched = { ...data, room: { ...data.room, name: t(data.room.nameKey) } };
    const ref = genRef();
    const text = buildReservationText(enriched, ref, t);
    /* Persist locally as a "pending" reservation */
    try {
      const all = JSON.parse(localStorage.getItem('nmh.reservations') || '[]');
      all.push({ ref, at: new Date().toISOString(), data: enriched, text });
      localStorage.setItem('nmh.reservations', JSON.stringify(all));
    } catch {}
    setConfirmed({ ref, text });
  }, [data, t]);

  if (!open) return null;

  const steps = [
    t('book_step_dates'),
    t('book_step_room'),
    t('book_step_enhance'),
    t('book_step_guest'),
    t('book_step_confirm'),
  ];

  return (
    <div className="booking-backdrop" onClick={onClose}>
      <div className="booking-modal" onClick={e => e.stopPropagation()}>
        {confirmed ? (
          <ConfirmedView confirmed={confirmed} data={{ ...data, room: tRoom }} onClose={onClose} />
        ) : (
          <>
            <div className="booking-head">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <LogoMark size={32} />
                <div>
                  <div className="serif" style={{ fontSize: 18, fontWeight: 500, lineHeight: 1 }}>{t('reserve_stay')}</div>
                  <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--fg-soft)', marginTop: 4 }}>{t('brand_name')} {t('brand_sub')}</div>
                </div>
              </div>
              <button className="icon-btn" onClick={onClose} aria-label="Close">
                <Icon.Close />
              </button>
            </div>

            <div className="booking-stepper">
              {steps.map((s, i) => (
                <div key={s} className={`step ${i === step ? 'active' : ''} ${i < step ? 'done' : ''}`} onClick={() => i < step && setStep(i)}>
                  <span className="step-num">{i < step ? <Icon.Check /> : i + 1}</span>
                  <span className="step-label">{s}</span>
                </div>
              ))}
            </div>

            <div className="booking-body">
              {step === 0 && <StepDates data={data} update={update}/>}
              {step === 1 && <StepRoom data={data} update={update}/>}
              {step === 2 && <StepAddons data={data} update={update}/>}
              {step === 3 && <StepGuest data={data} update={update}/>}
              {step === 4 && <StepConfirm data={data} room={tRoom}/>}
            </div>

            <div className="booking-foot">
              <div>
                <div style={{ fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>{t('estimated_total')}</div>
                <div className="serif gold-text" style={{ fontSize: 28, fontWeight: 500 }}>
                  NPR {computeTotal(data).toLocaleString()}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 12 }}>
                {step > 0 && (
                  <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}>
                    <Icon.ArrowLeft /> {t('back')}
                  </button>
                )}
                {step < steps.length - 1 ? (
                  <button className="btn btn-primary" onClick={() => setStep(s => s + 1)}>
                    {t('continue')} <Icon.Arrow />
                  </button>
                ) : (
                  <button className="btn btn-primary" onClick={handleConfirm}>
                    {t('confirm_book')} <Icon.Check />
                  </button>
                )}
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function computeTotal(data) {
  const base = data.room.price;
  const addons = data.addons.reduce((s, a) => s + a.price, 0);
  return base * data.nights + addons;
}

/* ====================== Confirmation success view ====================== */

function ConfirmedView({ confirmed, data, onClose }) {
  const t = useT();
  const [copied, setCopied] = useState(false);
  const { ref, text } = confirmed;

  const waUrl = `https://wa.me/${RESERVATION.whatsapp}?text=${encodeURIComponent(text)}`;
  const mailSubject = `Reservation Request — ${ref}`;
  const mailUrl = `mailto:${RESERVATION.email}?subject=${encodeURIComponent(mailSubject)}&body=${encodeURIComponent(text)}`;

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    } catch {
      const ta = document.createElement('textarea');
      ta.value = text; document.body.appendChild(ta); ta.select();
      document.execCommand('copy'); ta.remove();
      setCopied(true);
      setTimeout(() => setCopied(false), 1800);
    }
  };

  return (
    <>
      <div className="booking-head">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LogoMark size={32} />
          <div>
            <div className="serif" style={{ fontSize: 18, fontWeight: 500, lineHeight: 1 }}>{t('confirm_success_title')}</div>
            <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--fg-soft)', marginTop: 4 }}>{t('brand_name')} {t('brand_sub')}</div>
          </div>
        </div>
        <button className="icon-btn" onClick={onClose} aria-label="Close">
          <Icon.Close />
        </button>
      </div>

      <div className="booking-body" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        <Reveal>
          <div style={{ textAlign: 'center', padding: '24px 0 40px' }}>
            <div className="success-mark">
              <Icon.Check />
            </div>
            <h2 className="serif" style={{ fontSize: 36, fontWeight: 500, marginTop: 24 }}>{t('confirm_success_title')}</h2>
            <p style={{ color: 'var(--fg-soft)', fontSize: 15, marginTop: 8, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.6 }}>
              {t('confirm_success_body')}
            </p>
          </div>
        </Reveal>

        <Reveal delay={100}>
          <div style={{ background: 'var(--bg-2)', border: '1px solid var(--line-2)', padding: 24, textAlign: 'center', marginBottom: 28 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 8 }}>{t('confirm_success_sub')}</div>
            <div className="serif gold-text" style={{ fontSize: 36, fontWeight: 500, letterSpacing: '0.08em' }}>{ref}</div>
          </div>
        </Reveal>

        <Reveal delay={200}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }} className="confirm-actions">
            <a href={waUrl} target="_blank" rel="noreferrer" className="btn btn-whatsapp">
              <Icon.Whatsapp /> {t('send_whatsapp')}
            </a>
            <a href={mailUrl} className="btn btn-ghost" style={{ justifyContent: 'center' }}>
              <Icon.Mail /> {t('send_email')}
            </a>
          </div>
        </Reveal>

        <Reveal delay={300}>
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: 20, marginBottom: 16 }}>
            <pre style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 1.6, color: 'var(--fg-2)', whiteSpace: 'pre-wrap', maxHeight: 240, overflow: 'auto' }}>{text}</pre>
          </div>
        </Reveal>

        <Reveal delay={400}>
          <button className="btn btn-ghost" onClick={onCopy} style={{ alignSelf: 'flex-start' }}>
            <Icon.Copy /> {copied ? t('copied') : t('copy_details')}
          </button>
        </Reveal>
      </div>

      <div className="booking-foot" style={{ justifyContent: 'flex-end' }}>
        <button className="btn btn-primary" onClick={onClose}>{t('close')}</button>
      </div>
    </>
  );
}

/* ====================== Steps ====================== */

const MONTHS_FULL = ['January','February','March','April','May','June','July','August','September','October','November','December'];

function parseBookingDate(str) {
  if (!str) return null;
  const parts = str.trim().split(/\s+/);
  if (parts.length !== 3) return null;
  const day = parseInt(parts[0]);
  const mon = MONTHS_FULL.findIndex(m => m.toLowerCase().startsWith(parts[1].toLowerCase().slice(0, 3)));
  const yr = parseInt(parts[2]);
  if (isNaN(day) || mon === -1 || isNaN(yr)) return null;
  return new Date(yr, mon, day);
}

function formatBookingDate(date) {
  return `${date.getDate()} ${MONTHS_FULL[date.getMonth()]} ${date.getFullYear()}`;
}

function StepDates({ data, update }) {
  const t = useT();

  const recalcNights = (ci, co) => {
    const d1 = parseBookingDate(ci);
    const d2 = parseBookingDate(co);
    if (d1 && d2 && d2 > d1) {
      update('nights', Math.round((d2 - d1) / 86400000));
    }
  };

  const handleCheckIn = (val) => {
    update('checkIn', val);
    recalcNights(val, data.checkOut);
  };

  const handleCheckOut = (val) => {
    update('checkOut', val);
    recalcNights(data.checkIn, val);
  };

  return (
    <div>
      <h2 className="serif" style={{ fontSize: 32, fontWeight: 500, marginBottom: 8 }}>{t('book_when')}</h2>
      <p style={{ color: 'var(--fg-soft)', marginBottom: 36, fontSize: 15 }}>{t('book_when_sub')}</p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 36 }}>
        <div className="field">
          <label className="field-label">{t('check_in')}</label>
          <input className="field-input" value={data.checkIn} onChange={e => handleCheckIn(e.target.value)} placeholder="e.g. 22 May 2026"/>
        </div>
        <div className="field">
          <label className="field-label">{t('check_out')}</label>
          <input className="field-input" value={data.checkOut} onChange={e => handleCheckOut(e.target.value)} placeholder="e.g. 25 May 2026"/>
        </div>
      </div>

      <MiniCalendar
        checkIn={data.checkIn}
        checkOut={data.checkOut}
        onCheckIn={handleCheckIn}
        onCheckOut={handleCheckOut}
      />

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 36 }}>
        <Counter label={t('adults')} value={data.adults} onChange={v => update('adults', v)} min={1} max={6} />
        <Counter label={t('children')} value={data.children} onChange={v => update('children', v)} min={0} max={4} />
      </div>
    </div>
  );
}

function Counter({ label, value, onChange, min = 0, max = 9 }) {
  return (
    <div>
      <div className="field-label" style={{ marginBottom: 14 }}>{label}</div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 0, border: '1px solid var(--line-2)' }}>
        <button onClick={() => onChange(Math.max(min, value - 1))} className="icon-btn" style={{ borderRadius: 0, border: 0, borderRight: '1px solid var(--line-2)' }}><Icon.Minus /></button>
        <div className="serif" style={{ width: 56, textAlign: 'center', fontSize: 22 }}>{value}</div>
        <button onClick={() => onChange(Math.min(max, value + 1))} className="icon-btn" style={{ borderRadius: 0, border: 0, borderLeft: '1px solid var(--line-2)' }}><Icon.Plus /></button>
      </div>
    </div>
  );
}

function MiniCalendar({ checkIn, checkOut, onCheckIn, onCheckOut }) {
  const ciDate = parseBookingDate(checkIn);
  const coDate = parseBookingDate(checkOut);
  const today = new Date();
  const todayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate());

  const [viewYear, setViewYear]   = useState(() => ciDate ? ciDate.getFullYear() : today.getFullYear());
  const [viewMonth, setViewMonth] = useState(() => ciDate ? ciDate.getMonth()    : today.getMonth());
  const [stage, setStage]         = useState('in'); // 'in' | 'out'

  /* Navigate calendar to match checkIn text input */
  useEffect(() => {
    const d = parseBookingDate(checkIn);
    if (d) { setViewYear(d.getFullYear()); setViewMonth(d.getMonth()); }
  }, [checkIn]);

  const prevMonth = () => {
    const prevY = viewMonth === 0 ? viewYear - 1 : viewYear;
    const prevM = viewMonth === 0 ? 11 : viewMonth - 1;
    if (prevY < todayStart.getFullYear() || (prevY === todayStart.getFullYear() && prevM < todayStart.getMonth())) return;
    setViewYear(prevY); setViewMonth(prevM);
  };
  const nextMonth = () => {
    if (viewMonth === 11) { setViewMonth(0); setViewYear(viewYear + 1); }
    else setViewMonth(viewMonth + 1);
  };

  const offset = (new Date(viewYear, viewMonth, 1).getDay() + 6) % 7; // Mon = 0
  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
  const cells = [...Array(offset).fill(null), ...Array.from({ length: daysInMonth }, (_, i) => i + 1)];
  while (cells.length % 7 !== 0) cells.push(null);

  const handleDayClick = (day) => {
    const clicked = new Date(viewYear, viewMonth, day);
    if (clicked < todayStart) return;
    if (stage === 'in' || !ciDate) {
      onCheckIn(formatBookingDate(clicked));
      onCheckOut('');
      setStage('out');
    } else {
      if (clicked <= ciDate) {
        onCheckIn(formatBookingDate(clicked));
        onCheckOut('');
      } else {
        onCheckOut(formatBookingDate(clicked));
        setStage('in');
      }
    }
  };

  const DAY_LABELS = ['M','T','W','T','F','S','S'];

  return (
    <div style={{ background: 'var(--bg-2)', padding: 24, border: '1px solid var(--line)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <button className="icon-btn" onClick={prevMonth}><Icon.ArrowLeft /></button>
        <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>{MONTHS_FULL[viewMonth]} {viewYear}</div>
        <button className="icon-btn" onClick={nextMonth}><Icon.Arrow /></button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 8 }}>
        {DAY_LABELS.map((d, i) => <div key={i} style={{ textAlign: 'center' }}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4 }}>
        {cells.map((d, i) => {
          if (!d) return <div key={i} />;
          const thisDate = new Date(viewYear, viewMonth, d);
          const isPast  = thisDate < todayStart;
          const isStart = !isPast && ciDate && thisDate.toDateString() === ciDate.toDateString();
          const isEnd   = !isPast && coDate && thisDate.toDateString() === coDate.toDateString();
          const inRange = !isPast && ciDate && coDate && thisDate > ciDate && thisDate < coDate;
          const edge    = isStart || isEnd;
          return (
            <div
              key={i}
              onClick={() => handleDayClick(d)}
              style={{
                aspectRatio: '1/1',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14,
                fontFamily: 'var(--font-display)',
                color: isPast ? 'var(--fg-mute)' : edge ? 'var(--accent-fg)' : inRange ? 'var(--accent)' : 'var(--fg-2)',
                background: edge ? 'var(--gold-grad)' : inRange ? 'color-mix(in oklab, var(--accent) 18%, transparent)' : 'transparent',
                opacity: isPast ? 0.35 : 1,
                cursor: isPast ? 'not-allowed' : 'pointer',
                transition: 'background 200ms',
                userSelect: 'none',
              }}
            >
              {d}
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--fg-mute)', textAlign: 'center', letterSpacing: '0.08em' }}>
        {stage === 'out' ? 'Now pick a check-out date' : 'Pick a check-in date'}
      </div>
    </div>
  );
}

function StepRoom({ data, update }) {
  const t = useT();
  const rooms = getRooms(t);
  return (
    <div>
      <h2 className="serif" style={{ fontSize: 32, fontWeight: 500, marginBottom: 8 }}>{t('book_room_title')}</h2>
      <p style={{ color: 'var(--fg-soft)', marginBottom: 32, fontSize: 15 }}>{data.nights} {t('nights')} · {data.adults} {t('adults')}{data.children ? ` · ${data.children} ${t('children')}` : ''}</p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {rooms.map(r => {
          const selected = data.room.id === r.id;
          return (
            <div key={r.id} onClick={() => update('room', ROOM_DEFS.find(x => x.id === r.id))} className="room-row" style={{
              display: 'grid', gridTemplateColumns: '180px 1fr auto', gap: 24, alignItems: 'center',
              padding: 16,
              border: `1px solid ${selected ? 'var(--accent)' : 'var(--line-2)'}`,
              background: selected ? 'color-mix(in oklab, var(--accent) 8%, var(--surface))' : 'var(--surface)',
              cursor: 'pointer',
              transition: 'all 240ms',
            }}>
              <Photo src={r.photo} alt={r.photoAlt} aspect="4/3"/>
              <div>
                <div className="eyebrow" style={{ marginBottom: 10 }}>{r.size} · {r.beds}</div>
                <h3 className="serif" style={{ fontSize: 24, fontWeight: 500, marginBottom: 6 }}>{r.name}</h3>
                <p style={{ fontSize: 14, color: 'var(--fg-soft)', lineHeight: 1.55, fontWeight: 300 }}>{r.blurb}</p>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div className="serif" style={{ fontSize: 24, fontWeight: 500 }}>{r.priceLabel}</div>
                <div style={{ fontSize: 11, color: 'var(--fg-mute)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{t('per_night')}</div>
                <div style={{
                  marginTop: 14,
                  width: 22, height: 22, borderRadius: '50%',
                  border: `1.5px solid ${selected ? 'var(--accent)' : 'var(--line-2)'}`,
                  background: selected ? 'var(--accent)' : 'transparent',
                  marginLeft: 'auto',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--accent-fg)',
                  transition: 'all 200ms',
                }}>
                  {selected && <Icon.Check />}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StepAddons({ data, update }) {
  const t = useT();
  const ADDONS = [
    { id: 'breakfast', iconK: 'Fork',     nameK: 'addon_breakfast', bodyK: 'addon_breakfast_body', price: 1200 },
    { id: 'transfer',  iconK: 'Car',      nameK: 'addon_transfer',  bodyK: 'addon_transfer_body',  price: 2500 },
    { id: 'tour',      iconK: 'Mountain', nameK: 'addon_tour',      bodyK: 'addon_tour_body',      price: 1800 },
    { id: 'dinner',    iconK: 'Bell',     nameK: 'addon_dinner',    bodyK: 'addon_dinner_body',    price: 1500 },
  ];

  const toggle = (a) => {
    const has = data.addons.find(x => x.id === a.id);
    const resolved = { ...a, name: t(a.nameK) };
    update('addons', has ? data.addons.filter(x => x.id !== a.id) : [...data.addons, resolved]);
  };

  return (
    <div>
      <h2 className="serif" style={{ fontSize: 32, fontWeight: 500, marginBottom: 8 }}>{t('book_addons_title')}</h2>
      <p style={{ color: 'var(--fg-soft)', marginBottom: 32, fontSize: 15 }}>{t('book_addons_sub')}</p>

      <div className="addons-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        {ADDONS.map(a => {
          const sel = data.addons.find(x => x.id === a.id);
          const IconC = Icon[a.iconK];
          return (
            <div key={a.id} onClick={() => toggle(a)} style={{
              display: 'flex', alignItems: 'flex-start', gap: 16,
              padding: 20,
              border: `1px solid ${sel ? 'var(--accent)' : 'var(--line-2)'}`,
              background: sel ? 'color-mix(in oklab, var(--accent) 8%, var(--surface))' : 'var(--surface)',
              cursor: 'pointer',
              transition: 'all 200ms',
            }}>
              <div style={{ width: 44, height: 44, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--bg-2)', color: 'var(--accent)', flexShrink: 0 }}><IconC /></div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, gap: 8 }}>
                  <h3 className="serif" style={{ fontSize: 19, fontWeight: 500 }}>{t(a.nameK)}</h3>
                  <span className="serif" style={{ fontSize: 17, color: 'var(--accent)', whiteSpace: 'nowrap' }}>+{a.price.toLocaleString()}</span>
                </div>
                <p style={{ fontSize: 13, color: 'var(--fg-soft)', lineHeight: 1.55, fontWeight: 300 }}>{t(a.bodyK)}</p>
              </div>
              <div style={{
                width: 20, height: 20,
                border: `1.5px solid ${sel ? 'var(--accent)' : 'var(--line-2)'}`,
                background: sel ? 'var(--accent)' : 'transparent',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--accent-fg)',
                flexShrink: 0,
              }}>
                {sel && <Icon.Check />}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StepGuest({ data, update }) {
  const t = useT();
  return (
    <div>
      <h2 className="serif" style={{ fontSize: 32, fontWeight: 500, marginBottom: 8 }}>{t('book_guest_title')}</h2>
      <p style={{ color: 'var(--fg-soft)', marginBottom: 36, fontSize: 15 }}>{t('book_guest_sub')}</p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginBottom: 28 }}>
        <div className="field">
          <label className="field-label">{t('first_name')}</label>
          <input className="field-input" value={data.firstName} onChange={e => update('firstName', e.target.value)} />
        </div>
        <div className="field">
          <label className="field-label">{t('last_name')}</label>
          <input className="field-input" value={data.lastName} onChange={e => update('lastName', e.target.value)} />
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginBottom: 28 }}>
        <div className="field">
          <label className="field-label">{t('email')}</label>
          <input className="field-input" type="email" value={data.email} onChange={e => update('email', e.target.value)} />
        </div>
        <div className="field">
          <label className="field-label">{t('phone')}</label>
          <input className="field-input" value={data.phone} onChange={e => update('phone', e.target.value)} />
        </div>
      </div>
      <div className="field" style={{ marginBottom: 28 }}>
        <label className="field-label">{t('special_requests')}</label>
        <textarea className="field-input" rows="3" style={{ resize: 'vertical' }} placeholder={t('special_requests_ph')}
          value={data.requests} onChange={e => update('requests', e.target.value)} />
      </div>
    </div>
  );
}

function StepConfirm({ data, room }) {
  const t = useT();
  const total = computeTotal(data);
  return (
    <div>
      <h2 className="serif" style={{ fontSize: 32, fontWeight: 500, marginBottom: 8 }}>{t('book_confirm_title')}</h2>
      <p style={{ color: 'var(--fg-soft)', marginBottom: 36, fontSize: 15 }}>{t('book_confirm_sub')}</p>

      <div className="confirm-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
        <SummaryCard label={t('book_step_dates')} value={`${data.checkIn} → ${data.checkOut}`} sub={`${data.nights} ${t('nights')}`} />
        <SummaryCard label={t('guests')} value={`${data.adults} ${t('adults')}${data.children ? ` · ${data.children} ${t('children')}` : ''}`} sub="" />
        <SummaryCard label={t('book_step_room')} value={room.name} sub={`${room.size} · ${room.beds}`} />
        <SummaryCard label={t('book_step_enhance')} value={data.addons.length ? `${data.addons.length}` : '—'} sub={data.addons.map(a => a.name).join(' · ')} />
      </div>

      <div style={{ background: 'var(--bg-2)', padding: 24, border: '1px solid var(--line)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 8 }}>
          <span style={{ color: 'var(--fg-soft)' }}>{room.name} × {data.nights} {t('nights')}</span>
          <span>NPR {(data.room.price * data.nights).toLocaleString()}</span>
        </div>
        {data.addons.map(a => (
          <div key={a.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 14, marginBottom: 8 }}>
            <span style={{ color: 'var(--fg-soft)' }}>{a.name}</span>
            <span>NPR {a.price.toLocaleString()}</span>
          </div>
        ))}
        <hr className="gold-rule" style={{ margin: '16px 0' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="serif" style={{ fontSize: 22, fontWeight: 500 }}>{t('estimated_total')}</span>
          <span className="serif gold-text" style={{ fontSize: 32, fontWeight: 500 }}>NPR {total.toLocaleString()}</span>
        </div>
      </div>
    </div>
  );
}

function SummaryCard({ label, value, sub }) {
  return (
    <div style={{ padding: 20, border: '1px solid var(--line)', background: 'var(--surface)' }}>
      <div style={{ fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase', color: 'var(--fg-mute)', marginBottom: 8 }}>{label}</div>
      <div className="serif" style={{ fontSize: 19, fontWeight: 500, marginBottom: 4 }}>{value}</div>
      {sub && <div style={{ fontSize: 12, color: 'var(--fg-soft)' }}>{sub}</div>}
    </div>
  );
}

Object.assign(window, { BookingOverlay, RESERVATION });