import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import {
  ArrowRight, ShieldCheck, Zap, Target, BookOpen,
  Users, Star, Play, CheckCircle2, Calculator,
  ChevronDown, MessageCircle, BarChart3, GraduationCap, ChevronRight,
  Pi, FlaskConical, Code, FileSignature, Blocks, School,
  Mic, Video, Monitor, PhoneOff, MoreHorizontal, TrendingUp
} from 'lucide-react';
import { Link } from 'react-router-dom';
import CourseCard from '../components/CourseCard';
import TextType from '../components/TextType';
import LogoLoop from '../components/LogoLoop';
import SEO from '../components/SEO';
import { Course, Testimonial, StudentTestimonial, Mentor } from '../types';
import { firestoreService } from '../services/firestoreService';
import { defaultCourses } from '../data/defaultCourses';

const homePageSchemas = [
  {
    "@context": "https://schema.org",
    "@type": "EducationalOrganization",
    "@id": "https://mathboi-pathshala.com/#organization",
    "name": "MathBoi Pathshala",
    "url": "https://mathboi-pathshala.com",
    "logo": "https://mathboi-pathshala.com/mathboi-pathshala-logo.png",
    "description": "Premium E-Learning and Elite Live Mathematics Mentoring for academic boards including CBSE, ICSE, ISC, IB (MYP, DP), and Cambridge (IGCSE, A-Level) exams.",
    "founder": {
      "@type": "Person",
      "name": "Mukarram Mallick",
      "email": "mathboipathshala@gmail.com"
    },
    "sameAs": [
      "https://api.whatsapp.com/send/?phone=916295030740"
    ]
  },
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "Which math boards are covered by MathBoi Pathshala?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "MathBoi Pathshala specializes in CBSE, ICSE, ISC, IB (MYP, DP), and Cambridge (IGCSE, A-Level) curricular boards, tailoring worksheets, assessments, and mock exams for each standards pattern specifically."
        }
      },
      {
        "@type": "Question",
        "name": "How is the 1-on-1 live mentoring structured at MathBoi Pathshala?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Classes are conducted 1-on-1 online using an interactive visual collaborative digital whiteboard with real-time feedback, detailed concept mapping, and dynamic visualization models to guarantee clarity and high analytical scores."
        }
      },
      {
        "@type": "Question",
        "name": "Is a free demo class available for new students?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Absolutely! We support new families by conducting a complimentary personal diagnosis and live 30 min demo session of custom math concepts so teachers, parents, and students can preview the interactive board."
        }
      }
    ]
  }
];



const Home = () => {
  const [mentors, setMentors] = useState<Mentor[]>([]);
  const [courses, setCourses] = useState<Course[]>([]);
  const [parentTestimonials, setParentTestimonials] = useState<Testimonial[]>([]);
  const [studentTestimonials, setStudentTestimonials] = useState<StudentTestimonial[]>([]);
  const [openFaqIndex, setOpenFaqIndex] = useState<number | null>(null);

  const [{ successRate, studentId }] = useState(() => ({
    successRate: Math.floor(Math.random() * (98 - 93 + 1)) + 93,
    studentId: Math.floor(1000 + Math.random() * 9000),
  }));

  useEffect(() => {
    const fetchData = async () => {
      let mentorsData: Mentor[] = [], coursesData: Course[] = [], pTestimonialsData: Testimonial[] = [], sTestimonialsData: StudentTestimonial[] = [];
      try {
        [mentorsData, coursesData, pTestimonialsData, sTestimonialsData] = await Promise.all([
          firestoreService.getAllMentors().catch(() => []),
          firestoreService.getAll<Course>('courses').catch(() => []),
          firestoreService.getAll<Testimonial>('testimonials').catch(() => []),
          firestoreService.getAll<StudentTestimonial>('studentTestimonials').catch(() => [])
        ]);
      } catch (e) {
        console.warn('Firestore fetch warning:', e);
      }
      setMentors(mentorsData || []);
      const combinedCourses = (coursesData && coursesData.length > 0) ? coursesData : defaultCourses;
      setCourses(combinedCourses.slice(0, 6));
      setParentTestimonials(pTestimonialsData || []);
      setStudentTestimonials(sTestimonialsData || []);
    };
    fetchData();
  }, []);

  const ceoMentor = mentors.find(m => m.role.includes('CEO') || m.role.includes('FOUNDER')) || mentors[0];
  return (
    <div className="bg-white min-h-screen font-sans selection:bg-brand-red/10 selection:text-brand-red">
      <SEO
        title="Live one-on-one Mentoring | CBSE, ICSE, ISC, IB & Cambridge Maths"
        description="MathBoi Pathshala offers the best tutoring and personalized 1-on-1 live mentoring for CBSE, ICSE, ISC, IB (MYP, DP), and Cambridge (IGCSE, A-Level) exams. Book your free interactive demo lesson today."
        keywords="MathBoi Pathshala, math tutor online, CBSE maths tutor, ICSE classes, ISC classes, IB math academy, Cambridge IGCSE maths, Olympiad preparation, live interactive math coaching"
        canonicalPath="/"
        schema={homePageSchemas}
      />
      {/* Hero Section */}
      <section className="relative pt-8 sm:pt-12 pb-16 md:pb-24 bg-gradient-to-br from-[#0f172a] via-[#111827] to-[#030712] text-white rounded-b-[40px] md:rounded-b-[60px] overflow-hidden shadow-2xl">
        {/* Background Decorative Blur Orbs */}
        <div className="absolute -top-24 -left-24 w-96 h-96 bg-brand-red/20 blur-[140px] rounded-full" />
        <div className="absolute bottom-0 right-0 w-96 h-96 bg-brand-red/15 blur-[160px] rounded-full" />

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-16 items-center relative z-10">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            className="space-y-8"
          >
            <div className="inline-flex items-center space-x-2 bg-brand-red/10 border border-brand-red/30 px-4 py-2 rounded-full backdrop-blur-md">
              <span className="flex h-2 w-2 rounded-full bg-brand-red animate-pulse" />
              <span className="text-white text-xs font-black uppercase tracking-wider">Premium Learning for All Boards</span>
            </div>

            <h1 className="text-6xl md:text-7xl font-display font-black text-white leading-[1.1] tracking-tight min-h-[2.2em] md:min-h-0">
              Master Math with <br className="hidden md:block" />
              <TextType
                text={["Confidence.", "Excellence.", "Ease.", "Joy."]}
                className="text-brand-red"
                typingSpeed={70}
                deletingSpeed={40}
                pauseDuration={2500}
                showCursor={true}
                cursorClassName="text-brand-red ml-1"
              />
            </h1>

            <p className="text-gray-300 text-lg md:text-xl leading-relaxed max-w-xl font-normal">
              Mathboi Pathshala provides top-tier education specializing in ICSE, ISC, CBSE, IB, and Cambridge boards. Built for students who aim for excellence.
            </p>

            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                to="/courses"
                className="w-full sm:w-auto bg-brand-red text-white px-8 py-4 rounded-2xl font-black text-lg shadow-xl shadow-brand-red/30 hover:bg-red-600 hover:scale-105 active:scale-95 transition-all text-center flex items-center justify-center gap-2 group cursor-pointer"
              >
                Enroll Now <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </Link>
              <Link
                to="/enroll"
                className="w-full sm:w-auto bg-white/10 text-white border-2 border-white/20 px-8 py-4 rounded-2xl font-bold text-lg hover:bg-white/20 active:scale-95 transition-all text-center cursor-pointer"
              >
                Start Free Trial
              </Link>
            </div>

            <div className="flex items-center space-x-4 pt-4">
              <div className="flex -space-x-3">
                {[1, 2, 3, 4].map(i => (
                  <img key={i} src={`https://i.pravatar.cc/100?img=${i + 10}`} className="w-10 h-10 rounded-full border-2 border-white shadow-sm" />
                ))}
              </div>
              <div className="text-sm">
                <p className="font-bold text-white">500+ Active Students</p>
                <div className="flex items-center text-yellow-400">
                  <Star className="w-3 h-3 fill-current" />
                  <Star className="w-3 h-3 fill-current" />
                  <Star className="w-3 h-3 fill-current" />
                  <Star className="w-3 h-3 fill-current" />
                  <Star className="w-3 h-3 fill-current" />
                  <span className="text-gray-300 text-[10px] ml-1 font-semibold">4.9/5 Rating</span>
                </div>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative flex justify-center items-center py-4"
          >
            {/* Digital Classroom Window Container */}
            <div className="relative z-10 w-full max-w-lg rounded-[2.5rem] bg-gradient-to-b from-blue-600/40 via-slate-900/80 to-[#0f172a] border-4 border-white/20 p-3 shadow-2xl overflow-hidden backdrop-blur-xl">
              
              {/* Live Classroom Screen */}
              <div className="relative rounded-[2rem] overflow-hidden aspect-[4/4.5] bg-gradient-to-br from-blue-900 to-indigo-950 flex flex-col justify-between p-4">
                
                {/* Background Mentor Video Feed */}
                <img
                  src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=800&auto=format&fit=crop"
                  className="absolute inset-0 w-full h-full object-cover object-top opacity-90"
                  alt="Live 1-on-1 Mathboi Pathshala Teacher"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-black/30" />

                {/* Top Status Header inside classroom */}
                <div className="relative z-10 flex justify-between items-center bg-black/40 backdrop-blur-md px-3.5 py-1.5 rounded-full border border-white/10 self-start">
                  <div className="flex items-center space-x-2">
                    <span className="h-2 w-2 rounded-full bg-red-500 animate-ping" />
                    <span className="text-[11px] font-bold text-white tracking-wide uppercase">Live 1:1 Class</span>
                  </div>
                  <span className="text-[10px] text-gray-300 font-medium ml-3">Mathboi Pathshala Mentor</span>
                </div>

                {/* Video Controls Bar (Bottom Left inside classroom window) */}
                <div className="relative z-10 self-start bg-black/70 backdrop-blur-lg px-4 py-2 rounded-full border border-white/15 flex items-center space-x-3 shadow-xl">
                  <div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <Mic className="w-3.5 h-3.5" />
                  </div>
                  <div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <Video className="w-3.5 h-3.5" />
                  </div>
                  <div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <Monitor className="w-3.5 h-3.5" />
                  </div>
                  <div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center text-white">
                    <MoreHorizontal className="w-3.5 h-3.5" />
                  </div>
                  <div className="w-7 h-7 rounded-full bg-red-600 flex items-center justify-center text-white shadow-md">
                    <PhoneOff className="w-3.5 h-3.5" />
                  </div>
                </div>
              </div>
            </div>

            {/* Happy Student Foreground Layer */}
            <motion.div
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.4 }}
              className="absolute -bottom-4 right-0 z-20 w-3/4 max-w-[280px] pointer-events-none drop-shadow-2xl"
            >
              <img
                src="https://images.unsplash.com/photo-1577896851231-70ef18881754?q=80&w=800&auto=format&fit=crop"
                alt="Student Excel Learning"
                className="w-full rounded-3xl border-4 border-white shadow-2xl object-cover aspect-square"
              />
            </motion.div>

            {/* Floating Badges Matching Reference Image */}
            
            {/* 1. Pink A+ Badge */}
            <motion.div
              animate={{ y: [0, -8, 0] }}
              transition={{ duration: 3.5, repeat: Infinity }}
              className="absolute -left-4 top-1/3 z-30 bg-gradient-to-r from-pink-500 to-purple-600 text-white font-black text-xs px-3.5 py-2 rounded-full shadow-2xl border-2 border-white flex items-center gap-1"
            >
              <span>A+</span>
            </motion.div>

            {/* 2. Yellow Growth Graph Badge */}
            <motion.div
              animate={{ y: [0, 8, 0] }}
              transition={{ duration: 4, repeat: Infinity }}
              className="absolute -right-3 top-6 z-30 bg-yellow-400 text-black font-black p-3 rounded-full shadow-2xl border-2 border-white flex items-center justify-center"
            >
              <TrendingUp className="w-5 h-5 text-black" />
            </motion.div>

            {/* 3. Green Math Formula Badge */}
            <motion.div
              animate={{ scale: [1, 1.08, 1] }}
              transition={{ duration: 3, repeat: Infinity }}
              className="absolute left-1/4 bottom-14 z-30 bg-emerald-500 text-white font-black p-2.5 rounded-2xl shadow-2xl border-2 border-white flex items-center justify-center"
            >
              <span className="font-mono text-sm font-black">√x</span>
            </motion.div>

            {/* 4. Success Rate Badge */}
            <motion.div
              animate={{ y: [0, -10, 0] }}
              transition={{ duration: 4.5, repeat: Infinity }}
              className="absolute -top-8 -right-2 z-30 bg-white text-brand-navy p-3.5 rounded-2xl shadow-2xl flex items-center gap-3 border border-gray-100"
            >
              <div className="bg-green-100 p-2 rounded-xl"><GraduationCap className="w-5 h-5 text-green-600" /></div>
              <div><p className="text-[10px] font-black uppercase text-gray-400">Success Rate</p><p className="font-display font-black text-lg text-brand-navy">{successRate}%</p></div>
            </motion.div>

            {/* 5. Progress Report Badge */}
            <motion.div
              animate={{ y: [0, 10, 0] }}
              transition={{ duration: 5, repeat: Infinity }}
              className="absolute -bottom-8 -left-6 z-30 bg-white text-brand-navy p-4 rounded-3xl shadow-2xl space-y-2 max-w-[200px] border border-gray-100"
            >
              <div className="flex items-center gap-2"><BarChart3 className="w-4 h-4 text-brand-red" /><p className="text-xs font-bold">Progress Report</p></div>
              <div className="w-full bg-gray-100 h-2 rounded-full overflow-hidden"><motion.div initial={{ width: 0 }} animate={{ width: '78%' }} transition={{ delay: 1, duration: 1 }} className="bg-brand-red h-full" /></div>
              <p className="text-[10px] text-gray-500 font-medium">Student ID #{studentId} is performing 25% better this month.</p>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* Integrated Excellence Showcases */}
      <section className="py-24 bg-white overflow-hidden border-b border-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

          {/* Row 1: Subjects */}
          <div className="mb-24">
            <h2 className="text-center font-display font-black text-3xl text-brand-navy mb-14 tracking-tight">
              Get help with all your school subjects
            </h2>
            <LogoLoop
              speed={35}
              gap={70}
              logoHeight={60}
              logos={[
                { node: <div className="flex flex-col items-center group cursor-default"><div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><Zap className="w-7 h-7 text-brand-red" /></div><span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Physics</span></div> },
                { node: <div className="flex flex-col items-center group cursor-default"><div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><BookOpen className="w-7 h-7 text-blue-500" /></div><span className="text-[10px] font-black uppercase tracking-widest text-gray-400">English</span></div> },
                { node: <div className="flex flex-col items-center group cursor-default"><div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><Pi className="w-7 h-7 text-brand-navy" /></div><span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Math</span></div> },
                { node: <div className="flex flex-col items-center group cursor-default"><div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><FlaskConical className="w-7 h-7 text-green-500" /></div><span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Chemistry</span></div> },
                { node: <div className="flex flex-col items-center group cursor-default"><div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><Code className="w-7 h-7 text-brand-accent" /></div><span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Coding</span></div> },
                { node: <div className="flex flex-col items-center group cursor-default"><div className="w-14 h-14 rounded-2xl bg-gray-50 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform"><FileSignature className="w-7 h-7 text-purple-500" /></div><span className="text-[10px] font-black uppercase tracking-widest text-gray-400">SAT/Entrance</span></div> },
              ]}
            />
          </div>

          {/* Row 2: School Systems */}
          <div className="mb-24">
            <h2 className="text-center font-display font-black text-3xl text-brand-navy mb-14 tracking-tight">
              For all school systems
            </h2>
            <LogoLoop
              speed={45}
              direction="right"
              gap={40}
              logos={[
                { node: <div className="flex items-center gap-3 px-8 py-4 bg-white border border-gray-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow"><img src="https://cdn.prod.website-files.com/645c85e0705da20f26b63b8e/65ac10de7aa1e2b14f6dddf6_in.svg" alt="ICSE" className="w-6 h-6 rounded-sm object-contain" /><span className="font-bold text-gray-600">ICSE System</span></div> },
                { node: <div className="flex items-center gap-3 px-8 py-4 bg-white border border-gray-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow"><img src="https://cdn.prod.website-files.com/645c85e0705da20f26b63b8e/65ac10de7aa1e2b14f6dddf6_in.svg" alt="ISC" className="w-6 h-6 rounded-sm object-contain" /><span className="font-bold text-gray-600">ISC System</span></div> },
                { node: <div className="flex items-center gap-3 px-8 py-4 bg-white border border-gray-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow"><img src="https://cdn.prod.website-files.com/645c85e0705da20f26b63b8e/65ac0f70508e35dff8fcd537_gb.svg" alt="United Kingdom" className="w-6 h-6 rounded-sm object-contain" /><span className="font-bold text-gray-600">British System</span></div> },
                { node: <div className="flex items-center gap-3 px-8 py-4 bg-white border border-gray-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-gray-600"><circle cx="12" cy="12" r="10" stroke="#CBD5E1" strokeWidth="1.5" /><path d="M2 12h20M12 2c3.313 3.313 3.313 8.687 0 12-3.313 3.313-8.687 3.313-12 0" stroke="#94A3B8" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" /></svg><span className="font-bold text-gray-600">IB System</span></div> },
                { node: <div className="flex items-center gap-3 px-8 py-4 bg-white border border-gray-100 rounded-3xl shadow-sm hover:shadow-md transition-shadow"><img src="https://cdn.prod.website-files.com/645c85e0705da20f26b63b8e/65ac10a2508e35dff8fd7212_us.svg" alt="United States" className="w-6 h-6 rounded-sm object-contain" /><span className="font-bold text-gray-600">American System</span></div> },
              ]}
            />
          </div>

          {/* Row 3: Grades */}
          <div className="mb-8">
            <h2 className="text-center font-display font-black text-3xl text-brand-navy mb-14 tracking-tight">
              In all grades
            </h2>
            <div className="flex flex-wrap justify-center gap-12 sm:gap-24">
              <div className="flex flex-col items-center text-center">
                <div className="w-20 h-20 rounded-3xl bg-brand-navy flex items-center justify-center mb-5 rotate-3 hover:rotate-0 transition-transform shadow-xl shadow-brand-navy/20">
                  <Blocks className="w-10 h-10 text-white" />
                </div>
                <h4 className="font-bold text-brand-navy text-sm mb-1">Primary school</h4>
                <p className="text-[10px] font-black uppercase text-gray-400 tracking-widest">(1 to 5)</p>
              </div>

              <div className="flex flex-col items-center text-center">
                <div className="w-20 h-20 rounded-3xl bg-brand-red flex items-center justify-center mb-5 -rotate-3 hover:rotate-0 transition-transform shadow-xl shadow-brand-red/20">
                  <School className="w-10 h-10 text-white" />
                </div>
                <h4 className="font-bold text-brand-navy text-sm mb-1">Middle School</h4>
                <p className="text-[10px] font-black uppercase text-gray-400 tracking-widest">(6 to 8)</p>
              </div>

              <div className="flex flex-col items-center text-center">
                <div className="w-20 h-20 rounded-3xl bg-brand-accent flex items-center justify-center mb-5 rotate-6 hover:rotate-0 transition-transform shadow-xl shadow-brand-accent/20">
                  <GraduationCap className="w-10 h-10 text-white" />
                </div>
                <h4 className="font-bold text-brand-navy text-sm mb-1">High school</h4>
                <p className="text-[10px] font-black uppercase text-gray-400 tracking-widest">(9 to 12)</p>
              </div>
            </div>
          </div>

        </div>
      </section>

      {/* Interactive Learning Section */}
      <section className="bg-white pt-4 pb-20 relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
            <div className="inline-flex items-center space-x-2 bg-brand-red/10 border border-brand-red/20 px-4 py-1.5 rounded-full">
              <span className="flex h-2 w-2 rounded-full bg-brand-red animate-pulse" />
              <span className="text-brand-red text-xs font-black uppercase tracking-widest">Our Approach</span>
            </div>
            <h3 className="text-4xl md:text-5xl font-display font-black text-brand-navy leading-tight">Interactive Learning That Engages</h3>
            <p className="text-gray-500 text-sm md:text-base leading-relaxed max-w-2xl mx-auto">
              Our advanced study materials combine visual learning, practice problems, and real-world applications. Every lesson is crafted to maintain engagement while building deep understanding.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              { icon: Target, title: "Personalized Study Plans", desc: "Customized education paths adapting to each student's pace and learning style." },
              { icon: Zap, title: "Engaging Curriculum", desc: "Interactive content that makes complex concepts easy to understand and retain." },
              { icon: GraduationCap, title: "One-on-One Mentorship", desc: "Direct access to expert instructors for doubts, guidance, and academic support." }
            ].map((item, i) => (
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                key={i}
                className="p-10 rounded-[2rem] bg-brand-bg border border-gray-100 hover:shadow-2xl transition-all group"
              >
                <div className="bg-white w-16 h-16 rounded-2xl flex items-center justify-center mb-8 shadow-sm group-hover:bg-brand-red transition-colors group-hover:rotate-6">
                  <item.icon className="w-8 h-8 text-brand-red group-hover:text-white transition-colors" />
                </div>
                <h4 className="font-display font-black text-xl mb-4 text-brand-navy">{item.title}</h4>
                <p className="text-gray-500 leading-relaxed text-sm">{item.desc}</p>
              </motion.div>
            ))}
          </div>

          <div className="mt-16 text-center">
            <Link to="/about" className="text-brand-red font-bold underline underline-offset-8 decoration-2 hover:text-brand-navy transition-colors">
              Learn More About Our Approach
            </Link>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-brand-navy rounded-[3rem] px-8 py-24 md:p-24 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-brand-red/10 blur-[100px] rounded-full" />
          <div className="absolute bottom-0 left-0 w-64 h-64 bg-brand-accent/10 blur-[100px] rounded-full" />

          <div className="relative z-10 text-center mb-20">
            <h2 className="text-brand-accent font-black uppercase text-sm tracking-widest mb-4">The Journey</h2>
            <h3 className="text-4xl font-display font-black text-white">4 Steps to Academic Excellence</h3>
          </div>

          <div className="grid md:grid-cols-4 gap-8 relative">
            {/* Connector Line */}
            <div className="hidden absolute top-[60px] left-1/4 right-1/4 h-0.5 border-t-2 border-dashed border-white/10" />

            {[
              { step: "01", title: "Free Demo", desc: "Experience 30 min of premium learning with no commitments." },
              { step: "02", title: "Personal Plan", desc: "We design a study roadmap based on current performance." },
              { step: "03", title: "Live Classes", desc: "Interact with expert faculty in high-engagement sessions." },
              { step: "04", title: "Weekly Mastery", desc: "Review progress and celebrate new academic milestones." }
            ].map((item, i) => (
              <div key={i} className="text-center space-y-6 group">
                <div className="w-20 h-20 bg-white/5 rounded-full flex items-center justify-center mx-auto border border-white/10 group-hover:bg-brand-red transition-all duration-500 scale-110">
                  <span className="text-2xl font-black text-white font-display">{item.step}</span>
                </div>
                <h4 className="font-display font-black text-xl text-white pt-4">{item.title}</h4>
                <p className="text-white/50 text-xs leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Courses Showcase */}
      <section className="py-24 bg-white relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-16 border-b border-gray-100 pb-8">
            <div className="space-y-3">
              <div className="inline-flex items-center space-x-2 bg-brand-red/10 border border-brand-red/20 px-4 py-1.5 rounded-full">
                <span className="flex h-2 w-2 rounded-full bg-brand-red animate-pulse" />
                <span className="text-brand-red text-xs font-black uppercase tracking-widest">Our Curriculum</span>
              </div>
              <h3 className="text-4xl md:text-5xl font-display font-black text-brand-navy tracking-tight">
                Explore Featured Courses
              </h3>
              <p className="text-gray-500 text-base max-w-xl">
                Personalized 1-on-1 programs tailored to your board & grade for complete concept clarity.
              </p>
            </div>
            <Link to="/courses" className="bg-brand-navy text-white px-8 py-4 rounded-2xl font-bold flex items-center gap-2 hover:bg-brand-red hover:shadow-lg transition-all shrink-0">
              View All Courses <ArrowRight className="w-5 h-5" />
            </Link>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {courses.map(course => (
              <div key={course.id}>
                <CourseCard course={course} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Parental Peace of Mind Section */}
      <section className="bg-brand-bg py-24 border-y border-gray-100 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            className="relative"
          >
            <div className="bg-white rounded-[3rem] p-4 shadow-sm relative z-10 border border-gray-100">
              <img
                src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1000&auto=format&fit=crop"
                className="rounded-[2.5rem] w-full"
                alt="Analytics dashboard"
              />
            </div>
          </motion.div>

          <div className="space-y-8">
            <h2 className="text-brand-accent font-black uppercase text-sm tracking-widest">Transparency First</h2>
            <h3 className="text-5xl font-display font-black text-brand-navy leading-tight">Complete Parental Peace of Mind</h3>
            <p className="text-gray-500 text-lg leading-relaxed">
              Parents deserve transparency. We provide comprehensive progress tracking, expert faculty insights, and a safe learning environment.
            </p>

            <ul className="space-y-6">
              {[
                { title: "Real-Time Progress Tracking", desc: "Access comprehensive dashboards with detailed insights into your child's academic journey." },
                { title: "Safe Learning Environment", desc: "Secure, monitored classes. Your child focuses entirely on growth while we ensure safety." },
                { title: "Expert Faculty Dedication", desc: "Qualified educators committed to one-on-one mentorship tailored to their learning style." }
              ].map((item, i) => (
                <li key={i} className="flex items-start gap-4">
                  <div className="bg-brand-red w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1">
                    <CheckCircle2 className="w-4 h-4 text-white" />
                  </div>
                  <div>
                    <h4 className="font-bold text-brand-navy">{item.title}</h4>
                    <p className="text-sm text-gray-500">{item.desc}</p>
                  </div>
                </li>
              ))}
            </ul>

            <Link to="/dashboard" className="inline-flex items-center gap-2 text-brand-red font-black uppercase text-sm tracking-widest hover:gap-4 transition-all">
              Access Parent Dashboard <ArrowRight className="w-5 h-5" />
            </Link>
          </div>
        </div>
      </section>

      {/* Stats Counter */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 md:grid-cols-3 gap-8 text-center bg-white rounded-[3rem] p-12 shadow-sm border border-gray-100">
          {[
            { label: "Students Mentored", value: "500+", icon: Users, desc: "Achieving proven academic results" },
            { label: "Dedicated Educators", value: "50+", icon: GraduationCap, desc: "Expert faculty with proven track records" },
            { label: "Success Rate", value: "98%", icon: Target, desc: "Comprehensive progress tracking & support" }
          ].map((stat, i) => (
            <div key={i} className="space-y-2">
              <div className="w-12 h-12 bg-brand-red/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <stat.icon className="w-6 h-6 text-brand-red" />
              </div>
              <p className="text-3xl font-display font-black text-brand-navy">{stat.value}</p>
              <p className="text-[10px] uppercase font-black tracking-widest text-gray-400">{stat.label}</p>
              <p className="text-[10px] text-gray-400 leading-tight">{stat.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Owner Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div className="bg-brand-bg rounded-[4rem] p-12 md:p-20 grid lg:grid-cols-2 gap-16 items-center relative overflow-hidden">
          <div className="absolute top-0 right-0 w-64 h-64 bg-brand-red/5 blur-3xl rounded-full translate-x-1/2 -translate-y-1/2" />

          <div className="relative z-10 space-y-8">
            <div className="space-y-4">
              <h2 className="text-brand-red font-black uppercase text-sm tracking-[0.3em]">Owner's Desk</h2>
              <h3 className="text-5xl font-display font-black text-brand-navy leading-tight">Academic Visionary & <span className="text-brand-red">Master Mentor</span></h3>
            </div>

            <p className="text-gray-600 text-lg leading-relaxed italic">
              {ceoMentor?.about ? `"${ceoMentor.about}"` : `"At Mathboi Pathshala, we don't just teach modules; we build mindsets. Our goal is to transform the fear of mathematics into the joy of discovery. Every student who walks through our doors is a testament to our commitment to excellence."`}
            </p>

            <div className="flex items-center gap-6 pt-4">
              <div className="w-20 h-20 rounded-full border-4 border-white shadow-xl overflow-hidden shrink-0">
                <img
                  src={ceoMentor?.imageUrl || "mathboi-ceo.jpeg?q=80&w=200&auto=format&fit=crop"}
                  alt={ceoMentor?.name || "Mukarram Mallick"}
                  className="w-full h-full object-cover"
                />
              </div>
              <div>
                <h4 className="text-2xl font-display font-black text-brand-navy">{ceoMentor?.name || "Mukarram Mallick"}</h4>
                <p className="text-brand-red font-bold uppercase tracking-widest text-xs">{ceoMentor?.role || "Co-Founder & CEO"}, Mathboi Pathshala</p>
                <div className="flex gap-2 mt-1 text-[10px] text-gray-400 font-bold">
                  <span>{ceoMentor?.qualifications || "M.Sc. Mathematics"}</span>
                  <span>•</span>
                  <span>{ceoMentor?.experience || "7+ Years Exp."}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="relative grid grid-cols-2 gap-4">
            <div className="space-y-4 pt-12">
              <div className="bg-white p-6 rounded-3xl shadow-xl border border-gray-100">
                <h5 className="font-display font-black text-brand-navy text-2xl">93+</h5>
                <p className="text-xs text-gray-500 font-bold uppercase">Topper's Score</p>
              </div>
              <div className="bg-brand-navy p-6 rounded-3xl shadow-xl text-white">
                <h5 className="font-display font-black text-3xl">7+</h5>
                <p className="text-xs text-white/50 font-bold uppercase">Years of Impact</p>
              </div>
            </div>
            <div className="space-y-4">
              <div className="bg-brand-red p-6 rounded-3xl shadow-xl text-white">
                <h5 className="font-display font-black text-3xl">500+</h5>
                <p className="text-xs text-white/50 font-bold uppercase">Lives Changed</p>
              </div>
              <div className="bg-white p-6 rounded-3xl shadow-xl border border-gray-100">
                <h5 className="font-display font-black text-brand-navy text-2xl">100%</h5>
                <p className="text-xs text-gray-500 font-bold uppercase">Dedication</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Parent Testimonials */}
      {parentTestimonials.length > 0 && (
        <section className="bg-brand-navy py-24">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-20 space-y-4">
              <h2 className="text-brand-red font-black uppercase text-xs tracking-[0.3em]">Parental Reviews</h2>
              <h3 className="text-4xl font-display font-black text-white">Trust from Families</h3>
            </div>

            <div className="grid md:grid-cols-1 gap-8 max-w-3xl mx-auto">
              {parentTestimonials.map((t) => (
                <motion.div
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  key={t.id}
                  className="bg-white/5 border border-white/10 p-10 rounded-[2.5rem] relative group hover:bg-white/10 transition-colors"
                >
                  <p className="text-white/90 text-lg italic leading-relaxed mb-8">"{t.content}"</p>
                  <div className="flex items-center gap-4">
                    <img src={t.avatar} className="w-14 h-14 rounded-full border-2 border-brand-red" alt={t.name} />
                    <div>
                      <h4 className="font-bold text-white leading-none">{t.name}</h4>
                      <p className="text-xs text-white/50 mt-1 uppercase tracking-widest font-black">{t.role}</p>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Student Testimonials Section */}
      {studentTestimonials.length > 0 && (
        <section className="bg-white py-24">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-20 space-y-4">
              <h2 className="text-brand-red font-black uppercase text-xs tracking-[0.3em]">Student Voice</h2>
              <h3 className="text-4xl font-display font-black text-brand-navy">Success Stories Through Their Eyes</h3>
            </div>

            <div className="grid md:grid-cols-2 gap-8">
              {studentTestimonials.map((t, i) => (
                <motion.div
                  initial={{ opacity: 0, scale: 0.9 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.1 }}
                  key={t.id}
                  className="bg-brand-bg border border-gray-100 p-10 rounded-[2.5rem] relative group hover:shadow-xl transition-all"
                >
                  <div className="flex items-center gap-4 mb-6">
                    <img src={t.avatar} className="w-12 h-12 rounded-full border-2 border-brand-red" alt={t.studentName} />
                    <div>
                      <h4 className="font-bold text-brand-navy leading-none">{t.studentName}</h4>
                      <p className="text-[10px] text-brand-red/60 mt-1 uppercase tracking-widest font-black leading-none">{t.courseTaken}</p>
                    </div>
                  </div>
                  <p className="text-gray-600 text-lg leading-relaxed italic">"{t.content}"</p>
                  <div className="absolute bottom-6 right-8 opacity-10">
                    <GraduationCap className="w-12 h-12 text-brand-navy" />
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Comparison Section */}
      <section className="py-24 bg-brand-bg/50 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-20">
            <h2 className="text-brand-red font-black uppercase text-xs tracking-[0.3em] mb-4">Why Mathboi Pathshala?</h2>
            <h3 className="text-5xl font-display font-black text-brand-navy tracking-tight">Traditional vs. Modern Learning</h3>
          </div>

          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="relative group"
            >
              <div className="absolute -inset-4 bg-brand-red/5 rounded-[3rem] -rotate-2 group-hover:rotate-0 transition-transform duration-500" />
              <img
                src="https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=2070&auto=format&fit=crop"
                className="relative z-10 w-full h-[500px] object-cover rounded-[2.5rem] shadow-2xl grayscale group-hover:grayscale-0 transition-all duration-700"
                alt="Focused Mentorship"
              />
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 flex flex-col items-center">
                <div className="bg-white/90 backdrop-blur px-8 py-4 rounded-2xl shadow-2xl border border-white/20 scale-125">
                  <p className="text-brand-navy font-display font-black text-2xl">The Future of Education</p>
                </div>
              </div>
            </motion.div>

            <div className="space-y-8">
              <div className="overflow-hidden rounded-[2.5rem] border border-gray-100 bg-white shadow-xl">
                <table className="w-full text-left">
                  <thead className="bg-brand-navy text-white">
                    <tr>
                      <th className="px-8 py-5 text-sm font-black uppercase tracking-widest">Core Feature</th>
                      <th className="px-8 py-5 text-sm font-black uppercase tracking-widest text-brand-red">Mathboi</th>
                      <th className="px-8 py-5 text-sm font-black uppercase tracking-widest opacity-40">Others</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-50">
                    {[
                      { feature: "Personalized Mentorship", us: true, them: false },
                      { feature: "24/7 Doubt Resolution", us: true, them: false },
                      { feature: "Infinity Practice Sets", us: true, them: "Limited" },
                      { feature: "Board-Specific Coaching", us: true, them: "Generic" },
                      { feature: "Regular Progress Reports", us: true, them: "Monthly" },
                      { feature: "Free Demo (30 Min)", us: true, them: "None" }
                    ].map((row, idx) => (
                      <tr key={idx} className="hover:bg-gray-50/50 transition-colors">
                        <td className="px-8 py-5 font-bold text-brand-navy text-sm">{row.feature}</td>
                        <td className="px-8 py-5">
                          {row.us === true ? (
                            <div className="flex items-center gap-2 text-brand-red font-black text-xs uppercase tracking-widest">
                              <CheckCircle2 className="w-4 h-4" /> Yes
                            </div>
                          ) : row.us}
                        </td>
                        <td className="px-8 py-5 text-gray-400 text-xs font-medium">
                          {row.them === false ? "Limited" : row.them}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div className="p-8 bg-brand-red/5 border border-brand-red/10 rounded-3xl">
                <p className="text-brand-navy font-bold text-sm leading-relaxed italic">
                  "Traditional learning often focuses on the curriculum, but we focus on the student. Our metrics show a 40% faster retention rate compared to standard classroom environments."
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="relative px-4">
        <div className="max-w-5xl mx-auto bg-brand-red rounded-[3.5rem] p-12 md:p-24 text-center text-white relative overflow-hidden shadow-2xl shadow-brand-red/40">
          <div className="absolute top-0 left-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
          <div className="absolute bottom-0 right-0 w-64 h-64 bg-black/10 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />

          <div className="relative z-10 space-y-10">
            <h2 className="text-4xl md:text-6xl font-display font-black leading-tight">Unlock Your Child's True Potential Today</h2>
            <div className="flex flex-col md:flex-row items-center justify-center gap-6">
              {/* <Link to="/enroll" className="w-full md:w-auto bg-white text-brand-red px-10 py-5 rounded-2xl font-black text-xl shadow-xl hover:scale-110 active:scale-95 transition-all">
                    Start Free 7-Day Trial
                 </Link> */}
              <Link to="/contact" className="w-full md:w-auto bg-transparent border-2 border-white/30 text-white px-10 py-5 rounded-2xl font-black text-xl hover:bg-white/10 transition-all">
                Schedule a Demo
              </Link>
            </div>
            <p className="text-white/70 font-bold uppercase tracking-[0.2em] text-xs">No Credit Card Required | Instant Access</p>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-display font-black text-brand-navy tracking-tight">Frequently asked questions</h2>
          </div>

          <div className="bg-white border border-blue-100 rounded-3xl overflow-hidden divide-y divide-blue-50 shadow-sm">
            {[
              {
                q: "How do you ensure my child actually understands the concepts?",
                a: "We use real-time interactive assessment tools and one-on-one doubt clearing sessions to confirm conceptual depth before moving to the next topic."
              },
              {
                q: "Is the mentorship limited to only school curriculum?",
                a: "While we master the board curriculum (CBSE/ICSE/ISC/IB), we also incorporate logic building and competitive problem-solving to prepare students for real-world challenges."
              },
              {
                q: "How frequent are the assessment tests?",
                a: "Weekly quick-tests and monthly comprehensive mock exams for all boards are standard, accompanied by detailed performance analytics for parents."
              },
              {
                q: "What if my child misses a scheduled session?",
                a: "All live sessions are recorded and available in the student dashboard, plus we offer 24/7 doubt resolution through our portal."
              },
              {
                q: "Can I track my child's progress in real-time?",
                a: "Yes, parents get a dedicated dashboard with real-time updates on attendance, test scores, and qualitative feedback from mentors."
              },
              {
                q: "Do you provide help with competitive exam preparations?",
                a: "Absolutely. We have specialized modules for Olympiads, SATs, and board-level entrance exams integrated into our premium courses."
              }
            ].map((faq, idx) => {
              const isOpen = openFaqIndex === idx;
              return (
                <div key={idx} className="transition-colors hover:bg-blue-50/20">
                  <button
                    type="button"
                    onClick={() => setOpenFaqIndex(isOpen ? null : idx)}
                    className="w-full p-6 sm:p-8 text-left flex items-center justify-between gap-6 focus:outline-none focus-visible:bg-blue-50/40 cursor-pointer"
                    aria-expanded={isOpen}
                  >
                    <div className="flex gap-4 sm:gap-6 items-center">
                      <div className="shrink-0">
                        <div className={`w-7 h-7 rounded-lg border-2 flex items-center justify-center transition-all ${isOpen ? 'bg-blue-500 border-blue-500 text-white shadow-md shadow-blue-500/20' : 'border-blue-500/30 text-blue-500'
                          }`}>
                          <div className={`w-2.5 h-0.5 rounded-full transition-colors ${isOpen ? 'bg-white' : 'bg-current'}`} />
                        </div>
                      </div>
                      <h4 className="font-display font-bold text-brand-navy text-lg sm:text-xl">
                        {faq.q}
                      </h4>
                    </div>
                    <div className="shrink-0">
                      <ChevronDown className={`w-5 h-5 text-blue-500 transition-transform duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`} />
                    </div>
                  </button>

                  <AnimatePresence initial={false}>
                    {isOpen && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.3, ease: "easeInOut" }}
                        className="overflow-hidden"
                      >
                        <div className="px-6 sm:px-8 pb-6 sm:pb-8 pt-0 pl-16 sm:pl-21">
                          <p className="text-gray-600 leading-relaxed text-sm sm:text-base border-l-2 border-blue-200 pl-4">
                            {faq.a}
                          </p>
                        </div>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;