document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.classList.add("fc-reveal-ready");
  if (window.__MD_INIT_STARTED__) return;
  window.__MD_INIT_STARTED__ = true;

  const heritageSection = document.querySelector(".heritage_section");
  const isMobile = window.matchMedia("(max-width: 991px)").matches;

  const isInHeroRentals = (el) => !!el.closest("#hero-rentals");
  const shouldSkipOnMobile = (el) => isMobile && isInHeroRentals(el);

  const isInFirstScreen = (el) => {
    const r = el.getBoundingClientRect();
    return r.top < window.innerHeight && r.bottom > 0;
  };

  document.querySelectorAll("[data-md-box], [data-md-reveal]").forEach((el) => {
    if (heritageSection && el.closest(".heritage_section")) return;
    if (shouldSkipOnMobile(el)) return;
    if (!isInFirstScreen(el)) return;
    el.style.opacity = "0";
    el.dataset.mdPreHidden = "1";
  });

  const initMd = () => {
    if (!window.gsap || !window.ScrollTrigger || !window.SplitType) {
      window.__MD_READY__ = true;
      window.dispatchEvent(new Event("md-ready"));
      return;
    }

    gsap.registerPlugin(ScrollTrigger);

    const splitTargets = Array.from(document.querySelectorAll("[text-split]"))
      .filter((el) => !heritageSection || !el.closest(".heritage_section"))
      .filter((el) => !shouldSkipOnMobile(el))
      .filter((el) => !el.querySelector(".line"));

    if (splitTargets.length) {
      splitTargets.forEach((el) => new SplitType(el, { types: "lines", tagName: "div" }));
    }

    const LINE_FROM = {
      opacity: 0,
      yPercent: 50,
      z: -120,
      rotateX: 4,
      filter: "blur(10px)"
    };

    const LINE_TO = {
      opacity: 1,
      yPercent: 0,
      z: 0,
      rotateX: 0,
      filter: "blur(0px)",
      duration: 0.9,
      ease: "power3.out"
    };

    const GAP_PX = 22;
    const STAGGER_EACH = 0.08;

    document.querySelectorAll("[data-md-box]").forEach((mdBox) => {
      if (heritageSection && mdBox.closest(".heritage_section")) return;
      if (shouldSkipOnMobile(mdBox)) return;

      const splitEls = Array.from(mdBox.querySelectorAll("[text-split]"));
      if (!splitEls.length) return;

      const lineGroups = splitEls
        .map((el) => Array.from(el.querySelectorAll(".line")))
        .filter((lines) => lines.length);

      if (!lineGroups.length) return;

      mdBox.style.perspective = mdBox.style.perspective || "1200px";
      splitEls.forEach((el) => (el.style.transformStyle = "preserve-3d"));

      lineGroups.forEach((lines) => {
        const center = (lines.length - 1) / 2;
        gsap.set(lines, {
          ...LINE_FROM,
          y: (i) => (i - center) * GAP_PX,
          transformOrigin: "0% 0%"
        });
      });

      ScrollTrigger.create({
        trigger: mdBox,
        start: "top 85%",
        once: true,
        onEnter: () => {
          if (mdBox.dataset.mdPreHidden === "1") {
            gsap.set(mdBox, { opacity: 1 });
            delete mdBox.dataset.mdPreHidden;
          }

          const tl = gsap.timeline();

          lineGroups.forEach((lines, idx) => {
            const center = (lines.length - 1) / 2;

            tl.fromTo(
              lines,
              { ...LINE_FROM, y: (i) => (i - center) * GAP_PX },
              {
                ...LINE_TO,
                y: 0,
                stagger: { each: STAGGER_EACH, from: "start" }
              },
              idx === 0 ? 0 : ">"
            );
          });
        }
      });
    });

    document.querySelectorAll("[data-md-reveal]").forEach((block) => {
      if (heritageSection && block.closest(".heritage_section")) return;
      if (shouldSkipOnMobile(block)) return;

      gsap.set(block, { opacity: 0, y: 18 });

      ScrollTrigger.create({
        trigger: block,
        start: "top 92%",
        once: true,
        onEnter: () => {
          gsap.to(block, {
            opacity: 1,
            y: 0,
            duration: 0.8,
            ease: "power3.out"
          });
        }
      });
    });

    requestAnimationFrame(() => {
      ScrollTrigger.refresh();
      requestAnimationFrame(() => {
        window.__MD_READY__ = true;
        window.dispatchEvent(new Event("md-ready"));
      });
    });
  };

  const waitForFlagOrEvent = (flagName, eventName, timeoutMs = 12000) =>
    new Promise((resolve) => {
      if (window[flagName]) return resolve();

      const onEvent = () => {
        cleanup();
        resolve();
      };

      let tid = setTimeout(() => {
        cleanup();
        resolve();
      }, timeoutMs);

      const cleanup = () => {
        window.removeEventListener(eventName, onEvent);
        clearTimeout(tid);
      };

      window.addEventListener(eventName, onEvent, { once: true });
    });

  const heritage = document.querySelector(".heritage_section");
  const interaction = document.querySelector(".interaction_fs");

  const start = async () => {
    if (heritage) {
      await waitForFlagOrEvent("__HERITAGE_READY__", "HERITAGE_READY");
    }
    if (interaction) {
      await waitForFlagOrEvent("__INTERACTION_READY__", "INTERACTION_READY");
    }
    initMd();
  };

  start();
});