import './styles/components/_patrimoine-section.scss';
import './styles/components/_expertise-list.scss';
import './styles/pages/_expertise.scss';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

document.addEventListener('DOMContentLoaded', () => {
    const bg = document.querySelector<HTMLElement>('[data-expertise-bg="true"]');

    if (!bg) {
        return; // Not on the Expertise page.
    }

    gsap.registerPlugin(ScrollTrigger);

    // Expertise needs a 3-color-stop transition (Actualité only shifts between two beige
    // tones): beige-light (initial, hero/intro) → beige (list section, mirrors
    // assets/actualite.ts exactly for that first stop) → $color-marron (dark, once the
    // Patrimoine section is reached). Implemented as two independent scroll-scrubbed
    // tweens on the same target rather than a single gsap.timeline(): the 2nd stage's
    // trigger is tied to the Patrimoine section itself (not a document-relative
    // percentage), so its scroll range naturally starts after the 1st stage's range has
    // already completed — no explicit sequencing/timeline is needed for the color to read
    // as one continuous 3-stop transition.

    // Stage 1: beige-light → beige, over the full document scroll (same behavior as the
    // Actualité hero/intro/list zone).
    gsap.fromTo(bg,
        { y: 0 },
        {
            y: 250,
            // backgroundColor: '#f9f2eb',
            ease: 'none',
            scrollTrigger: {
                trigger: document.body,
                start: 'top top',
                end: 'bottom bottom',
                scrub: true,
            },
        }
    );

    // Stage 2: beige → $color-marron (dark), as the Patrimoine section scrolls into view.
    const patrimoineSection = document.querySelector<HTMLElement>('.expertise-patrimoine');
    if (patrimoineSection) {
        gsap.to(bg, {
            // backgroundColor: '#6e5240', // $color-marron
            ease: 'none',
            scrollTrigger: {
                trigger: patrimoineSection,
                start: 'top bottom',
                end: 'top center',
                scrub: true,
            },
        });
    }
});