function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useEffect, useMemo, useRef, useState } from "react";
import { ChevronLeft, ChevronRight, CalendarDays, ShoppingCart, MapPin, Info, Clock3, Search, X, Check, Plus, Minus, Sparkles } from "lucide-react";

// FRONTEND DATA MAPPING NOTE
// courts is DEMO UI DATA ONLY.
// Real page should NOT assume database has courtName / shortName fields here.
// Replace this with resource master mapping.
// Suggested mapping flow:
// 1) booking resource binding comes from sales.bookings[].resources[].relation_id
// 2) relation_id -> resource master
// 3) resource master returns display fields such as:
//    - resource_name (used for row display name)
//    - resource_type_name (used for type label)
//    - optional short display code / icon mapping if your UI still needs them
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"
}];

// FRONTEND DATA MAPPING NOTE
// addonsCatalog is DEMO UI DATA ONLY.
// In real implementation, add-ons should come from bundle / package related products.
// Suggested source:
// - sales.bookings[].relation_products[] for already-selected add-ons in an existing order
// - a product catalog / bundle config API for selectable add-on options before checkout
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";

// FRONTEND DATA MAPPING NOTE
// seedBookings is DEMO OCCUPANCY DATA ONLY.
// Real slot sold-out / few-left / availability should NOT be derived from sales detail.
// Replace with SKU availability results for the selected date range.
// Business meaning confirmed by product side:
// - Badminton SKU and Pickleball SKU are two different SKUs shown on the same page
// - slot availability is based on SKU + time slot + resource availability/capacity
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 "".concat(date.getFullYear(), "-").concat(pad(date.getMonth() + 1), "-").concat(pad(date.getDate()));
}
function parseDateKey(key) {
  var _key$split$map = key.split("-").map(Number),
    _key$split$map2 = _slicedToArray(_key$split$map, 3),
    y = _key$split$map2[0],
    m = _key$split$map2[1],
    d = _key$split$map2[2];
  return new Date(y, m - 1, d);
}
function addDays(date, days) {
  var next = new Date(date);
  next.setDate(next.getDate() + days);
  return next;
}
function startOfWeek(date) {
  var copy = new Date(date);
  var day = copy.getDay();
  var diff = day === 0 ? -6 : 1 - day;
  copy.setDate(copy.getDate() + diff);
  copy.setHours(0, 0, 0, 0);
  return copy;
}
function getWeekDays(anchorDate) {
  var start = startOfWeek(anchorDate);
  return Array.from({
    length: 7
  }, function (_, i) {
    return addDays(start, i);
  });
}
function getMonthLabel(date) {
  return date.toLocaleDateString("en-AU", {
    month: "long",
    year: "numeric"
  });
}
function timeToMinutes(time) {
  var _time$split$map = time.split(":").map(Number),
    _time$split$map2 = _slicedToArray(_time$split$map, 2),
    h = _time$split$map2[0],
    m = _time$split$map2[1];
  return h * 60 + m;
}
function minutesToTime(minutes) {
  return "".concat(pad(Math.floor(minutes / 60)), ":").concat(pad(minutes % 60));
}
function buildTimeSlots(dateKey) {
  var slots = [];
  var openHour = dateKey && isWeekend(dateKey) ? WEEKEND_OPEN_HOUR : WEEKDAY_OPEN_HOUR;
  for (var 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) {
  var a1 = timeToMinutes(aStart);
  var a2 = timeToMinutes(aEnd);
  var b1 = timeToMinutes(bStart);
  var b2 = timeToMinutes(bEnd);
  return !(a2 <= b1 || a1 >= b2);
}
function isPeakTime(time) {
  var mins = timeToMinutes(time);
  return mins >= 17 * 60 && mins < 21 * 60;
}
function isWeekend(dateKey) {
  var day = parseDateKey(dateKey).getDay();
  return day === 0 || day === 6;
}

// FRONTEND DATA MAPPING NOTE
// getSlotPrice is DEMO PRICING LOGIC ONLY.
// Real price / off-peak / promo / starting price should come from SKU pricing / quote / availability data.
// Do NOT use sales detail to infer future calendar pricing.
// Business meaning confirmed by product side:
// - Badminton and Pickleball are different SKUs
// - the page displays both SKUs together
function getSlotPrice(_ref) {
  var courtType = _ref.courtType,
    dateKey = _ref.dateKey,
    time = _ref.time;
  var weekend = isWeekend(dateKey);
  var mins = timeToMinutes(time);

  // Demo override: make Tue 14 Apr fully off-peak so the date card can clearly show the Off-Peak state.
  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") {
    var _offPeak = 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 (_offPeak) return {
      price: 11,
      originalPrice: null,
      label: "Off-Peak",
      highlight: false
    };
    return {
      price: 16,
      originalPrice: null,
      label: "Peak",
      highlight: false
    };
  }
  var 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(_ref2) {
  var highlight = _ref2.highlight,
    courtType = _ref2.courtType;
  if (highlight) return "text-emerald-600";
  if (courtType === "Pickleball") return "text-[#ea1018]";
  return "text-zinc-800";
}
function getCourtById(id) {
  return courts.find(function (court) {
    return court.id === id;
  });
}
function isSlotBooked(bookings, courtId, dateKey, slotTime) {
  var slotEnd = getEndTime(slotTime);
  return bookings.some(function (item) {
    return item.courtId === courtId && item.date === dateKey && overlaps(slotTime, slotEnd, item.start, item.end);
  });
}
function slotKey(courtId, date, time) {
  return "".concat(courtId, "|").concat(date, "|").concat(time);
}
function formatRange(start, end) {
  return "".concat(start, " - ").concat(end);
}
function getDateDisplay(dateKey) {
  return parseDateKey(dateKey).toLocaleDateString("en-AU", {
    weekday: "short",
    day: "numeric",
    month: "short",
    year: "numeric"
  });
}
function getMonthDays(date) {
  var first = new Date(date.getFullYear(), date.getMonth(), 1);
  var last = new Date(date.getFullYear(), date.getMonth() + 1, 0);
  var firstDay = first.getDay() === 0 ? 6 : first.getDay() - 1;
  var totalDays = last.getDate();
  var cells = [];
  for (var i = 0; i < firstDay; i += 1) cells.push(null);
  for (var 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: "".concat(FIRST_COLUMN_WIDTH, "px repeat(").concat(slotCount, ", minmax(").concat(SLOT_MIN_WIDTH, "px, 1fr))"),
    minWidth: "".concat(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 ".concat(hotline, ".");
}
function removeGroupedItemSlots(selectedSlots, group) {
  return selectedSlots.filter(function (slot) {
    if (slot.courtId !== group.courtId || slot.date !== group.date) return true;
    var mins = timeToMinutes(slot.time);
    return mins < timeToMinutes(group.start) || mins >= timeToMinutes(group.end);
  });
}

// FRONTEND DATA MAPPING NOTE
// groupSelections is a UI helper that merges adjacent selected slots into booking cards.
// In real data terms:
// - one booking corresponds to sales.bookings[]
// - booking main SKU corresponds to sales.bookings[].product
// - row/resource binding corresponds to sales.bookings[].resources[]
function groupSelections(selectedSlots) {
  var ordered = _toConsumableArray(selectedSlots).sort(function (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);
  });
  var groups = [];
  var _iterator = _createForOfIteratorHelper(ordered),
    _step;
  try {
    for (_iterator.s(); !(_step = _iterator.n()).done;) {
      var slot = _step.value;
      var court = getCourtById(slot.courtId);
      var priceInfo = getSlotPrice({
        courtType: court.type,
        dateKey: slot.date,
        time: slot.time
      });
      var 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: "".concat(slot.courtId, "-").concat(slot.date, "-").concat(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
        });
      }
    }
  } catch (err) {
    _iterator.e(err);
  } finally {
    _iterator.f();
  }
  return groups;
}
function getAddonsTotal(addons) {
  return Object.values(addons).reduce(function (sum, item) {
    return 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) {
  var _slot$split$map = slot.split(":").map(Number),
    _slot$split$map2 = _slicedToArray(_slot$split$map, 1),
    hour = _slot$split$map2[0];
  var suffix = hour >= 12 ? "pm" : "am";
  var hour12 = hour % 12 === 0 ? 12 : hour % 12;
  return "".concat(hour12).concat(suffix);
}
function buildHourGroups(timeSlots) {
  return timeSlots.filter(function (slot) {
    return 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) {
  var states = courts.map(function (court) {
    var priceInfo = getSlotPrice({
      courtType: court.type,
      dateKey: dateKey,
      time: slot
    });
    if (priceInfo.highlight || priceInfo.label === "Promo") return "Promo";
    if (priceInfo.label === "Off-Peak") return "Off-Peak";
    return "Peak";
  });
  var 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 getTimeFewLeft(dateKey, slot) {
  var availableCount = courts.filter(function (court) {
    return !isSlotBooked(seedBookings, court.id, dateKey, slot);
  }).length;
  var ratio = courts.length > 0 ? availableCount / courts.length : 0;
  return availableCount > 0 && ratio < 0.2;
}
function getTimeMeta(dateKey, slot) {
  var availableCount = courts.filter(function (court) {
    return !isSlotBooked(seedBookings, court.id, dateKey, slot);
  }).length;
  var ratio = courts.length > 0 ? availableCount / courts.length : 0;
  return {
    soldOut: availableCount === 0,
    fewLeft: availableCount > 0 && ratio < 0.2
  };
}
function shouldShowCellTag(dateKey, slot) {
  var states = courts.map(function (court) {
    var priceInfo = getSlotPrice({
      courtType: court.type,
      dateKey: 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) {
  var dateKey = formatDateKey(date);
  var slots = buildTimeSlots(dateKey);
  var minPrice = Infinity;
  var availableCount = 0;
  var hasCourtFewLeft = false;

  // Date tag should be judged by the full pricing schedule of that day,
  // not by whatever inventory happens to be left.
  var allPromo = true;
  var allOffPeak = true;
  var _iterator2 = _createForOfIteratorHelper(courts),
    _step2;
  try {
    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
      var court = _step2.value;
      var courtAvailable = 0;
      var _iterator3 = _createForOfIteratorHelper(slots),
        _step3;
      try {
        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
          var slot = _step3.value;
          var fullDayPriceInfo = getSlotPrice({
            courtType: court.type,
            dateKey: dateKey,
            time: slot
          });
          if (!(fullDayPriceInfo.highlight || fullDayPriceInfo.label === "Promo")) allPromo = false;
          if (fullDayPriceInfo.label !== "Off-Peak") allOffPeak = false;
          var booked = isSlotBooked(seedBookings, court.id, dateKey, slot);
          if (!booked) {
            availableCount += 1;
            courtAvailable += 1;
            minPrice = Math.min(minPrice, fullDayPriceInfo.price);
          }
        }
      } catch (err) {
        _iterator3.e(err);
      } finally {
        _iterator3.f();
      }
      if (courtAvailable > 0 && courtAvailable / slots.length < 0.2) hasCourtFewLeft = true;
    }
  } catch (err) {
    _iterator2.e(err);
  } finally {
    _iterator2.f();
  }
  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) ? "$".concat(minPrice, "+") : null,
    fewLeft: hasCourtFewLeft,
    soldOut: false
  };
}
function getCourtMeta(courtId, dateKey) {
  var slots = buildTimeSlots(dateKey);
  var availableCount = slots.filter(function (slot) {
    return !isSlotBooked(seedBookings, courtId, dateKey, slot);
  }).length;
  var 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(_ref3) {
  var availableSlotIndexes = _ref3.availableSlotIndexes,
    totalHours = _ref3.totalHours;
  if (!availableSlotIndexes.length) return 1;
  var earliestHour = Math.floor(availableSlotIndexes[0] / SLOTS_PER_HOUR) + 1;
  var latestHour = Math.floor(availableSlotIndexes[availableSlotIndexes.length - 1] / SLOTS_PER_HOUR) + 1;
  var 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(function (slot, index) {
    var hasAvailableCourt = courts.some(function (court) {
      return !isSlotBooked(seedBookings, court.id, dateKey, slot);
    });
    return hasAvailableCourt ? index : null;
  }).filter(function (index) {
    return index !== null;
  });
}
function HeaderBar() {
  return /*#__PURE__*/React.createElement("header", {
    className: "sticky top-0 z-40 border-b border-black/5 bg-white/95 backdrop-blur"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex min-w-0 items-center gap-4 md:gap-10"
  }, /*#__PURE__*/React.createElement("div", {
    className: "shrink-0 text-[22px] font-extrabold leading-none text-[#e91a4b] md:text-[28px]"
  }, /*#__PURE__*/React.createElement("div", null, "Rainbow"), /*#__PURE__*/React.createElement("div", {
    className: "-mt-1"
  }, "Town")), /*#__PURE__*/React.createElement("nav", {
    className: "hidden items-center gap-8 text-[15px] font-semibold text-zinc-900 lg:flex"
  }, /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Home"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Party"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Tickets"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Gift Card"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Play Areas"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Cafe Menu"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "hover:text-[#ea1018]"
  }, "Contact Us"), /*#__PURE__*/React.createElement("a", {
    href: "#",
    className: "rounded-full bg-[#ea1018] px-4 py-2 text-white shadow-sm transition hover:opacity-95"
  }, "Badminton Booking"))), /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-3"
  }, /*#__PURE__*/React.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__*/React.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(_ref4) {
  var step = _ref4.step;
  return /*#__PURE__*/React.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__*/React.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__*/React.createElement("div", {
    className: "relative z-10 max-w-4xl"
  }, /*#__PURE__*/React.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__*/React.createElement(MapPin, {
    size: 15,
    className: "text-[#ea1018]"
  }), "Rainbow Town \xB7 Badminton Booking"), /*#__PURE__*/React.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__*/React.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(_ref5) {
  var step = _ref5.step,
    canGoToStep2 = _ref5.canGoToStep2,
    hasSelectedBooking = _ref5.hasSelectedBooking,
    addonCount = _ref5.addonCount,
    onStepChange = _ref5.onStepChange;
  var 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__*/React.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__*/React.createElement(Check, {
        size: 12
      }));
    }
    if (targetStep === 2 && addonCount > 0) {
      return /*#__PURE__*/React.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__*/React.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__*/React.createElement("div", {
    className: "flex items-center gap-3"
  }, items.map(function (item, index) {
    var active = step === item.n;
    var done = step > item.n;
    var clickable = isClickable(item.n);
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: item.n
    }, /*#__PURE__*/React.createElement("button", {
      type: "button",
      onClick: function onClick() {
        if (clickable) onStepChange(item.n);
      },
      className: "flex items-center gap-3 rounded-full px-3 py-2 transition ".concat(active ? "bg-[#fff4f4]" : done ? "bg-zinc-50" : "bg-zinc-50/80", " ").concat(clickable ? "cursor-pointer hover:bg-zinc-100" : "cursor-default")
    }, /*#__PURE__*/React.createElement("div", {
      className: "flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ".concat(done ? "bg-[#111] text-white" : active ? "bg-[#ea1018] text-white" : "bg-white text-zinc-400 ring-1 ring-black/8")
    }, done ? /*#__PURE__*/React.createElement(Check, {
      size: 15
    }) : item.n), /*#__PURE__*/React.createElement("div", {
      className: "flex items-center text-sm font-semibold ".concat(active ? "text-zinc-900" : done ? "text-zinc-700" : "text-zinc-400")
    }, /*#__PURE__*/React.createElement("span", null, item.title), getBadge(item.n))), index < items.length - 1 ? /*#__PURE__*/React.createElement("div", {
      className: "relative h-px flex-1 overflow-hidden rounded-full bg-zinc-200"
    }, /*#__PURE__*/React.createElement("div", {
      className: "absolute left-0 top-0 h-full ".concat(done ? "w-full bg-[#111]" : active ? "w-1/2 bg-[#ea1018]" : "w-0")
    })) : null);
  })));
}
function PriceLegend() {
  return /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-2 gap-2 md:gap-3"
  }, /*#__PURE__*/React.createElement("div", {
    className: "min-w-0 rounded-[16px] bg-[#fff4f4] px-3 py-3 ring-1 ring-[#f4caca] md:px-4"
  }, /*#__PURE__*/React.createElement("div", {
    className: "truncate text-[11px] font-semibold text-zinc-900 md:text-sm"
  }, "Badminton"), /*#__PURE__*/React.createElement("div", {
    className: "mt-1 text-[10px] text-zinc-600 md:text-sm"
  }, "Weekday: $11 off-peak \xB7 $16 peak"), /*#__PURE__*/React.createElement("div", {
    className: "mt-1 text-[10px] text-zinc-600 md:text-sm"
  }, "Weekend off-peak: 7-9am, 10-11pm")), /*#__PURE__*/React.createElement("div", {
    className: "min-w-0 rounded-[16px] bg-[#fff7f7] px-3 py-3 ring-1 ring-[#f4d7d7] md:px-4"
  }, /*#__PURE__*/React.createElement("div", {
    className: "truncate text-[11px] font-semibold text-zinc-900 md:text-sm"
  }, "Pickleball"), /*#__PURE__*/React.createElement("div", {
    className: "mt-1 text-[10px] text-zinc-600 md:text-sm"
  }, /*#__PURE__*/React.createElement("span", {
    className: "font-bold text-[#ea1018]"
  }, "$15"), " off-peak \xB7 ", /*#__PURE__*/React.createElement("span", {
    className: "font-bold text-[#ea1018]"
  }, "$20"), " peak"), /*#__PURE__*/React.createElement("div", {
    className: "mt-1 text-[10px] text-zinc-600 md:text-sm"
  }, "Weekend off-peak: 7-9am, 9-11pm")));
}
function DayTabs(_ref6) {
  var anchorDate = _ref6.anchorDate,
    onChange = _ref6.onChange,
    onPrevWeek = _ref6.onPrevWeek,
    onNextWeek = _ref6.onNextWeek;
  var days = getWeekDays(anchorDate);
  var currentKey = formatDateKey(anchorDate);
  var showFewLeftRow = days.some(function (date) {
    var meta = getDateMeta(date);
    return !meta.soldOut && meta.fewLeft;
  });
  var shouldHideTopTag = typeof window !== "undefined" && window.innerWidth < 920;
  var swipeRef = 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;
    var dx = e.clientX - swipeRef.current.startX;
    var 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;
    var dx = e.clientX - swipeRef.current.startX;
    var 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 || onNextWeek === void 0 || onNextWeek();else onPrevWeek === null || onPrevWeek === void 0 || onPrevWeek();
  }
  function handleDateClick(date) {
    if (swipeRef.current.moved) {
      swipeRef.current.moved = false;
      return;
    }
    onChange(date);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-7 gap-1 touch-pan-y select-none",
    onPointerDown: handlePointerDown,
    onPointerMove: handlePointerMove,
    onPointerUp: handlePointerUp,
    onPointerCancel: function onPointerCancel() {
      swipeRef.current.active = false;
      swipeRef.current.moved = false;
    }
  }, days.map(function (date) {
    var _meta$startingPrice;
    var key = formatDateKey(date);
    var active = key === currentKey;
    var meta = getDateMeta(date);
    var 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";
    var 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__*/React.createElement("button", {
      key: key,
      type: "button",
      onClick: function onClick() {
        return 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 ".concat(showFewLeftRow ? "min-h-[66px] pb-5 md:min-h-[72px] md:pb-6" : "min-h-[56px] md:min-h-[60px]", " ").concat(cardClass)
    }, meta.topTag && !shouldHideTopTag ? /*#__PURE__*/React.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] ".concat(tagClass)
    }, meta.topTag) : null, /*#__PURE__*/React.createElement("div", {
      className: "pointer-events-none truncate text-[8px] leading-none md:text-xs ".concat(meta.soldOut ? "text-zinc-400" : active ? "text-white/85" : "text-zinc-500")
    }, date.toLocaleDateString("en-AU", {
      weekday: "short"
    })), /*#__PURE__*/React.createElement("div", {
      className: "pointer-events-none mt-1 flex w-full items-end justify-between gap-2"
    }, /*#__PURE__*/React.createElement("div", {
      className: "text-[13px] font-bold leading-none md:text-base ".concat(meta.soldOut ? "line-through" : "")
    }, date.getDate()), /*#__PURE__*/React.createElement("div", {
      className: "text-[10px] font-semibold leading-none md:text-xs ".concat(active ? "text-white/70" : "text-zinc-400")
    }, meta.soldOut ? "Sold out" : (_meta$startingPrice = meta.startingPrice) !== null && _meta$startingPrice !== void 0 ? _meta$startingPrice : "")), showFewLeftRow ? /*#__PURE__*/React.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] ".concat(meta.fewLeft && !meta.soldOut ? active ? "text-white" : "text-[#ea1018]" : "opacity-0")
    }, "Few left") : null);
  }));
}
function MonthPicker(_ref7) {
  var visibleMonth = _ref7.visibleMonth,
    selectedDate = _ref7.selectedDate,
    onSelectDate = _ref7.onSelectDate,
    onClose = _ref7.onClose,
    onPrevMonth = _ref7.onPrevMonth,
    onNextMonth = _ref7.onNextMonth;
  var days = getMonthDays(visibleMonth);
  var selectedKey = formatDateKey(selectedDate);
  var todayKey = formatDateKey(new Date());
  return /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "mb-4 flex items-center justify-between"
  }, /*#__PURE__*/React.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__*/React.createElement(ChevronLeft, {
    size: 16
  })), /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-bold text-zinc-900"
  }, getMonthLabel(visibleMonth)), /*#__PURE__*/React.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__*/React.createElement(ChevronRight, {
    size: 16
  }))), /*#__PURE__*/React.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(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      key: item
    }, item);
  })), /*#__PURE__*/React.createElement("div", {
    className: "grid grid-cols-7 gap-2"
  }, days.map(function (day, index) {
    if (!day) return /*#__PURE__*/React.createElement("div", {
      key: "empty-".concat(index),
      className: "h-11"
    });
    var key = formatDateKey(day);
    var meta = getDateMeta(day);
    var selected = key === selectedKey;
    var isToday = key === todayKey;
    return /*#__PURE__*/React.createElement("button", {
      key: key,
      disabled: false,
      onClick: function onClick() {
        onSelectDate(day);
        onClose();
      },
      className: "h-11 rounded-2xl text-sm font-semibold transition ".concat(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__*/React.createElement("span", {
      className: meta.soldOut ? "line-through text-zinc-400" : ""
    }, day.getDate()));
  })));
}
function LimitToast(_ref8) {
  var message = _ref8.message,
    onClose = _ref8.onClose;
  if (!message) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: "fixed left-1/2 top-4 z-[90] w-[min(92vw,520px)] -translate-x-1/2 animate-[toastIn_.22s_ease]"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex items-start gap-3"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "min-w-0 flex-1 pr-2 text-sm font-semibold leading-6"
  }, message), /*#__PURE__*/React.createElement("button", {
    onClick: onClose,
    className: "rounded-full bg-white/10 p-1.5 text-white/80 hover:bg-white/15"
  }, /*#__PURE__*/React.createElement(X, {
    size: 14
  }))), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 h-[3px] rounded-full bg-white/10"
  }, /*#__PURE__*/React.createElement("div", {
    className: "h-full rounded-full bg-[#ea1018] animate-[toastBar_3.8s_linear_forwards]"
  }))));
}
function AddonCard(_ref9) {
  var addon = _ref9.addon,
    qty = _ref9.qty,
    onChange = _ref9.onChange;
  return /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex items-start justify-between gap-4"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "inline-flex items-center gap-2 rounded-full bg-[#fff4f4] px-3 py-1 text-[11px] font-semibold text-[#ea1018]"
  }, /*#__PURE__*/React.createElement(Sparkles, {
    size: 13
  }), " ", addon.category), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 text-xl font-extrabold text-zinc-900"
  }, addon.name), /*#__PURE__*/React.createElement("div", {
    className: "mt-1 text-sm text-zinc-500"
  }, addon.desc), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 text-lg font-bold text-zinc-900"
  }, "$", addon.price, " ", /*#__PURE__*/React.createElement("span", {
    className: "text-sm font-medium text-zinc-500"
  }, addon.unit))), /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-2 rounded-full bg-zinc-50 p-2 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return 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__*/React.createElement(Minus, {
    size: 15
  })), /*#__PURE__*/React.createElement("div", {
    className: "w-8 text-center text-base font-bold text-zinc-900"
  }, qty), /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return onChange(qty + 1);
    },
    className: "flex h-9 w-9 items-center justify-center rounded-full bg-[#ea1018] text-white"
  }, /*#__PURE__*/React.createElement(Plus, {
    size: 15
  })))));
}
function BookingCart(_ref10) {
  var step = _ref10.step,
    groups = _ref10.groups,
    addons = _ref10.addons,
    note = _ref10.note,
    onNoteChange = _ref10.onNoteChange,
    coupon = _ref10.coupon,
    onCouponChange = _ref10.onCouponChange,
    onCouponApply = _ref10.onCouponApply,
    appliedCoupon = _ref10.appliedCoupon,
    onRemoveGroup = _ref10.onRemoveGroup,
    mobileCartOpen = _ref10.mobileCartOpen,
    setMobileCartOpen = _ref10.setMobileCartOpen,
    onNext = _ref10.onNext,
    onBack = _ref10.onBack,
    canNext = _ref10.canNext;
  var bookingSubtotal = groups.reduce(function (sum, item) {
    return sum + item.total;
  }, 0);
  var addonsTotal = getAddonsTotal(addons);
  var compareAt = groups.reduce(function (sum, item) {
    return sum + item.originalTotal;
  }, 0);
  var builtInDiscount = Math.max(compareAt - bookingSubtotal, 0);
  var couponDiscount = appliedCoupon === "RAINBOW10" ? Math.round((bookingSubtotal + addonsTotal) * 0.1) : 0;
  var total = Math.max(bookingSubtotal + addonsTotal - couponDiscount, 0);
  var addonEntries = Object.values(addons).filter(function (item) {
    return item.qty > 0;
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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__*/React.createElement("button", {
    onClick: function onClick() {
      return setMobileCartOpen(true);
    },
    className: "flex w-full items-center justify-between rounded-[18px] bg-[#111111] px-4 py-3 text-white shadow-lg"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-3"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex h-10 w-10 items-center justify-center rounded-2xl bg-[#ea1018] text-white"
  }, /*#__PURE__*/React.createElement(ShoppingCart, {
    size: 18
  })), /*#__PURE__*/React.createElement("div", {
    className: "text-left"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-bold"
  }, step === 1 ? "Booking Cart" : step === 2 ? "Review" : "Pay now"), /*#__PURE__*/React.createElement("div", {
    className: "text-xs text-white/70"
  }, "$", total))), /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold"
  }, step === 1 ? "Next" : step === 2 ? "Review" : "Pay now"))), mobileCartOpen ? /*#__PURE__*/React.createElement("div", {
    className: "fixed inset-0 z-40 bg-black/40 md:hidden",
    onClick: function onClick() {
      return setMobileCartOpen(false);
    }
  }) : null, /*#__PURE__*/React.createElement("aside", {
    className: "".concat(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__*/React.createElement("div", {
    className: "flex items-start justify-between gap-3"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-start gap-3"
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return 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__*/React.createElement(X, {
    size: 16
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "text-[22px] font-extrabold text-zinc-900"
  }, step === 1 ? "Booking Cart" : step === 2 ? "Booking Summary" : "Payment Summary"), /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "mt-4 rounded-[22px] bg-[#fafafa] p-3 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-2"
  }, step > 1 ? /*#__PURE__*/React.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__*/React.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 ".concat(step === 1 && !canNext ? "bg-zinc-300" : "bg-[#ea1018]")
  }, step === 1 ? "Next: Add-ons" : step === 2 ? "Review & Pay" : "Pay now"))), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 space-y-3"
  }, groups.length ? groups.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.id,
      className: "rounded-[22px] bg-white p-4 ring-1 ring-black/6"
    }, /*#__PURE__*/React.createElement("div", {
      className: "flex items-start justify-between gap-3"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "flex items-center gap-2"
    }, /*#__PURE__*/React.createElement("span", {
      className: "rounded-full px-2.5 py-1 text-[11px] font-semibold ".concat(item.courtType === "Pickleball" ? "bg-[#fff0f1] text-[#ea1018]" : "bg-zinc-100 text-zinc-700")
    }, item.courtType), /*#__PURE__*/React.createElement("div", {
      className: "text-sm font-bold text-zinc-900"
    }, item.courtName)), /*#__PURE__*/React.createElement("div", {
      className: "mt-2 text-sm text-zinc-500"
    }, getDateDisplay(item.date)), /*#__PURE__*/React.createElement("div", {
      className: "mt-1 text-sm font-semibold text-zinc-900"
    }, formatRange(item.start, item.end))), /*#__PURE__*/React.createElement("div", {
      className: "text-right"
    }, /*#__PURE__*/React.createElement("button", {
      onClick: function onClick() {
        return onRemoveGroup(item);
      },
      className: "rounded-full bg-zinc-100 p-2 text-zinc-500"
    }, /*#__PURE__*/React.createElement(X, {
      size: 14
    })), /*#__PURE__*/React.createElement("div", {
      className: "mt-3 text-lg font-extrabold ".concat(item.highlight ? "text-emerald-600" : item.courtType === "Pickleball" ? "text-[#ea1018]" : "text-zinc-900")
    }, "$", item.total))));
  }) : /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "mt-4 rounded-[22px] bg-white p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-bold text-zinc-900"
  }, "Add-ons"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 space-y-2"
  }, addonEntries.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.id,
      className: "flex items-center justify-between text-sm"
    }, /*#__PURE__*/React.createElement("span", {
      className: "text-zinc-600"
    }, item.name, " \xD7 ", item.qty), /*#__PURE__*/React.createElement("span", {
      className: "font-semibold text-zinc-900"
    }, "$", item.qty * item.price));
  }))) : null, /*#__PURE__*/React.createElement("div", {
    className: "mt-4 rounded-[22px] bg-white p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-bold text-zinc-900"
  }, "Note"), /*#__PURE__*/React.createElement("textarea", {
    value: note,
    onChange: function onChange(e) {
      return 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__*/React.createElement("div", {
    className: "mt-4 rounded-[22px] bg-white p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-bold text-zinc-900"
  }, "Coupon"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 flex gap-2"
  }, /*#__PURE__*/React.createElement("input", {
    value: coupon,
    onChange: function onChange(e) {
      return 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__*/React.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__*/React.createElement("div", {
    className: "mt-2 text-xs font-semibold text-emerald-600"
  }, "Applied: ", appliedCoupon) : null), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 rounded-[22px] bg-zinc-900 p-5 text-white"
  }, /*#__PURE__*/React.createElement("div", {
    className: "space-y-2 text-sm"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center justify-between"
  }, /*#__PURE__*/React.createElement("span", {
    className: "text-white/70"
  }, "Booking"), /*#__PURE__*/React.createElement("span", null, "$", bookingSubtotal)), step >= 2 ? /*#__PURE__*/React.createElement("div", {
    className: "flex items-center justify-between"
  }, /*#__PURE__*/React.createElement("span", {
    className: "text-white/70"
  }, "Add-ons"), /*#__PURE__*/React.createElement("span", null, "$", addonsTotal)) : null, builtInDiscount > 0 ? /*#__PURE__*/React.createElement("div", {
    className: "flex items-center justify-between text-emerald-300"
  }, /*#__PURE__*/React.createElement("span", null, "Built-in promo"), /*#__PURE__*/React.createElement("span", null, "-$", builtInDiscount)) : null, couponDiscount > 0 ? /*#__PURE__*/React.createElement("div", {
    className: "flex items-center justify-between text-emerald-300"
  }, /*#__PURE__*/React.createElement("span", null, "Coupon"), /*#__PURE__*/React.createElement("span", null, "-$", couponDiscount)) : null), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 border-t border-white/10 pt-4"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-xs uppercase tracking-[0.2em] text-white/55"
  }, "Total"), /*#__PURE__*/React.createElement("div", {
    className: "mt-1 text-4xl font-extrabold"
  }, "$", total)))));
}

// FRONTEND DATA MAPPING NOTE FOR SUMMARY STEP
// Summary page should prefer these sales fields:
// - customer name: sales.customer_name
// - phone: sales.country_calling_code + sales.phone
// - email: sales.email
// - note: sales.note
// - booking time blocks: sales.bookings[].start_date / start_time / end_date / end_time
// - booking resource binding: sales.bookings[].resources[].relation_id (then map to resource master)
// - booking main SKU: sales.bookings[].product
// - add-ons: sales.bookings[].relation_products[] (and/or sales.products[] depending on business implementation)
// - amount summary: sales.summary.*
// IMPORTANT:
// - do not split first_name / last_name unless customer master really provides them
// - current sales JSON only safely supports customer_name
function SummaryStep(_ref11) {
  var groups = _ref11.groups,
    addons = _ref11.addons,
    note = _ref11.note,
    onBackToAddons = _ref11.onBackToAddons;
  var bookingSubtotal = groups.reduce(function (sum, item) {
    return sum + item.total;
  }, 0);
  var addonEntries = Object.values(addons).filter(function (item) {
    return item.qty > 0;
  });
  var addonsTotal = getAddonsTotal(addons);
  var grandTotal = bookingSubtotal + addonsTotal;

  // DEMO PREVIEW VALUES BELOW ARE PLACEHOLDERS.
  // Frontend should replace them with real sales fields listed above.
  var salesMappedPreview = {
    customer_name: "张三",
    email: "zhang@example.com",
    phone: "+86 13800138000",
    note: note || "客人要求安静包房",
    payment_methods: "cash / card / wallet"
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "space-y-5"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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__*/React.createElement(Info, {
    size: 15
  }), " Step 3 \xB7 Summary"), /*#__PURE__*/React.createElement("h2", {
    className: "mt-3 text-[30px] font-extrabold leading-tight text-zinc-900"
  }, "Before you pay"), /*#__PURE__*/React.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__*/React.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__*/React.createElement("div", {
    className: "grid gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex items-center justify-between gap-3"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "text-xs font-bold uppercase tracking-[0.24em] text-[#b39a8b]"
  }, "Booking details"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 text-[22px] font-extrabold text-zinc-900"
  }, "Court booking summary")), /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "mt-5 grid gap-4 md:grid-cols-2"
  }, /*#__PURE__*/React.createElement("div", {
    className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold text-[#a69183]"
  }, "Selected courts"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 space-y-2 text-[15px] font-semibold text-zinc-900"
  }, groups.length ? groups.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      key: item.id
    }, item.courtName);
  }) : /*#__PURE__*/React.createElement("div", null, "Use sales.bookings[].resources[].relation_id"))), /*#__PURE__*/React.createElement("div", {
    className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold text-[#a69183]"
  }, "Sessions"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 space-y-2 text-[15px] font-semibold text-zinc-900"
  }, groups.length ? groups.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      key: "".concat(item.id, "-range")
    }, getDateDisplay(item.date), " \xB7 ", formatRange(item.start, item.end));
  }) : /*#__PURE__*/React.createElement("div", null, "Use sales.bookings[].start_date / start_time / end_date / end_time"))), /*#__PURE__*/React.createElement("div", {
    className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold text-[#a69183]"
  }, "Booking subtotal"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 text-[30px] font-extrabold text-zinc-900"
  }, "$", bookingSubtotal), /*#__PURE__*/React.createElement("div", {
    className: "mt-2 text-xs text-zinc-500"
  }, "Prefer sales.summary.product_amount")), /*#__PURE__*/React.createElement("div", {
    className: "rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-sm font-semibold text-[#a69183]"
  }, "Add-ons"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 text-[15px] font-semibold text-zinc-900"
  }, addonEntries.length ? addonEntries.map(function (item) {
    return "".concat(item.name, " \xD7 ").concat(item.qty);
  }).join(", ") : "No extras selected"), /*#__PURE__*/React.createElement("div", {
    className: "mt-2 text-sm text-zinc-500"
  }, "Add-ons total: $", addonsTotal)))), /*#__PURE__*/React.createElement("div", {
    className: "space-y-4"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex items-start justify-between gap-3"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: "text-xs font-bold uppercase tracking-[0.24em] text-[#b39a8b]"
  }, "Customer details"), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 text-[22px] font-extrabold text-zinc-900"
  }, "Primary contact details")), /*#__PURE__*/React.createElement("div", {
    className: "rounded-full bg-[#fff4f6] px-4 py-2 text-sm font-semibold text-[#da7486]"
  }, "Mapped from sales.customer_*")), /*#__PURE__*/React.createElement("div", {
    className: "mt-5 grid gap-4 md:grid-cols-2"
  }, /*#__PURE__*/React.createElement("label", {
    className: "block md:col-span-2"
  }, /*#__PURE__*/React.createElement("div", {
    className: "mb-2 text-sm font-semibold text-[#927f70]"
  }, "Customer name"), /*#__PURE__*/React.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__*/React.createElement("label", {
    className: "block"
  }, /*#__PURE__*/React.createElement("div", {
    className: "mb-2 text-sm font-semibold text-[#927f70]"
  }, "Email"), /*#__PURE__*/React.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__*/React.createElement("label", {
    className: "block"
  }, /*#__PURE__*/React.createElement("div", {
    className: "mb-2 text-sm font-semibold text-[#927f70]"
  }, "Phone"), /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "mt-5 rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "text-lg font-bold text-zinc-900"
  }, "Notice"), /*#__PURE__*/React.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__*/React.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__*/React.createElement("div", {
    className: "text-[22px] font-extrabold text-zinc-900"
  }, "Arrival & payment info"), /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "mt-5 rounded-[22px] bg-[#faf7f4] p-4 ring-1 ring-black/6"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center justify-between text-sm text-zinc-600"
  }, /*#__PURE__*/React.createElement("span", null, "Payment method"), /*#__PURE__*/React.createElement("span", null, salesMappedPreview.payment_methods)), /*#__PURE__*/React.createElement("div", {
    className: "mt-3 flex items-center justify-between text-sm text-zinc-600"
  }, /*#__PURE__*/React.createElement("span", null, "Support hotline"), /*#__PURE__*/React.createElement("span", null, hotline)), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 border-t border-black/6 pt-4 flex items-center justify-between"
  }, /*#__PURE__*/React.createElement("span", {
    className: "text-sm font-semibold text-zinc-600"
  }, "Estimated total"), /*#__PURE__*/React.createElement("span", {
    className: "text-2xl font-extrabold text-zinc-900"
  }, "$", grandTotal)), /*#__PURE__*/React.createElement("div", {
    className: "mt-2 text-xs text-zinc-500"
  }, "Prefer sales.summary.total_amount / expect_amount / tax_fee / surcharge_fee / discount_amount"))))));
}
export default function RainbowTownBadmintonBookingPage() {
  var today = new Date();
  var _useState = useState(1),
    _useState2 = _slicedToArray(_useState, 2),
    step = _useState2[0],
    setStep = _useState2[1];
  var _useState3 = useState(new Date(2026, 3, 13)),
    _useState4 = _slicedToArray(_useState3, 2),
    anchorDate = _useState4[0],
    setAnchorDate = _useState4[1];
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    selectedSlots = _useState6[0],
    setSelectedSlots = _useState6[1];
  var _useState7 = useState({}),
    _useState8 = _slicedToArray(_useState7, 2),
    selectedAddons = _useState8[0],
    setSelectedAddons = _useState8[1];
  var _useState9 = useState(""),
    _useState10 = _slicedToArray(_useState9, 2),
    coupon = _useState10[0],
    setCoupon = _useState10[1];
  var _useState11 = useState(""),
    _useState12 = _slicedToArray(_useState11, 2),
    appliedCoupon = _useState12[0],
    setAppliedCoupon = _useState12[1];
  var _useState13 = useState(""),
    _useState14 = _slicedToArray(_useState13, 2),
    note = _useState14[0],
    setNote = _useState14[1];
  var _useState15 = useState(""),
    _useState16 = _slicedToArray(_useState15, 2),
    search = _useState16[0],
    setSearch = _useState16[1];
  var _useState17 = useState("ALL"),
    _useState18 = _slicedToArray(_useState17, 2),
    filter = _useState18[0],
    setFilter = _useState18[1];
  var _useState19 = useState(""),
    _useState20 = _slicedToArray(_useState19, 2),
    limitMessage = _useState20[0],
    setLimitMessage = _useState20[1];
  var _useState21 = useState("left"),
    _useState22 = _slicedToArray(_useState21, 2),
    tableSlideDirection = _useState22[0],
    setTableSlideDirection = _useState22[1];
  var _useState23 = useState(false),
    _useState24 = _slicedToArray(_useState23, 2),
    monthPickerOpen = _useState24[0],
    setMonthPickerOpen = _useState24[1];
  var _useState25 = useState(new Date(2026, 3, 1)),
    _useState26 = _slicedToArray(_useState25, 2),
    monthCursor = _useState26[0],
    setMonthCursor = _useState26[1];
  var _useState27 = useState(false),
    _useState28 = _slicedToArray(_useState27, 2),
    mobileCartOpen = _useState28[0],
    setMobileCartOpen = _useState28[1];
  var scrollTableRef = useRef(null);
  var tableSectionRef = useRef(null);
  var dragStateRef = useRef({
    isDragging: false,
    pointerId: null,
    startX: 0,
    startY: 0,
    startScrollLeft: 0,
    moved: false
  });
  var dateKey = formatDateKey(anchorDate);
  var todayKey = formatDateKey(today);
  var isViewingToday = dateKey === todayKey;
  var timeSlots = useMemo(function () {
    return buildTimeSlots(dateKey);
  }, [dateKey]);
  var hourGroups = useMemo(function () {
    return buildHourGroups(timeSlots);
  }, [timeSlots]);
  var bookingLimitMessage = getBookingLimitMessage();
  var tableGridStyle = useMemo(function () {
    return getTableGridStyle(timeSlots.length);
  }, [timeSlots.length]);
  var visibleCourts = useMemo(function () {
    return courts.filter(function (court) {
      var hitType = filter === "ALL" || court.type === filter;
      var hitSearch = !search || court.name.toLowerCase().includes(search.toLowerCase());
      return hitType && hitSearch;
    });
  }, [filter, search]);
  var groupedCartItems = useMemo(function () {
    return groupSelections(selectedSlots);
  }, [selectedSlots]);
  var canNext = groupedCartItems.length > 0;
  var addonCount = Object.values(selectedAddons).reduce(function (sum, item) {
    return sum + item.qty;
  }, 0);
  useEffect(function () {
    if (!limitMessage) return undefined;
    var timer = window.setTimeout(function () {
      return setLimitMessage("");
    }, 3800);
    return function () {
      return window.clearTimeout(timer);
    };
  }, [limitMessage]);
  useEffect(function () {
    var scroller = scrollTableRef.current;
    if (!scroller || !timeSlots.length) return;
    var availableSlotIndexes = getAvailableSlotIndexesForDate(dateKey, timeSlots);
    var startHourIndex = getSuggestedStartHourIndex({
      availableSlotIndexes: availableSlotIndexes,
      totalHours: hourGroups.length
    });
    var startSlotIndex = Math.max(0, (startHourIndex - 1) * SLOTS_PER_HOUR);
    var slotAreaWidth = Math.max(0, scroller.scrollWidth - FIRST_COLUMN_WIDTH);
    var slotWidth = timeSlots.length ? slotAreaWidth / timeSlots.length : 0;
    var targetLeft = Math.max(0, startSlotIndex * slotWidth);
    scroller.scrollTo({
      left: targetLeft,
      behavior: "smooth"
    });
  }, [dateKey, timeSlots, hourGroups.length]);
  useEffect(function () {
    var scroller = scrollTableRef.current;
    if (!scroller) return undefined;
    function onPointerDown(e) {
      var _scroller$setPointerC;
      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
      };
      (_scroller$setPointerC = scroller.setPointerCapture) === null || _scroller$setPointerC === void 0 || _scroller$setPointerC.call(scroller, e.pointerId);
    }
    function onPointerMove(e) {
      var state = dragStateRef.current;
      if (!state.isDragging || state.pointerId !== e.pointerId) return;
      var dx = e.clientX - state.startX;
      var 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 _scroller$releasePoin;
      var state = dragStateRef.current;
      if (state.pointerId !== e.pointerId) return;
      dragStateRef.current.isDragging = false;
      dragStateRef.current.pointerId = null;
      (_scroller$releasePoin = scroller.releasePointerCapture) === null || _scroller$releasePoin === void 0 || _scroller$releasePoin.call(scroller, e.pointerId);
    }
    scroller.addEventListener("pointerdown", onPointerDown);
    scroller.addEventListener("pointermove", onPointerMove, {
      passive: false
    });
    scroller.addEventListener("pointerup", endDrag);
    scroller.addEventListener("pointercancel", endDrag);
    return function () {
      scroller.removeEventListener("pointerdown", onPointerDown);
      scroller.removeEventListener("pointermove", onPointerMove);
      scroller.removeEventListener("pointerup", endDrag);
      scroller.removeEventListener("pointercancel", endDrag);
    };
  }, []);
  var goPrevWeek = function goPrevWeek() {
    setTableSlideDirection("right");
    setAnchorDate(function (prev) {
      return addDays(prev, -7);
    });
  };
  var goNextWeek = function goNextWeek() {
    setTableSlideDirection("left");
    setAnchorDate(function (prev) {
      return addDays(prev, 7);
    });
  };
  function handleDateSelect(date) {
    setAnchorDate(date);
    setMonthCursor(new Date(date.getFullYear(), date.getMonth(), 1));
    window.requestAnimationFrame(function () {
      var _tableSectionRef$curr;
      (_tableSectionRef$curr = tableSectionRef.current) === null || _tableSectionRef$curr === void 0 || _tableSectionRef$curr.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(function () {
      var _tableSectionRef$curr2;
      (_tableSectionRef$curr2 = tableSectionRef.current) === null || _tableSectionRef$curr2 === void 0 || _tableSectionRef$curr2.scrollIntoView({
        behavior: "smooth",
        block: "start"
      });
    });
  }
  function toggleSlotSelection(courtId, time) {
    if (isSlotBooked(seedBookings, courtId, dateKey, time)) return;
    var key = slotKey(courtId, dateKey, time);
    var exists = selectedSlots.some(function (slot) {
      return slotKey(slot.courtId, slot.date, slot.time) === key;
    });
    if (exists) {
      setSelectedSlots(function (prev) {
        return prev.filter(function (slot) {
          return slotKey(slot.courtId, slot.date, slot.time) !== key;
        });
      });
      setLimitMessage("");
      return;
    }
    var nextSlots = [].concat(_toConsumableArray(selectedSlots), [{
      courtId: courtId,
      date: dateKey,
      time: time
    }]);
    var nextGroups = groupSelections(nextSlots);
    var nextTotalMinutes = getTotalSelectedMinutes(nextSlots);
    var 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(function (prev) {
      return removeGroupedItemSlots(prev, group);
    });
    setLimitMessage("");
  }
  function handleSlotClick(courtId, slot) {
    if (dragStateRef.current.moved) {
      dragStateRef.current.moved = false;
      return;
    }
    toggleSlotSelection(courtId, slot);
  }
  function clearCourtSelections(courtId) {
    setSelectedSlots(function (prev) {
      return prev.filter(function (slot) {
        return slot.courtId !== courtId;
      });
    });
    setLimitMessage("");
  }
  function handleCouponApply() {
    if (coupon === "RAINBOW10") setAppliedCoupon(coupon);else setAppliedCoupon("");
  }
  function setAddonQty(addon, qty) {
    setSelectedAddons(function (prev) {
      var next = _objectSpread({}, prev);
      if (qty <= 0) delete next[addon.id];else next[addon.id] = _objectSpread(_objectSpread({}, addon), {}, {
        qty: qty
      });
      return next;
    });
  }
  function handlePrimaryAction() {
    if (step === 1) {
      if (!canNext) return;
      setStep(2);
      return;
    }
    if (step === 2) {
      setStep(3);
      return;
    }
    setMobileCartOpen(true);
  }
  return /*#__PURE__*/React.createElement("div", {
    className: "min-h-screen overflow-x-hidden bg-[#f5f5f3] text-zinc-900"
  }, /*#__PURE__*/React.createElement("style", null, "\n        @keyframes slideLeft { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }\n        @keyframes slideRight { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }\n        @keyframes toastIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }\n        @keyframes toastBar { from { width: 100%; } to { width: 0%; } }\n      "), /*#__PURE__*/React.createElement(HeaderBar, null), /*#__PURE__*/React.createElement(LimitToast, {
    message: limitMessage,
    onClose: function onClose() {
      return setLimitMessage("");
    }
  }), /*#__PURE__*/React.createElement("main", {
    className: "mx-auto max-w-[1500px] px-4 pb-28 pt-4 md:px-6 md:pb-12 md:pt-6"
  }, /*#__PURE__*/React.createElement(HeroBanner, {
    step: step
  }), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 space-y-4 md:mt-6"
  }, /*#__PURE__*/React.createElement(StepBar, {
    step: step,
    canGoToStep2: canNext,
    hasSelectedBooking: groupedCartItems.length > 0,
    addonCount: addonCount,
    onStepChange: function onStepChange(targetStep) {
      return setStep(targetStep);
    }
  }), /*#__PURE__*/React.createElement("div", {
    className: "grid max-w-full gap-4 lg:grid-cols-[minmax(0,1fr)_390px] xl:grid-cols-[minmax(0,1fr)_420px]"
  }, /*#__PURE__*/React.createElement("section", {
    className: "min-w-0 space-y-5"
  }, step === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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__*/React.createElement(CalendarDays, {
    size: 15
  }), " Step 1 \xB7 Choose Your Court"), /*#__PURE__*/React.createElement("h2", {
    className: "mt-3 text-[30px] font-extrabold leading-tight text-zinc-900"
  }, "Choose Your Court"), /*#__PURE__*/React.createElement("p", {
    className: "mt-2 text-sm leading-6 text-zinc-500"
  }, "Availability and pricing only.")), /*#__PURE__*/React.createElement("div", {
    className: "relative flex w-full items-center gap-2 xl:w-auto"
  }, /*#__PURE__*/React.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__*/React.createElement(ChevronLeft, {
    size: 18
  })), /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setMonthPickerOpen(function (prev) {
        return !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__*/React.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__*/React.createElement(ChevronRight, {
    size: 18
  })), /*#__PURE__*/React.createElement("button", {
    onClick: goToday,
    disabled: isViewingToday,
    className: "rounded-2xl px-4 py-3 text-sm font-bold shadow-sm ".concat(isViewingToday ? "bg-zinc-200 text-zinc-500 cursor-not-allowed" : "bg-[#ea1018] text-white")
  }, "Go to Today"), monthPickerOpen ? /*#__PURE__*/React.createElement(MonthPicker, {
    visibleMonth: monthCursor,
    selectedDate: anchorDate,
    onSelectDate: handleDateSelect,
    onClose: function onClose() {
      return setMonthPickerOpen(false);
    },
    onPrevMonth: function onPrevMonth() {
      return setMonthCursor(function (prev) {
        return new Date(prev.getFullYear(), prev.getMonth() - 1, 1);
      });
    },
    onNextMonth: function onNextMonth() {
      return setMonthCursor(function (prev) {
        return new Date(prev.getFullYear(), prev.getMonth() + 1, 1);
      });
    }
  }) : null)), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 md:mt-5"
  }, /*#__PURE__*/React.createElement(DayTabs, {
    anchorDate: anchorDate,
    onChange: handleDateSelect,
    onPrevWeek: goPrevWeek,
    onNextWeek: goNextWeek
  })), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 grid gap-3 md:mt-5 xl:grid-cols-[1fr_auto] xl:items-center"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex items-center gap-3 rounded-[18px] border border-black/8 bg-[#fafafa] px-4 py-3"
  }, /*#__PURE__*/React.createElement(Search, {
    size: 16,
    className: "text-zinc-400"
  }), /*#__PURE__*/React.createElement("input", {
    value: search,
    onChange: function onChange(e) {
      return setSearch(e.target.value);
    },
    placeholder: "Search court",
    className: "w-full bg-transparent text-sm outline-none placeholder:text-zinc-400"
  })), /*#__PURE__*/React.createElement("div", {
    className: "flex flex-wrap gap-2"
  }, [{
    label: "All",
    value: "ALL"
  }, {
    label: "Badminton",
    value: "Badminton"
  }, {
    label: "Pickleball",
    value: "Pickleball"
  }].map(function (item) {
    return /*#__PURE__*/React.createElement("button", {
      key: item.value,
      onClick: function onClick() {
        return setFilter(item.value);
      },
      className: "rounded-full px-4 py-2 text-sm font-semibold transition ".concat(filter === item.value ? "bg-[#ea1018] text-white" : "bg-[#fafafa] text-zinc-700 ring-1 ring-black/8")
    }, item.label);
  }))), /*#__PURE__*/React.createElement("div", {
    className: "mt-4 md:mt-5"
  }, /*#__PURE__*/React.createElement(PriceLegend, null))), /*#__PURE__*/React.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__*/React.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__*/React.createElement("div", {
    className: "w-full ".concat(getSlideClass(tableSlideDirection)),
    key: dateKey
  }, /*#__PURE__*/React.createElement("div", {
    className: "grid border-b border-black/6 bg-[#fff7f7]",
    style: tableGridStyle
  }, /*#__PURE__*/React.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__*/React.createElement(Clock3, {
    size: 16,
    className: "text-[#ea1018]"
  }), "Courts"), hourGroups.map(function (slot) {
    var hourSlots = [slot, minutesToTime(timeToMinutes(slot) + SLOT_MINUTES)];
    var hourSoldOut = hourSlots.every(function (hourSlot) {
      return getTimeMeta(dateKey, hourSlot).soldOut;
    });
    return /*#__PURE__*/React.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 ".concat(hourSoldOut ? "bg-zinc-100 text-zinc-400" : "text-zinc-700")
    }, formatHourHeader(slot));
  }), timeSlots.map(function (slot) {
    var headerTag = getColumnTag(dateKey, slot);
    var timeMeta = getTimeMeta(dateKey, slot);
    return /*#__PURE__*/React.createElement("div", {
      key: "".concat(slot, "-tag"),
      className: "border-t px-1 py-1.5 text-center ".concat(isHourBoundary(slot) ? "border-l border-l-black/20" : "border-l border-l-black/8", " border-t-black/6 ").concat(timeMeta.soldOut ? "bg-zinc-100 text-zinc-400" : "bg-white/55")
    }, headerTag && !timeMeta.soldOut ? /*#__PURE__*/React.createElement("span", {
      className: "inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ".concat(headerTag.className)
    }, headerTag.text) : null, timeMeta.soldOut ? /*#__PURE__*/React.createElement("div", {
      className: "mt-1 text-[10px] font-bold text-zinc-400"
    }, "Sold out") : null, !timeMeta.soldOut && timeMeta.fewLeft ? /*#__PURE__*/React.createElement("div", {
      className: "mt-1 text-[10px] font-bold text-[#ea1018]"
    }, "Few left") : null);
  })), visibleCourts.map(function (court) {
    var courtMeta = getCourtMeta(court.id, dateKey);
    return /*#__PURE__*/React.createElement("div", {
      key: "".concat(court.id, "-").concat(dateKey),
      className: "grid border-b border-black/6",
      style: tableGridStyle
    }, /*#__PURE__*/React.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 ".concat(courtMeta.soldOut ? "bg-zinc-50" : "bg-white")
    }, /*#__PURE__*/React.createElement("div", {
      className: "flex items-start justify-between gap-2"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "flex items-center gap-2 text-[13px] font-extrabold leading-5 md:text-[15px] ".concat(courtMeta.soldOut ? "text-zinc-400" : "text-zinc-900")
    }, /*#__PURE__*/React.createElement("span", null, getCourtTypeIcon(court.type)), /*#__PURE__*/React.createElement("span", null, court.shortName)), /*#__PURE__*/React.createElement("div", {
      className: "mt-1 text-[11px] md:text-xs ".concat(courtMeta.soldOut ? "text-zinc-400" : "text-zinc-500")
    }, court.type), courtMeta.soldOut ? /*#__PURE__*/React.createElement("div", {
      className: "mt-1 text-[11px] font-semibold text-zinc-500"
    }, "Sold out") : null, !courtMeta.soldOut && courtMeta.fewLeft ? /*#__PURE__*/React.createElement("div", {
      className: "mt-1 text-[12px] font-bold text-[#ea1018]"
    }, "Few left") : null), selectedSlots.some(function (slot) {
      return slot.courtId === court.id;
    }) ? /*#__PURE__*/React.createElement("button", {
      onClick: function onClick() {
        return clearCourtSelections(court.id);
      },
      className: "rounded-full bg-zinc-100 p-1.5 text-zinc-500"
    }, /*#__PURE__*/React.createElement(X, {
      size: 14
    })) : null)), timeSlots.map(function (slot) {
      var _getSlotTag, _getSlotTag2, _getSlotTag3;
      var booked = isSlotBooked(seedBookings, court.id, dateKey, slot);
      var selected = selectedSlots.some(function (item) {
        return item.courtId === court.id && item.date === dateKey && item.time === slot;
      });
      var priceInfo = getSlotPrice({
        courtType: court.type,
        dateKey: dateKey,
        time: slot
      });
      var priceClass = getPriceColor(_objectSpread(_objectSpread({}, priceInfo), {}, {
        courtType: court.type
      }));
      return /*#__PURE__*/React.createElement("button", {
        "data-slot-button": "true",
        key: "".concat(court.id, "-").concat(slot),
        onClick: function onClick() {
          return handleSlotClick(court.id, slot);
        },
        disabled: booked,
        className: "px-1 py-3 text-center transition md:px-2 ".concat(isHourBoundary(slot) ? "border-l border-l-black/20" : "border-l border-l-black/8", " ").concat(booked ? "cursor-not-allowed bg-zinc-100 text-zinc-400" : selected ? "bg-[#ea1018] text-white" : "bg-white hover:bg-[#fff6f6]")
      }, booked ? /*#__PURE__*/React.createElement("div", {
        className: "flex flex-col items-center justify-center gap-1 text-zinc-400"
      }, /*#__PURE__*/React.createElement("div", {
        className: "text-lg font-bold leading-none"
      }, "\xD7")) : selected ? /*#__PURE__*/React.createElement("div", {
        className: "space-y-1"
      }, /*#__PURE__*/React.createElement("div", {
        className: "text-[11px] font-bold uppercase tracking-wide text-white/90"
      }, "Selected"), /*#__PURE__*/React.createElement("div", {
        className: "text-sm font-extrabold text-white"
      }, "$", priceInfo.price)) : /*#__PURE__*/React.createElement("div", {
        className: "space-y-1"
      }, /*#__PURE__*/React.createElement("div", {
        className: "text-[13px] font-extrabold ".concat(priceClass, " md:text-sm")
      }, "$", priceInfo.price), shouldShowCellTag(dateKey, slot) && getSlotTag(priceInfo) ? /*#__PURE__*/React.createElement("div", {
        className: "inline-flex rounded-full px-1.5 py-0.5 text-[8px] font-semibold ring-1 md:text-[9px] ".concat((_getSlotTag = getSlotTag(priceInfo)) === null || _getSlotTag === void 0 ? void 0 : _getSlotTag.className)
      }, ((_getSlotTag2 = getSlotTag(priceInfo)) === null || _getSlotTag2 === void 0 ? void 0 : _getSlotTag2.text) === "Discounted" ? "Promo" : (_getSlotTag3 = getSlotTag(priceInfo)) === null || _getSlotTag3 === void 0 ? void 0 : _getSlotTag3.text) : null));
    }));
  }))))) : step === 2 ? /*#__PURE__*/React.createElement("div", {
    className: "space-y-5"
  }, /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex flex-col gap-4 md:flex-row md:items-center md:justify-between"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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__*/React.createElement(Sparkles, {
    size: 15
  }), " Step 2 \xB7 Add-ons"), /*#__PURE__*/React.createElement("h2", {
    className: "mt-3 text-[30px] font-extrabold leading-tight text-zinc-900"
  }, "Add extras to your booking"), /*#__PURE__*/React.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__*/React.createElement("div", {
    className: "flex gap-2"
  }, /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setStep(1);
    },
    className: "rounded-[16px] border border-black/10 px-4 py-3 text-sm font-semibold text-zinc-800"
  }, "Back to Booking"), /*#__PURE__*/React.createElement("button", {
    onClick: function onClick() {
      return setStep(3);
    },
    className: "rounded-[16px] bg-[#ea1018] px-5 py-3 text-sm font-bold text-white"
  }, "Review & Pay")))), /*#__PURE__*/React.createElement("div", {
    className: "grid gap-4 md:grid-cols-2"
  }, addonsCatalog.map(function (addon) {
    var _selectedAddons$addon;
    return /*#__PURE__*/React.createElement(AddonCard, {
      key: addon.id,
      addon: addon,
      qty: ((_selectedAddons$addon = selectedAddons[addon.id]) === null || _selectedAddons$addon === void 0 ? void 0 : _selectedAddons$addon.qty) || 0,
      onChange: function onChange(qty) {
        return setAddonQty(addon, qty);
      }
    });
  }))) : /*#__PURE__*/React.createElement(SummaryStep, {
    groups: groupedCartItems,
    addons: selectedAddons,
    note: note,
    onBackToAddons: function onBackToAddons() {
      return setStep(2);
    }
  })), /*#__PURE__*/React.createElement(BookingCart, {
    step: step,
    groups: groupedCartItems,
    addons: selectedAddons,
    note: note,
    onNoteChange: setNote,
    coupon: coupon,
    onCouponChange: setCoupon,
    onCouponApply: handleCouponApply,
    appliedCoupon: appliedCoupon,
    onRemoveGroup: handleRemoveGroup,
    mobileCartOpen: mobileCartOpen,
    setMobileCartOpen: setMobileCartOpen,
    onNext: handlePrimaryAction,
    onBack: function onBack() {
      return setStep(function (prev) {
        return Math.max(1, prev - 1);
      });
    },
    canNext: canNext
  })))));
}