"use client";

import { useEffect, useLayoutEffect, useRef, useState } from "react";
import Link from "next/link";
import {
  BookOpen,
  Users,
  Award,
  Globe,
  CheckCircle,
  Target,
  Heart,
  Star,
  Trophy,
  Crown,
  Gift,
  Calendar,
  Youtube,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import AnimatedSection from "@/components/AnimatedSection";
import CourseCard from "@/components/CourseCard";
import TestimonialCard from "@/components/TestimonialCard";
import CountdownTimer from "@/components/CountdownTimer";
import Banner from "@/components/ui/banner";
import {
  getHomeApi,
  getTestimonialDetails,
} from "@/lib/api/apis";
import Image from "next/image";
import TestimonialVideoCard from "@/components/TestimonialCard";
import { useKeenSlider } from "keen-slider/react";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { decodeHtml } from "@/lib/commonFunctions";
import { useRouter } from "next/navigation";
import {
  getActiveCourseLanguage,
  getCourseForLanguage,
  persistCourseMap,
  setActiveCourseLanguage,
} from "@/lib/courseSelection";

export default function Home() {
  const [showVideo, setShowVideo] = useState(false);
  const [videoUrl, setVideoUrl] = useState("");
  const [homeData, setHomeData] = useState<Record<string, any>>({});
  const [testimonialsData, setTestimonialsData] = useState<any[]>([]);
  const descRef = useRef<HTMLParagraphElement | null>(null);
  const [isOverflowing, setIsOverflowing] = useState(false);
  const { language } = useLanguage();
  const router = useRouter();
  const lang = language;
  const [currentSlide, setCurrentSlide] = useState(0);
  const [loaded, setLoaded] = useState(false);
  const [showAllPrizes, _setShowAllPrizes] = useState(false); // kept to avoid removing related refs
  const [courseTabLanguage, setCourseTabLanguage] = useState<
    "hindi" | "english"
  >("english");

  const items = [
    {
      icon: Target,
      title: "Sharper Focus & Discipline",
      desc: "Help students gain clarity, direction, and inner strength in an era of digital chaos.",
    },
    {
      icon: Heart,
      title: "Revival of Sanatan Dharma",
      desc: "Reconnect youth with timeless values of compassion, duty, and wisdom.",
    },
    {
      icon: Star,
      title: "Unites Families & Society",
      desc: "Strengthen bonds through shared learning, discussions, and inspiration.",
    },
    // Add unlimited items here...
  ];

  const testimonials = [
    {
      name: "Priya Sharma",
      designation: "Software Engineer",
      content:
        "This course completely transformed my perspective on life. The teachings are profound yet very practical and easy to apply.",
      image: "/images/courseQuiz.jpg",
      videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
    },
    {
      name: "Raj Patel",
      designation: "Business Owner",
      content:
        "The Olympiad and course helped me reconnect with my roots and make balanced decisions in my daily life.",
      image: "/images/course.png",
    },
    {
      name: "Aman Verma",
      designation: "Chartered Accountant",
      content:
        "I finally found answers to my inner questions. Life feels meaningful and joyful again.",
      image: "/images/courseQuiz.jpg",
    },
    {
      name: "Sarah Johnson",
      designation: "Teacher",
      content:
        "The structure, pacing and clarity of explanations are outstanding. I recommend it to all my students.",
      image: "/images/course.png",
      videoUrl: "https://www.w3schools.com/html/movie.mp4",
    },
  ];
  const [isRegistered, setIsRegistered] = useState<boolean | null>(null);
  const [userData, setUserData] = useState<Record<string, any>>({});

  useEffect(() => {
    if (typeof window === "undefined") return;

    const stored = localStorage.getItem("register_details");
    const data = localStorage.getItem("user_data");

    let parsedUser: any = null;

    if (data) {
      parsedUser = JSON.parse(data);
      setUserData(parsedUser);
    }

    if (stored) {
      try {
        const data = JSON.parse(stored);

        setIsRegistered(data?.regist_status == 1);
      } catch {
        setIsRegistered(false);
      }
    } else {
      setIsRegistered(false);
    }
    handleHomeApi(parsedUser?.id || "");
    handleTestimonial();
    setCourseTabLanguage(getActiveCourseLanguage() ?? "english");
  }, []);

  const slidesPerView =
    testimonialsData.length >= 3 ? 3 : testimonialsData.length || 1;
  const [sliderRef, testimonialSlider] = useKeenSlider(
    {
      loop: true,
      mode: "snap",

      // 📱 Default = MOBILE
      slides: {
        perView: 1, // ✅ 1 card on mobile
        spacing: 16,
      },

      // 🖥 Breakpoints
      breakpoints: {
        "(min-width: 1024px)": {
          slides: {
            perView: 4, // ✅ 3 cards on desktop
            spacing: 30,
          },
        },
      },
    },
    [
      // AUTOPLAY PLUGIN
      (slider) => {
        let timeout: ReturnType<typeof setTimeout>;
        let mouseOver = false;

        function clearNextTimeout() {
          clearTimeout(timeout);
        }

        function nextTimeout() {
          clearTimeout(timeout);
          if (mouseOver) return;
          timeout = setTimeout(() => {
            if (!slider.track.details) return;
            slider.next();
          }, 2000); // autoplay interval (2s)
        }

        slider.on("created", () => {
          slider.container.addEventListener("mouseover", () => {
            mouseOver = true;
            clearNextTimeout();
          });
          slider.container.addEventListener("mouseout", () => {
            mouseOver = false;
            nextTimeout();
          });
          nextTimeout();
        });

        slider.on("dragStarted", clearNextTimeout);
        slider.on("animationEnded", nextTimeout);
        slider.on("updated", nextTimeout);
      },
    ],
  );
  const BRANDS = [
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F1.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F2.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F3.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F4.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F5.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F6.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F7.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F8.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F9.webp&w=256&q=75",

    // add more if needed
  ];
  const logoSliderRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const slider = logoSliderRef.current;
    if (!slider) return;

    let frameId: number;
    const speed = 0.6;

    const animate = () => {
      slider.scrollLeft += speed;

      if (slider.scrollLeft >= slider.scrollWidth / 2) {
        slider.scrollLeft = 0;
      }

      frameId = requestAnimationFrame(animate);
    };

    frameId = requestAnimationFrame(animate);

    return () => cancelAnimationFrame(frameId);
  }, []);

  const getVideoEmbedUrl = (url: string) => {
    if (url.includes("youtube.com") || url.includes("youtu.be")) {
      let videoId = "";

      if (url.includes("youtu.be")) {
        videoId = url.split("youtu.be/")[1].split("?")[0];
      } else if (url.includes("watch?v=")) {
        videoId = url.split("watch?v=")[1].split("&")[0];
      } else {
        return url;
      }

      return `https://www.youtube.com/embed/${videoId}`;
    }

    return url; // mp4 or direct video
  };

  const handleHomeApi = async (id: string) => {
    const res = await getHomeApi(id || "");
    if (res?.data) {
      setHomeData(res.data || {});
      persistCourseMap(res?.data?.courses || []);
    }
  };

  const handleTestimonial = async () => {
    const res = await getTestimonialDetails();
    if (res?.data) {
      setTestimonialsData(res.data || {});
    }
  };

  const formatDescription = (text: string) =>
    (text || "").split(/\r?\n/).map((line, i) => <p key={i}>{line}</p>);

  const announcement = (
    Array.isArray(homeData?.announcement_list) ? homeData.announcement_list : []
  )
    .filter((a: any) => a.status === "1")
    ?.sort(
      (a: any, b: any) =>
        new Date(b.created_at).getTime() - new Date(a.created_at).getTime(),
    )?.[0];

  const registrationTimer = homeData?.registration_timer?.[0];
  const prizeData = homeData?.prize_list?.[0];
  const course = getCourseForLanguage<any>(
    Array.isArray(homeData?.courses) ? homeData.courses : [],
    courseTabLanguage,
  );
  const coverVideo = homeData?.cover_videos?.[0];

  const olympiadItems =
    (Array.isArray(homeData?.olympiard_matter)
      ? homeData.olympiard_matter
      : []
    ).map((item: any, index: number) => ({
      id: item.id,
      title: lang === "hindi" ? item.title_2 : item.title,
      desc: lang === "hindi" ? item.description_hindi : item.description,
      icon: items[index % items.length]?.icon, // reuse existing icons safely
    })) || [];

  const registrationTargetDate = registrationTimer?.end_datetime
    ? new Date(registrationTimer.end_datetime.replace(" ", "T"))
    : null;

  const testSeries = homeData?.mode_3_test_series?.[0];

  const examStartDate = testSeries?.start_date
    ? new Date(Number(testSeries.start_date))
    : null;

  const examEndDate = testSeries?.end_date
    ? new Date(Number(testSeries.end_date))
    : null;

  const examStartTime = testSeries?.start_date;
  const isRegistrationClosed = registrationTargetDate
    ? registrationTargetDate.getTime() <= Date.now()
    : false;

  const [olypmiadSliderRef, slider] = useKeenSlider({
    loop: true,
    mode: "snap",
    drag: true,
    rubberband: true,
    slides: {
      perView: 1,
      spacing: 20,
    },
    created() {
      setLoaded(true);
    },

    slideChanged(slider) {
      setCurrentSlide(slider.track.details.rel);
    },

    breakpoints: {
      "(min-width: 768px)": {
        slides: {
          perView: 1,
          spacing: 24,
        },
      },

      "(min-width: 1024px)": {
        slides: {
          perView: 1,
          spacing: 30,
        },
      },
    },
  });

  useEffect(() => {
    slider.current?.update();
  }, [olympiadItems]);

  // Refresh the testimonial slider once the async data has loaded
  useEffect(() => {
    if (testimonialsData.length > 0) {
      testimonialSlider.current?.update();
    }
  }, [testimonialsData]);

  const handleTestimonialPrev = () => {
    if (testimonialSlider.current?.track?.details) {
      testimonialSlider.current.prev();
    }
  };

  const handleTestimonialNext = () => {
    if (testimonialSlider.current?.track?.details) {
      testimonialSlider.current.next();
    }
  };

  useEffect(() => {
    if (!descRef.current) return;

    const el = descRef.current;
    setIsOverflowing(el.scrollHeight > el.clientHeight);
  }, [olympiadItems]);

  const formatTime = (seconds: number) => {
    const m = Math.floor(seconds / 60);
    const s = Math.floor(seconds % 60);
    return `${m}:${s.toString().padStart(2, "0")}`;
  };

  const formatINR = (value?: number | string) => {
    if (!value) return "—";
    return Number(value).toLocaleString("en-IN");
  };

  return (
    <div className="overflow-hidden bg-white">
      {/* ================== TOP HERO BANNER (SLIDER) ================== */}
      {/* {homeData?.banner_list && homeData.banner_list.length > 0 && (
        <section className="bg-[#FFF8EE] border-b border-orange-100">
          <div className="container mx-auto px-4 py-6 md:py-8">
            <div className="rounded-3xl overflow-hidden ">
              <Banner data={homeData.banner_list} />
            </div>
          </div>
        </section>
      )} */}

      {/* ================== MAIN HERO (EDUBLINK STYLE) ================== */}
      <section className="bg-[#FFF8EE] pb-16 md:pb-24 border-b border-gray-100 mt-20">
        <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16">
          {/* Left Content */}
          <AnimatedSection
            className="order-2 md:order-1 mt-10 md:mt-16"
            delay={100}
          >
            <span className="inline-block px-4 py-1.5 bg-[#FFF4E4] text-[#FAA631] rounded-full text-xs md:text-lg font-semibold mb-4">
              Shrimad Bhagavad Gita Mega Olympiad 2026
            </span>

            <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-4">
              Learn, Compete &{" "}
              <span className="text-[#FAA631]">Transform Your Life</span>
            </h1>

            <p className="text-base md:text-lg text-gray-600 mb-6 max-w-xl">
              Enroll in the Bhagavad Gita Olympiad, complete the guided course,
              and stand a chance to win exciting prizes, certificates and gain
              timeless wisdom.
            </p>
            {isRegistered === false ? (
              <div className="flex flex-col sm:flex-row gap-4 mb-8">
                {isRegistrationClosed ? (
                  <Button
                    size="lg"
                    disabled
                    className="bg-[#FAA631] hover:bg-[#e0911d] text-lg px-8"
                  >
                    Registration close
                  </Button>
                ) : (
                  <Button
                    size="lg"
                    asChild
                    className="bg-[#FAA631] hover:bg-[#e0911d] text-lg px-8"
                    onClick={() => {
                      if (!userData?.id) {
                        localStorage.setItem(
                          "redirectAfterAuth",
                          "/olympiad/register",
                        );
                      }
                    }}
                  >
                    <Link href={userData?.id ? "/olympiad/register" : "/login"}>
                      Register Now - Free
                    </Link>
                  </Button>
                )}
              </div>
            ) : (
              <Button
                size="lg"
                asChild
                className="bg-[#FAA631] hover:bg-[#e0911d] text-lg px-8 mb-10"
                onClick={() => {
                  if (!userData?.id) {
                    localStorage.setItem(
                      "redirectAfterAuth",
                      "/olympiad/register",
                    );
                  }
                }}
              >
                <Link href={"/course/online"}>Continue to Course</Link>
              </Button>
            )}

            {/* Hero Stats Row */}
            <div className="grid grid-cols-3 gap-4 max-w-md">
              <div>
                <div className="text-lg md:text-2xl font-bold text-gray-900">
                  50K+
                </div>
                <div className="text-xs md:text-sm text-gray-500">
                  Students Enrolled
                </div>
              </div>
              <div>
                <div className="text-lg md:text-2xl font-bold text-gray-900">
                  100%
                </div>
                <div className="text-xs md:text-sm text-gray-500">
                  Free Registration
                </div>
              </div>
              <div>
                <div className="text-lg md:text-2xl font-bold text-gray-900">
                  24/7
                </div>
                <div className="text-xs md:text-sm text-gray-500">
                  Anytime Access
                </div>
              </div>
            </div>
          </AnimatedSection>

          {/* Right Visual Block */}
          <AnimatedSection className="order-1 md:order-2" delay={150}>
            <div className="relative">
              {/* <div className="rounded-3xl bg-[#FFF4E4] p-3 md:p-4 shadow-lg"> */}
              <div className="overflow-hidden border border-orange-100 bg-white">
                <Image
                  src={
                    course?.cover_image ??
                    "/images/bannerImage.png"
                  }
                  alt={course?.title ?? "Bhagavad Gita Olympiad"}
                  width={1200} // required for Next.js
                  height={600} // maintain aspect ratio
                  className="w-full h-[25rem] md:h-[30rem] lg:h-[35rem]"
                  priority={false} // set true if above the fold
                />
              </div>
              {/* </div> */}

              <div className="absolute -bottom-5 bg-gradient-to-r from-[#FFF8EE] to-[#FFFFFF] left-0 md:bottom-5 md:-left-6 px-4 py-3 flex items-center gap-3">
                <div className="p-2 rounded-xl bg-[#FFF4E4] text-[#FAA631]">
                  <BookOpen className="w-5 h-5" />
                </div>
                <div>
                  <p className="text-xs text-gray-500">Featured Course</p>
                  <p className="text-sm md:text-base font-semibold text-gray-900">
                    {course?.title || "Bhagavad Gita"}
                  </p>
                </div>
              </div>
            </div>
          </AnimatedSection>
        </div>
        {/* Brand Logos Marquee */}
        {/* <div ref={logoSliderRef} className="mt-12 w-full overflow-hidden">
          <div className="flex gap-10 w-max whitespace-nowrap py-4">
            {[...BRANDS, ...BRANDS].map((logo, idx) => (
              <div
                key={idx}
                className="h-12 flex items-center justify-center shrink-0"
              >
                <Image
                  src={logo}
                  alt="brand logo"
                  width={80}
                  height={40}
                  className="object-contain"
                />
              </div>
            ))}
          </div>
        </div> */}
      </section>

      {/* ================== TIMELINE & PRIZES SECTION ================== */}
      <section className="relative py-16 md:py-24 bg-gradient-to-br from-[#ffba26] via-[#fcc349] to-[#fcdb92] text-gray-900 overflow-hidden">
        {/* Animated Background Elements */}
        <div className="absolute inset-0">
          <div className="absolute top-0 left-1/4 w-72 h-72 bg-[#FAA631]/20 rounded-full blur-3xl animate-pulse"></div>
          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-[#FAA631]/15 rounded-full blur-3xl"></div>
          <div className="absolute top-1/2 left-0 w-64 h-64 bg-[#FAA631]/15 rounded-full blur-3xl animate-pulse delay-1000"></div>
        </div>

        {/* CSS Animations directly in style tag */}
        <style jsx>{`
          @keyframes gradient-x {
            0%,
            100% {
              background-position: 0% 50%;
            }
            50% {
              background-position: 100% 50%;
            }
          }
          @keyframes float {
            0%,
            100% {
              transform: translateY(0px);
            }
            50% {
              transform: translateY(-10px);
            }
          }
          @keyframes pulse-glow {
            0%,
            100% {
              box-shadow: 0 0 20px rgba(250, 166, 49, 0.3);
            }
            50% {
              box-shadow: 0 0 40px rgba(250, 166, 49, 0.6);
            }
          }
          .animate-gradient-x {
            background-size: 200% 200%;
            animation: gradient-x 3s ease infinite;
          }
          .animate-float {
            animation: float 6s ease-in-out infinite;
          }
          .animate-pulse-glow {
            animation: pulse-glow 2s ease-in-out infinite;
          }
        `}</style>

        <div className="container relative mx-auto px-4">
          <AnimatedSection className="text-center mb-12 md:mb-16">
            <div className="inline-block p-3 md:p-4 bg-gradient-to-br from-[#FAA631] to-[#E6952B] rounded-2xl mb-6 shadow-lg shadow-[#FAA631]/40">
              <Trophy className="w-16 h-16 md:w-20 md:h-20 text-white" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold mb-4 text-gray-900">
              Olympiad Timeline & Prizes
            </h2>
            <p className="text-lg md:text-xl text-gray-800 max-w-2xl mx-auto leading-relaxed font-medium">
              Stay aligned with key dates and see what you can win by
              participating with dedication.
            </p>
          </AnimatedSection>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-stretch">
            {/* Left: Timeline & Countdown */}
            <AnimatedSection delay={50}>
              <div className="relative group h-full">
                {/* Card Glow Effect */}
                <div className="absolute -inset-0.5 bg-gradient-to-r from-[#FAA631] to-[#E6952B] rounded-3xl blur opacity-30 group-hover:opacity-60 transition duration-500"></div>

                <Card className="relative bg-white/95 backdrop-blur-sm border border-[#FAA631]/30 h-full rounded-3xl overflow-hidden shadow-2xl">
                  {/* Animated Border */}
                  <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#FAA631] via-[#FFB347] to-[#FAA631] animate-gradient-x"></div>

                  <CardContent className="p-6 md:p-8">
                    <div className="flex items-center gap-3 mb-6">
                      <div className="p-2 bg-gradient-to-br from-[#FAA631] to-[#E6952B] rounded-lg shadow-md">
                        <Calendar className="w-6 h-6 text-white" />
                      </div>
                      <h3 className="text-2xl md:text-3xl font-bold text-gray-900">
                        Key Milestones
                      </h3>
                    </div>

                    {registrationTimer && (
                      <div className="mb-8">
                        <div className="bg-gradient-to-br from-white to-gray-50 border border-[#FAA631]/20 rounded-2xl p-4 shadow-inner">
                          {isRegistered && examStartDate ? (
                            <CountdownTimer
                              targetDate={examStartDate}
                              endDate={examEndDate ?? undefined}
                              label="Final Exam Will be Start :"
                            />
                          ) : (
                            <div className="bg-gradient-to-br from-orange-300 to-orange-400 text-white rounded-xl px-6 py-5 text-center">
                              <p className="text-base sm:text-lg font-semibold mb-2">
                                {lang === "hindi"
                                  ? registrationTimer?.title_2
                                  : registrationTimer?.title}
                              </p>
                              <p className="text-2xl sm:text-3xl font-bold">
                                {registrationTimer?.remaining_time}
                              </p>
                            </div>
                          )}
                        </div>
                      </div>
                    )}

                    <div className="space-y-6">
                      {/* Timeline Items */}
                      <div className="relative pl-8">
                        <div className="absolute left-0 top-0 w-6 h-6 bg-gradient-to-br from-[#FAA631] to-[#E6952B] rounded-full flex items-center justify-center shadow-md">
                          <div className="w-2 h-2 bg-white rounded-full"></div>
                        </div>
                        <div className="absolute left-3 top-6 bottom-0 w-0.5 bg-gradient-to-b from-[#FAA631] to-transparent"></div>

                        <div className="bg-gradient-to-r from-white to-gray-50 p-4 rounded-xl border border-[#FAA631]/20 shadow-sm">
                          <div className="flex items-center gap-2 mb-2">
                            <div className="w-2 h-2 bg-[#FAA631] rounded-full"></div>
                            <h4 className="text-lg font-semibold text-gray-900">
                              Registration & Course Access
                            </h4>
                          </div>
                          <p className="text-gray-700">
                            Open now for all age groups. Early registration
                            recommended.
                          </p>
                          <div className="mt-2 inline-flex items-center gap-2 text-sm font-medium text-[#E6952B] bg-[#FAA631]/10 px-3 py-1 rounded-full">
                            <CheckCircle className="w-4 h-4" />
                            <span>Currently Active</span>
                          </div>
                        </div>
                      </div>

                      <div className="relative pl-8">
                        <div className="absolute left-0 top-0 w-6 h-6 bg-gradient-to-br from-[#FFB347] to-[#FAA631] rounded-full flex items-center justify-center shadow-md">
                          <div className="w-2 h-2 bg-white rounded-full"></div>
                        </div>
                        <div className="absolute left-3 top-6 bottom-0 w-0.5 bg-gradient-to-b from-[#FFB347] to-transparent"></div>

                        <div className="bg-gradient-to-r from-white to-gray-50 p-4 rounded-xl border border-[#FAA631]/20 shadow-sm">
                          <div className="flex items-center gap-2 mb-2">
                            <div className="w-2 h-2 bg-[#FFB347] rounded-full"></div>
                            <h4 className="text-lg font-semibold text-gray-900">
                              Course Completion
                            </h4>
                          </div>
                          <p className="text-gray-700">
                            Complete all Gita course modules before the exam
                            date.
                          </p>
                          <div className="mt-2 text-sm font-medium text-[#E6952B] bg-[#FAA631]/10 px-3 py-1 rounded-full">
                            ⏱️ Recommended: 4-6 weeks
                          </div>
                        </div>
                      </div>
                      <div className="relative pl-8">
                        <div className="absolute left-0 top-0 w-6 h-6 bg-gradient-to-br from-[#FFB347] to-[#FAA631] rounded-full flex items-center justify-center shadow-md">
                          <div className="w-2 h-2 bg-white rounded-full"></div>
                        </div>
                        <div className="absolute left-3 top-6 bottom-0 w-0.5 bg-gradient-to-b from-[#FFB347] to-transparent"></div>

                        <div className="bg-gradient-to-r from-white to-gray-50 p-4 rounded-xl border border-[#FAA631]/20 shadow-sm">
                          <div className="flex items-center gap-2 mb-2">
                            <div className="w-2 h-2 bg-[#FFB347] rounded-full"></div>
                            <h4 className="text-lg font-semibold text-gray-900">
                              Mock Test
                            </h4>
                          </div>
                          <p className="text-gray-700">
                            Take the mock test to assess your preparation and
                            identify areas for improvement.
                          </p>
                          <div className="mt-2 text-sm font-medium text-[#E6952B] bg-[#FAA631]/10 px-3 py-1 rounded-full">
                            📝 Practice & Improve
                          </div>
                        </div>
                      </div>
                      <div className="relative pl-8">
                        <div className="absolute left-0 top-0 w-6 h-6 bg-gradient-to-br from-[#FFB347] to-[#FAA631] rounded-full flex items-center justify-center shadow-md">
                          <div className="w-2 h-2 bg-white rounded-full"></div>
                        </div>
                        <div className="absolute left-3 top-6 bottom-0 w-0.5 bg-gradient-to-b from-[#FFB347] to-transparent"></div>

                        <div className="bg-gradient-to-r from-white to-gray-50 p-4 rounded-xl border border-[#FAA631]/20 shadow-sm">
                          <div className="flex items-center gap-2 mb-2">
                            <div className="w-2 h-2 bg-[#FFB347] rounded-full"></div>
                            <h4 className="text-lg font-semibold text-gray-900">
                              Final Olympiad
                            </h4>
                          </div>
                          <p className="text-gray-700">
                            Attempt the exam and compete with participants
                            nationwide.
                          </p>
                          <div className="mt-2 text-sm font-medium text-[#E6952B] bg-[#FAA631]/10 px-3 py-1 rounded-full">
                            🏆 National Level Competition
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </AnimatedSection>

            {/* Right: Prize Cards */}
            <AnimatedSection delay={100}>
              <div className="relative group h-full">
                {/* Glow Effect */}
                <div className="absolute -inset-0.5 bg-gradient-to-r from-[#FFB800] via-[#FAA631] to-[#FFD56A] rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>

                <div className="relative bg-gradient-to-br from-white to-gray-50 h-full p-6 md:p-8 rounded-3xl border border-[#FAA631]/30 overflow-hidden shadow-2xl">
                  {/* Animated Particles Background */}
                  <div className="absolute inset-0 opacity-5">
                    <div
                      className="absolute animate-float"
                      style={{ top: "20%", left: "10%" }}
                    >
                      ✨
                    </div>
                    <div
                      className="absolute animate-float delay-700"
                      style={{ top: "60%", left: "80%" }}
                    >
                      ⭐
                    </div>
                    <div
                      className="absolute animate-float delay-300"
                      style={{ top: "80%", left: "30%" }}
                    >
                      🏆
                    </div>
                    <div
                      className="absolute animate-float delay-1000"
                      style={{ top: "40%", left: "90%" }}
                    >
                      🎯
                    </div>
                  </div>

                  {/* Golden Border Top */}
                  <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#FFD56A] via-[#FAA631] to-[#FFD56A] animate-gradient-x"></div>

                  <div className="relative z-10">
                    <div className="text-center mb-10 md:mb-12">
                      <div className="inline-flex items-center gap-3 mb-4">
                        <div className="p-2 bg-gradient-to-br from-[#FAA631] to-[#E6952B] rounded-lg shadow-md">
                          <Gift className="w-6 h-6 text-white" />
                        </div>
                        <h3 className="text-3xl md:text-4xl font-bold text-gray-900">
                          Exciting Prizes Await!
                        </h3>
                      </div>
                      <p className="text-gray-700 text-lg font-medium">
                        Win amazing rewards for your dedication
                      </p>
                    </div>
                    <div className="flex flex-col items-center mb-14 relative px-4">
                      {/* Soft glow background */}
                      <div className="absolute -top-10 w-72 h-72 bg-gradient-to-br from-[#FFD56A]/30 to-[#FAA631]/30 rounded-full blur-3xl" />

                      {/* Title */}
                      <h2 className="relative text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-3 tracking-wide text-center">
                        Prize Pool
                      </h2>

                      {/* Gradient Amount */}
                      <p
                        className="relative text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold 
    bg-gradient-to-r from-[#FFD56A] via-[#FAA631] to-[#E6952B]
    bg-clip-text text-transparent
    drop-shadow-[0_6px_20px_rgba(250,166,49,0.45)]
    mb-3 text-center break-words max-w-full px-2"
                      >
                        ₹{formatINR(prizeData?.total_amount) || "—"}
                      </p>
                    </div>

                    {/* Trophy Row */}
                    <div className="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 w-full max-w-6xl mx-auto px-4">
                      {/* 2nd Prize */}
                      <div className="group/prize transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 w-full md:w-auto">
                        <div className="relative flex justify-center">
                          <div className="absolute -inset-4 bg-gradient-to-br from-gray-300 to-gray-400 rounded-full blur opacity-20 group-hover/prize:opacity-30"></div>
                          <div className="relative w-24 md:w-28 h-24 md:h-28 bg-gradient-to-b from-gray-200 to-gray-300 rounded-full flex items-center justify-center shadow-xl border-4 border-gray-300">
                            <Image
                              src="/images/trophy.svg"
                              alt="Silver Trophy"
                              width={80}
                              height={80}
                              className="w-12 md:w-16 h-12 md:h-16"
                            />
                          </div>
                        </div>

                        <div className="mt-4 md:mt-6 text-center">
                          <div className="inline-block px-3 md:px-4 py-1.5 md:py-2 bg-gradient-to-r from-gray-200 to-gray-300 rounded-full mb-2 shadow-inner">
                            <p className="text-xl md:text-2xl font-bold text-gray-700">
                              2nd
                            </p>
                          </div>
                          <p className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-1 break-words px-2">
                            ₹
                            {formatINR(
                              prizeData?.prize_items[1]?.prize_amount,
                            ) || "—"}
                          </p>
                          <p className="text-gray-600 text-xs md:text-sm">
                            {prizeData?.prize_items[1]?.prize_winners || "--"}{" "}
                            Winners
                          </p>
                        </div>
                      </div>

                      {/* 1st Prize (Center, Biggest) */}
                      <div className="order-first md:order-none transform transition-all duration-300 hover:scale-110 hover:-translate-y-3 w-full md:w-auto">
                        <div className="relative mb-4 md:mb-8 flex justify-center">
                          <div className="absolute -inset-4 bg-gradient-to-br from-[#FAA631]/30 to-[#E6952B]/30 rounded-full blur-xl"></div>
                          <div className="absolute -inset-2 bg-gradient-to-br from-[#FFD56A] to-[#FAA631] rounded-full blur opacity-50 animate-pulse"></div>
                          <div className="relative w-32 md:w-36 h-32 md:h-36 bg-gradient-to-b from-[#FFD56A] to-[#FAA631] rounded-full flex items-center justify-center shadow-2xl border-4 border-[#FFB347] animate-pulse-glow">
                            <Image
                              src="/images/trophy.svg"
                              alt="Gold Trophy"
                              width={100}
                              height={100}
                              className="w-16 md:w-20 h-16 md:h-20"
                            />
                            <div className="absolute -top-2 -right-2 w-8 md:w-10 h-8 md:h-10 bg-gradient-to-br from-[#FFD56A] to-[#FAA631] rounded-full flex items-center justify-center shadow-lg">
                              <Crown className="w-5 md:w-6 h-5 md:h-6 text-white" />
                            </div>
                          </div>
                        </div>

                        <div className="text-center">
                          <div className="inline-block px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r from-[#FAA631] to-[#E6952B] rounded-full mb-3 shadow-lg shadow-[#FAA631]/40">
                            <p className="text-2xl md:text-3xl font-bold text-white">
                              1st
                            </p>
                          </div>
                          <p className="text-2xl md:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-[#E6952B] to-[#FAA631] bg-clip-text text-transparent mb-2 break-words px-2">
                            ₹
                            {formatINR(
                              prizeData?.prize_items[0]?.prize_amount,
                            ) || "—"}
                          </p>
                          <p className="text-[#E6952B] text-xs md:text-sm font-semibold">
                            {prizeData?.prize_items[0]?.prize_winners || "--"}{" "}
                            Winners
                          </p>
                          <div className="mt-3 inline-flex items-center gap-1 text-xs font-bold text-[#E6952B] bg-[#FAA631]/10 px-3 py-1 rounded-full border border-[#FAA631]/20">
                            <Star className="w-3 h-3" /> TOP PRIZE
                          </div>
                        </div>
                      </div>

                      {/* 3rd Prize */}
                      <div className="group/prize transform transition-all duration-300 hover:scale-105 hover:-translate-y-2 w-full md:w-auto">
                        <div className="relative flex justify-center">
                          <div className="absolute -inset-4 bg-gradient-to-br from-[#E6952B]/20 to-[#D6851B]/20 rounded-full blur opacity-20 group-hover/prize:opacity-30"></div>
                          <div className="relative w-20 md:w-24 h-20 md:h-24 bg-gradient-to-b from-[#E6952B] to-[#D6851B] rounded-full flex items-center justify-center shadow-xl border-4 border-[#E6952B]">
                            <Image
                              src="/images/trophy.svg"
                              alt="Bronze Trophy"
                              width={70}
                              height={70}
                              className="w-10 md:w-14 h-10 md:h-14"
                            />
                          </div>
                        </div>

                        <div className="mt-4 md:mt-6 text-center">
                          <div className="inline-block px-3 md:px-4 py-1.5 md:py-2 bg-gradient-to-r from-[#E6952B] to-[#D6851B] rounded-full mb-2 shadow-inner">
                            <p className="text-xl md:text-2xl font-bold text-white">
                              3rd
                            </p>
                          </div>
                          <p className="text-xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-1 break-words px-2">
                            ₹
                            {formatINR(
                              prizeData?.prize_items[2]?.prize_amount,
                            ) || "—"}
                          </p>
                          <p className="text-gray-600 text-xs md:text-sm">
                            {prizeData?.prize_items[2]?.prize_winners || "--"}{" "}
                            Winners
                          </p>
                        </div>
                      </div>
                    </div>
                    <div className="mt-10 flex justify-center">
                      <button
                        onClick={() => router.push("/prizes")}
                        className="px-6 py-2 rounded-full bg-gradient-to-r from-[#FAA631] to-[#E6952B] text-white font-semibold shadow-lg hover:scale-105 transition-all duration-300"
                      >
                        View All Prizes →
                      </button>
                    </div>

                    {/* Additional Prize Info */}
                    <div className="mt-32 pt-6 border-t border-[#FAA631]/20">
                      <p className="text-center text-gray-600 font-medium">
                        * All winners receive certificates & nationwide
                        recognition
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </AnimatedSection>
          </div>
        </div>
      </section>

      {/* ================== WHY THIS OLYMPIAD MATTERS ================== */}
      <section className="py-16 md:py-24 bg-gradient-to-r from-[#FFF8EE] to-white relative overflow-hidden">
        <div className="container mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
          {/* ===================== LEFT : VIDEO BLOCK ===================== */}
          <AnimatedSection
            delay={50}
            className="lg:scale-[0.95] xl:scale-100 origin-top"
          >
            {/* Floating orb background */}
            <div className="absolute -top-10 -left-14 w-72 h-72 bg-[#FAA631]/20 blur-3xl rounded-full"></div>

            <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight mb-4">
              Discover The Power of Gita
            </h2>
            <p className="text-lg text-gray-600 mb-6 max-w-lg">
              Watch this short introduction and understand why the
              <span className="text-[#FAA631] font-semibold">
                {" "}
                Gita Olympiad{" "}
              </span>
              is transforming lives globally.
            </p>

            <div
              className="relative w-full rounded-3xl overflow-hidden shadow-2xl bg-black group cursor-pointer"
              style={{ height: 370 }}
            >
              {!showVideo && (
                <>
                  <Image
                    src={
                      coverVideo?.cover_video_thumbnail ??
                      "/images/geetaImage.png"
                    }
                    alt="Bhagavad Gita Session"
                    width={1200}
                    height={600}
                    className="w-full h-full object-cover group-hover:scale-[1.03] transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>

                  {/* Premium play button */}
                  <button
                    className="absolute inset-0 flex items-center justify-center"
                    onClick={() => {
                      setVideoUrl(coverVideo?.cover_video);
                      setShowVideo(true);
                    }}
                  >
                    <div
                      className="w-24 h-24 rounded-full bg-transparent 
                flex items-center justify-center"
                    >
                      <div className="bg-[#FF0000] px-4 py-3 rounded-xl">
                        <svg
                          className="w-8 h-8 text-white ml-1"
                          fill="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path d="M8 5v14l11-7z" />
                        </svg>
                      </div>
                    </div>
                  </button>
                </>
              )}

              {showVideo && (
                <video
                  src={videoUrl}
                  controls
                  autoPlay
                  className="w-full h-full"
                />
              )}
            </div>
          </AnimatedSection>

          {/* ===================== RIGHT : WHY OLYMPIAD ===================== */}
          <AnimatedSection
            delay={100}
            className="lg:scale-[0.92] xl:scale-100 origin-top"
          >
            {/* <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 leading-tight mb-4">
              Why This Olympiad Matters
            </h2>
            <p className="text-lg text-gray-600 mb-8 max-w-md">
              A once-in-a-lifetime opportunity to dive deep into wisdom that
              strengthens character, intellect, and consciousness.
            </p> */}

            <div className="relative">
              {/* Slider */}
              <div
                ref={olypmiadSliderRef}
                className="keen-slider max-h-[500px] overflow-hidden rounded-2xl shadow-xl"
              >
                {olympiadItems.map((item: any, i: any) => (
                  <div
                    key={i}
                    className="keen-slider__slide h-[450px] flex items-center justify-center px-1"
                  >
                    <div className="relative group h-full w-full">
                      {/* Soft glow behind the card */}
                      <div className="absolute -inset-0.5 bg-gradient-to-br from-[#FAA631] via-[#FFB347] to-[#FFD56A] rounded-3xl blur opacity-20 group-hover:opacity-50 transition duration-500" />

                      <Card className="relative h-full rounded-3xl border border-[#FAA631]/20 bg-white overflow-hidden shadow-xl">
                        {/* Top accent bar */}
                        <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#FAA631] via-[#FFB347] to-[#FAA631]" />

                        {/* Decorative corner blob */}
                        <div className="pointer-events-none absolute -top-10 -right-10 w-40 h-40 bg-[#FAA631]/10 rounded-full blur-2xl" />

                        <CardContent className="relative p-6 md:p-8 flex flex-col h-full w-full">
                          {/* Header */}
                          <div className="flex items-start gap-4">
                            <div className="shrink-0 w-14 h-14 rounded-2xl bg-gradient-to-br from-[#FFF4E4] to-[#FFE6C2] flex items-center justify-center shadow-inner ring-1 ring-[#FAA631]/20">
                              {item.icon ? (
                                <item.icon className="w-7 h-7 text-[#FAA631]" />
                              ) : (
                                <Star className="w-7 h-7 text-[#FAA631]" />
                              )}
                            </div>

                            <div className="flex-1 min-w-0">
                              <span className="inline-block text-[11px] font-semibold uppercase tracking-wider text-[#E6952B] bg-[#FAA631]/10 px-2.5 py-0.5 rounded-full mb-2">
                                Why It Matters
                              </span>
                              <h3 className="text-xl md:text-2xl font-bold text-gray-900 leading-snug line-clamp-2">
                                {item.title}
                              </h3>
                            </div>

                            {/* Slide counter badge */}
                            <div className="shrink-0 text-xs font-semibold text-[#A56A12] bg-[#FFF7EC] border border-[#F3C88A] rounded-full px-3 py-1">
                              {i + 1}/{olympiadItems.length}
                            </div>
                          </div>

                          {/* Divider */}
                          <div className="my-4 h-px bg-gradient-to-r from-[#FAA631]/30 via-[#FAA631]/10 to-transparent" />

                          {/* Description */}
                          <div className="flex-1 overflow-y-auto pr-1">
                            <div
                              className="prose prose-base max-w-none text-gray-600
                                prose-p:leading-relaxed
                                prose-headings:text-gray-900
                                prose-strong:text-gray-900
                                prose-ul:list-disc prose-ul:pl-6
                                prose-li:mb-2"
                              dangerouslySetInnerHTML={{
                                __html: decodeHtml(item.desc) || "",
                              }}
                            />
                          </div>

                          {/* Footer actions */}
                          <div className="mt-6 pt-5 border-t border-gray-100 flex flex-col sm:flex-row gap-3">
                            <Button
                              asChild
                              className="flex-1 bg-white hover:bg-[#FAA631] px-6 py-5 text-sm font-semibold text-[#e0911d] hover:text-white border-2 border-[#FAA631] shadow-sm hover:shadow-md rounded-xl transition-all"
                            >
                              <Link
                                onClick={() => {
                                  localStorage.setItem(
                                    "olympiadId",
                                    JSON.stringify(item?.id),
                                  );
                                }}
                                href="/olympiad"
                              >
                                View Details
                              </Link>
                            </Button>

                            {!userData?.id ||
                              (isRegistered === false &&
                                (isRegistrationClosed ? (
                                  <Button
                                    disabled
                                    className="flex-1 bg-[#FAA631] px-6 py-5 text-sm font-semibold text-white shadow-md rounded-xl opacity-70 cursor-not-allowed"
                                  >
                                    Registration Closed
                                  </Button>
                                ) : (
                                  <Button
                                    onClick={() => {
                                      if (!userData?.id) {
                                        localStorage.setItem(
                                          "redirectAfterAuth",
                                          "/olympiad/register",
                                        );
                                      }
                                    }}
                                    asChild
                                    className="flex-1 bg-gradient-to-r from-[#FAA631] to-[#E6952B] hover:from-[#e0911d] hover:to-[#d6851b] px-6 py-5 text-sm font-semibold text-white shadow-md hover:shadow-lg rounded-xl transition-all"
                                  >
                                    <Link
                                      href={
                                        !userData?.id
                                          ? "/login"
                                          : "/olympiad/register"
                                      }
                                    >
                                      Join the Olympiad
                                    </Link>
                                  </Button>
                                )))}
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </div>
                ))}
              </div>

              {/* Pagination Dots */}
              {loaded && olympiadItems.length > 0 && (
                <div className="flex justify-center gap-3 mt-6">
                  {Array.from(
                    { length: olympiadItems.length },
                    (_, idx) => (
                      <button
                        key={idx}
                        onClick={() => slider.current?.moveToIdx(idx)}
                        className={`transition-all duration-300 rounded-full ${
                          currentSlide === idx
                            ? "w-8 h-3 bg-[#FAA631]"
                            : "w-3 h-3 bg-gray-300"
                        }`}
                      />
                    ),
                  )}
                </div>
              )}
            </div>
          </AnimatedSection>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-white border-b border-gray-100">
        <div className="container mx-auto px-4 max-w-7xl">
          <AnimatedSection className="text-center mb-14">
            <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-4">
              Featured Gita Course
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed">
              A beautifully crafted course designed to deepen your understanding
              of the Bhagavad Gita with modern clarity and ancient wisdom.
            </p>
          </AnimatedSection>

          <div className="flex justify-center mb-8">
            <div className="inline-flex rounded-full border border-[#F3C88A] bg-[#FFF7EC] p-1">
              {[
                { label: "Hindi", value: "hindi" as const },
                { label: "English", value: "english" as const },
              ].map((tab) => (
                <button
                  key={tab.value}
                  onClick={() => {
                    setCourseTabLanguage(tab.value);
                    setActiveCourseLanguage(tab.value);
                  }}
                  className={`rounded-full px-6 py-2 text-sm font-semibold transition ${
                    courseTabLanguage === tab.value
                      ? "bg-[#FAA631] text-white shadow"
                      : "text-[#A56A12]"
                  }`}
                >
                  {tab.label}
                </button>
              ))}
            </div>
          </div>

          {course ? (
            <CourseCard
              title={
                courseTabLanguage === "hindi" ? course.title_2 : course.title
              }
              instructor={course.instructor || "Vrindavan Chandra Das"}
              students={course.students || "70k+"}
              image={course.cover_image}
              link="/course/online"
              description={
                courseTabLanguage === "hindi"
                  ? decodeHtml(course.description_hindi)
                  : decodeHtml(course.description)
              }
              isFree={true}
            />
          ) : (
            <div className="flex flex-col items-center justify-center h-56 text-center border-2 border-dashed border-orange-300 rounded-3xl bg-orange-50 px-6">
              <div className="text-4xl mb-3">{isRegistered ? "⏳" : "🔒"}</div>

              <h3 className="text-lg font-semibold text-gray-800 mb-1">
                {isRegistered ? "Course Coming Soon" : "Course Locked"}
              </h3>

              <p className="text-sm text-gray-600 max-w-sm">
                {isRegistered
                  ? "We’re preparing this course for you. Please check back shortly."
                  : "Register for the Olympiad to unlock full access to this course."}
              </p>

              {!isRegistered && (
                <button
                  onClick={() => {
                    if (!isRegistrationClosed) {
                      router.push("/olympiad/register");
                    }
                  }}
                  disabled={isRegistrationClosed}
                  className="mt-4 px-5 py-2 rounded-xl bg-[#FAA631] text-white text-sm font-medium hover:bg-[#e0911d] transition"
                >
                  {isRegistrationClosed ? "Registration close" : "Register Now"}
                </button>
              )}
            </div>
          )}

          {/* ================== ONGOING COURSE ================== */}
          {homeData?.continue_watching &&
            (() => {
              const course = homeData.continue_watching;

              const progress = Number(course.percentage);

              const currentTime = formatTime(Number(course.current_time));
              const totalDuration = formatTime(Number(course.total_duration));

              return (
                <div className="container mx-auto mt-20 md:px-10 ">
                  <div className="flex items-center justify-between mb-6">
                    <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
                      Ongoing Course
                    </h2>

                    <span className="bg-green-500 text-white text-xs px-3 py-1 rounded-full font-medium">
                      {progress}% Completed
                    </span>
                  </div>

                  {/* Course Card */}
                  <div className="bg-[#FFEACE] rounded-3xl p-5 md:p-6 flex flex-col md:flex-row gap-6 items-center shadow-md">
                    {/* Thumbnail */}
                    <div className="w-full md:w-[220px] md:h-[220px] h-full rounded-xl overflow-hidden flex-shrink-0">
                      <Image
                        src={
                          course?.thumbnail_url &&
                          typeof course.thumbnail_url === "string"
                            ? course.thumbnail_url
                            : "/images/geetaImage.png"
                        }
                        alt={course?.title || "course"}
                        width={120}
                        height={120}
                        className="w-full md:w-[220px] h-full md:h-[220px] object-fill"
                      />
                    </div>

                    {/* Course Content */}
                    <div className="flex-1 w-full">
                      <h3 className="text-xl md:text-2xl font-bold text-gray-900">
                        Bhagwat Gita Course
                      </h3>

                      <p className="text-gray-600 text-sm mt-1">
                        Continue Watching
                      </p>

                      <p className="text-gray-700 font-medium mt-1">
                        {course.title}
                      </p>

                      {/* Progress */}
                      <div className="mt-4">
                        <div className="flex justify-between text-sm text-gray-700 mb-1">
                          <span>{currentTime}</span>
                          <span>{totalDuration}</span>
                        </div>

                        <div className="w-full h-2 bg-orange-200 rounded-full overflow-hidden">
                          <div
                            className="h-full bg-[#FAA631] rounded-full"
                            style={{ width: `${progress}%` }}
                          />
                        </div>
                      </div>
                    </div>
                    {/* Play Button */}
                    <div className="flex items-center justify-center">
                      <button
                        onClick={() =>
                          router.push(
                            `/quiz?contentId=${homeData.continue_watching.content_id}&langId=${homeData.continue_watching.langId}`,
                          )
                        }
                        className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-white shadow-lg flex items-center justify-center hover:scale-105 transition"
                      >
                        <svg
                          className="w-8 h-8 text-[#FAA631] ml-1"
                          fill="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path d="M8 5v14l11-7z" />
                        </svg>
                      </button>
                    </div>
                  </div>
                </div>
              );
            })()}
        </div>
      </section>

      {/* ================== TESTIMONIALS ================== */}
      <section className="py-16 md:py-24 bg-[#FFF8EE] border-b border-gray-100">
        <div className="container mx-auto px-4">
          <AnimatedSection className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
              What Our Students Say
            </h2>
            <p className="text-base md:text-lg text-gray-600 max-w-3xl mx-auto">
              Hear from learners whose lives have been positively impacted by
              studying the Bhagavad Gita.
            </p>
          </AnimatedSection>

          <div className="relative">
            {/* Left Arrow */}
            <button
              onClick={handleTestimonialPrev}
              className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-white shadow-lg border border-gray-200 flex items-center justify-center text-gray-700 hover:bg-[#FAA631] hover:text-white hover:border-[#FAA631] transition-all duration-200"
              aria-label="Previous slide"
            >
              <ChevronLeft className="w-5 h-5 md:w-6 md:h-6" />
            </button>

            <div
              ref={sliderRef}
              className="keen-slider px-2 sm:px-0 flex items-stretch"
            >
              {testimonialsData?.map((item, i) => (
                <div
                  key={`${item.id}-${i}`}
                  className="keen-slider__slide flex justify-center"
                >
                  <TestimonialVideoCard
                    name={item.user_name}
                    designation={item.user_title}
                    content={item.testimonial_text}
                    image={item.image_url}
                    videoUrl={item.is_video === "1" ? item.video_url : undefined}
                    rating={item?.rating} // or dynamic if API gives later
                  />
                </div>
              ))}
            </div>

            {/* Right Arrow */}
            <button
              onClick={handleTestimonialNext}
              className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 z-10 w-10 h-10 md:w-12 md:h-12 rounded-full bg-white shadow-lg border border-gray-200 flex items-center justify-center text-gray-700 hover:bg-[#FAA631] hover:text-white hover:border-[#FAA631] transition-all duration-200"
              aria-label="Next slide"
            >
              <ChevronRight className="w-5 h-5 md:w-6 md:h-6" />
            </button>
          </div>
        </div>
      </section>

      {/* ================== IMPACT STATS ================== */}
      <section className="py-16 md:py-24 bg-[#F9FAFB] border-b border-gray-100">
        <div className="container mx-auto px-4">
          <AnimatedSection className="text-center mb-10">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-3">
              Our Impact
            </h2>
            <p className="text-base md:text-lg text-gray-600 max-w-3xl mx-auto">
              Making timeless spiritual wisdom accessible to millions across the
              globe.
            </p>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-5xl mx-auto">
            {[
              {
                icon: <Users className="w-10 h-10" />,
                number: "50,000+",
                label: "Active Students",
              },
              {
                icon: <Globe className="w-10 h-10" />,
                number: "150+",
                label: "Countries Reached",
              },
              {
                icon: <Award className="w-10 h-10" />,
                number: "45,000+",
                label: "Certificates Issued",
              },
              {
                icon: <BookOpen className="w-10 h-10" />,
                number: "100+",
                label: "Learning Modules",
              },
            ].map((stat, index) => (
              <AnimatedSection key={index} delay={index * 80}>
                <Card className="text-center rounded-2xl border border-gray-100 shadow-sm bg-white">
                  <CardContent className="pt-8 pb-8">
                    <div className="flex justify-center text-[#FAA631] mb-3">
                      {stat.icon}
                    </div>
                    <div className="text-2xl md:text-3xl font-bold text-gray-900 mb-1">
                      {stat.number}
                    </div>
                    <div className="text-sm md:text-base text-gray-600">
                      {stat.label}
                    </div>
                  </CardContent>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* {announcement && (
        <section className="py-12 bg-[#fff] border-b border-gray-100">
          <div className="container mx-auto px-4">
            <AnimatedSection className="max-w-5xl mx-auto">
              <Card className="bg-white rounded-3xl shadow-sm border border-gray-100">
                <CardContent className="p-6 md:p-8">
                  <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
                    <h2 className="text-xl md:text-2xl font-semibold text-gray-900 flex items-center gap-2">
                      <span className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[#FFF4E4] text-[#FAA631] font-bold">
                        !
                      </span>
                      Announcement
                    </h2>

                    <Link
                      href="/announcement"
                      className="text-sm font-semibold text-[#FAA631] hover:text-orange-500"
                    >
                      Show more &gt;
                    </Link>
                  </div>

                  <p className="text-base md:text-lg font-medium text-gray-800 mb-3">
                    {lang === "hindi"
                      ? announcement.title_2
                      : announcement.title}
                  </p>

                  {announcement.description_hindi ||
                    (announcement.description && (
                      <div className="flex gap-3 text-sm md:text-base text-gray-600 leading-relaxed">
                        <span className="text-[#FAA631] mt-1">•</span>
                        <div className="space-y-1">
                          {formatDescription(
                            lang === "hindi"
                              ? announcement.description_hindi
                              : announcement.description,
                          )}
                        </div>
                      </div>
                    ))}
                </CardContent>
              </Card>
            </AnimatedSection>
          </div>
        </section>
      )} */}

      {/* ================== SUPPORT US (DONATE) SECTION ================== */}
      <SupportUsSection />

      {/* ================== APP DOWNLOAD SECTION ================== */}
      <AppDownloadSection />

      {/* ================== FINAL CTA ================== */}
      <section className="bg-white">
        <div className="mx-auto">
          <AnimatedSection className="mx-auto bg-[#FFF4E4] shadow-sm px-6 md:px-10 py-10 md:py-14 text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Ready to Begin Your Gita Journey?
            </h2>
            <p className="text-base md:text-lg text-gray-700 mb-8 max-w-2xl mx-auto">
              Join thousands of students worldwide and participate in the
              Shrimad Bhagavad Gita Mega Olympiad. Learn, reflect and grow with
              every verse.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              {isRegistered === false &&
                (isRegistrationClosed ? (
                  <Button
                    size="lg"
                    disabled
                    className="bg-[#FAA631] hover:bg-[#e0911d] text-lg px-8"
                  >
                    Registration close
                  </Button>
                ) : (
                  <Button
                    onClick={() => {
                      if (!userData?.id) {
                        localStorage.setItem(
                          "redirectAfterAuth",
                          "/olympiad/register",
                        );
                      }
                    }}
                    size="lg"
                    asChild
                    className="bg-[#FAA631] hover:bg-[#e0911d] text-lg px-8"
                  >
                    <Link href={userData?.id ? "/olympiad/register" : "/login"}>
                      Register for Olympiad
                    </Link>
                  </Button>
                ))}
              <Button
                size="lg"
                variant="outline"
                asChild
                className="border-[#FAA631] text-[#FAA631] hover:bg-[#FAA631] text-lg px-8"
              >
                <Link href="/contact">Talk to Our Team</Link>
              </Button>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}

// ============================================================
// SUPPORT US SECTION — standalone component, used in Home
// ============================================================
function SupportUsSection() {
  const router = useRouter();

  return (
    <section className="py-16 md:py-24 bg-[#FFF8F0]">
      <div className="container mx-auto px-4">
        <AnimatedSection className="max-w-3xl mx-auto text-center">
          <span className="inline-block px-4 py-1.5 bg-[#FFF4E4] text-[#FAA631] rounded-full text-xs md:text-sm font-semibold mb-4">
            Make a Difference
          </span>
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
            Support Us
          </h2>
          <p className="text-base md:text-lg text-gray-600 mb-10">
            Your contribution helps us spread the wisdom of Bhagavad Gita and
            make this Olympiad accessible to students everywhere — completely
            free.
          </p>

          <button
            onClick={() => router.push("/donate")}
            className="inline-flex items-center gap-2 px-8 py-3.5 rounded-full bg-[#FAA631] text-white font-semibold shadow-md hover:bg-[#e0911d] hover:shadow-lg transition-all duration-300"
          >
            Support Us
            <span className="transition-transform">→</span>
          </button>
        </AnimatedSection>
      </div>
    </section>
  );
}

// ============================================================
// APP DOWNLOAD SECTION — standalone component, used in Home
// ============================================================
const PLAY_STORE_URL =
  "https://play.google.com/store/apps/details?id=com.givegita";
const APP_STORE_URL = "https://apps.apple.com/app/givegita";

function AppDownloadSection() {
  return (
    <section className="py-16 md:py-24  overflow-hidden">
      <div className="container mx-auto px-4">
        <div className="relative rounded-3xl overflow-hidden">
          {/* Decorative blobs */}
          {/* <div className="absolute -top-20 -left-20 w-72 h-72 bg-[#FAA631]/10 rounded-full blur-3xl" />
          <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-[#FAA631]/15 rounded-full blur-3xl" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-[#FAA631]/5 rounded-full blur-2xl" /> */}

          <div className="relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-10 items-center px-8 md:px-14 py-12 md:py-16">
            {/* Left — Text */}
            <AnimatedSection delay={50}>
              <span className="inline-block px-4 py-1.5 bg-[#FAA631]/10 text-[#FAA631] rounded-full text-xs md:text-sm font-semibold mb-5 border border-[#FAA631]/30">
                Now Available on Mobile
              </span>

              <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight mb-5">
                Take Gita Wisdom{" "}
                <span className="text-[#FAA631]">Everywhere</span>
              </h2>

              <p className="text-gray-600 text-base md:text-lg leading-relaxed mb-8 max-w-lg">
                Study at your own pace, take quizzes, track progress and
                participate in the Olympiad — all from your phone. Download the
                Give Gita app for free on Android and iOS.
              </p>

              {/* Feature Pills */}
              <div className="flex flex-wrap gap-3 mb-10">
                {[
                  "Free to Download",
                  "Hindi & English",
                  "Offline Access",
                ].map((f) => (
                  <span
                    key={f}
                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-white text-gray-700 text-sm border border-[#FAA631]/20 shadow-sm"
                  >
                    <span className="w-1.5 h-1.5 rounded-full bg-[#FAA631]" />
                    {f}
                  </span>
                ))}
              </div>

              {/* Store Buttons */}
              <div className="flex flex-col sm:flex-row gap-4">
                {/* Google Play */}
                <a
                  href={PLAY_STORE_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group flex items-center gap-4 bg-white text-gray-900 px-5 py-3.5 rounded-2xl hover:bg-[#FAA631] hover:text-white transition-all duration-300 shadow-lg hover:shadow-[#FAA631]/30 hover:shadow-xl min-w-[180px] border border-[#FAA631]/20"
                >
                  {/* Play Store Icon */}
                  <svg
                    viewBox="0 0 24 24"
                    className="w-8 h-8 shrink-0"
                    fill="none"
                  >
                    <path
                      d="M3.18 23.76c.3.17.65.19.97.07L14.84 12 3.17.17A1.1 1.1 0 0 0 3 .77v22.46c0 .2.06.38.18.53z"
                      fill="#EA4335"
                    />
                    <path
                      d="M19.25 9.23 16.1 7.47 12.62 12l3.48 4.53 3.15-1.76A2.15 2.15 0 0 0 20.5 12a2.15 2.15 0 0 0-1.25-2.77z"
                      fill="#FBBC04"
                    />
                    <path
                      d="M3.18.17 16.1 7.47 12.62 12 3.17.17z"
                      fill="#4285F4"
                    />
                    <path
                      d="M3.18 23.83 16.1 16.53 12.62 12 3.17 23.83z"
                      fill="#34A853"
                    />
                  </svg>
                  <div>
                    <div className="text-[10px] font-medium uppercase tracking-wide text-gray-500 group-hover:text-white/80">
                      GET IT ON
                    </div>
                    <div className="text-sm md:text-base font-bold leading-tight">
                      Google Play
                    </div>
                  </div>
                </a>

                {/* App Store */}
                <a
                  href={APP_STORE_URL}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="group flex items-center gap-4 bg-white text-gray-900 px-5 py-3.5 rounded-2xl hover:bg-[#FAA631] hover:text-white transition-all duration-300 shadow-lg hover:shadow-[#FAA631]/30 hover:shadow-xl min-w-[180px] border border-[#FAA631]/20"
                >
                  {/* Apple Icon */}
                  <svg
                    viewBox="0 0 24 24"
                    className="w-8 h-8 shrink-0 fill-current"
                  >
                    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
                  </svg>
                  <div>
                    <div className="text-[10px] font-medium uppercase tracking-wide text-gray-500 group-hover:text-white/80">
                      DOWNLOAD ON THE
                    </div>
                    <div className="text-sm md:text-base font-bold leading-tight">
                      App Store
                    </div>
                  </div>
                </a>
              </div>
            </AnimatedSection>

            {/* Right — Play Store Image */}
            <AnimatedSection
              delay={150}
              className="flex justify-center lg:justify-end"
            >
              <div className="relative w-[300px] md:w-[400px] lg:w-[450px]">
                {/* Glow effect */}
                <div className="absolute inset-0 bg-gradient-to-br from-[#FAA631]/20 to-[#FFB347]/15 rounded-3xl blur-3xl scale-110 pointer-events-none" />

                <Image
                  src="/images/playstore.svg"
                  alt="Download Give Gita App"
                  width={450}
                  height={500}
                  className="w-full h-auto object-contain"
                  priority
                />
              </div>
            </AnimatedSection>
          </div>
        </div>
      </div>
    </section>
  );
}