(function () {
  const tz = "America/Los_Angeles";
  const days = [1, 2, 3, 4, 5]; // Mon–Fri
  const startHHMM = "17:30";
  const endHHMM = "21:00";

  const brandPurple = "#5b21b6";
  const brandGold = "#fbbf24";
  const brandGoldHover = "#fde68a";

  const LS_KEY = "bmbModalDismissedUntil";
  const params = new URLSearchParams(location.search);
  const force = params.get("showAlert") === "1";
  const clear = params.get("clearBMB") === "1";
  if (clear) localStorage.removeItem(LS_KEY);

  function nowInTZ() {
    const now = new Date();
    return new Date(now.toLocaleString("en-US", { timeZone: tz }));
  }

  function inWindow() {
    if (force) return true;
    const loc = nowInTZ();
    const dow = loc.getDay();
    if (!days.includes(dow)) return false;
    const [sH, sM] = startHHMM.split(":").map(Number);
    const [eH, eM] = endHHMM.split(":").map(Number);
    const start = new Date(loc); start.setHours(sH, sM, 0, 0);
    const end = new Date(loc);   end.setHours(eH, eM, 0, 0);
    return loc >= start && loc <= end;
  }

  function dismissed() {
    if (force) return false;
    const until = Number(localStorage.getItem(LS_KEY) || 0);
    return Date.now() < until;
  }

  function setDismissExpiry() {
    const loc = nowInTZ();
    const [eH, eM] = endHHMM.split(":").map(Number);
    const end = new Date(loc); end.setHours(eH, eM, 0, 0);
    let expire = end.getTime() + 60 * 60 * 1000;
    if (Date.now() > expire) expire = Date.now() + 24 * 60 * 60 * 1000;
    localStorage.setItem(LS_KEY, String(expire));
  }

  function injectStyles() {
    const css = `
      .bmb-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;display:none}
      .bmb-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:10001;pointer-events:none}
      .bmb-modal[open] .bmb-modal-backdrop{display:block}
      .bmb-modal[open] .bmb-card{transform:translateY(0);opacity:1}
      .bmb-card{
        pointer-events:auto;max-width:560px;margin:0 16px;background:#fff;color:#111;border-radius:16px;padding:28px;
        box-shadow:0 12px 40px rgba(0,0,0,.25);transform:translateY(10px);opacity:0;transition:all .18s ease-out;
        font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
      }
      .bmb-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
      .bmb-dot{width:14px;height:14px;border-radius:50%;background:${brandGold};
        box-shadow:0 0 0 6px rgba(251,191,36,.25);animation:bmbPulse 2s infinite}
      @keyframes bmbPulse{
        0%{box-shadow:0 0 0 6px rgba(251,191,36,.25)}
        50%{box-shadow:0 0 0 10px rgba(251,191,36,.05)}
        100%{box-shadow:0 0 0 6px rgba(251,191,36,.25)}
      }
      .bmb-card h2{margin:0;font-size:22px;color:${brandPurple};font-weight:800}
      .bmb-card p{margin:6px 0 16px}
      .bmb-actions{text-align:right}
      .bmb-btn{
        appearance:none;border:0;cursor:pointer;padding:12px 18px;border-radius:10px;
        font-weight:800;text-decoration:none;text-align:center;background:${brandGold};
        color:#111;transition:background .15s ease;box-shadow:0 4px 10px rgba(0,0,0,.15)
      }
      .bmb-btn:hover{background:${brandGoldHover}}
      @media(max-width:420px){.bmb-card{padding:22px}}
    `;
    const s = document.createElement("style");
    s.textContent = css;
    document.head.appendChild(s);
  }

  function buildModal() {
    const wrap = document.createElement("div");
    wrap.id = "bmbModal";
    wrap.className = "bmb-modal";
    wrap.setAttribute("role", "dialog");
    wrap.setAttribute("aria-modal", "true");
    wrap.innerHTML = `
      <div class="bmb-modal-backdrop"></div>
      <div class="bmb-card">
        <div class="bmb-header">
          <div class="bmb-dot"></div>
          <h2>League is in Session 🎳</h2>
        </div>
        <p><strong>Weeknights 5:30–9:00 PM</strong></p>
        <p><strong>All lanes are fully booked during this time.</strong><br>
        Please check our online reservations for future availability!</p>
        <div class="bmb-actions">
          <button class="bmb-btn bmb-primary" type="button">Reserve My Lanes</button>
        </div>
      </div>
    `;
    return wrap;
  }

  function ready(fn) {
    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", fn);
    else fn();
  }

  function init() {
    injectStyles();
    const modal = buildModal();
    document.body.appendChild(modal);

    const backdrop = modal.querySelector(".bmb-modal-backdrop");
    const button = modal.querySelector(".bmb-btn");

    function closeModal() {
      setDismissExpiry();
      modal.removeAttribute("open");
    }

    backdrop.addEventListener("click", closeModal);
    button.addEventListener("click", closeModal);

    function update() {
      const show = (inWindow() && !dismissed()) || force;
      if (show) modal.setAttribute("open", "");
      else modal.removeAttribute("open");
    }
    update();
    setInterval(update, 60 * 1000);
  }

  ready(function wait() {
    if (!document.body) return setTimeout(wait, 30);
    init();
  });
})();