"use client";

import { useBasic } from "@/app/context/BasicContext";
import AnimatedSection from "@/components/AnimatedSection";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import InfoGridOrSlider from "@/components/ui/InfoGridOrSlider";
import { getHomeApi, getTestimonialDetails } from "@/lib/api/apis";
import { useLanguage } from "@/src/hooks/LanguageContext";
import { getTranslation } from "@/src/hooks/useTranslation";
import { useKeenSlider } from "keen-slider/react";
import {
  CheckCircle,
  Clock,
  Users,
  Award,
  BookOpen,
  BrainCircuit,
  Star,
  ShieldCheck,
  Play,
  Facebook,
  Twitter,
  Instagram,
  Youtube,
  Minus,
  Plus,
  Send,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";
import Image from "next/image";
import TestimonialVideoCard from "@/components/TestimonialCard";
import { useRouter } from "next/navigation";
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import {
  buildCourseMap,
  getCourseIdForLanguage,
  persistCourseMap,
  setActiveCourseLanguage,
} from "@/lib/courseSelection";

const PRIMARY = "#FAA631"; // Main Brand Color
const LIGHT = "#FFF4E4"; // Light Background Tint

export default function OnlineGurukulPage() {
  const TESTIMONIALS = [
    {
      name: "Amit Sharma",
      text: "This Olympiad changed how my child thinks and behaves. Highly recommended!",
    },
    {
      name: "Priya Verma",
      text: "The values taught here are priceless. Every student must take this course.",
    },
    {
      name: "Rajesh Gupta",
      text: "Excellent initiative! The teachings helped me solve real challenges in life.",
    },
    {
      name: "Sunita Mehra",
      text: "Beautifully structured course with practical wisdom from scriptures.",
    },
  ];

  const MEETINGS = [
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fguruji%2F1.webp&w=1080&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fguruji%2F2.webp&w=1080&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fguruji%2F3.webp&w=640&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fguruji%2F4.webp&w=640&q=75",
  ];

  const LOGOS = [
    "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",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F10.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F11.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F12.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F13.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F14.webp&w=256&q=75",
    "https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fcompany%2F15.webp&w=256&q=75",

    // add more if needed
  ];

  const basic = useBasic();
  const faq = basic?.faq;
  const FAQS = Array.isArray(faq) ? faq : [];
  const [activeId, setActiveId] = useState<number | null>(null);
  const midpoint = Math.ceil(FAQS.length / 2);
  const leftFAQS = FAQS.slice(0, midpoint);
  const rightFAQS = FAQS.slice(midpoint);
  const [open, setOpen] = useState(false);
  const { language } = useLanguage();
  const t = getTranslation(language);
  const page = t.onlineCoursePage;
  const QUESTIONS = page.questions;
  const ACHIEVEMENTS = page.achievements;
  const [homeData, setHomeData] = useState<Record<string, any>>({});
  const [testimonialsData, setTestimonialsData] = useState<any[]>([]);
  const router = useRouter();
  const [isRegistered, setIsRegistered] = useState<boolean | null>(null);
  const icons = [
    {
      icon: Facebook,
      url: "https://www.facebook.com/givegita",
      label: "Facebook",
    },
    {
      icon: Instagram,
      url: "https://www.instagram.com/vrindavanchandra.das/?hl=en",
      label: "Instagram",
    },
    {
      icon: Send, // Telegram
      url: "https://t.me/givegita",
      label: "Telegram",
    },
    {
      icon: Twitter,
      url: "https://twitter.com/givegita",
      label: "Twitter",
    },
    {
      icon: Youtube,
      url: "https://www.youtube.com/givegita",
      label: "YouTube",
    },
  ];

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

    const stored = localStorage.getItem("register_details");
    if (stored) {
      try {
        const data = JSON.parse(stored);

        setIsRegistered(data?.regist_status == 1);
      } catch {
        setIsRegistered(false);
      }
    } else {
      setIsRegistered(false);
    }
  }, []);

  const [sliderRef, testimonialSlider] = useKeenSlider<HTMLDivElement>(
    {
      loop: true,
      mode: "snap",
      slides: {
        perView: 1,
        spacing: 16,
      },
      breakpoints: {
        "(min-width: 1024px)": {
          slides: {
            perView: 4,
            spacing: 30,
          },
        },
      },
    },
    [
      (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();
          }, 2500);
        }

        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 logoSliderRef = useRef<HTMLDivElement>(null);

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

    let frameId: number;
    const speed = 1; // tweak speed here

    const animate = () => {
      // move viewport to the right => content appears to move left
      slider.scrollLeft += speed;

      // when we've scrolled halfway (since LOGOS is duplicated), reset
      if (slider.scrollLeft >= slider.scrollWidth / 2) {
        slider.scrollLeft = 0;
      }

      frameId = requestAnimationFrame(animate);
    };

    frameId = requestAnimationFrame(animate);

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

  // Testimonial slider auto-play is handled by the plugin above

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

  const handleHomeApi = async () => {
    const storedUser = localStorage.getItem("user_data");
    let userId = "";

    if (storedUser) {
      try {
        userId = JSON.parse(storedUser)?.id || "";
      } catch {
        userId = "";
      }
    }

    const res = await getHomeApi(userId);
    if (res?.data) {
      setHomeData(res.data || {});
      persistCourseMap(res?.data?.courses || []);
    }
  };

  const openCourse = (courseLanguage: "hindi" | "english") => {
    const storedCourseId = getCourseIdForLanguage(courseLanguage);
    const fallbackCourseId =
      buildCourseMap(homeData?.courses || [])[courseLanguage] ?? null;
    const courseId = storedCourseId ?? fallbackCourseId;

    if (!courseId) return;

    setActiveCourseLanguage(courseLanguage);
    router.push("/quiz");
  };

  useLayoutEffect(() => {
    handleHomeApi();
    handleTestimonial();
  }, []);

  // 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();
    }
  };

  const registrationTimer = homeData?.registration_timer?.[0];
  const registrationTargetDate = registrationTimer?.end_datetime
    ? new Date(registrationTimer.end_datetime.replace(" ", "T"))
    : null;
  const isRegistrationClosed = registrationTargetDate
    ? registrationTargetDate.getTime() <= Date.now()
    : false;

  const FAQCard = ({ faq, activeId, setActiveId }: any) => (
    <div
      className={`border rounded-xl transition bg-[#FFF8EE] border-[#FAA631]/20 ${
        activeId === faq.id ? "shadow-lg" : ""
      }`}
    >
      <button
        className="w-full flex justify-between items-center px-5 py-4 text-left font-semibold text-[#2A2A2A] text-lg"
        onClick={() => setActiveId(activeId === faq.id ? null : faq.id)}
      >
        {language === "hindi" ? faq.question_hindi : faq.question}
        {activeId === faq.id ? (
          <Minus className="w-5 h-5 text-[#FAA631]" />
        ) : (
          <Plus className="w-5 h-5 text-[#FAA631]" />
        )}
      </button>

      {activeId === faq.id && (
        <div className="px-5 pb-4 text-[#4B4B4B] text-base leading-relaxed animate-fadeIn">
          {language === "hindi" ? faq.answer_hindi : faq.answer}
        </div>
      )}
    </div>
  );

  return (
    <div className="pt-20">
      <section
        className="py-10 md:py-10 text-white text-center"
        style={{ backgroundColor: PRIMARY }}
      >
        <div className="container mx-auto px-6 max-w-4xl">
          <AnimatedSection>
            <span className="px-5 py-2 bg-white/30 backdrop-blur-md rounded-full text-base font-semibold">
              {page.heroBadge}
            </span>

            <h1 className="text-5xl md:text-7xl font-bold mt-6 mb-4">
              {page.heroTitle}
            </h1>

            <p className="text-xl md:text-2xl text-orange-100 max-w-2xl mx-auto">
              {page.heroSubtitle}
            </p>

            {isRegistered === false ? (
              <Button
                onClick={() => {
                  if (isRegistrationClosed) {
                    return;
                  }

                  router.push("/olympiad/register");
                }}
                disabled={isRegistrationClosed}
                size="lg"
                className="mt-10 bg-white text-[#FAA631] text-xl px-12 py-6 hover:bg-orange-50"
              >
                {isRegistrationClosed ? page.registrationClosed : page.enrollButton}
              </Button>
            ) : (
              <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                <Button
                  onClick={() => openCourse("hindi")}
                  size="lg"
                  className="bg-white text-[#FAA631] text-lg px-8 py-6 hover:bg-orange-50 min-w-[220px]"
                >
                  Hindi Course
                </Button>
                <Button
                  onClick={() => openCourse("english")}
                  size="lg"
                  className="bg-white text-[#FAA631] text-lg px-8 py-6 hover:bg-orange-50 min-w-[220px]"
                >
                  English Course
                </Button>
              </div>
            )}
          </AnimatedSection>
        </div>
      </section>

      {/* <section className="py-20 bg-white">
        <div className="container mx-auto px-6 max-w-4xl">
          <AnimatedSection>
            <h2 className="text-4xl font-bold text-gray-900 mb-6 text-center">
              What is Online Gurukul?
            </h2>

            <p className="text-lg text-gray-700 leading-relaxed mb-6">
              Online Gurukul is a structured spiritual education program rooted
              in ancient wisdom, tailored for the modern generation. It blends
              storytelling, meditation, activities, and value based learning —
              all delivered digitally.
            </p>

            <p className="text-lg text-gray-700 leading-relaxed">
              The curriculum is carefully designed to nurture discipline, focus,
              empathy, gratitude, leadership and inner strength, using
              scriptures like the <b>Bhagavad Gita</b>,<b> Ramayana</b>, and
              stories of divine personalities.
            </p>
          </AnimatedSection>
        </div>
      </section> */}

      <section className="py-20 bg-gradient-to-br from-orange-50 to-white">
        <div className="container mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center justify-center max-w-7xl">
          <AnimatedSection delay={50}>
            <img
              src="https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fintro%2Fpersonalty.webp&w=750&q=75"
              className=" rounded-2xl shadow-lg  h-[450px]"
              alt={page.highlightsImageAlt}
            />
          </AnimatedSection>

          <AnimatedSection>
            <h3 className="text-3xl font-bold text-gray-900 ">
              {page.highlightsTitle}
            </h3>
            <p className="mb-6 text-xl text-gray-500 mt-2">
              {page.highlightsSubtitle}
            </p>

            {page.highlights.map((item, i) => (
              <div key={i} className="flex items-start space-x-3 mb-4">
                <CheckCircle
                  className="w-6 h-6 flex-shrink-0"
                  style={{ color: PRIMARY }}
                />
                <span className="text-gray-700 text-lg">{item}</span>
              </div>
            ))}
          </AnimatedSection>
        </div>
      </section>

      <section className="py-20 bg-[#FAA631] text-white">
        <h2 className="text-center text-3xl md:text-5xl font-extrabold mb-14">
          <span className="text-white/90">{page.overviewPrefix}</span> <br />
          {page.overviewTitle}
        </h2>

        <div className="bg-[#FFF8EE] rounded-3xl p-6 md:p-10 max-w-7xl mx-auto flex flex-col lg:flex-row gap-10">
          {/* LEFT SIDE IMAGE */}
          <div className="lg:w-1/2 flex justify-center">
            <Image
              src="https://givegita.com/_next/image?url=https%3A%2F%2Fd3pdtklj16740i.cloudfront.net%2Fimages%2Ffoundation-course%2Flife_core_question_new2.webp&w=1920&q=75"
              alt={page.overviewImageAlt}
              width={550}
              height={480}
              className="rounded-2xl object-cover"
            />
          </div>

          {/* RIGHT SIDE QUESTIONS */}
          <div className="lg:w-1/2 text-[#1A2433]">
            <button className="bg-brand/20 border border-brand text-brand px-6 py-2 rounded-full text-xs tracking-wide font-semibold mb-5">
              {page.coreQuestionsBadge}
            </button>

            <h3 className="text-3xl font-bold mb-6 text-[#2D2D2D]">
              {page.coreQuestionsTitle}
            </h3>

            <ul className="space-y-4">
              {QUESTIONS.map((q, i) => (
                <li key={i} className="flex items-start gap-2">
                  <CheckCircle className="w-5 h-5 text-brand flex-shrink-0 mt-1" />
                  <span className="text-base md:text-lg leading-relaxed text-[#374151]">
                    {q}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      <section className="pb-20 bg-[#FAA631] text-[#2A2A2A]">
        {/* TOP QUESTION BAR */}
        <div className="max-w-7xl mx-auto ">
          <div
            className="bg-[#FFF8EE] text-[#2A2A2A] rounded-xl px-5 py-4 shadow mb-10 cursor-pointer transition"
            onClick={() => setOpen(!open)}
          >
            <div className="flex justify-between items-center">
              <p className="text-base md:text-lg font-medium">
                {page.expandableQuestion}
              </p>

              {open ? (
                <Minus className="text-[#FAA631] w-6 h-6" />
              ) : (
                <Plus className="text-[#FAA631] w-6 h-6" />
              )}
            </div>

            {open && (
              <p className="mt-3 text-[#4B4B4B] text-base leading-relaxed animate-fadeIn">
                {page.expandableAnswer}
              </p>
            )}
          </div>

          {/* MAIN GRID */}
          <div className="grid md:grid-cols-2 gap-8">
            {/* LEFT CARD */}
            <div className="bg-[#FFF8EE] rounded-3xl p-6 flex flex-col shadow-xl">
              <h3 className="text-3xl font-bold mb-3 text-[#2A2A2A] mt-5">
                {page.empowerTitle}
              </h3>
              <p className="text-[#4B4B4B] mb-6">
                {page.empowerDescription}
              </p>

              <div className="relative rounded-2xl overflow-hidden shadow-md mt-10">
                <Image
                  src="https://givegita.com/_next/image?url=https%3A%2F%2Fd3pdtklj16740i.cloudfront.net%2Fimages%2Ffoundation-course%2Fyoutube_video_thumbnail.webp&w=1200&q=75"
                  alt={page.empowerImageAlt}
                  width={600}
                  height={280}
                  className="w-full h-[260px] object-cover"
                />

                {/* Play Button */}
                <button className="absolute inset-0 flex items-center justify-center">
                  <div className="w-20 h-20 bg-[#FAA631] text-white shadow-lg rounded-full flex items-center justify-center hover:scale-110 transition">
                    <Play className="w-10 h-10" />
                  </div>
                </button>
              </div>
            </div>

            {/* RIGHT CARD */}
            <div className="bg-[#FFF8EE] rounded-3xl p-6 flex flex-col shadow-xl">
              <Image
                src="https://givegita.com/_next/image?url=https%3A%2F%2Fd3pdtklj16740i.cloudfront.net%2Fimages%2Ffoundation-course%2Fcertificate.webp&w=1200&q=75"
                alt={page.certificateImageAlt}
                width={600}
                height={350}
                className="rounded-xl mb-6 object-cover"
              />

              <h3 className="text-3xl font-bold mb-2 text-[#2A2A2A]">
                {page.certificateTitle}
              </h3>
              <p className="text-[#4B4B4B] mb-6">
                {page.certificateDescription}
              </p>

              {/* Award Icon */}
              <div className="flex items-center gap-3">
                <div className="w-11 h-11 rounded-lg bg-[#FAA631]/20 border border-[#FAA631] flex items-center justify-center">
                  🏆
                </div>
                <div>
                  <p className="text-xl font-semibold text-[#FAA631]">
                    {page.awardCount}
                  </p>
                  <p className="text-[#4B4B4B] text-sm">{page.awardLabel}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 md:py-24 bg-[#FFF8EE] border-b border-gray-100">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <span className="px-5 py-2 bg-[#FFF4E4] backdrop-blur-md rounded-full text-base font-semibold">
              {page.testimonialsBadge}
            </span>
            <h2 className="text-3xl md:text-5xl font-extrabold text-gray-900 mb-3 mt-5">
              {page.testimonialsTitle}
            </h2>
          </div>

          <div className="relative max-w-7xl mx-auto">
            {/* 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}
                  />
                </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>

      <section className="py-20 bg-[#FFF8EE]">
        <h2 className="text-center text-3xl md:text-5xl font-extrabold text-[#2A2A2A] mb-16">
          {page.masterSectionTitle}
        </h2>

        <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 items-center">
          {/* IMAGE BOX */}
          <div className="rounded-3xl overflow-hidden shadow-lg">
            <Image
              src="https://givegita.com/_next/image?url=https%3A%2F%2Fmedia.givegita.com%2Fimages%2Fguruji%2F5.webp&w=1920&q=75"
              alt={page.masterImageAlt}
              width={620}
              height={420}
              className="object-cover w-full h-full"
            />
          </div>

          {/* DETAILS */}
          <div>
            <h3 className="text-4xl font-extrabold text-[#2A2A2A] mb-2">
              {page.masterName}
            </h3>
            <p className="text-[#FAA631] font-semibold mb-4">
              {page.masterSubtitle}
            </p>

            <p className="text-[#4B4B4B] leading-relaxed mb-8">
              {page.masterDescription}
            </p>

            {/* SOCIAL ICONS */}
            <div className="flex gap-4">
              {icons.map(({ icon: Icon, url, label }, i) => (
                <a
                  key={i}
                  href={url}
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label={label}
                  className="w-12 h-12 flex items-center justify-center
                     rounded-full border border-[#FAA631]
                     text-[#FAA631]
                     hover:bg-[#FAA631] hover:text-white transition"
                >
                  <Icon className="w-5 h-5" />
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="py-20">
        <h2 className="text-center text-3xl md:text-5xl font-extrabold text-[#2A2A2A] mb-14">
          {page.achievementsTitle}
        </h2>

        <div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 px-6">
          {ACHIEVEMENTS.map((item, idx) => (
            <div
              key={idx}
              className="group relative border border-[#FAA631]/20 rounded-2xl p-8 bg-white shadow-sm hover:shadow-xl hover:bg-[#FAA631]/10 transition duration-300"
            >
              {/* WATERMARK NUMBER */}
              <span
                className="absolute top-4 right-6 text-[95px] font-extrabold 
      text-[#FAA631]/10 group-hover:text-white transition-colors duration-500 select-none leading-none"
              >
                {item.no}
              </span>

              {/* MAIN VALUE */}
              <p className="text-3xl font-extrabold text-[#2A2A2A] mb-3">
                {item.value}
              </p>

              {/* DESCRIPTION */}
              <p className="text-[#4B4B4B] leading-relaxed text-lg">
                {item.text}
              </p>
            </div>
          ))}
        </div>
      </section>

      <section className="py-20 bg-[#FAA631]">
        <h2 className="text-center text-3xl md:text-5xl font-extrabold text-[#FFFFFF] mb-12">
          {page.meetingsTitle}
        </h2>

        <div className="flex justify-center gap-6 flex-wrap">
          {MEETINGS.map((img, i) => (
            <div key={i} className="rounded-xl overflow-hidden shadow-lg">
              <Image
                src={img}
                alt={page.meetingImageAlt}
                width={250}
                height={170}
                className="object-cover"
              />
            </div>
          ))}
        </div>
      </section>

      {/* <section className="py-20 bg-[#FFF8EE]">
        <h2 className="text-center text-3xl md:text-4xl font-extrabold text-[#2A2A2A] mb-12">
          Transformative Talks at Renowned Institutions:
        </h2>

        <div
          ref={logoSliderRef}
          className="w-full overflow-hidden" // SCROLL CONTAINER
        >
          <div className="flex gap-14 w-max whitespace-nowrap">
            {[...LOGOS, ...LOGOS].map((logo, idx) => (
              <div
                key={idx}
                className="w-36 h-25 flex items-center justify-center shrink-0"
              >
                <Image
                  src={logo}
                  alt="brand logo"
                  width={120}
                  height={60}
                  className="object-contain"
                />
              </div>
            ))}
          </div>
        </div>
      </section> */}

      <section className="py-20 bg-white">
        <h2 className="text-center text-3xl md:text-5xl font-extrabold text-[#2A2A2A] mb-12">
          {page.faqTitle}
        </h2>

        <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-6 px-4">
          {/* LEFT COLUMN */}
          <div className="space-y-6">
            {leftFAQS.map((faq) => (
              <FAQCard
                key={faq.id}
                faq={faq}
                activeId={activeId}
                setActiveId={setActiveId}
              />
            ))}
          </div>

          {/* RIGHT COLUMN */}
          <div className="space-y-6">
            {rightFAQS.map((faq) => (
              <FAQCard
                key={faq.id}
                faq={faq}
                activeId={activeId}
                setActiveId={setActiveId}
              />
            ))}
          </div>
        </div>
      </section>

      {/* <section className="py-20 bg-white">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-16">
            <h3 className="text-4xl font-bold text-gray-900 mb-4">
              What Will Students Learn?
            </h3>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Real transformations rooted in timeless scriptures.
            </p>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                icon: BookOpen,
                title: "Scriptures",
                desc: "Bhagavad Gita, Ramayana, Bhagavatam",
              },
              {
                icon: BrainCircuit,
                title: "Life Skills",
                desc: "Focus, discipline, leadership",
              },
              {
                icon: ShieldCheck,
                title: "Values",
                desc: "Honesty, compassion, humility",
              },
            ].map(({ icon: Icon, title, desc }, i) => (
              <AnimatedSection key={i} delay={i * 120}>
                <Card className="p-8 hover:shadow-xl transition-all">
                  <div className="flex justify-center text-[#FAA631] mb-6">
                    <Icon className="w-14 h-14" />
                  </div>
                  <h3 className="text-xl font-bold text-gray-900 mb-3 text-center">
                    {title}
                  </h3>
                  <p className="text-gray-600 text-center">{desc}</p>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-gradient-to-br from-orange-50 to-white">
        <div className="container mx-auto px-6 max-w-3xl">
          <AnimatedSection>
            <h3 className="text-4xl font-bold text-gray-900  text-center">
              Program Format
            </h3>
            <p className="text-center mb-6">
              Structured learning schedule designed for optimal spiritual growth
            </p>

            <ul className="space-y-4 text-gray-700 text-lg">
              <li>✔ 2 Live classes per week</li>
              <li>✔ 1 hour per session</li>
              <li>✔ Hindi + English language options</li>
              <li>✔ Zoom / Google Meet platform</li>
              <li>✔ Recordings + Notes + WhatsApp updates</li>
            </ul>
          </AnimatedSection>
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-3">
              Age Groups & Batches
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Carefully designed age-appropriate spiritual education for every
              stage of growth.
            </p>
          </AnimatedSection>

          <InfoGridOrSlider
            showAge
            data={[
              {
                emoji: "🐻",
                title: "Little Krishna",
                age: "3 to 6 years",
                desc: "Foundation of spiritual values through stories and play.",
                bg: "#FFE5F0",
              },
              {
                emoji: "🌱",
                title: "Bhakt Prahlad",
                age: "7 to 10 years",
                desc: "Learning devotion and righteousness through engaging narratives.",
                bg: "#E6F0FF",
              },
              {
                emoji: "⭐",
                title: "Bhakt Dhruv",
                age: "11 to 14 years",
                desc: "Understanding deeper spiritual concepts and life purpose.",
                bg: "#E7FFE8",
              },
              {
                emoji: "📈",
                title: "Parth Sarthi Krishna",
                age: "15 to 20 years",
                desc: "Advanced spiritual wisdom and practical life application.",
                bg: "#FFEEDC",
              },
              {
                emoji: "⭐",
                title: "Bhakt Dhruv",
                age: "11 to 14 years",
                desc: "Understanding deeper spiritual concepts and life purpose.",
                bg: "#E7FFE8",
              },
            ]}
          />
        </div>
      </section>

      <section className="py-20 bg-gradient-to-b from-orange-50 to-white">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-3">
              When and How Are the Classes Conducted?
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Flexible and accessible learning schedule designed for your
              convenience.
            </p>
          </AnimatedSection>

          <InfoGridOrSlider
            data={[
              {
                emoji: "🌐",
                title: "Bilingual Teaching",
                desc: "Classes conducted in Hindi & English for wider understanding.",
                bg: "#E6F0FF",
              },
              {
                emoji: "💻",
                title: "Online Platform",
                desc: "Live sessions via Zoom / Google Meet.",
                bg: "#F2E6FF",
              },
              {
                emoji: "📲",
                title: "WhatsApp Updates",
                desc: "Links and reminders shared instantly.",
                bg: "#FFEFD8",
              },
              {
                emoji: "📝",
                title: "Recordings & Notes",
                desc: "Access anytime for revision.",
                bg: "#E6FFF5",
              },
            ]}
          />
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-14">
            <h3 className="text-4xl font-bold text-gray-900">
              What Parents Say About Us
            </h3>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {Array.from({ length: 3 }).map((_, i) => (
              <Card key={i} className="p-8 shadow-lg">
                <p className="italic text-gray-700 mb-4 leading-relaxed">
                  "This program helped my child develop discipline and purpose."
                </p>
                <div className="flex text-[#FAA631] justify-center gap-1 mb-2">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <Star key={i} className="fill-[#FAA631]" />
                  ))}
                </div>
                <p className="font-semibold text-gray-900 text-center">
                  Parent {i + 1}
                </p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-gradient-to-b from-white to-orange-50">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900">
              Student Assessment & Recognition
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto mt-2">
              Comprehensive evaluation system to track progress and celebrate
              achievements
            </p>
          </AnimatedSection>

          <InfoGridOrSlider
            data={[
              {
                emoji: "📝",
                title: "Attendance Tracking",
                desc: "Monitor every child's participation.",
                bg: "#E7FFE8",
              },
              {
                emoji: "📅",
                title: "Monthly Quizzes",
                desc: "Track progress through assessments.",
                bg: "#E6F0FF",
              },
              {
                emoji: "💬",
                title: "Parental Feedback",
                desc: "Regular updates for engagement.",
                bg: "#F2E6FF",
              },
              {
                emoji: "🏆",
                title: "Recognition & Certificates",
                desc: "Awarded and honoured online.",
                bg: "#FFEEDC",
              },
            ]}
          />
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-6">
          <AnimatedSection className="text-center mb-10">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900">
              Parental Involvement & Gita Course
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto mt-2">
              We believe in involving parents in their child's spiritual journey
              for better learning outcomes
            </p>
          </AnimatedSection>

          <InfoGridOrSlider
            data={[
              {
                emoji: "👶",
                title: "For Ages 3–6",
                desc: "Parents join classes for better learning.",
                bg: "#FFEEDC",
              },
              {
                emoji: "📝",
                title: "Creative Homework",
                desc: "Bonding through spiritual tasks.",
                bg: "#E6F0FF",
              },
              {
                emoji: "⏰",
                title: "Time Commitment",
                desc: "15–30 minutes practice daily.",
                bg: "#F2E6FF",
              },
              {
                emoji: "📚",
                title: "Free 13-hour Course",
                desc: "Special course for parents.",
                bg: "#E6FFF5",
              },
            ]}
          />
        </div>
      </section> */}

      {/* <section
        className="py-20 text-center text-white"
        style={{ backgroundColor: PRIMARY }}
      >
        <AnimatedSection>
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            Ready to Begin Your Child's Transformation?
          </h2>
          <Button
            size="lg"
            className="mt-6 bg-white text-[#FAA631] text-xl px-12 py-6 hover:bg-orange-50"
          >
            Enroll Now – Free
          </Button>
        </AnimatedSection>
      </section> */}
    </div>
  );
}