// Add this at the very top of custom-animation script
if (typeof gsap !== "undefined" && typeof SplitText !== "undefined") {
    gsap.registerPlugin(SplitText);
}

// Robust Vanilla JS replacements for SplitText
function splitToChars(target) {
    let elements = [];
    if (typeof target === "string") {
        elements = Array.from(document.querySelectorAll(target));
    } else if (target instanceof NodeList || Array.isArray(target)) {
        elements = Array.from(target);
    } else if (target) {
        elements = [target];
    }

    const allChars = [];
    elements.forEach(el => {
        if (!el || !el.textContent) return;
        const text = el.textContent;
        el.innerHTML = "";
        [...text].forEach(char => {
            const span = document.createElement("span");
            span.style.display = "inline-block";
            span.textContent = char === " " ? "\u00A0" : char;
            el.appendChild(span);
            allChars.push(span);
        });
    });
    return { chars: allChars };
}

function splitToLines(target, childClass) {
    let elements = [];
    if (typeof target === "string") {
        elements = Array.from(document.querySelectorAll(target));
    } else if (target instanceof NodeList || Array.isArray(target)) {
        elements = Array.from(target);
    } else if (target) {
        elements = [target];
    }

    const allLines = [];
    elements.forEach(el => {
        if (!el || !el.textContent) return;
        const text = el.textContent.trim();
        if (!text) return;
        
        const words = text.split(/\s+/);
        el.innerHTML = "";
        words.forEach(word => {
            const span = document.createElement("span");
            span.style.display = "inline-block";
            if (childClass) span.classList.add(childClass);
            span.textContent = word + "\u00A0";
            el.appendChild(span);
            allLines.push(span);
        });
    });
    return { lines: allLines };
}

// All Animations
function init() {
    // Check if required scripts loaded before running animations
    if (typeof gsap !== "undefined") {
        try {
            masterHeroReveal();
        } catch (err) {
            console.error("Animation failed, displaying page fallback:", err);
            $('.loading-screen').hide();
            $('#wrapper').show();
            $('#page-content-wrapper').show();
        }
    } else {
        console.warn("GSAP missing. Revealing page immediately.");
        $('.loading-screen').hide();
        $('#wrapper').show();
        $('#page-content-wrapper').show();
    }
}

// Master Timeline
function masterHeroReveal() {
    const loader = loadingScreenReveal();
    const hero = heroReveal();

    const masterTl = gsap.timeline();
    if (loader) masterTl.add(loader);
   // if (hero) masterTl.add(hero, "<1");
    if (hero) masterTl.add(hero, "-=2.2");

    return masterTl;
}

// Loading Screen
function loadingScreenReveal() {
    const loadingScreen = select(".loading-screen");
    if (!loadingScreen) return null;

    const siStudio = select("#load-si-studio");
    const copyright = select("#load-copyright");
    const textRotator = selectAll(".text-rotater");
    const bgRevealer = selectAll(".revealer");

    const skill1 = select("#skill-1");
    const skill2 = select("#skill-2");
    const skill3 = select("#skill-3");

    const skill1Split = skill1 ? splitToChars(skill1) : { chars: [] };
    const skill2Split = skill2 ? splitToChars(skill2) : { chars: [] };
    const skill3Split = skill3 ? splitToChars(skill3) : { chars: [] };

    const siStudioSplit = siStudio ? splitToChars(siStudio) : { chars: [] };
    const copyrightSplit = copyright ? splitToChars(copyright) : { chars: [] };

    if (textRotator.length) gsap.set(textRotator, { display: "flex" });
    gsap.set(loadingScreen, { display: "flex", autoAlpha: 1 });

    const validSkillChars = [
        ...(skill1Split.chars || []),
        ...(skill2Split.chars || []),
        ...(skill3Split.chars || [])
    ];
    if (validSkillChars.length > 0) {
        gsap.set(validSkillChars, { transformOrigin: "50% 50% -34" });
    }

    const easeSetting = gsap.parseEase("myEaseSmooth") ? "myEaseSmooth" : "power2.inOut";
    const tl = gsap.timeline({ defaults: { duration: 1.34, ease: easeSetting } });

    if (siStudioSplit.chars.length) tl.from(siStudioSplit.chars, { y: 34, stagger: 0.03 }, "<");
    if (copyrightSplit.chars.length) tl.from(copyrightSplit.chars, { y: 34, stagger: 0.02 }, "<.1");

    if (skill1Split.chars.length) {
        tl.from(skill1Split.chars, { rotationX: -90, opacity: 0, duration: 0.89, stagger: 0.02 }, "<");
        tl.to(skill1Split.chars, { rotationX: 90, opacity: 0, duration: 0.89, stagger: 0.02 }, "<1");
    }
    if (skill2Split.chars.length) {
        tl.from(skill2Split.chars, { rotationX: -90, opacity: 0, duration: 0.89, stagger: 0.02 }, "<");
        tl.to(skill2Split.chars, { rotationX: 90, opacity: 0, duration: 0.89, stagger: 0.02 }, "<1");
    }
    if (skill3Split.chars.length) {
        tl.from(skill3Split.chars, { rotationX: -90, opacity: 0, duration: 0.89, stagger: 0.02 }, "<");
        tl.to(skill3Split.chars, { rotationX: 90, opacity: 0, duration: 0.89, stagger: 0.02 }, "<1");
    }

    if (siStudioSplit.chars.length) tl.to(siStudioSplit.chars, { y: -34, stagger: 0.02 }, "<");
    if (copyrightSplit.chars.length) tl.to(copyrightSplit.chars, { y: -34, stagger: 0.01 }, "<");
    //if (bgRevealer.length) tl.to(bgRevealer, { xPercent: 101, ease: "power2.inOut", stagger: 0.08 }, "<.3");
    
    tl.to(loadingScreen, { 
        display: "none", 
        autoAlpha: 0, 
        onComplete: function() {
            $('.body-responsive').css("background", "none");
            $('#wrapper').show();
            $('#page-content-wrapper').show();
        } 
    }, "<.1");

    return tl;
}

// Main Page Animation
function heroReveal() {
    const mainPage = select(".main-container");

    const featuredImage = select("#featured-image");
    const heroImage = select("#hero-image");
    const heroImageAlt = select("#hero-image-replace");
    const imageOverlay = select("#overlay");
    const redBox = select("#red-box");
    const featuredText = select("#featured-text");
    const siLogo = select("#si-logo");
    const menuText = select("#menu-text");
    const navLinksText = selectAll(".menu-list-text");
    const letsTalk = select("#lets-talk-text");
    const welcome = select("#welcome-text");
    const scrollDown = select("#scroll-down-text");
    const aboutLine = select(".hero-about-line");
    const behance = select("#behance-hero");
    const coordinates = select("#coords-hero");

    const menuTextSplit = menuText ? splitToChars(menuText) : { chars: [] };
    const letsTalkSplit = letsTalk ? splitToChars(letsTalk) : { chars: [] };
    const welcomeSplit = welcome ? splitToChars(welcome) : { chars: [] };
    const scrollDownSplit = scrollDown ? splitToChars(scrollDown) : { chars: [] };
    const featuredTextSplit = featuredText ? splitToChars(featuredText) : { chars: [] };
    const behanceSplit = behance ? splitToChars(behance) : { chars: [] };
    const coordinatesSplit = coordinates ? splitToChars(coordinates) : { chars: [] };

    const heroTitle = select("#hero-titles");
    const heroTitleSplit = heroTitle ? splitToLines(heroTitle, "heroTitleChild") : { lines: [] };

    const aboutTitle = selectAll(".about-title");
    const aboutTitleSplit = aboutTitle.length ? splitToLines(aboutTitle, "aboutTitleChild") : { lines: [] };

    if (mainPage) gsap.set(mainPage, { autoAlpha: 1 });

    const tl = gsap.timeline({ defaults: { duration: 1.34, ease: "power2.inOut" } });

    if (featuredImage) tl.from(featuredImage, { opacity: 0, scale: 1.5 }, "<1");
    if (heroImage) tl.from(heroImage, { opacity: 0, scale: 1.5 }, "<");
    if (heroImageAlt) tl.from(heroImageAlt, { opacity: 0, scale: 1.5 }, "<");
    if (imageOverlay) tl.from(imageOverlay, { opacity: 0, scale: 1.5 }, "<");
    if (redBox) tl.from(redBox, { xPercent: -101, ease: "power2.inOut" }, "<.5");
    if (featuredTextSplit.chars.length) tl.from(featuredTextSplit.chars, { y: 34, stagger: 0.02 }, "<.1");
    if (siLogo) tl.from(siLogo, { y: 89 }, "<");
    if (menuTextSplit.chars.length) tl.from(menuTextSplit.chars, { y: 21, stagger: 0.03 }, "<.1");
    if (navLinksText.length) tl.from(navLinksText, { y: 55, stagger: 0.08 }, "<.2");
    if (letsTalkSplit.chars.length) tl.from(letsTalkSplit.chars, { y: 21, stagger: 0.02 }, "<.1");
    if (welcomeSplit.chars.length) tl.from(welcomeSplit.chars, { y: 21, stagger: 0.02 }, "<.1");
    if (scrollDownSplit.chars.length) tl.from(scrollDownSplit.chars, { y: 21 }, "<.03");
    if (heroTitleSplit.lines.length) tl.from(heroTitleSplit.lines, { y: 144, stagger: 0.13 }, "<");
    if (aboutTitleSplit.lines.length) tl.from(aboutTitleSplit.lines, { y: 144, stagger: 0.13 }, "<.03");
    if (aboutLine) tl.from(aboutLine, { xPercent: -101, ease: "power2.inOut" }, "<.5");
    if (behanceSplit.chars.length) tl.from(behanceSplit.chars, { y: 21, stagger: 0.02 }, "<.3");
    if (coordinatesSplit.chars.length) tl.from(coordinatesSplit.chars, { y: 21, stagger: 0.02 }, "<.1");

    return tl;
}

// Projects Hover
function projectCardHover() {
    const projectCards = selectAll(".card-lists");

    projectCards.forEach((card) => {
        let title = card.querySelectorAll(".line-title");
        let titleSplit = splitToChars(title);

        card.addEventListener("mouseover", () => {
            gsap.to(titleSplit.chars, { yPercent: -101, duration: 0.89, stagger: 0.01, ease: "myEaseSmooth" });
        });

        card.addEventListener("mouseleave", () => {
            gsap.to(titleSplit.chars, { yPercent: 0, duration: 0.89, stagger: 0.01, ease: "myEaseSmooth" });
        });
    });
}

// Inner Page Titles Reveal
function innerPageTitleReveal() {
    const innerPageTitle = selectAll(".inner-page-titles");

    innerPageTitle.forEach((title) => {
        const number = title.querySelector(".section-number-text");
        const titleName = title.querySelector(".section-title-text");

        const numberSplit = splitToChars(number);
        const titleNameSplit = splitToChars(titleName);

        const tl = gsap.timeline({ id: "tl1", defaults: { duration: 1.34, ease: "myEaseSmooth" } });

        tl.from(numberSplit.chars, { y: 34, stagger: 0.03 });
        tl.from(titleNameSplit.chars, { y: 89, stagger: 0.03 }, "<");

        if (typeof ScrollTrigger !== "undefined") {
            ScrollTrigger.create({ trigger: title, start: "top 100%", animation: tl });
        }
    });
}

// Brief Text Reveal
function briefTextReveal() {
    const sectionBriefs = selectAll(".brief-wrap");

    sectionBriefs.forEach((brief) => {
        const siBrief = brief.querySelector(".brief-text");

        const siBriefSplit = splitToLines(siBrief, "siStudioBriefChild");

        const tl = gsap.timeline({ id: "tl1", defaults: { duration: 1.34, ease: "myEaseSmooth" } });

        tl.from(siBriefSplit.lines, { y: 89, stagger: 0.13 }, "<.3");

        if (typeof ScrollTrigger !== "undefined") {
            ScrollTrigger.create({ trigger: brief, start: "top 100%", animation: tl });
        }
    });
}

// Year Reveal
function yearReveal() {
    const yearInspirations = selectAll(".inspiration-year-wrap");

    yearInspirations.forEach((year) => {
        const yearNumber = year.querySelectorAll(".section-sub-titles");

        const yearNumberSplit = splitToChars(yearNumber);

        const tl = gsap.timeline({ id: "tl1", defaults: { duration: 1.34, ease: "myEaseSmooth" } });

        tl.from(yearNumberSplit.chars, { y: 34, stagger: 0.02 });

        if (typeof ScrollTrigger !== "undefined") {
            ScrollTrigger.create({ trigger: year, start: "top 100%", animation: tl });
        }
    });
}

// Project Cards Reveal
function projectCardsReveal() {
    const projectCard = selectAll(".card-lists");

    projectCard.forEach((card) => {
        const tl = gsap.timeline({ id: "tl1", defaults: { duration: 1.34, ease: "power2.inOut" } });

        tl.from(card, { xPercent: -101 });

        if (typeof ScrollTrigger !== "undefined") {
            ScrollTrigger.create({ trigger: card, start: "top 100%", animation: tl });
        }
    });
}

// Short Services Reveal
function shortServicesReveal() {
    const services = select("#short-services");

    const servicesSplit = splitToLines(services, "servicesChild");

    const tl = gsap.timeline({ id: "tl1", defaults: { duration: 1.34, ease: "myEaseSmooth" } });

    tl.from(servicesSplit.lines, { y: 89, stagger: 0.13 });

    if (typeof ScrollTrigger !== "undefined") {
        ScrollTrigger.create({ trigger: services, start: "top 100%", animation: tl });
    }
}

// On Window Load
window.addEventListener("load", () => {
    // Check if the user has already seen the intro during this browser session
    if (sessionStorage.getItem('logoLoad') === null) {  
        sessionStorage.setItem('logoLoad', 'true');
        init(); // <--- ONLY run splash/loader animation on initial load
    } else {
        // Skip animation on subpages or refreshes
        $('.loading-screen').hide();
        $('.body-responsive').css("background", "none");
        $('#wrapper').show();
        $('#page-content-wrapper').show();
    }	
    
    setTimeout(function() {
        $('.logo-load').hide();
        $('#page-content-wrapper').show();
    }, 4000);
});