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";
import { FullScreenLoader } from "../components/FullScreenLoader";

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 ?? [];
    const ctaSection = data?.cta_section;
    
    // Transform testimonial section data to match Testimonial interface
    const testimonialData = data?.testimonial_section?.map((item: any) => ({
        id: item.id,
        name: item.name,
        role: item.designation,
        quote: item.content,
        videoUrl: item.video_url,
        isVideo: !!item.video_url,
        rating: 5, // Default rating, can be updated from API if available
        avatar: item.profile_xid ? `https://example.com/avatars/${item.profile_xid}.jpg` : undefined,
    })) || [];

    if (isLoading) {
        return (
            <div className="min-h-screen flex items-center justify-center bg-white">
                <FullScreenLoader text="Loading Homepage..." />
            </div>
        );
    }

    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>

            {/* Pass testimonial data to the TestimonialsSection */}
            <TestimonialsSection 
                customTestimonials={testimonialData}
                title="What Our Clients Say"
                subtitle="Hear from industry leaders who have transformed their organizations with our solutions."
                tagText="Client Stories"
            />
            <InsightsSection />
            <CTABannerSection ctaSection={ctaSection} isLoading={isLoading} />
        </>
    );
};

export default HomePage;