'use client';
import ModernBackground from "@/components/Common/ModernBackground";
import StatisticSection from "@/components/StatisticSection";
import VideoFAQSection from "@/components/VideoFAQSection";
import ServiceSection from "@/components/ServiceSection";
import FeaturesTree from "@/components/FeaturesTree";
import PricingStarter from "@/components/PricingStarter";
import VideoSection from "@/components/VideoSection";
import ScrollUp from "@/components/Common/ScrollUp";
import { VideoItem } from "@/types/section";
import { useEffect, useState } from "react";
import Contact from "@/components/Contact";
import AboutUs from "@/components/About";
import Hero from "@/components/Hero";
import Blog from "@/components/Blog";
import Hr from "@/components/Hr";

export default function HomeClient() {
    const [shortVideoList, setShortVideoList] = useState<VideoItem[]>([]);
    const [adVideoList, setAdVideoList]       = useState<VideoItem[]>([]); 
    const [loading, setLoading]               = useState<boolean>(true);

    async function fetchSheet() {
        setLoading(true);
        try {
            //https://docs.google.com/spreadsheets/d/1WpmtQB-wR_XCq9moxOKhGdcgbUo0S6Hm6Rque2A4KT0/edit?gid=0#gid=0
            const res = await fetch(
                "https://script.google.com/macros/s/AKfycbznBbIDg8IFIcUOj0TJdA9C2MHQNO7sevrXAt7CiWVFjHRw3rq2_WLKdFdxImVbHMYj/exec"
            );
            const data: VideoItem[] = await res.json();

            const shortList = data.filter(v => v.type === "shortVideo").reverse();
            const adList    = data.filter(v => v.type === "adVideo").reverse();

            setShortVideoList(shortList);
            setAdVideoList(adList);
        } catch (error) {
            console.error("Error fetching sheet:", error);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        fetchSheet();
    }, []);

    return (
        <main className="relative bg-white overflow-x-hidden">
            <ModernBackground />
            <ScrollUp />
            <div className="relative z-10">
                <section className="relative">
                    <Hero />
                    <StatisticSection />
                </section>

                {/* Gộp AboutUs và FeaturesTree với nền ảnh chung */}
                <section className="relative w-full overflow-hidden">
                    {/* Ảnh nền chung cho cả 2 section */}
                    <div className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none z-0">
                        <div 
                            className="absolute inset-0 w-full h-full opacity-50"
                            style={{
                                backgroundImage: 'url(/images/banner/banner-1.png)',
                                backgroundSize: 'cover',
                                backgroundPosition: 'center',
                                backgroundRepeat: 'no-repeat'
                            }}
                        ></div>
                        <div className="absolute inset-0 w-full h-full bg-gradient-to-b from-white/90 via-white/60 to-white/90"></div>
                    </div>

                    <div className="relative z-10">
                        <AboutUs />
                    </div>
                </section>

                <div className="relative z-10">
                    <FeaturesTree />
                </div>

                <div className="relative">
                    <PricingStarter />
                    <ServiceSection />
                    <Hr />
                    <VideoSection
                        shortVideoList={shortVideoList}
                        adVideoList={adVideoList}
                        loading={loading}
                    />
                </div>

                <section className="relative">
                    <Blog />
                    <VideoFAQSection />
                </section>

                <section className="relative">
                    <Contact />
                </section>
            </div>
        </main>
    );
}
