/* ============================================================
   Taberna do Dragão Dourado · interações
   ============================================================ */
(function () {
  "use strict";

  const prefersReduced = matchMedia("(prefers-reduced-motion: reduce)").matches;

  /* ---------- Opening animation ---------- */
  const intro = document.getElementById("intro");
  window.addEventListener("load", () => {
    setTimeout(() => {
      if (intro) intro.classList.add("is-done");
      document.body.classList.remove("is-loading");
      setTimeout(() => intro && intro.remove(), 700);
    }, prefersReduced ? 0 : 2200);
  });

  /* ---------- HUD state ---------- */
  const hud = document.getElementById("hud");
  const onScroll = () => hud.classList.toggle("is-scrolled", window.scrollY > 40);
  onScroll();
  window.addEventListener("scroll", onScroll, { passive: true });

  /* ---------- Reveal on scroll (staggered items) ---------- */
  if ("IntersectionObserver" in window && !prefersReduced) {
    const io = new IntersectionObserver((entries, obs) => {
      entries.forEach((e) => {
        if (e.isIntersecting) { e.target.classList.add("is-visible"); obs.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });

    document.querySelectorAll(".items").forEach((grid) => {
      grid.querySelectorAll(".reveal").forEach((el, i) => {
        el.style.transitionDelay = (i % 4) * 70 + "ms";
      });
    });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
  } else {
    document.querySelectorAll(".reveal").forEach((el) => el.classList.add("is-visible"));
  }

  /* ============================================================
     Playful "purchase": clicking an item spends gold from the
     purse and floats a -cost coin popup. Purely for fun.
     ============================================================ */
  const purseEl = document.getElementById("purse");
  let purse = parseInt(purseEl ? purseEl.textContent : "0", 10) || 0;

  document.querySelectorAll(".item").forEach((item) => {
    item.addEventListener("click", (e) => {
      const cost = parseInt(item.dataset.cost || "0", 10);
      if (!cost) return;

      if (purse >= cost) {
        purse -= cost;
        if (purseEl) purseEl.textContent = String(purse);
        floatCoin(e.clientX, e.clientY, "-" + cost + " 🪙");
      } else {
        floatCoin(e.clientX, e.clientY, "sem ouro!");
      }
    });
  });

  function floatCoin(x, y, text) {
    if (prefersReduced) return;
    const pop = document.createElement("span");
    pop.className = "coinpop";
    pop.textContent = text;
    pop.style.left = x + "px";
    pop.style.top = y + "px";
    document.body.appendChild(pop);
    setTimeout(() => pop.remove(), 900);
  }

  /* ---------- Active nav link ---------- */
  const links = document.querySelectorAll(".quests a");
  const sections = document.querySelectorAll("main section[id]");
  if ("IntersectionObserver" in window && links.length) {
    const spy = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          links.forEach((a) =>
            a.style.setProperty(
              "color",
              a.getAttribute("href") === "#" + entry.target.id ? "var(--gold)" : ""
            )
          );
        }
      });
    }, { rootMargin: "-45% 0px -50% 0px" });
    sections.forEach((s) => spy.observe(s));
  }
})();
