// GSAP logic as received
const items = document.querySelectorAll(".item");
const covers = document.querySelectorAll(".cover");
const actionButtons = document.querySelectorAll(".action-button");
const isMobile = window.innerWidth <= 768;

const expand = (item, i) => {
  const cover = item.querySelector(".cover");
  const button = item.querySelector(".action-button");

  items.forEach((it, ind) => {
    if (i === ind) return;
    it.clicked = false;
    const otherCover = it.querySelector(".cover");
    const otherButton = it.querySelector(".action-button");

    gsap.to(otherCover, { opacity: 1, duration: 0.8, ease: "power2.out" });
    gsap.to(otherButton, {
      opacity: 0,
      y: 20,
      duration: 0.5,
      ease: "power2.out",
    });
    gsap.to(it, { scale: 1, rotationY: 0, duration: 0.8, ease: "power2.out" });
  });

  if (isMobile) {
    gsap.to(items, {
      height: item.clicked ? "18vh" : "12vh",
      duration: 1.5,
      ease: "elastic(1, .6)",
    });

    item.clicked = !item.clicked;
    gsap.to(item, {
      height: item.clicked ? "35vh" : "18vh",
      duration: 2,
      ease: "elastic(1, .3)",
      scale: item.clicked ? 1.02 : 1,
    });
  } else {
    gsap.to(items, {
      width: item.clicked ? "18vw" : "12vw",
      duration: 2,
      ease: "elastic(1, .6)",
    });

    item.clicked = !item.clicked;
    gsap.to(item, {
      width: item.clicked ? "48vw" : "18vw",
      duration: 2.5,
      ease: "elastic(1, .3)",
      scale: item.clicked ? 1.05 : 1,
      rotationY: item.clicked ? 5 : 0,
    });
  }

  gsap.to(cover, {
    opacity: item.clicked ? 0 : 1,
    duration: 0.8,
    ease: "power2.out",
  });

  gsap.to(button, {
    opacity: item.clicked ? 1 : 0,
    y: item.clicked ? 0 : 20,
    duration: item.clicked ? 0.8 : 0.5,
    delay: item.clicked ? 0.3 : 0,
    ease: "power2.out",
  });
};

items.forEach((item, i) => {
  item.clicked = false;
  item.addEventListener("click", (e) => {
    if (!e.target.closest(".action-button")) expand(item, i);
  });

  item.addEventListener("mouseenter", () => {
    if (!item.clicked) {
      gsap.to(item, { scale: 1.03, duration: 0.3, ease: "power2.out" });
    }
  });

  item.addEventListener("mouseleave", () => {
    if (!item.clicked) {
      gsap.to(item, { scale: 1, duration: 0.3, ease: "power2.out" });
    }
  });
});

document.addEventListener("DOMContentLoaded", () => {
  gsap.fromTo(
    items,
    { opacity: 0, y: 50, scale: 0.8 },
    {
      opacity: 1,
      y: 0,
      scale: 1,
      duration: 1,
      stagger: 0.2,
      ease: "back.out(1.7)",
    }
  );

  setTimeout(() => expand(items[0], 0), 1200);
});