import { useEffect, useRef } from "react";

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
...

const HomePage = () => {
	// 為每個區塊創建 ref
	const heroRef = useRef(null);

	useEffect(() => {
		// 確保組件已掛載
		const ctx = gsap.context(() => {
			// 最新消息區塊 - 從左側滑入
			if (latestNewsRef.current) {
				gsap.fromTo(
					latestNewsRef.current,
					{ opacity: 0, x: -100 },
					{
						opacity: 1,
						x: 0,
						duration: 1.2,
						ease: "power3.out",
						scrollTrigger: {
							trigger: latestNewsRef.current,
							start: "top 75%",
							end: "bottom 25%",
							toggleActions: "play none none reverse",
							// markers: true, // 調試用，正式環境移除
						}
					}
				);
			}
		});
		// 清理函數
		return () => {
			ctx.revert(); // 清理所有 GSAP 動畫
			ScrollTrigger.getAll().forEach(trigger => trigger.kill());
		};
	}, []);

    return (
        <div ref={heroRef}>
            <HeroCarouselSection />
        </div>
    );

useGSAP(() => {
    // 新產品區塊 - 從右側滑入
    if (newProductsRef.current) {
        gsap.fromTo(
            newProductsRef.current,
            { scale: 1.2, opacity: 0, x: 100 }, // 初始狀態：放大 + 透明 + 右側偏移
            {
                scale: 1, opacity: 1, x: 0, // 終點狀態：縮小回正常 + 顯示
                duration: 1.5,
                ease: "power4.out",
                scrollTrigger: {
                    trigger: newProductsRef.current,
                    start: "top 85%",
                    end: "bottom 15%",
                    toggleActions: "restart none none reverse",
                },
            }
        );
    },
    { scope: containerRef }
); // 使用父容器作為 scope