KLC-Website-Frontend/src/pages/HomePage.tsx

import React from "react";
import HeroSection from "../components/HeroSection";
import { StatsSection } from "../components/StatsSection";
import { LogosSection } from "../components/LogosSection";
import { ServicesSection } from "../components/ServicesSection";
import { VirtualSpaceSection } from "../components/VirtualSpaceSection";
import { TestimonialsSection } from "../components/TestimonialsSection";
import { InsightsSection } from "../components/InsightsSection";
import { CTABannerSection } from "../components/CTABannerSection";
import { motion } from "motion/react";
import { PrimaryCTAButton } from "../components/PrimaryCTAButton";
import { BrandedTag } from "../components/about/BrandedTag";
import { useNavigate } from "react-router-dom";
import { useGetHomepageQuery } from "../redux/services/homepageApi";

const HomePage: React.FC = () => {
    const navigate = useNavigate();

    const { data, isLoading } = useGetHomepageQuery({
        landing_page_type: "home",
    });

    const heroSections = data?.hero_sections ?? [];
    const stats = data?.stats_sections ?? [];
    const highlightCards = data?.highlight_cards ?? [];
    const ctaBands = data?.cta_bands ?? [];

    return (
        <>
            <HeroSection heroSections={heroSections} isLoading={isLoading} />

            {/* Stats Section */}
            <StatsSection stats={stats} isLoading={isLoading} />

            <LogosSection />
            <ServicesSection highlightCards={highlightCards} isLoading={isLoading} />

            <div>
                <div className="mx-auto text-center py-16 px-4 bg-gradient-to-r from-blue-900 via-gray-400 to-black exp-our-head-tab-sec">

                    <motion.div
                        initial={{ opacity: 0, y: -20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6 }}
                        viewport={{ once: true }}
                    >
                        <BrandedTag
                            text="Virtual Learning Environment"
                            className="justify-center"
                            variant="white"
                        />
                    </motion.div>

                    <motion.h2
                        className="text-5xl font-bold leading-tight mb-4 max-lg:text-4xl max-md:text-3xl text-white"
                        initial={{ opacity: 0, y: 30 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.2 }}
                        viewport={{ once: true }}
                    >
                        Experience Our Space Virtually
                    </motion.h2>

                    <motion.p
                        className="text-lg leading-relaxed max-w-2xl mx-auto max-lg:text-base mb-6 text-white/90"
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.4 }}
                        viewport={{ once: true }}
                    >
                        Take a virtual walk through our state-of-the-art facility designed to
                        inspire leadership excellence and foster collaborative learning.
                    </motion.p>

                    <motion.div
                        className="flex justify-center"
                        initial={{ opacity: 0, y: 20 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, delay: 0.6 }}
                        viewport={{ once: true }}
                    >
                        <div className="hero-slide-button">
                            <PrimaryCTAButton
                                text="Explore Our Space"
                                onClick={() => navigate("/services/learning-facility")}
                                ariaLabel="Explore our virtual learning space and facilities"
                            />
                        </div>
                    </motion.div>
                </div>

                <VirtualSpaceSection />
            </div>

            <TestimonialsSection />
            <InsightsSection />
            <CTABannerSection ctaBands={ctaBands} isLoading={isLoading} />
        </>
    );
};

export default HomePage;