//style
const toggleButton = document.getElementById("theme-toggle");
const body = document.querySelector("body");
const setTheme = (theme) => {
  body.dataset.theme = theme;
  localStorage.setItem("preferred-theme", theme);
};
const getTheme = () => {
  const theme = localStorage.getItem("preferred-theme");
  return theme || "dark";
};
const toggleTheme = () => {
  const currentTheme = body.dataset.theme;
  const newTheme = currentTheme === "light" ? "dark" : "light";
  setTheme(newTheme);
};
toggleButton.addEventListener("click", toggleTheme);
const preferredTheme = getTheme();
setTheme(preferredTheme);

// animations
// Initialize Lenis
const lenis = new Lenis({
  autoRaf: true,
  infinite: true,
});
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => {
  lenis.raf(time * 1000);
});
const images = document.querySelectorAll(".artwall-image");

const scaleMap = {};

function applyRandomScale() {
  images.forEach((img) => {
    const src = img.src;  

    if (!scaleMap[src]) {
      scaleMap[src] = Math.random() * 0.3 + 0.85;
    }

    img.style.transform = `scale(${scaleMap[src]})`;
  });
}

applyRandomScale();

const repeatItems = (parentEl, total = 0) => {
  const items = [...parentEl.children];
  for (let i = 0; i < total; i++) {
    const cln = items[i].cloneNode(true);
    parentEl.appendChild(cln);
  }
};

const parentEl = document.querySelector("[data-grid='copy']");

if (window.innerWidth >= 768) {
  repeatItems(parentEl, 6);
} else {
  repeatItems(parentEl, 2);
}

//gsap
document.addEventListener("DOMContentLoaded", (event) => {
  gsap.registerPlugin(ScrollTrigger);

// =============== LOADER ===============

function runLoaderAnimation() {
  const loaderText = document.querySelector(".loader-text");
  
  loaderText.textContent = "0";

  gsap.to(loaderText, {
    duration: 1,
    textContent: 100,
    snap: { textContent: 1 },
    onComplete: () => {
      const loaderTl = gsap.timeline();
      loaderTl
        .to(".loader-text", {
          duration: 1.5,
          yPercent: -800,
          opacity: 0,
          ease: "power3.inOut",
        })
        .to(
          ".loader",
          {
            duration: 1.5,
            yPercent: 110,
            ease: "power3.inOut",
          },
          0 
        )
        .from(
          ".slogan",
          {
            ease: "power3.out",
            filter: "blur(0.5rem)",
            yPercent: -100,
            opacity: 0,
          },
          0.5
        )
        .from(
          ".nav_item",
          {
            ease: "power3.out",
            filter: "blur(0.5rem)",
            yPercent: -100,
            opacity: 0,
            stagger: 0.05,
          },
          0.55
        );
    },
  });
}

runLoaderAnimation();

window.addEventListener("pageshow", function (event) {
  if (event.persisted) {
    console.log("Page was restored from bfcache. Resetting and re-running loader.");
    gsap.set("#logo", { yPercent: 0, filter: "blur(0)", opacity: 1 });
    gsap.set(".loader", { yPercent: -101 });
  }
});


// =============== STRONA: PRZEJŚCIA MIĘDZY LINKAMI ===============
(function initPageTransitions() {
  document.querySelectorAll("a").forEach((link) => {
    const isSameDomain = link.host === window.location.host;
    if (!isSameDomain) return;

    link.addEventListener("click", function (event) {
      event.preventDefault();
      const targetUrl = this.getAttribute("href");

      // Zakrycie loaderem od góry
      gsap.fromTo(
        ".loader",
        { yPercent: -101 },
        {
          yPercent: 0,
          ease: "power3.inOut",
          duration: 0.5,
          onComplete: () => {
            window.location.href = targetUrl;
          },
        }
      );

      // Animacja logo
      gsap.to("#logo", {
        duration: 0.5,
        yPercent: -50,
        filter: "blur(1rem)",
        opacity: 0,
        ease: "power3.in",
        onComplete: () => {
          window.location.href = targetUrl;
        },
      });
    });
  });
})();
  //cursor
  const cursor = document.querySelector(".cursor");
  const cursorStroke = document.querySelector(".cursor_stroke");
  const linksAndButtons = document.querySelectorAll("a, button");

  gsap.set([cursor, cursorStroke], { xPercent: -50, yPercent: -50 });

  const xC = gsap.quickSetter(cursor, "x", "px");
  const yC = gsap.quickSetter(cursor, "y", "px");

  window.addEventListener("mousemove", (e) => {
    xC(e.x);
    yC(e.y);
    gsap.to(cursorStroke, {
      duration: 0.2,
      x: e.clientX,
      y: e.clientY,
    });
  });

  const handleHover = (
    element,
    opacityOnHover,
    scaleOnHover,
    duration = 0.4,
    ease = "power3.inOut"
  ) => {
    element.addEventListener("mouseover", () => {
      cursor.style.opacity = opacityOnHover;
      cursorStroke.style.opacity = opacityOnHover;
      gsap.to(cursorStroke, { scale: scaleOnHover, duration, ease });
    });

    element.addEventListener("mouseout", () => {
      cursor.style.opacity = 1;
      cursorStroke.style.opacity = 1;
      gsap.to(cursorStroke, { scale: 1, duration, ease });
    });
  };

  linksAndButtons.forEach((element) => handleHover(element, 0, 1.75)); // Default for links and buttons
  document.addEventListener("mousedown", function (event) {
    gsap.to(cursorStroke, {
      scale: 1.5,
      ease: "power2.in",
    });
  });
  document.addEventListener("mouseup", function (event) {
    gsap.to(cursorStroke, {
      scale: 1,
      delay: 0.3,
      ease: "power2.out",
    });
  });
});