var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/venueBooking/temp.tsx
var temp_exports = {};
__export(temp_exports, {
  default: () => RainbowTownBadmintonBookingPage
});
module.exports = __toCommonJS(temp_exports);
var import_react = __toESM(require("react"));
var import_lucide_react = require("lucide-react");
var courts = [
  { id: "bad-1", name: "Badminton 1", shortName: "B1", type: "Badminton" },
  { id: "bad-2", name: "Badminton 2", shortName: "B2", type: "Badminton" },
  { id: "bad-3", name: "Badminton 3", shortName: "B3", type: "Badminton" },
  { id: "bad-4", name: "Badminton 4", shortName: "B4", type: "Badminton" },
  { id: "pick-1", name: "Pickleball 1", shortName: "P1", type: "Pickleball" },
  { id: "pick-2", name: "Pickleball 2", shortName: "P2", type: "Pickleball" }
];
var addonsCatalog = [
  { id: "racket", name: "Racket Rental", desc: "Lightweight racket", price: 6, unit: "/ each", category: "Equipment" },
  { id: "shuttle", name: "Shuttlecock Tube", desc: "6 premium shuttles", price: 12, unit: "", category: "Equipment" },
  { id: "towel", name: "Towel Rental", desc: "Fresh towel service", price: 4, unit: "/ each", category: "Comfort" },
  { id: "drink", name: "Sports Drink", desc: "Chilled isotonic drink", price: 5, unit: "", category: "Refreshments" },
  { id: "coach", name: "Coach Assist", desc: "15-min intro help", price: 18, unit: "", category: "Service" },
  { id: "locker", name: "Locker Rental", desc: "Per booking", price: 3, unit: "", category: "Comfort" }
];
var SLOT_MINUTES = 30;
var SLOTS_PER_HOUR = 2;
var AUTO_VIEW_HOURS = 5;
var WEEKDAY_OPEN_HOUR = 9;
var WEEKEND_OPEN_HOUR = 7;
var END_HOUR = 23;
var MAX_BOOKING_ITEMS = 4;
var MAX_TOTAL_SLOTS = 16;
var MAX_TOTAL_MINUTES = 8 * 60;
var FIRST_COLUMN_WIDTH = 88;
var SLOT_MIN_WIDTH = 70;
var hotline = "13001223344";
var seedBookings = [
  { courtId: "bad-1", date: "2026-04-06", start: "09:00", end: "11:00" },
  { courtId: "bad-1", date: "2026-04-06", start: "17:00", end: "19:00" },
  { courtId: "bad-2", date: "2026-04-06", start: "14:00", end: "16:30" },
  { courtId: "bad-3", date: "2026-04-06", start: "10:00", end: "12:00" },
  { courtId: "bad-4", date: "2026-04-06", start: "18:00", end: "20:00" },
  { courtId: "pick-1", date: "2026-04-06", start: "15:30", end: "17:30" },
  { courtId: "pick-2", date: "2026-04-06", start: "20:00", end: "22:00" },
  { courtId: "bad-1", date: "2026-04-07", start: "12:00", end: "14:30" },
  { courtId: "bad-3", date: "2026-04-07", start: "09:30", end: "11:30" },
  { courtId: "bad-4", date: "2026-04-07", start: "13:00", end: "15:00" },
  { courtId: "pick-1", date: "2026-04-07", start: "16:30", end: "18:30" },
  { courtId: "pick-2", date: "2026-04-08", start: "18:00", end: "20:00" },
  { courtId: "bad-2", date: "2026-04-08", start: "11:00", end: "12:30" },
  { courtId: "bad-1", date: "2026-04-13", start: "09:00", end: "12:00" },
  { courtId: "bad-1", date: "2026-04-13", start: "17:00", end: "22:00" },
  { courtId: "bad-2", date: "2026-04-13", start: "09:00", end: "11:30" },
  { courtId: "bad-2", date: "2026-04-13", start: "18:00", end: "22:00" },
  { courtId: "bad-3", date: "2026-04-13", start: "10:00", end: "13:00" },
  { courtId: "bad-3", date: "2026-04-13", start: "16:30", end: "21:30" },
  { courtId: "bad-4", date: "2026-04-13", start: "09:30", end: "12:30" },
  { courtId: "bad-4", date: "2026-04-13", start: "17:30", end: "22:00" },
  { courtId: "pick-1", date: "2026-04-13", start: "09:00", end: "15:00" },
  { courtId: "pick-1", date: "2026-04-13", start: "17:00", end: "21:00" },
  { courtId: "pick-2", date: "2026-04-13", start: "09:30", end: "14:30" },
  { courtId: "pick-2", date: "2026-04-13", start: "14:30", end: "17:00" },
  { courtId: "pick-2", date: "2026-04-13", start: "17:30", end: "20:30" },
  { courtId: "pick-2", date: "2026-04-13", start: "21:00", end: "23:00" },
  { courtId: "bad-1", date: "2026-04-17", start: "07:00", end: "22:00" },
  { courtId: "bad-2", date: "2026-04-17", start: "07:00", end: "23:00" },
  { courtId: "bad-3", date: "2026-04-17", start: "07:00", end: "23:00" },
  { courtId: "bad-4", date: "2026-04-17", start: "07:00", end: "23:00" },
  { courtId: "pick-1", date: "2026-04-17", start: "07:00", end: "23:00" },
  { courtId: "pick-2", date: "2026-04-17", start: "07:00", end: "23:00" },
  { courtId: "bad-1", date: "2026-04-18", start: "07:00", end: "23:00" },
  { courtId: "bad-2", date: "2026-04-18", start: "07:00", end: "23:00" },
  { courtId: "bad-3", date: "2026-04-18", start: "07:00", end: "23:00" },
  { courtId: "bad-4", date: "2026-04-18", start: "07:00", end: "23:00" },
  { courtId: "pick-1", date: "2026-04-18", start: "07:00", end: "23:00" },
  { courtId: "pick-2", date: "2026-04-18", start: "07:00", end: "23:00" }
];
function pad(n) {
  return String(n).padStart(2, "0");
}
function formatDateKey(date) {
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
}
function parseDateKey(key) {
  const [y, m, d] = key.split("-").map(Number);
  return new Date(y, m - 1, d);
}
function addDays(date, days) {
  const next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}
function startOfWeek(date) {
  const copy = new Date(date);
  const day = copy.getDay();
  const diff = day === 0 ? -6 : 1 - day;
  copy.setDate(copy.getDate() + diff);
  copy.setHours(0, 0, 0, 0);
  return copy;
}
function getWeekDays(anchorDate) {
  const start = startOfWeek(anchorDate);
  return Array.from({ length: 7 }, (_, i) => addDays(start, i));
}
function getMonthLabel(date) {
  return date.toLocaleDateString("en-AU", { month: "long", year: "numeric" });
}
function timeToMinutes(time) {
  const [h, m] = time.split(":").map(Number);
  return h * 60 + m;
}
function minutesToTime(minutes) {
  return `${pad(Math.floor(minutes / 60))}:${pad(minutes % 60)}`;
}
function buildTimeSlots(dateKey) {
  const slots = [];
  const openHour = dateKey && isWeekend(dateKey) ? WEEKEND_OPEN_HOUR : WEEKDAY_OPEN_HOUR;
  for (let mins = openHour * 60; mins < END_HOUR * 60; mins += SLOT_MINUTES) {
    slots.push(minutesToTime(mins));
  }
  return slots;
}
function getEndTime(startTime) {
  return minutesToTime(timeToMinutes(startTime) + SLOT_MINUTES);
}
function overlaps(aStart, aEnd, bStart, bEnd) {
  const a1 = timeToMinutes(aStart);
  const a2 = timeToMinutes(aEnd);
  const b1 = timeToMinutes(bStart);
  const b2 = timeToMinutes(bEnd);
  return !(a2 <= b1 || a1 >= b2);
}
function isWeekend(dateKey) {
  const day = parseDateKey(dateKey).getDay();
  return day === 0 || day === 6;
}
function getSlotPrice({ courtType, dateKey, time }) {
  const weekend = isWeekend(dateKey);
  const mins = timeToMinutes(time);
  if (dateKey === "2026-04-14") {
    if (courtType === "Badminton") {
      return { price: 11, originalPrice: null, label: "Off-Peak", highlight: false };
    }
    return { price: 15, originalPrice: null, label: "Off-Peak", highlight: false };
  }
  if (courtType === "Badminton") {
    const offPeak2 = weekend ? mins >= 7 * 60 && mins < 9 * 60 || mins >= 22 * 60 && mins < 23 * 60 : mins >= 9 * 60 && mins < 17 * 60 || mins >= 22 * 60 && mins < 23 * 60;
    if (offPeak2) return { price: 11, originalPrice: null, label: "Off-Peak", highlight: false };
    return { price: 16, originalPrice: null, label: "Peak", highlight: false };
  }
  const offPeak = weekend ? mins >= 7 * 60 && mins < 9 * 60 || mins >= 21 * 60 && mins < 23 * 60 : mins >= 9 * 60 && mins < 17 * 60 || mins >= 21 * 60 && mins < 23 * 60;
  if (offPeak) return { price: 15, originalPrice: null, label: "Off-Peak", highlight: false };
  return { price: 20, originalPrice: null, label: "Peak", highlight: false };
}
function getPriceColor({ highlight, courtType }) {
  if (highlight) return "text-emerald-600";
  if (courtType === "Pickleball") return "text-[#ea1018]";
  return "text-zinc-800";
}
function getCourtById(id) {
  return courts.find((court) => court.id === id);
}
function isSlotBooked(bookings, courtId, dateKey, slotTime) {
  const slotEnd = getEndTime(slotTime);
  return bookings.some((item) => item.courtId === courtId && item.date === dateKey && overlaps(slotTime, slotEnd, item.start, item.end));
}
function slotKey(courtId, date, time) {
  return `${courtId}|${date}|${time}`;
}
function formatRange(start, end) {
  return `${start} - ${end}`;
}
function getDateDisplay(dateKey) {
  return parseDateKey(dateKey).toLocaleDateString("en-AU", { weekday: "short", day: "numeric", month: "short", year: "numeric" });
}
function getMonthDays(date) {
  const first = new Date(date.getFullYear(), date.getMonth(), 1);
  const last = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  const firstDay = first.getDay() === 0 ? 6 : first.getDay() - 1;
  const totalDays = last.getDate();
  const cells = [];
  for (let i = 0; i < firstDay; i += 1) cells.push(null);
  for (let day = 1; day <= totalDays; day += 1) cells.push(new Date(date.getFullYear(), date.getMonth(), day));
  while (cells.length % 7 !== 0) cells.push(null);
  return cells;
}
function getTotalSelectedMinutes(selectedSlots) {
  return selectedSlots.length * SLOT_MINUTES;
}
function getTotalSelectedSlots(selectedSlots) {
  return selectedSlots.length;
}
function getTableGridStyle(slotCount) {
  return {
    gridTemplateColumns: `${FIRST_COLUMN_WIDTH}px repeat(${slotCount}, minmax(${SLOT_MIN_WIDTH}px, 1fr))`,
    minWidth: `${FIRST_COLUMN_WIDTH + slotCount * SLOT_MIN_WIDTH}px`,
    width: "100%"
  };
}
function getBookingLimitMessage() {
  return `You can book up to 4 bookings or max 8 hours. Need more? Call ${hotline}.`;
}
function removeGroupedItemSlots(selectedSlots, group) {
  return selectedSlots.filter((slot) => {
    if (slot.courtId !== group.courtId || slot.date !== group.date) return true;
    const mins = timeToMinutes(slot.time);
    return mins < timeToMinutes(group.start) || mins >= timeToMinutes(group.end);
  });
}
function groupSelections(selectedSlots) {
  const ordered = [...selectedSlots].sort((a, b) => {
    if (a.date !== b.date) return a.date.localeCompare(b.date);
    if (a.courtId !== b.courtId) return a.courtId.localeCompare(b.courtId);
    return timeToMinutes(a.time) - timeToMinutes(b.time);
  });
  const groups = [];
  for (const slot of ordered) {
    const court = getCourtById(slot.courtId);
    const priceInfo = getSlotPrice({ courtType: court.type, dateKey: slot.date, time: slot.time });
    const previous = groups[groups.length - 1];
    if (previous && previous.courtId === slot.courtId && previous.date === slot.date && previous.end === slot.time) {
      previous.end = getEndTime(slot.time);
      previous.slotCount += 1;
      previous.total += priceInfo.price;
      previous.originalTotal += priceInfo.originalPrice || priceInfo.price;
      previous.highlight = previous.highlight || priceInfo.highlight;
    } else {
      groups.push({
        id: `${slot.courtId}-${slot.date}-${slot.time}`,
        courtId: slot.courtId,
        courtName: court.name,
        courtType: court.type,
        date: slot.date,
        start: slot.time,
        end: getEndTime(slot.time),
        slotCount: 1,
        total: priceInfo.price,
        originalTotal: priceInfo.originalPrice || priceInfo.price,
        highlight: priceInfo.highlight
      });
    }
  }
  return groups;
}
function getAddonsTotal(addons) {
  return Object.values(addons).reduce((sum, item) => sum + item.qty * item.price, 0);
}
function getSlideClass(direction) {
  if (direction === "left") return "animate-[slideLeft_.26s_ease]";
  if (direction === "right") return "animate-[slideRight_.26s_ease]";
  return "animate-[fadeIn_.22s_ease]";
}
function formatHourHeader(slot) {
  const [hour] = slot.split(":").map(Number);
  const suffix = hour >= 12 ? "pm" : "am";
  const hour12 = hour % 12 === 0 ? 12 : hour % 12;
  return `${hour12}${suffix}`;
}
function buildHourGroups(timeSlots) {
  return timeSlots.filter((slot) => slot.endsWith(":00"));
}
function getSlotTag(priceInfo) {
  if (priceInfo.highlight || priceInfo.label === "Promo") {
    return { text: "Discounted", className: "bg-emerald-50 text-emerald-700 ring-emerald-200" };
  }
  if (priceInfo.label === "Off-Peak") {
    return { text: "Off-Peak", className: "bg-zinc-100 text-zinc-600 ring-zinc-200" };
  }
  return null;
}
function getColumnTag(dateKey, slot) {
  const states = courts.map((court) => {
    const priceInfo = getSlotPrice({ courtType: court.type, dateKey, time: slot });
    if (priceInfo.highlight || priceInfo.label === "Promo") return "Promo";
    if (priceInfo.label === "Off-Peak") return "Off-Peak";
    return "Peak";
  });
  const unique = Array.from(new Set(states));
  if (unique.length === 1) {
    if (unique[0] === "Promo") return { text: "Promo", className: "bg-emerald-50 text-emerald-700 ring-emerald-200" };
    if (unique[0] === "Off-Peak") return { text: "Off-Peak", className: "bg-zinc-100 text-zinc-600 ring-zinc-200" };
  }
  return null;
}
function getTimeMeta(dateKey, slot) {
  const availableCount = courts.filter((court) => !isSlotBooked(seedBookings, court.id, dateKey, slot)).length;
  const ratio = courts.length > 0 ? availableCount / courts.length : 0;
  return {
    soldOut: availableCount === 0,
    fewLeft: availableCount > 0 && ratio < 0.2
  };
}
function shouldShowCellTag(dateKey, slot) {
  const states = courts.map((court) => {
    const priceInfo = getSlotPrice({ courtType: court.type, dateKey, time: slot });
    if (priceInfo.highlight || priceInfo.label === "Promo") return "Promo";
    if (priceInfo.label === "Off-Peak") return "Off-Peak";
    return "Peak";
  });
  return new Set(states).size > 1;
}
function getDateMeta(date) {
  const dateKey = formatDateKey(date);
  const slots = buildTimeSlots(dateKey);
  let minPrice = Infinity;
  let availableCount = 0;
  let hasCourtFewLeft = false;
  let allPromo = true;
  let allOffPeak = true;
  for (const court of courts) {
    let courtAvailable = 0;
    for (const slot of slots) {
      const fullDayPriceInfo = getSlotPrice({ courtType: court.type, dateKey, time: slot });
      if (!(fullDayPriceInfo.highlight || fullDayPriceInfo.label === "Promo")) allPromo = false;
      if (fullDayPriceInfo.label !== "Off-Peak") allOffPeak = false;
      const booked = isSlotBooked(seedBookings, court.id, dateKey, slot);
      if (!booked) {
        availableCount += 1;
        courtAvailable += 1;
        minPrice = Math.min(minPrice, fullDayPriceInfo.price);
      }
    }
    if (courtAvailable > 0 && courtAvailable / slots.length < 0.2) hasCourtFewLeft = true;
  }
  if (availableCount === 0) {
    return { topTag: allPromo ? "Promo" : allOffPeak ? "Off-Peak" : null, startingPrice: null, fewLeft: false, soldOut: true };
  }
  return {
    topTag: allPromo ? "Promo" : allOffPeak ? "Off-Peak" : null,
    startingPrice: Number.isFinite(minPrice) ? `$${minPrice}+` : null,
    fewLeft: hasCourtFewLeft,
    soldOut: false
  };
}
function getCourtMeta(courtId, dateKey) {
  const slots = buildTimeSlots(dateKey);
  const availableCount = slots.filter((slot) => !isSlotBooked(seedBookings, courtId, dateKey, slot)).length;
  const ratio = slots.length > 0 ? availableCount / slots.length : 0;
  return {
    soldOut: availableCount === 0,
    fewLeft: availableCount > 0 && ratio < 0.2
  };
}
function getCourtTypeIcon(type) {
  return type === "Badminton" ? "🏸" : "🏓";
}
function isHourBoundary(slot) {
  return slot.endsWith(":00");
}
function getSuggestedStartHourIndex({ availableSlotIndexes, totalHours }) {
  if (!availableSlotIndexes.length) return 1;
  const earliestHour = Math.floor(availableSlotIndexes[0] / SLOTS_PER_HOUR) + 1;
  const latestHour = Math.floor(availableSlotIndexes[availableSlotIndexes.length - 1] / SLOTS_PER_HOUR) + 1;
  const maxStartHour = Math.max(1, totalHours - AUTO_VIEW_HOURS + 1);
  if (earliestHour <= AUTO_VIEW_HOURS) return 1;
  if (earliestHour === latestHour) {
    return Math.max(1, Math.min(maxStartHour, latestHour - AUTO_VIEW_HOURS + 1));
  }
  return Math.max(1, Math.min(maxStartHour, earliestHour));
}
function getAvailableSlotIndexesForDate(dateKey, timeSlots) {
  return timeSlots.map((slot, index) => {
    const hasAvailableCourt = courts.some((court) => !isSlotBooked(seedBookings, court.id, dateKey, slot));
    return hasAvailableCourt ? index : null;
  }).filter((index) => index !== null);
}
function HeaderBar() {
  return /* @__PURE__ */ import_react.default.createElement("header", { className: "sticky top-0 z-40 border-b border-black/5 bg-white/95 backdrop-blur" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mx-auto flex max-w-[1500px] items-center justify-between gap-3 px-4 py-4 md:gap-6 md:px-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-w-0 items-center gap-4 md:gap-10" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "shrink-0 text-[22px] font-extrabold leading-none text-[#e91a4b] md:text-[28px]" }, /* @__PURE__ */ import_react.default.createElement("div", null, "Rainbow"), /* @__PURE__ */ import_react.default.createElement("div", { className: "-mt-1" }, "Town")), /* @__PURE__ */ import_react.default.createElement("nav", { className: "hidden items-center gap-8 text-[15px] font-semibold text-zinc-900 lg:flex" }, /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Home"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Party"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Tickets"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Gift Card"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Play Areas"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Cafe Menu"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "hover:text-[#ea1018]" }, "Contact Us"), /* @__PURE__ */ import_react.default.createElement("a", { href: "#", className: "rounded-full bg-[#ea1018] px-4 py-2 text-white shadow-sm transition hover:opacity-95" }, "Badminton Booking"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "hidden rounded-[16px] border border-black/15 px-6 py-3 text-[15px] font-semibold text-zinc-900 md:inline-flex" }, "Buy Tickets"), /* @__PURE__ */ import_react.default.createElement("button", { className: "rounded-[16px] bg-[#ea1018] px-4 py-3 text-[14px] font-semibold text-white shadow-sm md:px-6 md:text-[15px]" }, "Book Party"))));
}
function HeroBanner({ step }) {
  return /* @__PURE__ */ import_react.default.createElement("section", { className: "relative overflow-hidden rounded-[30px] bg-gradient-to-r from-[#fff1f1] via-white to-[#fff5e8] px-5 py-6 md:px-10 md:py-10" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute right-0 top-0 h-full w-[38%] bg-[radial-gradient(circle_at_top_right,rgba(234,16,24,0.16),transparent_56%)]" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "relative z-10 max-w-4xl" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-3 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm ring-1 ring-black/5" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.MapPin, { size: 15, className: "text-[#ea1018]" }), "Rainbow Town · Badminton Booking"), /* @__PURE__ */ import_react.default.createElement("h1", { className: "text-[32px] font-extrabold tracking-tight text-zinc-900 md:text-5xl" }, step === 1 ? "Reserve Your Court Today" : "Add Extras to Your Booking"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-3 text-sm leading-6 text-zinc-600 md:text-base" }, step === 1 ? "Fast booking, clear pricing, instant confirmation." : "Rackets, shuttles and more — add them before you finish.")));
}
function StepBar({ step, canGoToStep2, hasSelectedBooking, addonCount, onStepChange }) {
  const items = [
    { n: 1, title: "Choose Your Court" },
    { n: 2, title: "Add-ons" },
    { n: 3, title: "Review & Checkout" }
  ];
  function isClickable(targetStep) {
    if (targetStep === 1) return true;
    if (targetStep === 2) return canGoToStep2;
    return false;
  }
  function getBadge(targetStep) {
    if (targetStep === 1 && hasSelectedBooking) {
      return /* @__PURE__ */ import_react.default.createElement("span", { className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-[#ea1018] text-[11px] font-bold text-white" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 12 }));
    }
    if (targetStep === 2 && addonCount > 0) {
      return /* @__PURE__ */ import_react.default.createElement("span", { className: "ml-1 inline-flex min-w-[20px] items-center justify-center rounded-full bg-[#111111] px-1.5 text-[11px] font-bold text-white" }, "+", addonCount);
    }
    return null;
  }
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[24px] bg-white p-4 ring-1 ring-black/6 shadow-[0_10px_30px_rgba(20,20,20,0.04)]" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, items.map((item, index) => {
    const active = step === item.n;
    const done = step > item.n;
    const clickable = isClickable(item.n);
    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: item.n }, /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        type: "button",
        onClick: () => {
          if (clickable) onStepChange(item.n);
        },
        className: `flex items-center gap-3 rounded-full px-3 py-2 transition ${active ? "bg-[#fff4f4]" : done ? "bg-zinc-50" : "bg-zinc-50/80"} ${clickable ? "cursor-pointer hover:bg-zinc-100" : "cursor-default"}`
      },
      /* @__PURE__ */ import_react.default.createElement("div", { className: `flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${done ? "bg-[#111] text-white" : active ? "bg-[#ea1018] text-white" : "bg-white text-zinc-400 ring-1 ring-black/8"}` }, done ? /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 15 }) : item.n),
      /* @__PURE__ */ import_react.default.createElement("div", { className: `flex items-center text-sm font-semibold ${active ? "text-zinc-900" : done ? "text-zinc-700" : "text-zinc-400"}` }, /* @__PURE__ */ import_react.default.createElement("span", null, item.title), getBadge(item.n))
    ), index < items.length - 1 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "relative h-px flex-1 overflow-hidden rounded-full bg-zinc-200" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `absolute left-0 top-0 h-full ${done ? "w-full bg-[#111]" : active ? "w-1/2 bg-[#ea1018]" : "w-0"}` })) : null);
  })));
}
function PriceLegend() {
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-2 gap-2 md:gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "min-w-0 rounded-[16px] bg-[#fff4f4] px-3 py-3 ring-1 ring-[#f4caca] md:px-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-[11px] font-semibold text-zinc-900 md:text-sm" }, "Badminton"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-600 md:text-sm" }, "Weekday: $11 off-peak · $16 peak"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-600 md:text-sm" }, "Weekend off-peak: 7-9am, 10-11pm")), /* @__PURE__ */ import_react.default.createElement("div", { className: "min-w-0 rounded-[16px] bg-[#fff7f7] px-3 py-3 ring-1 ring-[#f4d7d7] md:px-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate text-[11px] font-semibold text-zinc-900 md:text-sm" }, "Pickleball"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-600 md:text-sm" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "font-bold text-[#ea1018]" }, "$15"), " off-peak · ", /* @__PURE__ */ import_react.default.createElement("span", { className: "font-bold text-[#ea1018]" }, "$20"), " peak"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-600 md:text-sm" }, "Weekend off-peak: 7-9am, 9-11pm")));
}
function DayTabs({ anchorDate, onChange, onPrevWeek, onNextWeek }) {
  const days = getWeekDays(anchorDate);
  const currentKey = formatDateKey(anchorDate);
  const showFewLeftRow = days.some((date) => {
    const meta = getDateMeta(date);
    return !meta.soldOut && meta.fewLeft;
  });
  const shouldHideTopTag = typeof window !== "undefined" && window.innerWidth < 920;
  const swipeRef = (0, import_react.useRef)({ startX: 0, startY: 0, active: false, moved: false });
  function handlePointerDown(e) {
    if (e.pointerType === "mouse" && e.button !== 0) return;
    swipeRef.current = {
      startX: e.clientX,
      startY: e.clientY,
      active: true,
      moved: false
    };
  }
  function handlePointerMove(e) {
    if (!swipeRef.current.active) return;
    const dx = e.clientX - swipeRef.current.startX;
    const dy = e.clientY - swipeRef.current.startY;
    if (Math.abs(dx) > 8 || Math.abs(dy) > 8) {
      swipeRef.current.moved = true;
    }
  }
  function handlePointerUp(e) {
    if (!swipeRef.current.active) return;
    const dx = e.clientX - swipeRef.current.startX;
    const dy = e.clientY - swipeRef.current.startY;
    swipeRef.current.active = false;
    if (Math.abs(dx) < 48 || Math.abs(dx) <= Math.abs(dy)) return;
    if (dx < 0) onNextWeek == null ? void 0 : onNextWeek();
    else onPrevWeek == null ? void 0 : onPrevWeek();
  }
  function handleDateClick(date) {
    if (swipeRef.current.moved) {
      swipeRef.current.moved = false;
      return;
    }
    onChange(date);
  }
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "grid grid-cols-7 gap-1 touch-pan-y select-none",
      onPointerDown: handlePointerDown,
      onPointerMove: handlePointerMove,
      onPointerUp: handlePointerUp,
      onPointerCancel: () => {
        swipeRef.current.active = false;
        swipeRef.current.moved = false;
      }
    },
    days.map((date) => {
      const key = formatDateKey(date);
      const active = key === currentKey;
      const meta = getDateMeta(date);
      const cardClass = meta.soldOut ? "bg-zinc-50 text-zinc-400 ring-1 ring-zinc-200" : active ? "bg-[#ea1018] text-white shadow-sm" : "bg-white text-zinc-800 ring-1 ring-black/8 hover:bg-zinc-50";
      const tagClass = active ? "bg-white/15 text-white ring-white/20" : meta.topTag === "Promo" ? "bg-emerald-50 text-emerald-700 ring-emerald-200" : "bg-zinc-100 text-zinc-600 ring-zinc-200";
      return /* @__PURE__ */ import_react.default.createElement(
        "button",
        {
          key,
          type: "button",
          onClick: () => handleDateClick(date),
          className: `relative min-w-0 cursor-pointer rounded-[12px] px-2 py-2 text-left transition md:rounded-[16px] md:px-3 md:py-2 ${showFewLeftRow ? "min-h-[66px] pb-5 md:min-h-[72px] md:pb-6" : "min-h-[56px] md:min-h-[60px]"} ${cardClass}`
        },
        meta.topTag && !shouldHideTopTag ? /* @__PURE__ */ import_react.default.createElement("div", { className: `pointer-events-none absolute right-1 top-1 inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:right-2 md:top-2 md:text-[10px] ${tagClass}` }, meta.topTag) : null,
        /* @__PURE__ */ import_react.default.createElement("div", { className: `pointer-events-none truncate text-[8px] leading-none md:text-xs ${meta.soldOut ? "text-zinc-400" : active ? "text-white/85" : "text-zinc-500"}` }, date.toLocaleDateString("en-AU", { weekday: "short" })),
        /* @__PURE__ */ import_react.default.createElement("div", { className: "pointer-events-none mt-1 flex w-full items-end justify-between gap-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[13px] font-bold leading-none md:text-base ${meta.soldOut ? "line-through" : ""}` }, date.getDate()), /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[10px] font-semibold leading-none md:text-xs ${active ? "text-white/70" : "text-zinc-400"}` }, meta.soldOut ? "Sold out" : meta.startingPrice ?? "")),
        showFewLeftRow ? /* @__PURE__ */ import_react.default.createElement("div", { className: `pointer-events-none absolute bottom-2 left-2 text-[10px] font-bold leading-none md:bottom-2 md:left-3 md:text-[11px] ${meta.fewLeft && !meta.soldOut ? active ? "text-white" : "text-[#ea1018]" : "opacity-0"}` }, "Few left") : null
      );
    })
  );
}
function MonthPicker({ visibleMonth, selectedDate, onSelectDate, onClose, onPrevMonth, onNextMonth }) {
  const days = getMonthDays(visibleMonth);
  const selectedKey = formatDateKey(selectedDate);
  const todayKey = formatDateKey(/* @__PURE__ */ new Date());
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute right-0 top-[calc(100%+12px)] z-30 w-[320px] rounded-[24px] border border-black/6 bg-white p-4 shadow-[0_20px_60px_rgba(20,20,20,0.14)]" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-4 flex items-center justify-between" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: onPrevMonth, className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-[#fafafa] ring-1 ring-black/8 hover:bg-zinc-50" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronLeft, { size: 16 })), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-bold text-zinc-900" }, getMonthLabel(visibleMonth)), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onNextMonth, className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-[#fafafa] ring-1 ring-black/8 hover:bg-zinc-50" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 16 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-2 grid grid-cols-7 gap-2 px-1 text-center text-[11px] font-bold uppercase tracking-wide text-zinc-400" }, ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item }, item))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid grid-cols-7 gap-2" }, days.map((day, index) => {
    if (!day) return /* @__PURE__ */ import_react.default.createElement("div", { key: `empty-${index}`, className: "h-11" });
    const key = formatDateKey(day);
    const meta = getDateMeta(day);
    const selected = key === selectedKey;
    const isToday = key === todayKey;
    return /* @__PURE__ */ import_react.default.createElement(
      "button",
      {
        key,
        disabled: false,
        onClick: () => {
          onSelectDate(day);
          onClose();
        },
        className: `h-11 rounded-2xl text-sm font-semibold transition ${meta.soldOut ? "bg-zinc-50 text-zinc-400 ring-1 ring-zinc-200" : selected ? "bg-[#ea1018] text-white shadow-sm" : isToday ? "bg-[#fff4f4] text-[#ea1018] ring-1 ring-[#f4caca]" : "bg-[#fafafa] text-zinc-700 ring-1 ring-black/6"}`
      },
      /* @__PURE__ */ import_react.default.createElement("span", { className: meta.soldOut ? "line-through text-zinc-400" : "" }, day.getDate())
    );
  })));
}
function LimitToast({ message, onClose }) {
  if (!message) return null;
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed left-1/2 top-4 z-[90] w-[min(92vw,520px)] -translate-x-1/2 animate-[toastIn_.22s_ease]" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-hidden rounded-[20px] bg-[#111111] px-4 py-3 text-white shadow-[0_18px_50px_rgba(0,0,0,0.28)] ring-1 ring-white/10" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#ea1018] text-sm font-bold" }, "!"), /* @__PURE__ */ import_react.default.createElement("div", { className: "min-w-0 flex-1 pr-2 text-sm font-semibold leading-6" }, message), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onClose, className: "rounded-full bg-white/10 p-1.5 text-white/80 hover:bg-white/15" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14 }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 h-[3px] rounded-full bg-white/10" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "h-full rounded-full bg-[#ea1018] animate-[toastBar_3.8s_linear_forwards]" }))));
}
function AddonCard({ addon, qty, onChange }) {
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[24px] bg-white p-5 ring-1 ring-black/6 shadow-[0_10px_30px_rgba(20,20,20,0.04)]" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-[#fff4f4] px-3 py-1 text-[11px] font-semibold text-[#ea1018]" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Sparkles, { size: 13 }), " ", addon.category), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 text-xl font-extrabold text-zinc-900" }, addon.name), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-sm text-zinc-500" }, addon.desc), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 text-lg font-bold text-zinc-900" }, "$", addon.price, " ", /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm font-medium text-zinc-500" }, addon.unit))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2 rounded-full bg-zinc-50 p-2 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => onChange(Math.max(0, qty - 1)), className: "flex h-9 w-9 items-center justify-center rounded-full bg-white text-zinc-700 ring-1 ring-black/8" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Minus, { size: 15 })), /* @__PURE__ */ import_react.default.createElement("div", { className: "w-8 text-center text-base font-bold text-zinc-900" }, qty), /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => onChange(qty + 1), className: "flex h-9 w-9 items-center justify-center rounded-full bg-[#ea1018] text-white" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, { size: 15 })))));
}
function BookingCart({ step, groups, addons, note, onNoteChange, coupon, onCouponChange, onCouponApply, appliedCoupon, onRemoveGroup, mobileCartOpen, setMobileCartOpen, onNext, onBack, canNext }) {
  const bookingSubtotal = groups.reduce((sum, item) => sum + item.total, 0);
  const addonsTotal = getAddonsTotal(addons);
  const compareAt = groups.reduce((sum, item) => sum + item.originalTotal, 0);
  const builtInDiscount = Math.max(compareAt - bookingSubtotal, 0);
  const couponDiscount = appliedCoupon === "RAINBOW10" ? Math.round((bookingSubtotal + addonsTotal) * 0.1) : 0;
  const total = Math.max(bookingSubtotal + addonsTotal - couponDiscount, 0);
  const addonEntries = Object.values(addons).filter((item) => item.qty > 0);
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed inset-x-0 bottom-0 z-40 border-t border-black/10 bg-white/95 p-3 backdrop-blur md:hidden" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setMobileCartOpen(true), className: "flex w-full items-center justify-between rounded-[18px] bg-[#111111] px-4 py-3 text-white shadow-lg" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-[#ea1018] text-white" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ShoppingCart, { size: 18 })), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-left" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-bold" }, step === 1 ? "Booking Cart" : step === 2 ? "Review" : "Pay now"), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs text-white/70" }, "$", total))), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold" }, step === 1 ? "Next" : step === 2 ? "Review" : "Pay now"))), mobileCartOpen ? /* @__PURE__ */ import_react.default.createElement("div", { className: "fixed inset-0 z-40 bg-black/40 md:hidden", onClick: () => setMobileCartOpen(false) }) : null, /* @__PURE__ */ import_react.default.createElement("aside", { className: `${mobileCartOpen ? "translate-y-0" : "translate-y-full"} fixed inset-x-0 bottom-0 z-50 max-h-[82vh] overflow-auto rounded-t-[28px] bg-white p-5 shadow-[0_-20px_60px_rgba(20,20,20,0.18)] ring-1 ring-black/6 transition-transform duration-300 md:sticky md:top-[96px] md:z-auto md:max-h-none md:translate-y-0 md:rounded-[28px] xl:p-6` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start gap-3" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setMobileCartOpen(false), className: "mt-1 flex h-10 w-10 items-center justify-center rounded-full bg-zinc-100 text-zinc-600 md:hidden" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 16 })), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[22px] font-extrabold text-zinc-900" }, step === 1 ? "Booking Cart" : step === 2 ? "Booking Summary" : "Payment Summary"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-sm text-zinc-500" }, step === 1 ? "Choose your court first." : step === 2 ? "Add-ons are ready below." : "Review everything before payment.")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 rounded-[22px] bg-[#fafafa] p-3 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2" }, step > 1 ? /* @__PURE__ */ import_react.default.createElement("button", { onClick: onBack, className: "rounded-[16px] border border-black/10 px-4 py-4 text-sm font-semibold text-zinc-800" }, "Back") : null, /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      onClick: onNext,
      disabled: step === 1 && !canNext,
      className: `flex-1 rounded-[18px] px-5 py-4 text-base font-extrabold text-white shadow-sm ${step === 1 && !canNext ? "bg-zinc-300" : "bg-[#ea1018]"}`
    },
    step === 1 ? "Next: Add-ons" : step === 2 ? "Review & Pay" : "Pay now"
  ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 space-y-3" }, groups.length ? groups.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.id, className: "rounded-[22px] bg-white p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react.default.createElement("span", { className: `rounded-full px-2.5 py-1 text-[11px] font-semibold ${item.courtType === "Pickleball" ? "bg-[#fff0f1] text-[#ea1018]" : "bg-zinc-100 text-zinc-700"}` }, item.courtType), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-bold text-zinc-900" }, item.courtName)), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 text-sm text-zinc-500" }, getDateDisplay(item.date)), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-sm font-semibold text-zinc-900" }, formatRange(item.start, item.end))), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-right" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => onRemoveGroup(item), className: "rounded-full bg-zinc-100 p-2 text-zinc-500" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14 })), /* @__PURE__ */ import_react.default.createElement("div", { className: `mt-3 text-lg font-extrabold ${item.highlight ? "text-emerald-600" : item.courtType === "Pickleball" ? "text-[#ea1018]" : "text-zinc-900"}` }, "$", item.total))))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[22px] border border-dashed border-black/10 bg-white px-4 py-8 text-center text-sm text-zinc-500" }, "Select court slots to begin.")), step >= 2 && addonEntries.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 rounded-[22px] bg-white p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-bold text-zinc-900" }, "Add-ons"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 space-y-2" }, addonEntries.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.id, className: "flex items-center justify-between text-sm" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-zinc-600" }, item.name, " × ", item.qty), /* @__PURE__ */ import_react.default.createElement("span", { className: "font-semibold text-zinc-900" }, "$", item.qty * item.price))))) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 rounded-[22px] bg-white p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-bold text-zinc-900" }, "Note"), /* @__PURE__ */ import_react.default.createElement("textarea", { value: note, onChange: (e) => onNoteChange(e.target.value), placeholder: "Any special requests...", className: "mt-3 min-h-[92px] w-full rounded-[18px] border border-black/10 bg-white px-4 py-3 text-sm outline-none placeholder:text-zinc-400" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 rounded-[22px] bg-white p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-bold text-zinc-900" }, "Coupon"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 flex gap-2" }, /* @__PURE__ */ import_react.default.createElement("input", { value: coupon, onChange: (e) => onCouponChange(e.target.value), placeholder: "Enter code", className: "min-w-0 flex-1 rounded-[16px] border border-black/10 px-4 py-3 text-sm outline-none placeholder:text-zinc-400" }), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onCouponApply, className: "rounded-[16px] border border-black/10 px-4 py-3 text-sm font-semibold text-zinc-800" }, "Apply")), appliedCoupon ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 text-xs font-semibold text-emerald-600" }, "Applied: ", appliedCoupon) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 rounded-[22px] bg-zinc-900 p-5 text-white" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-2 text-sm" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-white/70" }, "Booking"), /* @__PURE__ */ import_react.default.createElement("span", null, "$", bookingSubtotal)), step >= 2 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-white/70" }, "Add-ons"), /* @__PURE__ */ import_react.default.createElement("span", null, "$", addonsTotal)) : null, builtInDiscount > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between text-emerald-300" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Built-in promo"), /* @__PURE__ */ import_react.default.createElement("span", null, "-$", builtInDiscount)) : null, couponDiscount > 0 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between text-emerald-300" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Coupon"), /* @__PURE__ */ import_react.default.createElement("span", null, "-$", couponDiscount)) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 border-t border-white/10 pt-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs uppercase tracking-[0.2em] text-white/55" }, "Total"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-4xl font-extrabold" }, "$", total)))));
}
function SummaryStep({ groups, addons, note, onBackToAddons }) {
  const bookingSubtotal = groups.reduce((sum, item) => sum + item.total, 0);
  const addonEntries = Object.values(addons).filter((item) => item.qty > 0);
  const addonsTotal = getAddonsTotal(addons);
  const grandTotal = bookingSubtotal + addonsTotal;
  const salesMappedPreview = {
    customer_name: "张三",
    email: "zhang@example.com",
    phone: "+86 13800138000",
    note: note || "客人要求安静包房",
    payment_methods: "cash / card / wallet"
  };
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-5" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[28px] bg-white p-5 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:p-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-[#fff7e8] px-3 py-1.5 text-sm font-semibold text-[#c58a11]" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Info, { size: 15 }), " Step 3 · Summary"), /* @__PURE__ */ import_react.default.createElement("h2", { className: "mt-3 text-[30px] font-extrabold leading-tight text-zinc-900" }, "Before you pay"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-2 text-sm leading-6 text-zinc-500" }, "Review the details below, update customer information if needed, then continue to payment.")), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onBackToAddons, className: "rounded-[16px] border border-black/10 px-4 py-3 text-sm font-semibold text-zinc-800" }, "Back to Add-ons"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[28px] bg-white p-5 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:p-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs font-bold uppercase tracking-[0.24em] text-[#b39a8b]" }, "Booking details"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 text-[22px] font-extrabold text-zinc-900" }, "Court booking summary")), /* @__PURE__ */ import_react.default.createElement("button", { className: "rounded-full bg-[#eef7f3] px-5 py-3 text-sm font-bold text-zinc-800 shadow-sm ring-1 ring-black/6" }, "Change")), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-5 grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold text-[#a69183]" }, "Selected courts"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 space-y-2 text-[15px] font-semibold text-zinc-900" }, groups.length ? groups.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: item.id }, item.courtName)) : /* @__PURE__ */ import_react.default.createElement("div", null, "Use sales.bookings[].resources[].relation_id"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold text-[#a69183]" }, "Sessions"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 space-y-2 text-[15px] font-semibold text-zinc-900" }, groups.length ? groups.map((item) => /* @__PURE__ */ import_react.default.createElement("div", { key: `${item.id}-range` }, getDateDisplay(item.date), " · ", formatRange(item.start, item.end))) : /* @__PURE__ */ import_react.default.createElement("div", null, "Use sales.bookings[].start_date / start_time / end_date / end_time"))), /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold text-[#a69183]" }, "Booking subtotal"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 text-[30px] font-extrabold text-zinc-900" }, "$", bookingSubtotal), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 text-xs text-zinc-500" }, "Prefer sales.summary.product_amount")), /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-semibold text-[#a69183]" }, "Add-ons"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 text-[15px] font-semibold text-zinc-900" }, addonEntries.length ? addonEntries.map((item) => `${item.name} × ${item.qty}`).join(", ") : "No extras selected"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 text-sm text-zinc-500" }, "Add-ons total: $", addonsTotal)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[28px] bg-white p-5 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:p-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-3" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs font-bold uppercase tracking-[0.24em] text-[#b39a8b]" }, "Customer details"), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 text-[22px] font-extrabold text-zinc-900" }, "Primary contact details")), /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-full bg-[#fff4f6] px-4 py-2 text-sm font-semibold text-[#da7486]" }, "Mapped from sales.customer_*")), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-5 grid gap-4 md:grid-cols-2" }, /* @__PURE__ */ import_react.default.createElement("label", { className: "block md:col-span-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-2 text-sm font-semibold text-[#927f70]" }, "Customer name"), /* @__PURE__ */ import_react.default.createElement("input", { defaultValue: salesMappedPreview.customer_name, className: "w-full rounded-[18px] border border-black/10 bg-white px-4 py-3 text-sm outline-none" })), /* @__PURE__ */ import_react.default.createElement("label", { className: "block" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-2 text-sm font-semibold text-[#927f70]" }, "Email"), /* @__PURE__ */ import_react.default.createElement("input", { defaultValue: salesMappedPreview.email, className: "w-full rounded-[18px] border border-black/10 bg-white px-4 py-3 text-sm outline-none" })), /* @__PURE__ */ import_react.default.createElement("label", { className: "block" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-2 text-sm font-semibold text-[#927f70]" }, "Phone"), /* @__PURE__ */ import_react.default.createElement("input", { defaultValue: salesMappedPreview.phone, className: "w-full rounded-[18px] border border-black/10 bg-white px-4 py-3 text-sm outline-none" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-5 rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold text-zinc-900" }, "Notice"), /* @__PURE__ */ import_react.default.createElement("textarea", { defaultValue: salesMappedPreview.note, placeholder: "Any special requests...", className: "mt-4 min-h-[120px] w-full rounded-[20px] border border-black/10 bg-white px-4 py-4 text-sm outline-none placeholder:text-zinc-400" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[28px] bg-white p-5 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:p-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[22px] font-extrabold text-zinc-900" }, "Arrival & payment info"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-4 text-sm leading-7 text-zinc-600" }, "Please arrive 10 minutes before your first session if you need equipment rental or check-in assistance. Your booking will be confirmed immediately after payment."), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-5 rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-between text-sm text-zinc-600" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Payment method"), /* @__PURE__ */ import_react.default.createElement("span", null, salesMappedPreview.payment_methods)), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 flex items-center justify-between text-sm text-zinc-600" }, /* @__PURE__ */ import_react.default.createElement("span", null, "Support hotline"), /* @__PURE__ */ import_react.default.createElement("span", null, hotline)), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 border-t border-black/6 pt-4 flex items-center justify-between" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm font-semibold text-zinc-600" }, "Estimated total"), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-2xl font-extrabold text-zinc-900" }, "$", grandTotal)), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-2 text-xs text-zinc-500" }, "Prefer sales.summary.total_amount / expect_amount / tax_fee / surcharge_fee / discount_amount"))))));
}
function RainbowTownBadmintonBookingPage() {
  const today = /* @__PURE__ */ new Date();
  const [step, setStep] = (0, import_react.useState)(1);
  const [anchorDate, setAnchorDate] = (0, import_react.useState)(new Date(2026, 3, 13));
  const [selectedSlots, setSelectedSlots] = (0, import_react.useState)([]);
  const [selectedAddons, setSelectedAddons] = (0, import_react.useState)({});
  const [coupon, setCoupon] = (0, import_react.useState)("");
  const [appliedCoupon, setAppliedCoupon] = (0, import_react.useState)("");
  const [note, setNote] = (0, import_react.useState)("");
  const [search, setSearch] = (0, import_react.useState)("");
  const [filter, setFilter] = (0, import_react.useState)("ALL");
  const [limitMessage, setLimitMessage] = (0, import_react.useState)("");
  const [tableSlideDirection, setTableSlideDirection] = (0, import_react.useState)("left");
  const [monthPickerOpen, setMonthPickerOpen] = (0, import_react.useState)(false);
  const [monthCursor, setMonthCursor] = (0, import_react.useState)(new Date(2026, 3, 1));
  const [mobileCartOpen, setMobileCartOpen] = (0, import_react.useState)(false);
  const scrollTableRef = (0, import_react.useRef)(null);
  const tableSectionRef = (0, import_react.useRef)(null);
  const dragStateRef = (0, import_react.useRef)({
    isDragging: false,
    pointerId: null,
    startX: 0,
    startY: 0,
    startScrollLeft: 0,
    moved: false
  });
  const dateKey = formatDateKey(anchorDate);
  const todayKey = formatDateKey(today);
  const isViewingToday = dateKey === todayKey;
  const timeSlots = (0, import_react.useMemo)(() => buildTimeSlots(dateKey), [dateKey]);
  const hourGroups = (0, import_react.useMemo)(() => buildHourGroups(timeSlots), [timeSlots]);
  const bookingLimitMessage = getBookingLimitMessage();
  const tableGridStyle = (0, import_react.useMemo)(() => getTableGridStyle(timeSlots.length), [timeSlots.length]);
  const visibleCourts = (0, import_react.useMemo)(() => courts.filter((court) => {
    const hitType = filter === "ALL" || court.type === filter;
    const hitSearch = !search || court.name.toLowerCase().includes(search.toLowerCase());
    return hitType && hitSearch;
  }), [filter, search]);
  const groupedCartItems = (0, import_react.useMemo)(() => groupSelections(selectedSlots), [selectedSlots]);
  const canNext = groupedCartItems.length > 0;
  const addonCount = Object.values(selectedAddons).reduce((sum, item) => sum + item.qty, 0);
  (0, import_react.useEffect)(() => {
    if (!limitMessage) return void 0;
    const timer = window.setTimeout(() => setLimitMessage(""), 3800);
    return () => window.clearTimeout(timer);
  }, [limitMessage]);
  (0, import_react.useEffect)(() => {
    const scroller = scrollTableRef.current;
    if (!scroller || !timeSlots.length) return;
    const availableSlotIndexes = getAvailableSlotIndexesForDate(dateKey, timeSlots);
    const startHourIndex = getSuggestedStartHourIndex({
      availableSlotIndexes,
      totalHours: hourGroups.length
    });
    const startSlotIndex = Math.max(0, (startHourIndex - 1) * SLOTS_PER_HOUR);
    const slotAreaWidth = Math.max(0, scroller.scrollWidth - FIRST_COLUMN_WIDTH);
    const slotWidth = timeSlots.length ? slotAreaWidth / timeSlots.length : 0;
    const targetLeft = Math.max(0, startSlotIndex * slotWidth);
    scroller.scrollTo({ left: targetLeft, behavior: "smooth" });
  }, [dateKey, timeSlots, hourGroups.length]);
  (0, import_react.useEffect)(() => {
    const scroller = scrollTableRef.current;
    if (!scroller) return void 0;
    function onPointerDown(e) {
      var _a;
      if (e.pointerType === "mouse" && e.button !== 0) return;
      if (e.target instanceof Element && e.target.closest('[data-cart-button="true"], input, textarea')) return;
      dragStateRef.current = {
        isDragging: true,
        pointerId: e.pointerId,
        startX: e.clientX,
        startY: e.clientY,
        startScrollLeft: scroller.scrollLeft,
        moved: false
      };
      (_a = scroller.setPointerCapture) == null ? void 0 : _a.call(scroller, e.pointerId);
    }
    function onPointerMove(e) {
      const state = dragStateRef.current;
      if (!state.isDragging || state.pointerId !== e.pointerId) return;
      const dx = e.clientX - state.startX;
      const dy = e.clientY - state.startY;
      if (Math.abs(dx) > 6 || Math.abs(dy) > 6) state.moved = true;
      if (Math.abs(dx) >= Math.abs(dy)) {
        e.preventDefault();
        scroller.scrollLeft = state.startScrollLeft - dx;
      }
    }
    function endDrag(e) {
      var _a;
      const state = dragStateRef.current;
      if (state.pointerId !== e.pointerId) return;
      dragStateRef.current.isDragging = false;
      dragStateRef.current.pointerId = null;
      (_a = scroller.releasePointerCapture) == null ? void 0 : _a.call(scroller, e.pointerId);
    }
    scroller.addEventListener("pointerdown", onPointerDown);
    scroller.addEventListener("pointermove", onPointerMove, { passive: false });
    scroller.addEventListener("pointerup", endDrag);
    scroller.addEventListener("pointercancel", endDrag);
    return () => {
      scroller.removeEventListener("pointerdown", onPointerDown);
      scroller.removeEventListener("pointermove", onPointerMove);
      scroller.removeEventListener("pointerup", endDrag);
      scroller.removeEventListener("pointercancel", endDrag);
    };
  }, []);
  const goPrevWeek = () => {
    setTableSlideDirection("right");
    setAnchorDate((prev) => addDays(prev, -7));
  };
  const goNextWeek = () => {
    setTableSlideDirection("left");
    setAnchorDate((prev) => addDays(prev, 7));
  };
  function handleDateSelect(date) {
    setAnchorDate(date);
    setMonthCursor(new Date(date.getFullYear(), date.getMonth(), 1));
    window.requestAnimationFrame(() => {
      var _a;
      (_a = tableSectionRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  }
  function goToday() {
    if (isViewingToday) return;
    setTableSlideDirection("left");
    setAnchorDate(today);
    setMonthCursor(new Date(today.getFullYear(), today.getMonth(), 1));
    setMonthPickerOpen(false);
    window.requestAnimationFrame(() => {
      var _a;
      (_a = tableSectionRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  }
  function toggleSlotSelection(courtId, time) {
    if (isSlotBooked(seedBookings, courtId, dateKey, time)) return;
    const key = slotKey(courtId, dateKey, time);
    const exists = selectedSlots.some((slot) => slotKey(slot.courtId, slot.date, slot.time) === key);
    if (exists) {
      setSelectedSlots((prev) => prev.filter((slot) => slotKey(slot.courtId, slot.date, slot.time) !== key));
      setLimitMessage("");
      return;
    }
    const nextSlots = [...selectedSlots, { courtId, date: dateKey, time }];
    const nextGroups = groupSelections(nextSlots);
    const nextTotalMinutes = getTotalSelectedMinutes(nextSlots);
    const nextTotalSlots = getTotalSelectedSlots(nextSlots);
    if (nextGroups.length > MAX_BOOKING_ITEMS || nextTotalSlots > MAX_TOTAL_SLOTS || nextTotalMinutes > MAX_TOTAL_MINUTES) {
      setLimitMessage(bookingLimitMessage);
      return;
    }
    setSelectedSlots(nextSlots);
    setLimitMessage("");
  }
  function handleRemoveGroup(group) {
    setSelectedSlots((prev) => removeGroupedItemSlots(prev, group));
    setLimitMessage("");
  }
  function handleSlotClick(courtId, slot) {
    if (dragStateRef.current.moved) {
      dragStateRef.current.moved = false;
      return;
    }
    toggleSlotSelection(courtId, slot);
  }
  function clearCourtSelections(courtId) {
    setSelectedSlots((prev) => prev.filter((slot) => slot.courtId !== courtId));
    setLimitMessage("");
  }
  function handleCouponApply() {
    if (coupon === "RAINBOW10") setAppliedCoupon(coupon);
    else setAppliedCoupon("");
  }
  function setAddonQty(addon, qty) {
    setSelectedAddons((prev) => {
      const next = { ...prev };
      if (qty <= 0) delete next[addon.id];
      else next[addon.id] = { ...addon, qty };
      return next;
    });
  }
  function handlePrimaryAction() {
    if (step === 1) {
      if (!canNext) return;
      setStep(2);
      return;
    }
    if (step === 2) {
      setStep(3);
      return;
    }
    setMobileCartOpen(true);
  }
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "min-h-screen overflow-x-hidden bg-[#f5f5f3] text-zinc-900" }, /* @__PURE__ */ import_react.default.createElement("style", null, `
        @keyframes slideLeft { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideRight { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
        @keyframes toastBar { from { width: 100%; } to { width: 0%; } }
      `), /* @__PURE__ */ import_react.default.createElement(HeaderBar, null), /* @__PURE__ */ import_react.default.createElement(LimitToast, { message: limitMessage, onClose: () => setLimitMessage("") }), /* @__PURE__ */ import_react.default.createElement("main", { className: "mx-auto max-w-[1500px] px-4 pb-28 pt-4 md:px-6 md:pb-12 md:pt-6" }, /* @__PURE__ */ import_react.default.createElement(HeroBanner, { step }), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 space-y-4 md:mt-6" }, /* @__PURE__ */ import_react.default.createElement(
    StepBar,
    {
      step,
      canGoToStep2: canNext,
      hasSelectedBooking: groupedCartItems.length > 0,
      addonCount,
      onStepChange: (targetStep) => setStep(targetStep)
    }
  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid max-w-full gap-4 lg:grid-cols-[minmax(0,1fr)_390px] xl:grid-cols-[minmax(0,1fr)_420px]" }, /* @__PURE__ */ import_react.default.createElement("section", { className: "min-w-0 space-y-5" }, step === 1 ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[28px] bg-white p-4 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:p-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-[#fff4f4] px-3 py-1.5 text-sm font-semibold text-[#ea1018]" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.CalendarDays, { size: 15 }), " Step 1 · Choose Your Court"), /* @__PURE__ */ import_react.default.createElement("h2", { className: "mt-3 text-[30px] font-extrabold leading-tight text-zinc-900" }, "Choose Your Court"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-2 text-sm leading-6 text-zinc-500" }, "Availability and pricing only.")), /* @__PURE__ */ import_react.default.createElement("div", { className: "relative flex w-full items-center gap-2 xl:w-auto" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: goPrevWeek, className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#fafafa] ring-1 ring-black/8 md:h-12 md:w-12" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronLeft, { size: 18 })), /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setMonthPickerOpen((prev) => !prev), className: "min-w-0 flex-1 rounded-2xl bg-[#fafafa] px-4 py-3 text-sm font-bold text-zinc-900 ring-1 ring-black/8 xl:min-w-[200px] xl:flex-none" }, getMonthLabel(anchorDate)), /* @__PURE__ */ import_react.default.createElement("button", { onClick: goNextWeek, className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#fafafa] ring-1 ring-black/8 md:h-12 md:w-12" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronRight, { size: 18 })), /* @__PURE__ */ import_react.default.createElement("button", { onClick: goToday, disabled: isViewingToday, className: `rounded-2xl px-4 py-3 text-sm font-bold shadow-sm ${isViewingToday ? "bg-zinc-200 text-zinc-500 cursor-not-allowed" : "bg-[#ea1018] text-white"}` }, "Go to Today"), monthPickerOpen ? /* @__PURE__ */ import_react.default.createElement(MonthPicker, { visibleMonth: monthCursor, selectedDate: anchorDate, onSelectDate: handleDateSelect, onClose: () => setMonthPickerOpen(false), onPrevMonth: () => setMonthCursor((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), onNextMonth: () => setMonthCursor((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)) }) : null)), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 md:mt-5" }, /* @__PURE__ */ import_react.default.createElement(DayTabs, { anchorDate, onChange: handleDateSelect, onPrevWeek: goPrevWeek, onNextWeek: goNextWeek })), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 grid gap-3 md:mt-5 xl:grid-cols-[1fr_auto] xl:items-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-3 rounded-[18px] border border-black/8 bg-[#fafafa] px-4 py-3" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Search, { size: 16, className: "text-zinc-400" }), /* @__PURE__ */ import_react.default.createElement("input", { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search court", className: "w-full bg-transparent text-sm outline-none placeholder:text-zinc-400" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-wrap gap-2" }, [{ label: "All", value: "ALL" }, { label: "Badminton", value: "Badminton" }, { label: "Pickleball", value: "Pickleball" }].map((item) => /* @__PURE__ */ import_react.default.createElement("button", { key: item.value, onClick: () => setFilter(item.value), className: `rounded-full px-4 py-2 text-sm font-semibold transition ${filter === item.value ? "bg-[#ea1018] text-white" : "bg-[#fafafa] text-zinc-700 ring-1 ring-black/8"}` }, item.label)))), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-4 md:mt-5" }, /* @__PURE__ */ import_react.default.createElement(PriceLegend, null))), /* @__PURE__ */ import_react.default.createElement("div", { ref: tableSectionRef, className: "w-full max-w-full overflow-hidden rounded-[28px] bg-white shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6" }, /* @__PURE__ */ import_react.default.createElement("div", { ref: scrollTableRef, className: "max-w-full overflow-x-auto overflow-y-auto max-h-[62vh] cursor-grab select-none touch-pan-y md:max-h-none active:cursor-grabbing", style: { WebkitOverflowScrolling: "touch" } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `w-full ${getSlideClass(tableSlideDirection)}`, key: dateKey }, /* @__PURE__ */ import_react.default.createElement("div", { className: "grid border-b border-black/6 bg-[#fff7f7]", style: tableGridStyle }, /* @__PURE__ */ import_react.default.createElement("div", { className: "sticky left-0 z-20 row-span-2 flex items-center gap-2 border-r border-black/6 bg-[#fff7f7] px-2 py-4 font-bold text-zinc-900 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Clock3, { size: 16, className: "text-[#ea1018]" }), "Courts"), hourGroups.map((slot) => {
    const hourSlots = [slot, minutesToTime(timeToMinutes(slot) + SLOT_MINUTES)];
    const hourSoldOut = hourSlots.every((hourSlot) => getTimeMeta(dateKey, hourSlot).soldOut);
    return /* @__PURE__ */ import_react.default.createElement("div", { key: slot, className: `col-span-2 border-r border-black/10 px-1 py-3 text-center text-[12px] font-bold md:text-sm ${hourSoldOut ? "bg-zinc-100 text-zinc-400" : "text-zinc-700"}` }, formatHourHeader(slot));
  }), timeSlots.map((slot) => {
    const headerTag = getColumnTag(dateKey, slot);
    const timeMeta = getTimeMeta(dateKey, slot);
    return /* @__PURE__ */ import_react.default.createElement("div", { key: `${slot}-tag`, className: `border-t px-1 py-1.5 text-center ${isHourBoundary(slot) ? "border-l border-l-black/20" : "border-l border-l-black/8"} border-t-black/6 ${timeMeta.soldOut ? "bg-zinc-100 text-zinc-400" : "bg-white/55"}` }, headerTag && !timeMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("span", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ${headerTag.className}` }, headerTag.text) : null, timeMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold text-zinc-400" }, "Sold out") : null, !timeMeta.soldOut && timeMeta.fewLeft ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] font-bold text-[#ea1018]" }, "Few left") : null);
  })), visibleCourts.map((court) => {
    const courtMeta = getCourtMeta(court.id, dateKey);
    return /* @__PURE__ */ import_react.default.createElement("div", { key: `${court.id}-${dateKey}`, className: "grid border-b border-black/6", style: tableGridStyle }, /* @__PURE__ */ import_react.default.createElement("div", { className: `sticky left-0 z-10 border-r border-black/6 px-2 py-4 shadow-[10px_0_16px_-14px_rgba(0,0,0,0.2)] md:px-4 ${courtMeta.soldOut ? "bg-zinc-50" : "bg-white"}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: `flex items-center gap-2 text-[13px] font-extrabold leading-5 md:text-[15px] ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-900"}` }, /* @__PURE__ */ import_react.default.createElement("span", null, getCourtTypeIcon(court.type)), /* @__PURE__ */ import_react.default.createElement("span", null, court.shortName)), /* @__PURE__ */ import_react.default.createElement("div", { className: `mt-1 text-[11px] md:text-xs ${courtMeta.soldOut ? "text-zinc-400" : "text-zinc-500"}` }, court.type), courtMeta.soldOut ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[11px] font-semibold text-zinc-500" }, "Sold out") : null, !courtMeta.soldOut && courtMeta.fewLeft ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[12px] font-bold text-[#ea1018]" }, "Few left") : null), selectedSlots.some((slot) => slot.courtId === court.id) ? /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => clearCourtSelections(court.id), className: "rounded-full bg-zinc-100 p-1.5 text-zinc-500" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.X, { size: 14 })) : null)), timeSlots.map((slot) => {
      var _a, _b, _c;
      const booked = isSlotBooked(seedBookings, court.id, dateKey, slot);
      const selected = selectedSlots.some((item) => item.courtId === court.id && item.date === dateKey && item.time === slot);
      const priceInfo = getSlotPrice({ courtType: court.type, dateKey, time: slot });
      const priceClass = getPriceColor({ ...priceInfo, courtType: court.type });
      return /* @__PURE__ */ import_react.default.createElement("button", { "data-slot-button": "true", key: `${court.id}-${slot}`, onClick: () => handleSlotClick(court.id, slot), disabled: booked, className: `px-1 py-3 text-center transition md:px-2 ${isHourBoundary(slot) ? "border-l border-l-black/20" : "border-l border-l-black/8"} ${booked ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "bg-[#ea1018] text-white" : "bg-white hover:bg-[#fff6f6]"}` }, booked ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col items-center justify-center gap-1 text-zinc-400" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-lg font-bold leading-none" }, "×")) : selected ? /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "text-[11px] font-bold uppercase tracking-wide text-white/90" }, "Selected"), /* @__PURE__ */ import_react.default.createElement("div", { className: "text-sm font-extrabold text-white" }, "$", priceInfo.price)) : /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[13px] font-extrabold ${priceClass} md:text-sm` }, "$", priceInfo.price), shouldShowCellTag(dateKey, slot) && getSlotTag(priceInfo) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ${(_a = getSlotTag(priceInfo)) == null ? void 0 : _a.className}` }, ((_b = getSlotTag(priceInfo)) == null ? void 0 : _b.text) === "Discounted" ? "Promo" : (_c = getSlotTag(priceInfo)) == null ? void 0 : _c.text) : null));
    }));
  }))))) : step === 2 ? /* @__PURE__ */ import_react.default.createElement("div", { className: "space-y-5" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "rounded-[28px] bg-white p-4 shadow-[0_10px_40px_rgba(20,20,20,0.06)] ring-1 ring-black/6 md:p-6" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "inline-flex items-center gap-2 rounded-full bg-[#fff4f4] px-3 py-1.5 text-sm font-semibold text-[#ea1018]" }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Sparkles, { size: 15 }), " Step 2 · Add-ons"), /* @__PURE__ */ import_react.default.createElement("h2", { className: "mt-3 text-[30px] font-extrabold leading-tight text-zinc-900" }, "Add extras to your booking"), /* @__PURE__ */ import_react.default.createElement("p", { className: "mt-2 text-sm leading-6 text-zinc-500" }, "Keep it simple: add what you need, skip what you do not.")), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setStep(1), className: "rounded-[16px] border border-black/10 px-4 py-3 text-sm font-semibold text-zinc-800" }, "Back to Booking"), /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setStep(3), className: "rounded-[16px] bg-[#ea1018] px-5 py-3 text-sm font-bold text-white" }, "Review & Pay")))), /* @__PURE__ */ import_react.default.createElement("div", { className: "grid gap-4 md:grid-cols-2" }, addonsCatalog.map((addon) => {
    var _a;
    return /* @__PURE__ */ import_react.default.createElement(AddonCard, { key: addon.id, addon, qty: ((_a = selectedAddons[addon.id]) == null ? void 0 : _a.qty) || 0, onChange: (qty) => setAddonQty(addon, qty) });
  }))) : /* @__PURE__ */ import_react.default.createElement(SummaryStep, { groups: groupedCartItems, addons: selectedAddons, note, onBackToAddons: () => setStep(2) })), /* @__PURE__ */ import_react.default.createElement(
    BookingCart,
    {
      step,
      groups: groupedCartItems,
      addons: selectedAddons,
      note,
      onNoteChange: setNote,
      coupon,
      onCouponChange: setCoupon,
      onCouponApply: handleCouponApply,
      appliedCoupon,
      onRemoveGroup: handleRemoveGroup,
      mobileCartOpen,
      setMobileCartOpen,
      onNext: handlePrimaryAction,
      onBack: () => setStep((prev) => Math.max(1, prev - 1)),
      canNext
    }
  )))));
}
