(function () {
  const section = document.querySelector(".amenities_cms");
  const root = document.querySelector(".time_clock [data-clock]");
  const flow = document.querySelector(".amenities_flow");
  const timeClock = document.querySelector(".time_clock");

  if (!section || !root || !flow) return;

  const START_HOUR = 8;
  const END_HOUR = 22;

  const START_AT = 0.12;
  const END_AT = 0.92;

  const NIGHT_START = 17;
  const NIGHT_END = 18;

  const CLOCK_COLOR_SCRUB_MIN_WIDTH = 768;

  function clamp(v, min, max){ return Math.max(min, Math.min(max, v)); }
  function lerp(a, b, t){ return a + (b - a) * t; }
  function rgbToCss(c){ return `rgb(${c[0]} ${c[1]} ${c[2]})`; }

  function parseRGB(str){
    const m = str && str.match(/rgba?\(([\d.\s]+),\s*([\d.\s]+),\s*([\d.\s]+)/i);
    if (!m) return [255, 255, 255];
    return [Number(m[1]), Number(m[2]), Number(m[3])];
  }

  function rgbLerp(c1, c2, t){
    return [
      Math.round(lerp(c1[0], c2[0], t)),
      Math.round(lerp(c1[1], c2[1], t)),
      Math.round(lerp(c1[2], c2[2], t))
    ];
  }

  function toUS(hour24){
    const isPM = hour24 >= 12;
    let h12 = hour24 % 12;
    if (h12 === 0) h12 = 12;
    return {
      hh: String(h12).padStart(2, "0"),
      suffix: isPM ? "PM" : "AM"
    };
  }

  function sectionProgress(){
    const rect = section.getBoundingClientRect();
    const vh = window.innerHeight;
    const raw = (vh - rect.top) / (vh + rect.height);
    return clamp((raw - START_AT) / (END_AT - START_AT), 0, 1);
  }

  const initial = toUS(START_HOUR);

  const digits = document.createElement("span");
  digits.className = "clock-digits";

  function makeDigitWrap(ch){
    const wrap = document.createElement("span");
    wrap.className = "digit-wrap";

    const cur = document.createElement("span");
    cur.className = "digit-current";
    cur.textContent = ch;

    const next = document.createElement("span");
    next.className = "digit-next";
    next.textContent = ch;
    next.style.transform = "translateY(100%)";

    wrap.appendChild(cur);
    wrap.appendChild(next);
    return { wrap, cur, next };
  }

  const d1 = makeDigitWrap(initial.hh[0]);
  const d2 = makeDigitWrap(initial.hh[1]);

  digits.appendChild(d1.wrap);
  digits.appendChild(d2.wrap);

  const mins = document.createElement("span");
  mins.textContent = ":00";

  const suffix = document.createElement("span");
  suffix.className = "clock-suffix";
  suffix.textContent = initial.suffix;

  root.textContent = "";
  root.appendChild(digits);
  root.appendChild(mins);
  root.appendChild(suffix);

  let prevHourFloat = START_HOUR;

  function setDigitProgress(digitObj, fromCh, toCh, t){
    if (fromCh === toCh){
      digitObj.cur.textContent = toCh;
      digitObj.next.textContent = toCh;
      digitObj.cur.style.transform = "translateY(0%)";
      digitObj.next.style.transform = "translateY(100%)";
      return;
    }

    const p = clamp(t, 0, 1);
    digitObj.cur.textContent = fromCh;
    digitObj.next.textContent = toCh;

    digitObj.cur.style.transform = `translateY(${-100 * p}%)`;
    digitObj.next.style.transform = `translateY(${100 - 100 * p}%)`;
  }

  function updateClock(hourFloat){
    const dir = hourFloat >= prevHourFloat ? 1 : -1;
    const baseHour = dir >= 0 ? Math.floor(hourFloat) : Math.ceil(hourFloat);
    const nextHour = clamp(baseHour + dir, START_HOUR, END_HOUR);

    const fracRaw = dir >= 0 ? (hourFloat - baseHour) : (baseHour - hourFloat);
    const frac = clamp(fracRaw, 0, 1);

    const a = toUS(baseHour);
    const b = toUS(nextHour);

    setDigitProgress(d1, a.hh[0], b.hh[0], frac);
    setDigitProgress(d2, a.hh[1], b.hh[1], frac);

    suffix.textContent = frac < 0.5 ? a.suffix : b.suffix;

    prevHourFloat = hourFloat;
  }

  const allAmenityNodes = Array.from(document.querySelectorAll(".amenities_item *"));
  const tagNodes = Array.from(document.querySelectorAll(".amenities_item .tag_amen, .amenities_item .tag_amen *"));

  const textEls = allAmenityNodes.filter((el) => {
    if (el.matches(".tag_amen")) return false;
    if (el.closest(".tag_amen")) return false;
    if (el.querySelector(".tag_amen")) return false;
    return true;
  });

  const clockEls = timeClock
    ? [timeClock, ...Array.from(timeClock.querySelectorAll("*"))]
    : [];

  const dayBg = [255, 255, 255];
  const nightBg = [18, 18, 20];
  const nightText = [255, 255, 255];

  const dayTextByEl = new Map();
  textEls.forEach(el => dayTextByEl.set(el, parseRGB(getComputedStyle(el).color)));

  const dayClockByEl = new Map();
  clockEls.forEach(el => dayClockByEl.set(el, parseRGB(getComputedStyle(el).color)));

  const dayTagByEl = new Map();
  tagNodes.forEach(el => dayTagByEl.set(el, parseRGB(getComputedStyle(el).color)));

  function updateNightScrub(hourFloat){
    const t = clamp((hourFloat - NIGHT_START) / (NIGHT_END - NIGHT_START), 0, 1);

    flow.style.backgroundColor = rgbToCss(rgbLerp(dayBg, nightBg, t));

    textEls.forEach(el => {
      const day = dayTextByEl.get(el) || [255, 255, 255];
      el.style.color = rgbToCss(rgbLerp(day, nightText, t));
    });

    if (window.innerWidth >= CLOCK_COLOR_SCRUB_MIN_WIDTH) {
      clockEls.forEach(el => {
        const day = dayClockByEl.get(el) || [255, 255, 255];
        el.style.color = rgbToCss(rgbLerp(day, nightText, t));
      });
    } else {
      clockEls.forEach(el => {
        el.style.color = "";
      });
    }

    tagNodes.forEach(el => {
      const day = dayTagByEl.get(el) || [255, 255, 255];
      el.style.color = rgbToCss(day);
    });
  }

  function render(){
    const p = sectionProgress();
    const hourFloat = START_HOUR + (END_HOUR - START_HOUR) * p;

    updateClock(hourFloat);
    updateNightScrub(hourFloat);
  }

  window.addEventListener("scroll", render, { passive: true });
  window.addEventListener("resize", render);
  render();
})();