const isTouch = "ontouchstart" in document.documentElement;

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

const smoother = ScrollSmoother.create({
  wrapper: ".smooth-wrapper",
  content: ".smooth-content",
  smooth: window.innerWidth > 1024 ? 1.3 : 0.6,
  effects: true,
  normalizeScroll: true,
  ignoreMobileResize: true,
  preventOverscroll: true,
});

ScrollTrigger.defaults({
  scroller: ".smooth-wrapper",
  markers: false,
  pinType: "transform",
  anticipatePin: 1,
  toggleActions: "play pause resume reset",
});

window.addEventListener("load", () => {
  // force re-sync after load for all ScrollTriggers
  ScrollTrigger.refresh();

  const isDesktop = window.innerWidth > 1024;
  if (isDesktop) {
    // desktop behavior (existing pin & horizontal animation semantics)
    const clippingHorizontalScrolling = document.getElementById("landingClip");
    const clipPinWrap = document.getElementById("clipPinWrap");
    const clipAnimWrap = document.getElementById("clipAnimWrap");
    const getToValue1 = () => -(clipAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: clippingHorizontalScrolling,
      start: "top top",
      end: () => "+=" + clipAnimWrap.scrollWidth,
      pin: clipPinWrap,
      invalidateOnRefresh: true,
      scrub: 0.7,
    });

    gsap.fromTo(
      clipAnimWrap,
      {
        x: () => (clipAnimWrap.classList.contains("to-right") ? 0 : getToValue1()),
      },
      {
        x: () => (clipAnimWrap.classList.contains("to-right") ? getToValue1() : 0),
        ease: "none",
        scrollTrigger: {
          trigger: clippingHorizontalScrolling,
          start: "top top",
          end: () => "+=" + clipAnimWrap.scrollWidth / 1.1,
          invalidateOnRefresh: true,
          scrub: 0.7,
        },
      }
    );

    const clippingOverlay = clippingHorizontalScrolling.querySelector(".fow-black");
    const cliptl = gsap.timeline();
    cliptl.fromTo(
      clippingOverlay,
      { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" },
      { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" },
      0
    );

    ScrollTrigger.create({
      trigger: clippingHorizontalScrolling,
      start: () => "top top-=" + (clipAnimWrap.scrollWidth - window.innerWidth),
      end: () => "+=" + window.innerWidth,
      animation: cliptl,
      scrub: 0.7,
      markers: false,
    });

    const aboutHorizontalScrolling = document.getElementById("aboutScroll");
    const aboutPinWrap = document.getElementById("aboutPinWrap");
    const aboutAnimWrap = document.getElementById("aboutAnimWrap");
    const getToValue_about = () => -(aboutAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: aboutHorizontalScrolling,
      start: "top top",
      end: () => "+=" + aboutAnimWrap.scrollWidth,
      pin: aboutPinWrap,
      invalidateOnRefresh: true,
      scrub: 0.7,
    });

    gsap.fromTo(
      aboutAnimWrap,
      {
        x: () => (aboutAnimWrap.classList.contains("to-right") ? 0 : getToValue_about()),
      },
      {
        x: () =>
          aboutAnimWrap.classList.contains("to-right") ? getToValue_about() : 0,
        ease: "none",
        scrollTrigger: {
          trigger: aboutHorizontalScrolling,
          start: "top top",
          end: () => "+=" + aboutAnimWrap.scrollWidth / 1.1,
          invalidateOnRefresh: true,
          scrub: 0.7,
        },
      }
    );

    

    gsap.to(".about-tc h4, .about-tc p", {
      y: 0,
      opacity: 1,
      transformOrigin: "center",
      scrollTrigger: {
        markers: false,
        trigger: ".about-text-content",
        invalidateOnRefresh: true,
        start: "top 100%",
        toggleActions: "play pause pause reverse",
      },
    });

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".switch-image-section",
        pin: true,
        scrub: 0.35,
        start: "top 0%",
        end: "+=4000",
        markers: false,
        toggleActions: "play pause pause reverse",
      },
    });

    tl.to(".switch-in-image", {
      y: "-95%",
      opacity: 1,
      duration: 1,
      ease: "power2.out",
      stagger: 0.08,
    });

    tl.to(".switch-in-image", {
      scale: 1,
      duration: 0.6,
      ease: "power2.out",
    });

    const projectHorizontalScrolling = document.getElementById("projectSections");
    const projectPinWrap = document.getElementById("projectPinWrap");
    const projectAnimWrap = document.getElementById("projectAnimWrap");
    const getToValue3 = () => -(projectAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: projectHorizontalScrolling,
      start: "top top",
      end: () => "+=" + projectAnimWrap.scrollWidth,
      pin: projectPinWrap,
      invalidateOnRefresh: true,
      scrub: 0.7,
    });

    gsap.fromTo(
      projectAnimWrap,
      {
        x: () => (projectAnimWrap.classList.contains("to-right") ? 0 : getToValue3()),
      },
      {
        x: () => (projectAnimWrap.classList.contains("to-right") ? getToValue3() : 0),
        ease: "none",
        scrollTrigger: {
          trigger: projectHorizontalScrolling,
          start: "top top",
          end: () => "+=" + projectAnimWrap.scrollWidth / 1.1,
          invalidateOnRefresh: true,
          scrub: 0.7,
        },
      }
    );

    const footerHorizontalScrolling = document.getElementById("footerSection");
    const footerPinWrap = document.getElementById("footerPinWrap");
    const footerAnimWrap = document.getElementById("footerAnimWrap");
    const getToValueFooter = () => -(footerAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: footerHorizontalScrolling,
      start: "top top",
      end: () => "+=" + footerAnimWrap.scrollWidth,
      pin: footerPinWrap,
      invalidateOnRefresh: true,
      scrub: 0.7,
    });

    gsap.fromTo(
      footerAnimWrap,
      {
        x: () => (footerAnimWrap.classList.contains("to-right") ? 0 : getToValueFooter()),
      },
      {
        x: () => (footerAnimWrap.classList.contains("to-right") ? getToValueFooter() : 0),
        ease: "none",
        scrollTrigger: {
          trigger: footerHorizontalScrolling,
          start: "top top",
          end: () => "+=" + (footerAnimWrap.scrollWidth - window.innerWidth),
          invalidateOnRefresh: true,
          scrub: 0.7,
        },
      }
    );

    const footerOverlay = footerHorizontalScrolling.querySelector(".fow-black");
    const footertl = gsap.timeline();
    footertl.fromTo(
      footerOverlay,
      { clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)" },
      { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" },
      0
    );

    ScrollTrigger.create({
      trigger: footerHorizontalScrolling,
      start: () => "top top-=" + (footerAnimWrap.scrollWidth - window.innerWidth),
      end: () => "+=" + window.innerWidth,
      animation: footertl,
      scrub: 0.7,
      markers: false,
    });
  } else {
    // mobile fallback: simplify to native-like vertical scroll; avoid heavy pin/x translations
    gsap.set(["#landingClip .animation-wrap", "#aboutScroll .animation-wrap", "#projectSections .animation-wrap", "#footerSection .animation-wrap"], {
      x: 0,
      clearProps: "transform",
    });

    

    gsap.to(".about-tc h4, .about-tc p", {
      scrollTrigger: {
        trigger: ".about-text-content",
        start: "top 90%",
        end: "bottom 20%",
        scrub: 0.5,
      },
      y: 0,
      opacity: 1,
      duration: 0.7,
      ease: "power2.out",
    });

    gsap.utils.toArray(".switch-in-image").forEach((item, i) => {
      gsap.fromTo(
        item,
        { y: 30, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.7,
          ease: "power2.out",
          scrollTrigger: {
            trigger: item,
            start: "top 90%",
            end: "bottom 10%",
            scrub: 0.6,
          },
          delay: i * 0.05,
        }
      );
    });
  }

  // ScrollSmoother handles smooth scrolling automatically.
});
