<!-- Mid-month Billing Reminder banner (15–18) - adaptive sizing for Amplify vs Classic -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const startDay = 1;
  const endDay = 18;

  const now = new Date();
  const day = now.getDate();
  if (day < startDay || day > endDay) return;

  const key = `dwaBillingBannerDismissed-${now.getFullYear()}-${now.getMonth()+1}`;
  if (localStorage.getItem(key) === "true") return;

  const BANNER_ID = "dwa-billing-banner";
  if (document.getElementById(BANNER_ID)) return; // prevent duplicates

  function isAdminEditingView() {
    return window.location.hash && window.location.hash.includes("/settings/");
  }
  function getAdminOffsetPx() {
    return isAdminEditingView() ? 72 : 0;
  }

  // Detect Amplify-ish pages (best effort)
  function isAmplifyPage() {
    return !!(
      document.querySelector(".amplify-html-embed-container") ||
      document.querySelector(".amplify-section-container") ||
      document.querySelector(".amplify-container") ||
      document.querySelector("#app .amplify-container") ||
      document.body.className.toLowerCase().includes("amplify")
    );
  }

  const amplify = isAmplifyPage();

  // Size presets:
  // - Amplify: smaller so it doesn't feel huge on the homepage
  // - Classic: bigger for internal pages readability
  const sizes = amplify
    ? {
        title: "clamp(1.05rem, 1.6vw, 1.25rem)",
        msg:   "clamp(1.00rem, 1.7vw, 1.18rem)",
        btn:   "clamp(.95rem, 1.5vw, 1.05rem)",
        padY:  "14px"
      }
    : {
        title: "clamp(1.2rem, 2.4vw, 1.55rem)",
        msg:   "clamp(1.1rem, 2.6vw, 1.4rem)",
        btn:   "clamp(1.0rem, 2.0vw, 1.15rem)",
        padY:  "18px"
      };

  const banner = document.createElement("div");
  banner.id = BANNER_ID;
  banner.setAttribute("role", "region");
  banner.setAttribute("aria-label", "Billing reminder");
  banner.style.position = "sticky";
  banner.style.top = getAdminOffsetPx() + "px";
  banner.style.zIndex = "4000"; // keep below admin overlay
  banner.style.background = "#14558E";
  banner.style.color = "#ffffff";
  banner.style.padding = `${sizes.padY} 16px`;
  banner.style.display = "block";

  const inner = document.createElement("div");
  inner.style.maxWidth = "1200px";
  inner.style.margin = "0 auto";
  inner.style.display = "flex";
  inner.style.flexWrap = "wrap";
  inner.style.gap = "14px";
  inner.style.alignItems = "center";
  inner.style.justifyContent = "space-between";

  const textWrap = document.createElement("div");
  textWrap.style.display = "flex";
  textWrap.style.flexDirection = "column";
  textWrap.style.gap = "4px";
  textWrap.style.maxWidth = "920px";

  const title = document.createElement("strong");
  title.textContent = "Billing Reminder";
  title.style.fontSize = sizes.title;
  title.style.lineHeight = "1.25";
  title.style.letterSpacing = ".01em";

  const msg = document.createElement("span");
  msg.style.fontSize = sizes.msg;
  msg.style.lineHeight = "1.35";
  msg.style.fontWeight = "600";
  msg.innerHTML = `Payments due soon. Avoid late fees and pay online in minutes.
    <a href="/pay-my-bill" style="color:#fff; text-decoration: underline; font-weight:900;">Pay My Bill</a>`;

  textWrap.appendChild(title);
  textWrap.appendChild(msg);

  const btn = document.createElement("button");
  btn.type = "button";
  btn.setAttribute("aria-label", "Dismiss billing reminder");
  btn.textContent = "Dismiss";
  btn.style.background = "transparent";
  btn.style.color = "#ffffff";
  btn.style.border = "2px solid #ffffff";
  btn.style.borderRadius = "12px";
  btn.style.padding = amplify ? "10px 12px" : "12px 16px";
  btn.style.fontWeight = "900";
  btn.style.cursor = "pointer";
  btn.style.fontSize = sizes.btn;
  btn.style.whiteSpace = "nowrap";

  btn.addEventListener("focus", function () {
    btn.style.outline = "3px solid #0B1F33";
    btn.style.outlineOffset = "3px";
  });
  btn.addEventListener("blur", function () {
    btn.style.outline = "none";
  });

  btn.addEventListener("click", function () {
    localStorage.setItem(key, "true");
    banner.remove();
  });

  inner.appendChild(textWrap);
  inner.appendChild(btn);
  banner.appendChild(inner);
  document.body.prepend(banner);

  function updateBannerOffset() {
    const el = document.getElementById(BANNER_ID);
    if (!el) return;
    el.style.top = getAdminOffsetPx() + "px";
  }

  window.addEventListener("hashchange", updateBannerOffset);
  window.addEventListener("resize", updateBannerOffset);
});
</script>