/* ============================================================
   Forno d'Ouro · 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(), 800);
    }, prefersReduced ? 0 : 2000);
  });

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

  /* ============================================================
     Two-world switch (accessible tabs)
     ============================================================ */
  const switchEl = document.querySelector(".switch");
  const tabs = Array.from(document.querySelectorAll(".switch__tab"));
  const panels = {
    "tab-aqui": document.getElementById("panel-aqui"),
    "tab-levar": document.getElementById("panel-levar"),
  };

  function activate(tab) {
    tabs.forEach((t) => {
      const selected = t === tab;
      t.classList.toggle("is-active", selected);
      t.setAttribute("aria-selected", String(selected));
      t.tabIndex = selected ? 0 : -1;

      const panel = panels[t.id];
      if (panel) {
        panel.classList.toggle("is-active", selected);
        panel.hidden = !selected;
      }
    });
    // slide the pill
    switchEl.setAttribute("data-active", tab.id === "tab-levar" ? "levar" : "aqui");
    // re-run reveal on the freshly shown panel
    revealWithin(panels[tab.id]);
  }

  tabs.forEach((tab, i) => {
    tab.addEventListener("click", () => activate(tab));
    // keyboard arrow navigation between tabs
    tab.addEventListener("keydown", (e) => {
      if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
      e.preventDefault();
      const dir = e.key === "ArrowRight" ? 1 : -1;
      const next = tabs[(i + dir + tabs.length) % tabs.length];
      next.focus();
      activate(next);
    });
  });

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

    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
  } else {
    document.querySelectorAll(".reveal").forEach((el) => el.classList.add("is-visible"));
  }

  // reveal any not-yet-shown items inside a panel when it becomes visible
  function revealWithin(panel) {
    if (!panel) return;
    panel.querySelectorAll(".reveal:not(.is-visible)").forEach((el) => {
      if (prefersReduced || !io) { el.classList.add("is-visible"); return; }
      // if already in view, show immediately; otherwise let the observer handle it
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.95) el.classList.add("is-visible");
      else io.observe(el);
    });
  }
})();
