import './styles/components/_expertise-list.scss';
import './styles/pages/_project-detail.scss';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { initBeforeAfterSliders } from './components/before-after-slider';
import { initGallerySliders } from './components/gallery-slider';

/**
 * Fixed mountain-mask background scroll effect for the ProjectDetail public page —
 * identical GSAP tween to assets/actualite.ts (same fixed-mountain-bg SCSS mixin, see
 * assets/styles/pages/_project-detail.scss), duplicated rather than extracted to a shared
 * helper: the two pages' color/offset values already diverge slightly by design in the
 * Figma source, and a shared module would need to parametrize both without a second real
 * consumer yet to validate the right shape.
 */
document.addEventListener('DOMContentLoaded', () => {
    const bg = document.querySelector<HTMLElement>('[data-project-detail-bg="true"]');

    if (bg) {
        gsap.registerPlugin(ScrollTrigger);

        gsap.fromTo(bg,
            { y: 0 },
            {
                y: 250,
                // backgroundColor: '#f9f2eb',
                ease: 'none',
                scrollTrigger: {
                    trigger: document.body,
                    start: 'top top',
                    end: 'bottom bottom',
                    scrub: true,
                },
            }
        );
    }

    // `before-after` blocks (decision (c) in
    // spec-driven-development/project-detail-redesign.md): works identically in edit mode
    // and public view, so mounted unconditionally here rather than gated on editMode.
    if (document.querySelector('[data-before-after-handle]')) {
        initBeforeAfterSliders();
    }

    // `gallery` blocks' infinite-swipe slider: touch/trackpad swipe is native CSS scroll,
    // this only adds desktop mouse press-and-drag (see components/_gallery-slider.html.twig).
    if (document.querySelector('[data-drag-scroll="true"]')) {
        initGallerySliders();
    }
});