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
} from 'lucide-react';
import { Link } from 'react-router-dom';
import Navbar from '../components/Navbar';
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';

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[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const [mentorsData, coursesData, pTestimonialsData, sTestimonialsData] = await Promise.all([
        firestoreService.getAllMentors(),
        firestoreService.getAll<Course>('courses'),
        firestoreService.getAll<Testimonial>('testimonials'),
        firestoreService.getAll<StudentTestimonial>('studentTestimonials')
      ]);
      setMentors(mentorsData);
      setCourses(coursesData.slice(0, 3));
      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}
      />
      <Navbar />
      {/* Hero Section */}
      <section className="relative pt-32 pb-20 overflow-hidden">
        <div className="absolute top-0 right-0 w-1/3 h-full bg-brand-bg -z-10 rounded-l-[100px]" />
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-16 items-center">
          <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/5 border border-brand-red/10 px-4 py-2 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-wider">Premium Learning for All Boards</span>
            </div>
            
            <h1 className="text-6xl md:text-7xl font-display font-black text-brand-navy 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-500 text-lg md:text-xl leading-relaxed max-w-xl">
              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-bold text-lg shadow-xl shadow-brand-red/20 hover:bg-brand-red/90 hover:-translate-y-1 active:translate-y-0 transition-all text-center flex items-center justify-center gap-2 group"
              >
                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 text-brand-navy border-2 border-brand-navy/10 px-8 py-4 rounded-2xl font-bold text-lg hover:bg-gray-50 active:scale-95 transition-all text-center"
              >
                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-brand-navy">500+ Active Students</p>
                 <div className="flex items-center text-yellow-500">
                    <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-400 text-[10px] ml-1">4.9/5 Rating</span>
                 </div>
               </div>
            </div>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            className="relative"
          >
            <div className="relative z-10 rounded-[2.5rem] overflow-hidden shadow-2xl border-4 border-white aspect-[4/5] md:aspect-square">
               <img 
                 src="https://images.unsplash.com/photo-1517673132405-a56a62b18caf?q=80&w=1000&auto=format&fit=crop" 
                 className="w-full h-full object-cover" 
                 alt="Student learning" 
               />
               <div className="absolute inset-0 bg-gradient-to-t from-brand-navy/60 via-transparent to-transparent" />
               <button className="absolute inset-0 m-auto w-20 h-20 bg-white rounded-full flex items-center justify-center shadow-2xl hover:scale-110 active:scale-90 transition-all text-brand-red">
                 <Play className="w-8 h-8 fill-current ml-1" />
               </button>
            </div>
            
            {/* Floating Badges */}
            <motion.div 
              animate={{ y: [0, -10, 0] }}
              transition={{ duration: 4, repeat: Infinity }}
              className="absolute -top-10 -right-5 z-20 glass p-4 rounded-2xl shadow-xl flex items-center gap-3"
            >
              <div className="bg-green-100 p-2 rounded-lg"><GraduationCap className="w-6 h-6 text-green-600" /></div>
              <div><p className="text-xs font-black uppercase text-gray-400">Success Rate</p><p className="font-display font-black text-xl text-brand-navy">98%</p></div>
            </motion.div>
            
            <motion.div 
              animate={{ y: [0, 10, 0] }}
              transition={{ duration: 5, repeat: Infinity }}
              className="absolute -bottom-10 -left-10 z-20 glass p-6 rounded-3xl shadow-xl space-y-3 max-w-[200px]"
            >
              <div className="flex items-center gap-2"><BarChart3 className="w-5 h-5 text-brand-accent" /><p className="text-sm 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: '75%'}} transition={{delay: 1, duration: 1}} className="bg-brand-red h-full" /></div>
              <p className="text-[10px] text-gray-500">Student ID #7845 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 py-24 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-20 space-y-4">
              <h2 className="text-xs font-black uppercase tracking-[0.3em] text-brand-red">Our Approach</h2>
              <h3 className="text-4xl font-display font-black text-brand-navy leading-tight">Interactive Learning That Engages</h3>
              <p className="text-gray-500 text-sm">
                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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row justify-between items-end gap-6 mb-16">
          <div className="space-y-4">
            <h2 className="text-brand-red font-black uppercase text-sm tracking-widest">Our Curriculum</h2>
            <h3 className="text-4xl font-display font-black text-brand-navy">Explore Featured Courses</h3>
          </div>
          <Link to="/courses" className="bg-brand-navy text-white px-8 py-3 rounded-xl font-bold flex items-center gap-2 hover:bg-brand-navy/90 transition-all">
            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>
      </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">
            {[
              {
                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) => (
              <div key={idx} className="p-8 group hover:bg-blue-50/20 transition-colors">
                <div className="flex gap-6">
                  <div className="shrink-0 mt-1">
                    <div className="w-6 h-6 border-2 border-blue-500/30 rounded flex items-center justify-center text-blue-500">
                      <div className="w-2.5 h-0.5 bg-current rounded-full" />
                    </div>
                  </div>
                  <div>
                    <h4 className="font-display font-bold text-brand-navy text-lg mb-3">
                      {faq.q}
                    </h4>
                    <p className="text-gray-500 leading-relaxed text-sm">
                      {faq.a}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;
