/* ============================================================
   RESERVATIONS — interactive 2-floor PINK PONY floor plan +
   mobile-first, app-style booking wizard.
   variant: "guided" (stepper, default) | "quick" (single screen)
   ============================================================ */
const PRICE = (tier, night) => window.PP.tablePrice(tier, night);
const ZACCENT = { regular: "#CBA35C", vip: "#FF6B5B", stage: "#FF2E88", mezz: "#9333EA", skybox: "#5FBFA8" };
const FLOORS = [
  { id: "main", label: { en: "Main Floor", es: "Planta Principal" }, icon: "store" },
  { id: "second", label: { en: "Second Floor", es: "Segundo Piso" }, icon: "layers" },
];

/* ---------- one interactive table node ---------- */
function TableNode({ tb, sel, onPick, night, idx }) {
  const accent = ZACCENT[tb.zone] || "#CBA35C";
  const booked = tb.status === "booked" || tb.status === "closed";
  const held = tb.status === "held";
  const isDiamond = tb.shape === "diamond";
  const big = tb.zone === "vip" || tb.zone === "skybox";
  const w = big ? 58 : tb.seats >= 6 ? 48 : 40;
  const h = isDiamond ? w : (tb.seats >= 6 ? 38 : 32);
  const price = PRICE(tb.zone, night);
  const bg = sel ? accent : booked ? "rgba(255,255,255,.035)" : accent + "26";
  const border = sel ? "#fff" : booked ? "rgba(255,255,255,.14)" : held ? "#E8A33C" : accent;

  return (
    <button disabled={booked} onClick={() => onPick(tb)} title={tb.id + (booked ? "" : " · $" + price + "++")}
      className={"tbl-pop absolute flex items-center justify-center group " + (!booked && !sel ? "tbl-avail" : "")}
      style={{
        left: tb.x + "%", top: tb.y + "%", width: w, height: h,
        transform: `translate(-50%,-50%) ${isDiamond ? "rotate(45deg)" : ""} scale(${sel ? 1.16 : 1})`,
        background: bg, border: (held && !sel ? "1.5px dashed " : "1.5px solid ") + border,
        borderRadius: isDiamond ? 9 : 8,
        color: sel ? "#0B0B0C" : booked ? "rgba(255,255,255,.4)" : accent,
        cursor: booked ? "not-allowed" : "pointer",
        boxShadow: sel ? `0 0 0 3px ${accent}55, 0 0 26px ${accent}` : "none",
        transition: "transform .25s cubic-bezier(.16,1,.3,1), background .2s, box-shadow .25s",
        zIndex: sel ? 6 : 2, animationDelay: (idx % 12) * 28 + "ms", WebkitTapHighlightColor: "transparent",
      }}>
      <span style={{ transform: isDiamond ? "rotate(-45deg)" : "none" }} className="flex flex-col items-center leading-none pointer-events-none">
        <span className="font-extrabold" style={{ fontSize: big ? 9 : 10, color: sel ? "#0B0B0C" : "#fff" }}>{tb.id}</span>
        {booked
          ? <Icon name="lock" className="w-2.5 h-2.5 mt-0.5" />
          : <span className="font-semibold" style={{ fontSize: 7, marginTop: 1, color: sel ? "#0B0B0C" : "rgba(255,255,255,.65)" }}>{tb.seats}p</span>}
      </span>
    </button>
  );
}

/* ---------- per-floor scenery ---------- */
function FloorScene({ floor }) {
  const t = useT();
  if (floor === "main") return (
    <React.Fragment>
      <div className="absolute flex items-center justify-center rounded-md" style={{ left: "4%", top: "5%", width: "30%", height: "8%", background: "linear-gradient(90deg,#7a2350,#b23a6e)", border: "1px solid #ff6bb0" }}><span className="label text-white text-[9px]">{t("MAIN BAR", "BARRA")}</span></div>
      <div className="absolute flex items-center justify-center rounded-md" style={{ right: "3%", top: "40%", width: "8%", height: "20%", background: "linear-gradient(180deg,#7a2350,#b23a6e)", border: "1px solid #ff6bb0" }}><span className="label text-white text-[8px] [writing-mode:vertical-rl] rotate-180">DJ</span></div>
      <div className="absolute" style={{ left: "52%", top: "52%", width: "26%", height: "26%", transform: "translate(-50%,-50%)" }}>
        <div className="w-full h-full rounded-full flex items-center justify-center" style={{ background: "repeating-linear-gradient(45deg,#ff2e88,#ff2e88 3px,#d61f6f 3px,#d61f6f 6px)", boxShadow: "0 0 34px rgba(255,46,136,.55)" }}><span className="font-black text-white text-[11px] tracking-widest drop-shadow">STAGE</span></div>
      </div>
    </React.Fragment>
  );
  return (
    <React.Fragment>
      <div className="absolute flex items-center justify-center rounded-md" style={{ right: "3%", top: "34%", width: "9%", height: "34%", background: "linear-gradient(180deg,#4a2a6e,#6b3a9e)", border: "1px solid #b07bff" }}><span className="label text-white text-[8px] [writing-mode:vertical-rl] rotate-180">{t("BAR #2", "BARRA #2")}</span></div>
      <div className="absolute flex items-center justify-center rounded-full" style={{ left: "40%", top: "66%", width: "16%", height: "22%", transform: "translate(-50%,-50%)", background: "radial-gradient(circle,#5FBFA855,#0d0d0f)", border: "1.5px dashed #5FBFA8" }}><span className="font-black text-[#5FBFA8] text-[9px] tracking-wider">VIEW</span></div>
      <div className="absolute label text-white/30 text-[8px]" style={{ left: "3%", top: "5%" }}>{t("MEZZANINE", "MEZZANINE")}</div>
    </React.Fragment>
  );
}

/* ---------- interactive floor plan with switcher ---------- */
function FloorPlan({ tables, selected, onPick, night, floor, setFloor }) {
  const t = useT(); const { lang } = useLang();
  const list = tables.filter((x) => x.floor === floor);
  const avail = (fl) => tables.filter((x) => x.floor === fl && x.status !== "booked" && x.status !== "closed").length;
  const zonesHere = [...new Set(list.map((x) => x.zone))];

  return (
    <div>
      {/* floor switcher */}
      <div className="flex gap-2 mb-3.5 p-1 rounded-2xl bg-card border border-white/10">
        {FLOORS.map((fl) => {
          const on = floor === fl.id;
          return (
            <button key={fl.id} onClick={() => setFloor(fl.id)} className={"flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-[12px] font-bold uppercase tracking-[0.1em] transition-all " + (on ? "bg-coral text-white shadow-[0_6px_20px_-6px_rgba(255,107,91,.7)]" : "text-white/55 hover:text-white")}>
              <Icon name={fl.icon} className="w-4 h-4" />
              <span>{L(fl.label, lang)}</span>
              <span className={"text-[9px] px-1.5 py-0.5 rounded-full " + (on ? "bg-white/25" : "bg-white/8")}>{avail(fl.id)}</span>
            </button>
          );
        })}
      </div>

      {/* the map */}
      <div key={floor} className="floor-in relative w-full rounded-2xl overflow-hidden border-2 bg-[#101012]" style={{ aspectRatio: floor === "main" ? "1 / 0.9" : "1 / 0.78", borderColor: floor === "main" ? "var(--c-coral)" : "#9333EA" }}>
        <div className="absolute inset-0 opacity-[0.04]" style={{ backgroundImage: "linear-gradient(#fff 1px,transparent 0),linear-gradient(90deg,#fff 1px,transparent 0)", backgroundSize: "32px 32px" }}></div>
        <FloorScene floor={floor} />
        {list.map((tb, i) => <TableNode key={tb.id} tb={tb} sel={selected === tb.id} onPick={onPick} night={night} idx={i} />)}

        {/* legend */}
        <div className="absolute left-[3%] bottom-[3%] flex flex-col gap-1 bg-black/55 backdrop-blur rounded-lg p-2.5 border border-white/10">
          {zonesHere.map((z) => {
            const zn = window.PP.ZONES.find((x) => x.id === z);
            return <div key={z} className="flex items-center gap-2 text-[9px] text-white/75"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: ZACCENT[z] + "33", border: `1px solid ${ZACCENT[z]}` }}></span>{zn ? L(zn.name, lang) : z}</div>;
          })}
          <div className="flex items-center gap-2 text-[9px] text-white/45 pt-1 mt-0.5 border-t border-white/10"><Icon name="lock" className="w-2.5 h-2.5" />{t("Booked", "Reservada")}</div>
        </div>
      </div>
      <p className="text-center text-white/35 text-[11px] mt-2.5">{t("Tap an available table to select it", "Toca una mesa disponible para elegirla")}</p>
    </div>
  );
}

/* ---------- selection detail (side card + mobile sheet) ---------- */
function SelectionDetail({ tb, price, guests, lang }) {
  const t = useT();
  const zn = window.PP.ZONES.find((z) => z.id === tb.zone);
  const accent = ZACCENT[tb.zone];
  return (
    <div>
      <div className="flex items-center justify-between mb-3">
        <div>
          <div className="label text-[10px]" style={{ color: accent }}>{zn ? L(zn.name, lang) : tb.zone}</div>
          <div className="text-2xl font-black uppercase leading-none mt-0.5">{t("Table", "Mesa")} {tb.id}</div>
        </div>
        <div className="text-right"><div className="serif text-3xl" style={{ color: accent }}>${price}</div><div className="label text-white/40 text-[9px]">{t("minimum", "mínimo")}</div></div>
      </div>
      <div className="flex items-center gap-4 text-sm text-white/70">
        <span className="flex items-center gap-1.5"><Icon name="users" className="w-4 h-4 text-gold" />{tb.seats} {t("seats", "asientos")}</span>
        <span className="flex items-center gap-1.5"><Icon name="check-circle" className="w-4 h-4 text-green-400" />{t("Available", "Disponible")}</span>
      </div>
      {guests > tb.seats && <p className="text-coral text-xs flex items-center gap-2 mt-3"><Icon name="triangle-alert" className="w-3.5 h-3.5 shrink-0" />{t("Your party is larger than this table — we may seat you elsewhere.", "Tu grupo supera esta mesa — podríamos reubicarte.")}</p>}
    </div>
  );
}

/* ---------- success ---------- */
function SuccessScreen({ data, onReset }) {
  const t = useT(); const { lang } = useLang();
  const { NIGHTS } = window.PP;
  return (
    <div className="min-h-screen flex items-center justify-center px-6 pt-28 pb-24">
      <div className="max-w-lg w-full text-center fade-view">
        <div className="w-20 h-20 rounded-full mx-auto mb-7 flex items-center justify-center bg-coral/15 border border-coral"><Icon name="check" className="w-9 h-9 text-coral" /></div>
        <div className="label text-gold mb-3">{t("Reservation Requested", "Reserva Solicitada")}</div>
        <h2 className="text-4xl md:text-5xl font-black uppercase mb-6">{t("You're on the list", "Estás en la lista")}</h2>
        <div className="rounded-2xl border border-white/12 bg-card p-6 text-left space-y-3 mb-7">
          {[[t("Name", "Nombre"), data.name], [t("Night", "Noche"), L(NIGHTS[data.night].day, lang) + " · " + NIGHTS[data.night].name], [t("Date", "Fecha"), data.date], [t("Time", "Hora"), data.time], [t("Guests", "Personas"), data.guests], [t("Table", "Mesa"), data.tableId], [t("Minimum spend", "Consumo mínimo"), "$" + data.price + "++"]].map(([k, v], i) => (
            <div key={i} className="flex justify-between gap-4 text-sm border-b border-white/6 pb-2.5 last:border-0"><span className="text-white/45 uppercase tracking-wider text-[11px]">{k}</span><span className="text-white font-semibold text-right">{v}</span></div>
          ))}
        </div>
        <p className="text-white/50 text-sm mb-7">{t("A VIP host will text you within 15 minutes to confirm your table and bottle minimum.", "Un host VIP te escribirá en 15 minutos para confirmar tu mesa y mínimo de botella.")}</p>
        <PrimaryBtn onClick={onReset} icon="rotate-ccw">{t("New reservation", "Nueva reserva")}</PrimaryBtn>
      </div>
    </div>
  );
}

/* ---------- the wizard ---------- */
function ReservePage({ variant = "guided", account }) {
  const t = useT(); const { lang } = useLang();
  const { ZONES, TABLES, NIGHTS } = window.PP;
  const tables = TABLES;
  const [step, setStep] = useState(0);
  const [floor, setFloor] = useState("main");
  const [f, setF] = useState({
    night: 5, date: "", guests: 4, tableId: null, time: "11:00 PM",
    name: account ? account.name : "", phone: "", email: "", occasion: "night", requests: "",
  });
  const [done, setDone] = useState(false);
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  const selTable = tables.find((x) => x.id === f.tableId);
  const price = selTable ? PRICE(selTable.zone, f.night) : 0;
  // when a table is picked, follow its floor
  const pick = (tb) => { set("tableId", tb.id); };

  useReveal(step + variant);

  if (done) return <SuccessScreen data={{ ...f, price }} onReset={() => { setDone(false); setStep(0); set("tableId", null); }} />;

  const STEPS = [
    { key: "date", label: t("Date", "Fecha"), icon: "calendar" },
    { key: "guests", label: t("Guests", "Personas"), icon: "users" },
    { key: "table", label: t("Table", "Mesa"), icon: "map-pin" },
    { key: "time", label: t("Time", "Hora"), icon: "clock" },
    { key: "info", label: t("Details", "Datos"), icon: "user" },
    { key: "review", label: t("Review", "Revisar"), icon: "check" },
  ];
  const canNext = () => {
    if (step === 0) return !!f.date;
    if (step === 2) return !!f.tableId;
    if (step === 4) return f.name && f.phone.length >= 7 && /.+@.+\..+/.test(f.email);
    return true;
  };

  const TIMES = ["10:00 PM", "11:00 PM", "12:00 AM", "1:00 AM", "2:00 AM"];
  const OCCASIONS = [["night", t("Night out", "Salida")], ["bday", t("Birthday", "Cumpleaños")], ["bach", t("Bachelor party", "Despedida")], ["ufc", t("UFC / Sports", "UFC / Deportes")], ["corp", t("Corporate", "Corporativo")]];

  const submit = () => {
    const occ = (OCCASIONS.find((o) => o[0] === f.occasion) || [])[1];
    window.PP.waOpen(
      t("New table reservation — Pink Pony Club", "Nueva reserva de mesa — Pink Pony Club"),
      [
        [t("Name", "Nombre"), f.name], [t("Phone", "Teléfono"), f.phone], [t("Email", "Correo"), f.email],
        [t("Night", "Noche"), L(NIGHTS[f.night].day, lang) + " · " + NIGHTS[f.night].name],
        [t("Date", "Fecha"), f.date], [t("Time", "Hora"), f.time], [t("Guests", "Personas"), f.guests],
        [t("Table", "Mesa"), f.tableId], [t("Minimum spend", "Consumo mínimo"), price ? "$" + price + "++" : ""],
        [t("Occasion", "Ocasión"), occ], [t("Requests", "Peticiones"), f.requests],
      ],
      t("Sent from clubpinkpony.com", "Enviado desde clubpinkpony.com"),
    );
    setDone(true);
  };

  /* ----- step bodies ----- */
  const stepDate = (
    <div>
      <h3 className="text-2xl font-black uppercase mb-1">{t("Which night?", "¿Qué noche?")}</h3>
      <p className="text-white/50 text-sm mb-6">{t("Table pricing changes by night.", "El precio de mesa cambia según la noche.")}</p>
      <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-2.5 mb-7">
        {NIGHTS.map((n, i) => {
          const sel = f.night === i;
          const p = PRICE("regular", i);
          return (
            <button key={i} onClick={() => set("night", i)} className={"rounded-xl border p-3 text-left transition-all active:scale-95 " + (sel ? "border-coral bg-coral/10" : "border-white/12 hover:border-white/30")}>
              <div className="label text-[10px]" style={{ color: sel ? "var(--c-coral)" : "rgba(255,255,255,.5)" }}>{L(n.day, lang)}</div>
              <div className="font-bold text-[11px] leading-tight mt-1 mb-2 line-clamp-2 h-7">{n.name}</div>
              <div className="serif text-gold-soft text-sm">${p}++</div>
            </button>
          );
        })}
      </div>
      <label className="block max-w-xs">
        <span className="label text-white/45 text-[10px] block mb-2">{t("Pick a date", "Elige una fecha")}</span>
        <input type="date" min={new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 10)} value={f.date} onChange={(e) => set("date", e.target.value)} className="w-full bg-card border border-white/12 rounded-xl px-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral" style={{ colorScheme: "dark" }} />
      </label>
    </div>
  );

  const stepGuests = (
    <div>
      <h3 className="text-2xl font-black uppercase mb-1">{t("How many guests?", "¿Cuántas personas?")}</h3>
      <p className="text-white/50 text-sm mb-7">{t("We'll match you to the right table.", "Te ubicamos en la mesa adecuada.")}</p>
      <div className="flex items-center gap-5 mb-7">
        <button onClick={() => set("guests", Math.max(1, f.guests - 1))} className="w-14 h-14 rounded-2xl bg-card border border-white/15 hover:border-white/35 active:scale-90 transition-transform flex items-center justify-center"><Icon name="minus" className="w-6 h-6" /></button>
        <div className="text-center w-24"><div className="serif text-6xl text-white leading-none">{f.guests}</div><div className="label text-white/45 text-[10px] mt-1">{t("guests", "personas")}</div></div>
        <button onClick={() => set("guests", Math.min(30, f.guests + 1))} className="w-14 h-14 rounded-2xl bg-card border border-white/15 hover:border-white/35 active:scale-90 transition-transform flex items-center justify-center"><Icon name="plus" className="w-6 h-6" /></button>
      </div>
      <div className="flex flex-wrap gap-2">
        {[2, 4, 6, 8, 10, 12].map((n) => <button key={n} onClick={() => set("guests", n)} className={"px-5 py-2.5 rounded-full text-sm font-bold transition-all active:scale-95 " + (f.guests === n ? "bg-coral text-white" : "bg-white/5 border border-white/12 text-white/70 hover:text-white")}>{n}</button>)}
        <button onClick={() => set("guests", 15)} className={"px-5 py-2.5 rounded-full text-sm font-bold transition-all active:scale-95 " + (f.guests >= 13 ? "bg-coral text-white" : "bg-white/5 border border-white/12 text-white/70 hover:text-white")}>12+</button>
      </div>
    </div>
  );

  const stepTable = (
    <div>
      <h3 className="text-2xl font-black uppercase mb-1">{t("Choose your table", "Elige tu mesa")}</h3>
      <p className="text-white/50 text-sm mb-5">{t("Two floors live. VIP/Stage $500++ · Skybox $600++ · Mezzanine $250++.", "Dos pisos activos. VIP/Tarima $500++ · Skybox $600++ · Mezzanine $250++.")}</p>
      <div className="grid lg:grid-cols-12 gap-6 items-start">
        <div className="lg:col-span-8">
          <FloorPlan tables={tables} selected={f.tableId} onPick={pick} night={f.night} floor={floor} setFloor={setFloor} />
        </div>
        {/* desktop side card */}
        <div className="hidden lg:block lg:col-span-4 lg:sticky lg:top-28">
          {selTable ? (
            <div className="fade-view rounded-2xl border p-6" style={{ borderColor: ZACCENT[selTable.zone] + "66", background: ZACCENT[selTable.zone] + "0d" }}>
              <SelectionDetail tb={selTable} price={price} guests={f.guests} lang={lang} />
            </div>
          ) : (
            <div className="rounded-2xl border border-dashed border-white/15 p-7 text-center"><Icon name="mouse-pointer-click" className="w-7 h-7 text-white/30 mx-auto mb-3" /><p className="text-white/50 text-sm">{t("Tap a table to select it.", "Toca una mesa para seleccionarla.")}</p></div>
          )}
        </div>
      </div>
      {/* mobile selection sheet */}
      {selTable && (
        <div className="lg:hidden sheet-up fixed bottom-0 inset-x-0 z-30 px-3 pb-3" style={{ paddingBottom: "calc(env(safe-area-inset-bottom) + 12px)" }}>
          <div className="rounded-2xl border bg-ink/95 backdrop-blur-xl p-4 shadow-[0_-12px_40px_rgba(0,0,0,.6)]" style={{ borderColor: ZACCENT[selTable.zone] + "66" }}>
            <SelectionDetail tb={selTable} price={price} guests={f.guests} lang={lang} />
            <button onClick={() => setStep(3)} className="gbtn w-full mt-3 py-3.5 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] flex items-center justify-center gap-2">{t("Continue", "Continuar")} · {t("Table", "Mesa")} {selTable.id}<Icon name="arrow-right" className="w-4 h-4" /></button>
          </div>
        </div>
      )}
    </div>
  );

  const stepTime = (
    <div>
      <h3 className="text-2xl font-black uppercase mb-1">{t("What time?", "¿A qué hora?")}</h3>
      <p className="text-white/50 text-sm mb-7">{t("Arrival time — doors open 12PM, close 5AM.", "Hora de llegada — abrimos 12PM, cerramos 5AM.")}</p>
      <div className="grid grid-cols-2 sm:flex sm:flex-wrap gap-3">
        {TIMES.map((tm) => <button key={tm} onClick={() => set("time", tm)} className={"px-6 py-4 rounded-2xl text-base font-bold transition-all active:scale-95 " + (f.time === tm ? "bg-coral text-white" : "bg-card border border-white/12 text-white/70 hover:border-white/30")}>{tm}</button>)}
      </div>
    </div>
  );

  const field = (k, icon, ph, type = "text") => (
    <div className="relative">
      <Icon name={icon} className="w-4 h-4 text-white/35 absolute left-4 top-1/2 -translate-y-1/2" />
      <input type={type} value={f[k]} onChange={(e) => set(k, e.target.value)} placeholder={ph} className="w-full bg-card border border-white/12 rounded-xl pl-11 pr-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
    </div>
  );
  const stepInfo = (
    <div className="max-w-lg">
      <h3 className="text-2xl font-black uppercase mb-1">{t("Your details", "Tus datos")}</h3>
      <p className="text-white/50 text-sm mb-7">{t("So our host can confirm and greet you by name.", "Para que nuestro host confirme y te reciba por tu nombre.")}</p>
      <div className="space-y-4">
        {field("name", "user", t("Full name", "Nombre completo"))}
        {field("phone", "phone", t("Mobile number", "Número de móvil"), "tel")}
        {field("email", "mail", t("Email", "Correo"), "email")}
        <div>
          <span className="label text-white/45 text-[10px] block mb-2">{t("Occasion", "Ocasión")}</span>
          <div className="flex flex-wrap gap-2">
            {OCCASIONS.map(([id, lbl]) => <button key={id} onClick={() => set("occasion", id)} className={"px-4 py-2 rounded-full text-[12px] font-bold transition-all active:scale-95 " + (f.occasion === id ? "bg-coral text-white" : "bg-card border border-white/12 text-white/65 hover:text-white")}>{lbl}</button>)}
          </div>
        </div>
        <textarea value={f.requests} onChange={(e) => set("requests", e.target.value)} rows={3} placeholder={t("Special requests (bottles, cake, decorations, seating)…", "Peticiones especiales (botellas, pastel, decoración, ubicación)…")} className="w-full bg-card border border-white/12 rounded-xl px-4 py-3.5 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35 resize-none"></textarea>
      </div>
    </div>
  );

  const row = (k, v) => <div className="flex justify-between gap-4 py-2.5 border-b border-white/6 last:border-0"><span className="text-white/45 uppercase tracking-wider text-[11px]">{k}</span><span className="text-white font-semibold text-right text-sm">{v || "—"}</span></div>;
  const stepReview = (
    <div className="max-w-lg">
      <h3 className="text-2xl font-black uppercase mb-1">{t("Review & confirm", "Revisa y confirma")}</h3>
      <p className="text-white/50 text-sm mb-6">{t("No charge today — minimum spend applies on arrival.", "Sin cargo hoy — el mínimo aplica al llegar.")}</p>
      <div className="rounded-2xl border border-white/12 bg-card p-6 mb-6">
        {row(t("Name", "Nombre"), f.name)}
        {row(t("Mobile", "Móvil"), f.phone)}
        {row(t("Night", "Noche"), L(NIGHTS[f.night].day, lang) + " · " + NIGHTS[f.night].name)}
        {row(t("Date", "Fecha"), f.date)}
        {row(t("Time", "Hora"), f.time)}
        {row(t("Guests", "Personas"), f.guests)}
        {row(t("Table", "Mesa"), f.tableId)}
        {row(t("Occasion", "Ocasión"), (OCCASIONS.find((o) => o[0] === f.occasion) || [])[1])}
        {row(t("Minimum spend", "Consumo mínimo"), "$" + price + "++")}
      </div>
      <PrimaryBtn className="w-full" icon="check" onClick={submit}>{t("Confirm reservation", "Confirmar reserva")}</PrimaryBtn>
    </div>
  );

  const bodies = [stepDate, stepGuests, stepTable, stepTime, stepInfo, stepReview];

  /* ----- QUICK single-screen variant ----- */
  if (variant === "quick") {
    const ok = f.date && f.tableId && f.name && f.phone.length >= 7 && /.+@.+\..+/.test(f.email);
    return (
      <div className="pt-28 md:pt-32 pb-24"><div className="container">
        <div className="reveal max-w-2xl mb-8"><Eyebrow num="">{t("Reservations", "Reservas")}</Eyebrow><h1 className="text-5xl md:text-7xl font-black uppercase leading-[0.9] mt-4">{t(<>Reserve a <span className="serif-it font-normal text-coral">table</span></>, <>Reserva una <span className="serif-it font-normal text-coral">mesa</span></>)}</h1></div>
        <div className="grid lg:grid-cols-12 gap-8 items-start">
          <div className="lg:col-span-7 reveal"><FloorPlan tables={tables} selected={f.tableId} onPick={pick} night={f.night} floor={floor} setFloor={setFloor} /></div>
          <div className="lg:col-span-5 reveal space-y-3">
            <div className="grid grid-cols-2 gap-3">
              <label><span className="label text-white/45 text-[10px] block mb-1.5">{t("Night", "Noche")}</span><select value={f.night} onChange={(e) => set("night", +e.target.value)} className="w-full bg-card border border-white/12 rounded-xl px-3 py-3 text-sm text-white focus:outline-none focus:border-coral">{NIGHTS.map((n, i) => <option key={i} value={i} className="bg-card">{L(n.day, lang)} · {n.name}</option>)}</select></label>
              <label><span className="label text-white/45 text-[10px] block mb-1.5">{t("Date", "Fecha")}</span><input type="date" min={new Date(Date.now() - new Date().getTimezoneOffset() * 60000).toISOString().slice(0, 10)} value={f.date} onChange={(e) => set("date", e.target.value)} className="w-full bg-card border border-white/12 rounded-xl px-3 py-3 text-sm text-white focus:outline-none focus:border-coral" style={{ colorScheme: "dark" }} /></label>
              <label><span className="label text-white/45 text-[10px] block mb-1.5">{t("Guests", "Personas")}</span><input type="number" min="1" value={f.guests} onChange={(e) => set("guests", +e.target.value)} className="w-full bg-card border border-white/12 rounded-xl px-3 py-3 text-sm text-white focus:outline-none focus:border-coral" /></label>
              <label><span className="label text-white/45 text-[10px] block mb-1.5">{t("Time", "Hora")}</span><select value={f.time} onChange={(e) => set("time", e.target.value)} className="w-full bg-card border border-white/12 rounded-xl px-3 py-3 text-sm text-white focus:outline-none focus:border-coral">{TIMES.map((tm) => <option key={tm} className="bg-card">{tm}</option>)}</select></label>
            </div>
            {field("name", "user", t("Full name", "Nombre completo"))}
            {field("phone", "phone", t("Mobile", "Móvil"), "tel")}
            {field("email", "mail", t("Email", "Correo"), "email")}
            <div className="rounded-xl border border-white/12 bg-card p-4 flex items-center justify-between">
              <span className="text-sm text-white/60">{f.tableId ? <>{t("Table", "Mesa")} <b className="text-white">{f.tableId}</b> · ${price}++</> : t("No table selected", "Sin mesa seleccionada")}</span>
            </div>
            <button disabled={!ok} onClick={submit} className={"gbtn w-full py-4 rounded-full text-[12px] font-bold uppercase tracking-[0.16em] transition-all " + (ok ? "bg-coral hover:bg-coral-deep text-white" : "bg-white/8 text-white/40 cursor-not-allowed")}>{t("Confirm reservation", "Confirmar reserva")}</button>
          </div>
        </div>
      </div></div>
    );
  }

  /* ----- GUIDED wizard (mobile-first) ----- */
  const onTableStep = step === 2;
  return (
    <div className="pt-28 md:pt-32 pb-24"><div className="container max-w-4xl">
      <div className="reveal mb-7"><Eyebrow num="">{t("Reservations", "Reservas")}</Eyebrow><h1 className="text-4xl md:text-6xl font-black uppercase leading-[0.9] mt-3">{t(<>Reserve a <span className="serif-it font-normal text-coral">table</span></>, <>Reserva una <span className="serif-it font-normal text-coral">mesa</span></>)}</h1></div>

      {/* mobile progress bar */}
      <div className="sm:hidden mb-6">
        <div className="flex items-center justify-between mb-2"><span className="label text-coral text-[10px]">{STEPS[step].label}</span><span className="text-white/40 text-[11px]">{step + 1}/{STEPS.length}</span></div>
        <div className="h-1.5 rounded-full bg-white/10 overflow-hidden"><div className="h-full rounded-full bg-gradient-to-r from-coral to-coral-deep transition-all duration-500" style={{ width: ((step + 1) / STEPS.length) * 100 + "%" }}></div></div>
      </div>

      {/* desktop stepper */}
      <div className="hidden sm:flex items-center mb-10 overflow-x-auto pb-2">
        {STEPS.map((s, i) => (
          <React.Fragment key={s.key}>
            <button onClick={() => i < step && setStep(i)} className="flex items-center gap-2.5 shrink-0" style={{ cursor: i < step ? "pointer" : "default" }}>
              <span className="w-9 h-9 rounded-full flex items-center justify-center border transition-all" style={{ background: i < step ? "var(--c-coral)" : "transparent", borderColor: i <= step ? "var(--c-coral)" : "rgba(255,255,255,.18)", color: i < step ? "#fff" : i === step ? "var(--c-coral)" : "rgba(255,255,255,.4)" }}>
                {i < step ? <Icon name="check" className="w-4 h-4" /> : <Icon name={s.icon} className="w-4 h-4" />}
              </span>
              <span className={"text-[11px] font-bold uppercase tracking-[0.12em] " + (i === step ? "text-white" : "text-white/40")}>{s.label}</span>
            </button>
            {i < STEPS.length - 1 && <span className="flex-1 min-w-[14px] h-px mx-2" style={{ background: i < step ? "var(--c-coral)" : "rgba(255,255,255,.14)" }}></span>}
          </React.Fragment>
        ))}
      </div>

      {/* body */}
      <div key={step} className="fade-view min-h-[280px]">{bodies[step]}</div>

      {/* nav (sticky on mobile, hidden on the table step where the sheet drives it) */}
      <div className={"flex items-center justify-between mt-10 pt-6 border-t border-white/10 " + (onTableStep ? "max-lg:hidden" : "")}>
        <button onClick={() => setStep((s) => Math.max(0, s - 1))} disabled={step === 0} className={"inline-flex items-center gap-2 px-5 py-3 rounded-full text-[12px] font-bold uppercase tracking-[0.14em] transition-all " + (step === 0 ? "text-white/25 cursor-not-allowed" : "text-white/70 hover:text-white")}><Icon name="arrow-left" className="w-4 h-4" />{t("Back", "Atrás")}</button>
        <div className="text-white/40 text-xs hidden sm:block">{step + 1} / {STEPS.length}</div>
        {step < STEPS.length - 1 ? (
          <button onClick={() => canNext() && setStep((s) => s + 1)} disabled={!canNext()} className={"gbtn inline-flex items-center gap-2 px-7 py-3.5 rounded-full text-[12px] font-bold uppercase tracking-[0.16em] transition-all " + (canNext() ? "bg-coral hover:bg-coral-deep text-white" : "bg-white/8 text-white/40 cursor-not-allowed")}>{t("Continue", "Continuar")}<Icon name="arrow-right" className="w-4 h-4" /></button>
        ) : <div className="w-24"></div>}
      </div>
    </div></div>
  );
}

Object.assign(window, { ReservePage });