import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export function initAnimations({ reduced }) {
    if (reduced) return;

    const context = gsap.context(() => {
        gsap.from('.site-header .logo-lockup, .site-header .nav-link, .site-header .nav-enquiry, .site-header .menu-toggle', {
            y: -12,
            opacity: 0,
            duration: 0.6,
            stagger: 0.04,
            delay: 0.08,
            ease: 'power3.out',
        });

        const homePage = document.querySelector('.home-page');
        if (homePage) {
            gsap.timeline({ defaults: { ease: 'power3.out' } })
                .from('.home-hero-copy h1', { y: 28, opacity: 0, duration: 0.9 }, 0.18)
                .from('.home-hero-copy .hero-subhead, .home-hero-copy > p:not(.hero-subhead), .home-hero-copy .hero-actions', { y: 16, opacity: 0, duration: 0.65, stagger: 0.08 }, 0.42)
                .from('.home-hero-media', { clipPath: 'inset(0 0 10% 0)', opacity: 0, duration: 1.05, ease: 'power2.inOut' }, 0.22);

            const heroImg = document.querySelector('.home-hero-media img');
            if (heroImg) {
                gsap.set(heroImg, { scale: 1.12, transformOrigin: '50% 50%' });
                gsap.to(heroImg, {
                    yPercent: 10,
                    ease: 'none',
                    scrollTrigger: { trigger: '.home-hero', start: 'top top', end: 'bottom top', scrub: true },
                });
            }

            revealChildren('.home-about-copy', 0.08);
            revealMedia('.home-about-media');
            revealChildren('.home-products-header', 0.08);

            ScrollTrigger.batch('.home-product-panel', {
                start: 'top 88%',
                once: true,
                onEnter: batch => batch.forEach((panel, i) => {
                    gsap.from(panel, { x: i % 2 === 0 ? -28 : 28, opacity: 0, duration: 0.85, ease: 'power3.out' });
                }),
            });

            revealChildren('.sectors-heading > div', 0.08);
            revealSectorCards();

            const qualityStory = document.querySelector('.quality-story');
            if (qualityStory) {
                gsap.timeline({ defaults: { ease: 'power3.out' }, scrollTrigger: { trigger: qualityStory, start: 'top 80%', once: true } })
                    .from('.quality-story-visual', { y: 18, opacity: 0, clipPath: 'inset(7% 0 0 0 round 10px)', duration: 0.9 }, 0)
                    .from('.quality-story-heading > *', { y: 14, opacity: 0, duration: 0.68, stagger: 0.08 }, 0.12)
                    .from('.quality-story-list article', { y: 10, opacity: 0, duration: 0.62, stagger: 0.07 }, 0.34);

                const qualityImg = qualityStory.querySelector('.quality-story-visual img');
                if (qualityImg) {
                    gsap.set(qualityImg, { scale: 1.1, transformOrigin: '50% 50%' });
                    gsap.to(qualityImg, {
                        yPercent: 8,
                        ease: 'none',
                        scrollTrigger: { trigger: '.quality-story-visual', start: 'top bottom', end: 'bottom top', scrub: true },
                    });
                }
            }

            const processSection = document.querySelector('.process-storyboard-section');
            if (processSection) {
                gsap.timeline({ defaults: { ease: 'power3.out' }, scrollTrigger: { trigger: processSection, start: 'top 80%', once: true } })
                    .from('.process-storyboard-header > *', { y: 14, opacity: 0, duration: 0.72, stagger: 0.08 }, 0)
                    .from('.process-panel > .media-image', { clipPath: 'inset(0 0 100% 0)', duration: 0.85, stagger: 0.09, ease: 'power2.inOut' }, 0.22)
                    .from('.process-panel-meta', { y: 10, opacity: 0, duration: 0.6, stagger: 0.09 }, 0.5);
            }

            revealChildren('.home-commitment-grid > div:first-child', 0.08);
            revealChildren('.home-commitment-grid > div:last-child', 0.08);
        } else {
            const aboutPage = document.querySelector('.about-page');
            if (aboutPage) {
                gsap.timeline({ defaults: { ease: 'power3.out' } })
                    .from('.about-hero .breadcrumb', { y: 12, opacity: 0, duration: 0.5 }, 0.12)
                    .from('.about-hero-text > .eyebrow, .about-hero-text > h1, .about-hero-intro > *', { y: 16, opacity: 0, duration: 0.78, stagger: 0.08 }, 0.2)
                    .from('.about-hero-media', { clipPath: 'inset(0 0 10% 0)', opacity: 0, duration: 0.95, ease: 'power2.inOut' }, 0.34);

                revealMedia('.about-manufacturer-media');
                revealChildren('.about-manufacturer-copy > div:first-child');
                revealChildren('.about-manufacturer-copy > div:last-child');
                revealChildren('.about-values-heading');
                revealChildren('.sectors-heading > div');
                revealChildren('.about-why-heading');
                revealChildren('.about-promise');

                ScrollTrigger.batch('.about-values-list article, .about-reasons article', {
                    start: 'top 90%',
                    once: true,
                    batchMax: 4,
                    onEnter: batch => gsap.from(batch, { y: 14, opacity: 0, duration: 0.75, stagger: 0.07, ease: 'power3.out' }),
                });
                revealSectorCards();
            }

            const pageHero = document.querySelector('.page-hero, .product-hero, .article-hero');
            if (pageHero) {
                const pageHeroTimeline = gsap.timeline({ defaults: { ease: 'power3.out' } })
                    .from(pageHero.querySelector('.breadcrumb'), { y: 10, opacity: 0, duration: 0.45 }, 0.12)
                    .from(pageHero.querySelectorAll('.eyebrow, h1, .article-deck, .publisher, .product-hero-grid > div > p, .hero-actions'), { y: 20, opacity: 0, duration: 0.65, stagger: 0.065 }, 0.2);
                const pageHeroMedia = pageHero.querySelector('.image-placeholder');
                if (pageHeroMedia) pageHeroTimeline.from(pageHeroMedia, { clipPath: 'inset(0 0 10% 0)', opacity: 0, duration: 0.9 }, 0.3);
            }

            if (!aboutPage && document.querySelector('.about-why')) {
                revealChildren('.about-why-heading');
                ScrollTrigger.batch('.about-reasons article', {
                    start: 'top 90%',
                    once: true,
                    onEnter: batch => gsap.from(batch, { y: 14, opacity: 0, duration: 0.72, stagger: 0.07, ease: 'power3.out' }),
                });
            }

            const featureIndex = document.querySelector('.feature-index');
            if (featureIndex) {
                revealChildren('.feature-index-heading');
                ScrollTrigger.batch(featureIndex.querySelectorAll('.spec-row-item'), {
                    start: 'top 90%',
                    once: true,
                    onEnter: batch => gsap.from(batch, { y: 12, opacity: 0, duration: 0.75, stagger: 0.05, ease: 'power2.out' }),
                });
            }

            const customisationIndex = document.querySelector('.customisation-index');
            if (customisationIndex) {
                revealChildren('.customisation-index-copy');
                ScrollTrigger.batch(customisationIndex.querySelectorAll('.spec-row-item'), {
                    start: 'top 90%',
                    once: true,
                    onEnter: batch => gsap.from(batch, { y: 12, opacity: 0, duration: 0.75, stagger: 0.05, ease: 'power2.out' }),
                });
            }

            gsap.utils.toArray('.section-heading, .split-section > div:first-child, .custom-grid > div:first-child, .commitment-grid, .quality-panel > div:first-child, .faq-heading, .form-panel').forEach(element => {
                gsap.from(element.children, {
                    y: 20,
                    opacity: 0,
                    duration: 0.68,
                    stagger: 0.07,
                    ease: 'power3.out',
                    scrollTrigger: { trigger: element, start: 'top 86%', once: true },
                });
            });

            ScrollTrigger.batch('.product-card, .feature-grid article, .application-card, .article-card', {
                start: 'top 90%',
                once: true,
                onEnter: batch => gsap.from(batch, { y: 20, opacity: 0, duration: 0.62, stagger: 0.065, ease: 'power2.out' }),
            });

            const customList = document.querySelector('.custom-list');
            if (customList) {
                ScrollTrigger.batch(customList.querySelectorAll('.custom-list-item'), {
                    start: 'top 92%',
                    once: true,
                    onEnter: batch => gsap.from(batch, { y: 10, opacity: 0, duration: 0.5, stagger: 0.04, ease: 'power2.out' }),
                });
            }
        }

        const finalCta = document.querySelector('.final-cta');
        if (finalCta) {
            gsap.from(finalCta.querySelectorAll('.final-cta-grid > div'), {
                y: 20,
                opacity: 0,
                duration: 0.72,
                stagger: 0.1,
                ease: 'power3.out',
                scrollTrigger: { trigger: finalCta, start: 'top 84%', once: true },
            });
        }

    });

    function revealChildren(selector, stagger = 0.07) {
        const element = document.querySelector(selector);
        if (!element) return;
        gsap.from(element.children, {
            y: 18,
            opacity: 0,
            duration: 0.7,
            stagger,
            ease: 'power3.out',
            scrollTrigger: { trigger: element, start: 'top 86%', once: true },
        });
    }

    function revealSectorCards() {
        gsap.utils.toArray('.sector-card').forEach(card => {
            gsap.from(card, {
                y: 22,
                opacity: 0,
                duration: 0.85,
                ease: 'power3.out',
                scrollTrigger: { trigger: card, start: 'top 92%', once: true },
            });
        });
    }

    function revealMedia(selector) {
        const element = document.querySelector(selector);
        if (!element) return;
        gsap.from(element, {
            clipPath: 'inset(0 0 9% 0)',
            opacity: 0,
            duration: 0.9,
            ease: 'power2.inOut',
            scrollTrigger: { trigger: element, start: 'top 86%', once: true },
        });
    }

    const refresh = () => ScrollTrigger.refresh();
    if (document.readyState === 'complete') refresh();
    else window.addEventListener('load', refresh, { once: true });
    document.fonts?.ready.then(refresh);
    window.addEventListener('pagehide', () => context.revert(), { once: true });
}
