/* ============================================================
   RESERVATIONS — real PINK PONY floor plan + step-by-step
   hospitality 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", second: "#6b6b72" };

/* ---------- one table node on the map ---------- */
function TableNode({ tb, sel, onPick, night }) {
  const t = useT();
  const accent = ZACCENT[tb.zone];
  const disabled = tb.status === "booked" || tb.status === "closed";
  const isDiamond = tb.shape === "diamond";
  const w = tb.zone === "vip" ? 60 : tb.seats >= 6 ? 50 : 42;
  const price = PRICE(tb.zone, night);
  const bg = sel ? accent : disabled ? "rgba(255,255,255,.04)" : accent + "1f";
  const border = sel ? "#fff" : disabled ? "rgba(255,255,255,.14)" : accent;
  return (
    <button disabled={disabled} onClick={() => onPick(tb)} title={tb.id}
      className="absolute flex items-center justify-center transition-all duration-200 group"
      style={{
        left: tb.x + "%", top: tb.y + "%", width: w, height: isDiamond ? w : (tb.seats >= 6 ? 38 : 30),
        transform: `translate(-50%,-50%) ${isDiamond ? "rotate(45deg)" : ""} scale(${sel ? 1.12 : 1})`,
        background: bg, border: `1.5px solid ${border}`,
        borderRadius: isDiamond ? 8 : 7,
        color: sel ? "#0B0B0C" : disabled ? "rgba(255,255,255,.35)" : "#fff",
        cursor: disabled ? "not-allowed" : "pointer",
        boxShadow: sel ? `0 0 0 3px ${accent}66, 0 0 22px ${accent}` : "none",
        zIndex: sel ? 5 : 2,
      }}>
      <span style={{ transform: isDiamond ? "rotate(-45deg)" : "none" }} className="flex flex-col items-center leading-none">
        <span className="font-extrabold" style={{ fontSize: tb.zone === "vip" ? 9 : 10 }}>{tb.id}</span>
        {!disabled && <span className="font-semibold opacity-70" style={{ fontSize: 7, marginTop: 1 }}>{tb.seats}p</span>}
      </span>
    </button>
  );
}

/* ---------- MAIN FLOOR map ---------- */
function FloorMap({ tables, selected, onPick, night }) {
  const t = useT();
  const main = tables.filter((x) => x.floor === "main");
  return (
    <div className="relative w-full rounded-2xl overflow-hidden border-2 bg-[#101012]"
      style={{ aspectRatio: "1 / 0.9", borderColor: "var(--c-coral)" }}>
      <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>

      {/* MAIN BAR */}
      <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 PRINCIPAL")}</span>
      </div>
      <div className="absolute rounded-md flex items-center justify-center" style={{ left: "35%", top: "5%", width: "7%", height: "8%", border: "1px solid #ff6bb0", color: "#ff8fc0", fontSize: 9, fontWeight: 700 }}>BV1</div>

      {/* DJ BOOTH */}
      <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 BOOTH</span>
      </div>

      {/* STAGE */}
      <div className="absolute flex items-center justify-center" 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 30px rgba(255,46,136,.5)" }}>
          <span className="font-black text-white text-[11px] tracking-widest drop-shadow">STAGE</span>
        </div>
      </div>

      {main.map((tb) => <TableNode key={tb.id} tb={tb} sel={selected === tb.id} onPick={onPick} night={night} />)}

      {/* 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">
        {[["regular", t("Regular", "Regular")], ["vip", "VIP"], ["stage", t("Stage", "Tarima")]].map(([z, lbl]) => (
          <div key={z} className="flex items-center gap-2 text-[9px] text-white/70"><span className="w-2.5 h-2.5 rounded-sm" style={{ background: ZACCENT[z] + "33", border: `1px solid ${ZACCENT[z]}` }}></span>{lbl}</div>
        ))}
      </div>
    </div>
  );
}

/* ---------- SECOND FLOOR (closed) ---------- */
function SecondFloorPanel({ tables }) {
  const t = useT();
  const second = tables.filter((x) => x.floor === "second");
  return (
    <div className="relative w-full rounded-2xl overflow-hidden border border-white/12 bg-[#0d0d0f]" style={{ aspectRatio: "1 / 0.62" }}>
      <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "linear-gradient(#fff 1px,transparent 0),linear-gradient(90deg,#fff 1px,transparent 0)", backgroundSize: "30px 30px" }}></div>
      <div className="absolute flex items-center justify-center rounded-md" style={{ right: "3%", top: "38%", width: "9%", height: "30%", border: "1px solid #555", color: "#888", fontSize: 8, fontWeight: 700 }}><span className="[writing-mode:vertical-rl] rotate-180">BARRA #2</span></div>
      <div className="absolute rounded-full flex items-center justify-center" style={{ left: "46%", top: "74%", width: "13%", height: "20%", transform: "translate(-50%,-50%)", border: "1px dashed #666", color: "#888", fontSize: 7, fontWeight: 700 }}>STAGE 2</div>
      {second.map((tb) => (
        <div key={tb.id} className="absolute flex items-center justify-center rounded-[6px]" style={{ left: tb.x + "%", top: tb.y + "%", width: 40, height: 26, transform: "translate(-50%,-50%)", border: "1px solid #444", color: "#777", fontSize: 9, fontWeight: 700, background: "rgba(255,255,255,.02)" }}>{tb.id}</div>
      ))}
      {/* CLOSED overlay */}
      <div className="absolute inset-0 flex items-center justify-center backdrop-blur-[1px] bg-black/45">
        <div className="px-6 py-2 rotate-[-8deg] border-2 border-coral text-coral font-black uppercase tracking-[0.2em] text-lg bg-black/60">{t("Second Floor — Closed", "Segundo Piso — Cerrado")}</div>
      </div>
    </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-20">
      <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 [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;

  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")]];

  // Send the reservation summary to the club's WhatsApp, then show success.
  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 " + (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 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 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 " + (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 " + (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("Tap a table on the live floor plan. VIP & stage tables are $500++.", "Toca una mesa en el plano. Las VIP y de tarima son $500++.")}</p>
      <div className="grid lg:grid-cols-12 gap-6 items-start">
        <div className="lg:col-span-8">
          <FloorMap tables={tables} selected={f.tableId} onPick={(tb) => set("tableId", tb.id)} night={f.night} />
          <div className="mt-4"><SecondFloorPanel tables={tables} /></div>
        </div>
        <div className="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" }}>
              <div className="label text-[10px] mb-1" style={{ color: ZACCENT[selTable.zone] }}>{L(ZONES.find((z) => z.id === selTable.zone).name, lang)}</div>
              <div className="text-3xl font-black uppercase mb-4">{t("Table", "Mesa")} {selTable.id}</div>
              <div className="grid grid-cols-2 gap-4 mb-4">
                <div><div className="label text-white/40 text-[10px] mb-1">{t("Seats", "Asientos")}</div><div className="text-lg font-bold flex items-center gap-2"><Icon name="users" className="w-4 h-4 text-gold" />{selTable.seats}</div></div>
                <div><div className="label text-white/40 text-[10px] mb-1">{t("Minimum", "Mínimo")}</div><div className="text-lg font-bold serif text-gold-soft">${price}++</div></div>
              </div>
              {f.guests > selTable.seats && <p className="text-coral text-xs flex items-center gap-2"><Icon name="triangle-alert" className="w-3.5 h-3.5" />{t("Your party is larger than this table — we may seat you elsewhere.", "Tu grupo supera esta mesa — podríamos reubicarte.")}</p>}
            </div>
          ) : (
            <div className="rounded-2xl border border-dashed border-white/15 p-7 text-center"><Icon name="pointer" 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>
    </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 8PM, close 5AM.", "Hora de llegada — abrimos 8PM, cerramos 5AM.")}</p>
      <div className="flex 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 " + (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 " + (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"><FloorMap tables={tables} selected={f.tableId} onPick={(tb) => set("tableId", tb.id)} night={f.night} /><div className="mt-4"><SecondFloorPanel tables={tables} /></div></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 ----- */
  return (
    <div className="pt-28 md:pt-32 pb-24"><div className="container max-w-4xl">
      <div className="reveal mb-8"><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>

      {/* stepper */}
      <div className="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)" : i === step ? "transparent" : "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] hidden sm:inline " + (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 */}
      <div className="flex items-center justify-between mt-10 pt-6 border-t border-white/10">
        <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">{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 });