"use client"

import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { BrainCircuit, Activity, Zap, CheckCircle2, Shield, ArrowRight, Play, BookOpen, LineChart, Trophy, Sparkles, MessageSquare, X, Minus } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { motion, useScroll, useTransform, Variants } from "framer-motion"
import { useRef, useEffect } from "react"

export default function MarketingPage() {
  useEffect(() => {
    document.documentElement.classList.add('dark');
  }, []);

  const containerRef = useRef(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start start", "end start"]
  })

  // Slower background parallax
  const yBg = useTransform(scrollYProgress, [0, 1], ["0%", "50%"])

  // Stagger variants for the features
  const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  }

  const itemVariants: Variants = {
    hidden: { opacity: 0, y: 30 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { type: "spring", stiffness: 100, damping: 12 }
    }
  }

  return (
    <div ref={containerRef} className="min-h-screen bg-background text-foreground overflow-x-hidden selection:bg-primary/20 relative">

      {/* Animated Deep Background */}
      <div className="fixed inset-0 z-0 pointer-events-none bg-grid opacity-30"></div>
      <div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 50% 0%, rgba(209, 255, 77, 0.05) 0%, transparent 50%)' }}></div>
      <div className="fixed inset-0 z-0 pointer-events-none" style={{ background: 'radial-gradient(circle at 100% 50%, rgba(0, 240, 255, 0.03) 0%, transparent 40%)' }}></div>

      {/* Floating Orbs (Using Framer Motion) */}
      <motion.div
        className="fixed top-1/4 left-1/4 size-[400px] rounded-full bg-primary/20 blur-[120px] pointer-events-none mix-blend-screen -z-10"
        animate={{ x: [0, 50, -20, 0], y: [0, -30, 40, 0] }}
        transition={{ duration: 15, repeat: Infinity, ease: "linear" }}
      />
      <motion.div
        className="fixed bottom-1/4 right-1/4 size-[500px] rounded-full bg-[#00F0FF]/10 blur-[150px] pointer-events-none mix-blend-screen -z-10"
        animate={{ x: [0, -60, 30, 0], y: [0, 40, -50, 0] }}
        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
      />

      {/* Navigation */}
      <nav className="fixed top-0 w-full z-50 bg-background/50 backdrop-blur-xl border-b border-border/50">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <Link href="/" className="relative h-14 w-60 hover:opacity-90 transition-opacity block">
            <Image
              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
              alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden" priority
            />
            <Image
              src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
              alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left hidden dark:block" priority
            />
          </Link>
          <div className="hidden md:flex items-center gap-8 text-sm font-medium text-muted-foreground">
            <Link href="#features" className="hover:text-foreground transition-colors">Features</Link>
            <Link href="#pricing" className="hover:text-foreground transition-colors">Pricing</Link>
            <Link href="/about" className="hover:text-foreground transition-colors">About</Link>
          </div>
          <div className="flex items-center gap-4">
            <Link href="/login" className="text-sm font-bold hover:text-primary transition-colors hidden sm:block">Log in</Link>
            <Link href="/signup">
              <Button className="rounded-full font-bold px-6 shadow-[0_0_15px_-5px_var(--color-primary)] hover:shadow-[0_0_25px_-5px_var(--color-primary)] transition-all">Get Started</Button>
            </Link>
          </div>
        </div>
      </nav>

      <main className="relative z-10 pt-32 pb-24">
        {/* Hero Section */}
        <section className="px-6 max-w-7xl mx-auto text-center space-y-8 pt-12 pb-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <Badge variant="outline" className="border-primary/50 text-primary bg-primary/10 px-4 py-1.5 rounded-full text-xs font-bold tracking-widest uppercase shadow-[0_0_15px_-5px_var(--color-primary)] mb-6">
              The Next Evolution of Prep
            </Badge>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, type: "spring" }}
            className="text-6xl md:text-8xl font-bold tracking-tighter max-w-5xl mx-auto leading-[1.1]"
          >
            NEET/JEE Prep, <br className="hidden md:block" />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-[#00F0FF] to-primary animate-gradient pb-2 drop-shadow-[0_0_20px_rgba(209,255,77,0.3)]">Re-engineered by AI.</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="text-xl md:text-2xl text-muted-foreground max-w-2xl mx-auto leading-relaxed font-medium"
          >
            Experience the most accurate CBT simulator combined with adaptive DPPs generated specifically for your weak areas in real-time.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-8"
          >
            <Link href="/signup">
              <Button size="lg" className="group rounded-full h-14 px-8 text-base font-bold shadow-[0_0_40px_-10px_var(--color-primary)] hover:shadow-[0_0_60px_-10px_var(--color-primary)] transition-all w-full sm:w-auto relative overflow-hidden">
                <span className="relative z-10 flex items-center">Start Free Trial <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={18} /></span>
                <div className="absolute inset-0 -translate-x-full animate-shine bg-gradient-to-r from-transparent via-white/20 to-transparent z-0"></div>
              </Button>
            </Link>
            <Link href="/signup">
              <Button size="lg" variant="outline" className="rounded-full h-14 px-8 text-base border-border bg-background/50 backdrop-blur-sm w-full sm:w-auto hover:bg-secondary/50 hover:text-foreground transition-colors group">
                <Play className="mr-2 group-hover:scale-110 transition-transform text-[#00F0FF]" size={18} fill="currentColor" /> Watch Demo
              </Button>
            </Link>
          </motion.div>

          {/* Dashboard Preview Mockup */}
          <motion.div
            initial={{ opacity: 0, y: 40, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ duration: 1, delay: 0.6, type: "spring" }}
            className="relative max-w-5xl mx-auto mt-20 rounded-[2rem] border border-border/60 bg-secondary/5 backdrop-blur-xl shadow-[0_0_50px_-15px_rgba(0,240,255,0.15)] overflow-hidden"
          >
            {/* Top Window Chrome Bar */}
            <div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-background/50">
              <div className="flex items-center gap-2">
                <div className="size-3 rounded-full bg-red-500/80"></div>
                <div className="size-3 rounded-full bg-yellow-500/80"></div>
                <div className="size-3 rounded-full bg-green-500/80"></div>
              </div>
              <div className="hidden sm:flex items-center bg-background/80 border border-border/50 px-6 py-1.5 rounded-full text-xs font-mono text-muted-foreground w-80 justify-center gap-2">
                <div className="size-2 rounded-full bg-[#00F0FF] animate-pulse"></div>
                pragativeer.com/dashboard/student
              </div>
              <div className="flex items-center gap-2">
                <Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 px-2 py-0.5 rounded-md text-[10px] uppercase tracking-wider font-bold">
                  AI Active
                </Badge>
              </div>
            </div>

            {/* Dashboard Inner Screen */}
            <div className="grid grid-cols-1 md:grid-cols-4 min-h-[480px]">
              {/* Mock Sidebar */}
              <div className="md:col-span-1 border-r border-border/50 p-6 space-y-6 hidden md:block bg-background/20">
                <div className="space-y-2">
                  <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl bg-primary/10 text-primary border border-primary/20 text-sm font-semibold">
                    <Activity size={18} />
                    Overview
                  </div>
                  <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
                    <Play size={18} className="text-muted-foreground" />
                    Exams (CBT)
                  </div>
                  <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
                    <BrainCircuit size={18} />
                    Daily Practice
                  </div>
                  <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
                    <BookOpen size={18} />
                    Study Materials
                  </div>
                </div>
                <div className="pt-6 border-t border-border/50">
                  <p className="px-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-3">AI Intelligence</p>
                  <div className="space-y-2">
                    <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
                      <LineChart size={18} />
                      Analytics
                    </div>
                    <div className="flex items-center gap-3 px-3 py-2.5 rounded-xl text-muted-foreground hover:bg-secondary/30 hover:text-foreground text-sm font-semibold transition-all">
                      <Trophy size={18} />
                      Rank Predictor
                    </div>
                  </div>
                </div>
              </div>

              {/* Mock Main Content Area */}
              <div className="md:col-span-3 p-6 md:p-8 space-y-6 text-left">
                {/* Greeting & Header */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                  <div>
                    <h3 className="text-xl font-bold tracking-tight">Welcome, Demo Student</h3>
                    <p className="text-xs text-muted-foreground font-medium mt-1">Your adaptive NEET path is optimized. Next review in 2 hours.</p>
                  </div>
                  <div className="flex items-center gap-2 bg-secondary/30 border border-border/50 px-3 py-1.5 rounded-xl text-xs font-semibold">
                    <span className="size-2 rounded-full bg-emerald-500 shadow-[0_0_8px_#10b981]"></span>
                    Subscription: <span className="text-primary font-bold ml-1">AI Pro Plan</span>
                  </div>
                </div>

                {/* Dashboard Grid Cards */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                  {/* Card 1: Weakness Analysis */}
                  <div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[#00F0FF]/30 transition-all duration-300 relative group">
                    <div className="flex items-center justify-between">
                      <h4 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Focus Topic</h4>
                      <Badge variant="outline" className="border-primary/30 text-primary bg-primary/5 rounded-md text-[10px] font-bold">Physics</Badge>
                    </div>
                    <div className="space-y-2">
                      <div className="flex justify-between text-sm font-bold">
                        <span>Rotational Dynamics</span>
                        <span className="text-primary">42% Mastery</span>
                      </div>
                      <div className="h-2 bg-secondary rounded-full overflow-hidden">
                        <div className="h-full bg-primary rounded-full w-[42%] shadow-[0_0_10px_var(--color-primary)]"></div>
                      </div>
                    </div>
                    <p className="text-xs text-muted-foreground leading-relaxed">
                      <strong className="text-foreground font-semibold">AI recommendation:</strong> Solve 5 intermediate DPP questions on Moment of Inertia to unlock the next level and boost your expected score.
                    </p>
                  </div>

                  {/* Card 2: Live Score & AIR Rank Predictor */}
                  <div className="bg-background/40 border border-border/50 rounded-2xl p-5 space-y-4 shadow-sm hover:border-[#00F0FF]/30 transition-all duration-300 relative group">
                    <div className="flex items-center justify-between">
                      <h4 className="text-xs font-bold uppercase tracking-widest text-[#00F0FF]">Rank Simulator</h4>
                      <Badge variant="outline" className="border-[#00F0FF]/30 text-[#00F0FF] bg-[#00F0FF]/5 rounded-md text-[10px] font-bold">NEET Target</Badge>
                    </div>
                    <div className="flex items-end justify-between">
                      <div>
                        <p className="text-[10px] font-bold text-muted-foreground uppercase">Estimated AIR</p>
                        <p className="text-3xl font-bold tracking-tight text-[#00F0FF] drop-shadow-[0_0_8px_rgba(0,240,255,0.3)]">1,240</p>
                      </div>
                      <div className="text-right">
                        <p className="text-[10px] font-bold text-muted-foreground uppercase">Expected Score</p>
                        <p className="text-xl font-bold tracking-tight text-foreground">685 <span className="text-xs font-medium text-muted-foreground">/ 720</span></p>
                      </div>
                    </div>
                    {/* Mini Sparkline Chart representation */}
                    <div className="flex items-center gap-1 h-8 pt-2">
                      {[30, 45, 35, 55, 70, 60, 85].map((val, i) => (
                        <div
                          key={i}
                          className="flex-1 bg-[#00F0FF]/20 hover:bg-[#00F0FF]/60 transition-colors rounded-t"
                          style={{ height: `${val}%` }}
                        ></div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* AI Tutor Consultation Interface */}
                <div className="bg-secondary/20 border border-border/40 rounded-2xl p-5 flex gap-4 items-start relative overflow-hidden">
                  <div className="size-10 rounded-xl bg-primary text-primary-foreground flex items-center justify-center font-bold text-sm shadow-[0_0_15px_-3px_var(--color-primary)] shrink-0 mt-1">
                    <Sparkles size={20} className="animate-pulse" />
                  </div>
                  <div className="space-y-3 text-left w-full">
                    <div className="flex items-center justify-between w-full">
                      <h4 className="text-sm font-bold text-foreground">AI Tutor Agent</h4>
                      <span className="text-[10px] font-mono text-muted-foreground">Response generated instantly</span>
                    </div>
                    <div className="text-xs text-muted-foreground leading-relaxed max-w-xl">
                      "I have analyzed your last CBT physics test. You excelled in Mechanics but hesitated on electromagnetic induction questions, spending an average of 42 seconds longer per problem. I have generated a custom 10-question DPP focusing exclusively on induction. Let's tackle it now."
                    </div>
                    <div className="flex items-center gap-2 pt-1">
                      <Link href="/dashboard/dpp">
                        <Button size="sm" className="h-8 rounded-lg px-4 text-xs font-bold">
                          Start Custom DPP
                        </Button>
                      </Link>
                      <Button size="sm" variant="outline" className="h-8 rounded-lg px-4 text-xs border-border bg-background/50">
                        <MessageSquare size={12} className="mr-1.5 text-[#00F0FF]" /> Ask AI to explain
                      </Button>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </motion.div>
        </section>

        {/* Infinite Trust Bar */}
        <section className="mt-32 border-y border-border/50 bg-secondary/10 backdrop-blur-sm overflow-hidden py-8 relative">
          <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-background to-transparent z-10"></div>
          <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10"></div>
          <div className="flex w-[200%] animate-marquee opacity-70 hover:opacity-100 transition-opacity">
            {/* First Set */}
            <div className="flex-1 flex justify-around items-center px-4">
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><Shield size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> NTA Compliant</div>
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div>
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><BrainCircuit size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> 10M+ AI Models</div>
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
            </div>
            {/* Duplicate Set for seamless scroll */}
            <div className="flex-1 flex justify-around items-center px-4">
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><Shield size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> NTA Compliant</div>
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><Activity size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 99.9% Uptime</div>
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><BrainCircuit size={28} className="text-[#00F0FF] drop-shadow-[0_0_10px_rgba(0,240,255,0.5)]" /> 10M+ AI Models</div>
              <div className="flex items-center gap-3 font-bold text-xl tracking-tight"><CheckCircle2 size={28} className="text-primary drop-shadow-[0_0_10px_var(--color-primary)]" /> 50k+ Selections</div>
            </div>
          </div>
        </section>

        {/* Animated DPP Engine Section */}
        <section id="features" className="py-32 px-6 max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8 }}
            className="text-center mb-20"
          >
            <h2 className="text-4xl md:text-6xl font-bold tracking-tighter mb-6">Adaptive Engine</h2>
            <p className="text-muted-foreground text-xl max-w-2xl mx-auto">Our AI analyzes every keystroke and hesitation to generate the exact problems you need to solve next.</p>
          </motion.div>

          <motion.div
            variants={containerVariants}
            initial="hidden"
            whileInView="visible"
            viewport={{ once: true, margin: "-50px" }}
            className="grid grid-cols-1 md:grid-cols-3 gap-8"
          >
            <motion.div variants={itemVariants}>
              <Card className="bg-secondary/10 backdrop-blur-xl border-border/50 hover:border-primary/50 transition-all duration-300 rounded-[2rem] h-full shadow-lg group">
                <CardContent className="p-8 relative overflow-hidden">
                  <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 group-hover:-rotate-12 duration-500">
                    <Activity size={120} />
                  </div>
                  <div className="size-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_var(--color-primary)]">
                    <Activity size={28} />
                  </div>
                  <h3 className="text-2xl font-bold mb-4 tracking-tight">Real-time Analysis</h3>
                  <p className="text-muted-foreground leading-relaxed text-lg">
                    Every test attempt updates your knowledge graph instantly, identifying micro-concepts where you struggle.
                  </p>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div variants={itemVariants}>
              <Card className="bg-[#00F0FF]/5 backdrop-blur-xl border-[#00F0FF]/20 hover:border-[#00F0FF]/60 transition-all duration-300 rounded-[2rem] h-full shadow-[0_0_30px_-15px_#00F0FF] group">
                <CardContent className="p-8 relative overflow-hidden">
                  <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 group-hover:rotate-12 duration-500">
                    <BrainCircuit size={120} />
                  </div>
                  <div className="size-14 rounded-2xl bg-[#00F0FF]/20 text-[#00F0FF] flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_#00F0FF]">
                    <BrainCircuit size={28} />
                  </div>
                  <h3 className="text-2xl font-bold mb-4 tracking-tight">Dynamic Generation</h3>
                  <p className="text-muted-foreground leading-relaxed text-lg">
                    Custom problems are generated on the fly, matching the exact difficulty and NTA pattern required for growth.
                  </p>
                </CardContent>
              </Card>
            </motion.div>

            <motion.div variants={itemVariants}>
              <Card className="bg-secondary/10 backdrop-blur-xl border-border/50 hover:border-primary/50 transition-all duration-300 rounded-[2rem] h-full shadow-lg group">
                <CardContent className="p-8 relative overflow-hidden">
                  <div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity transform group-hover:scale-110 group-hover:-rotate-12 duration-500">
                    <Zap size={120} />
                  </div>
                  <div className="size-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-8 shadow-[0_0_20px_-5px_var(--color-primary)]">
                    <Zap size={28} />
                  </div>
                  <h3 className="text-2xl font-bold mb-4 tracking-tight">Instant Resolution</h3>
                  <p className="text-muted-foreground leading-relaxed text-lg">
                    Get interactive, step-by-step AI breakdowns for every wrong answer. Ask follow-up questions until you master it.
                  </p>
                </CardContent>
              </Card>
            </motion.div>
          </motion.div>
        </section>

        {/* Animated Pricing */}
        <section id="pricing" className="py-24 px-6 max-w-7xl mx-auto relative">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[600px] bg-primary/5 blur-[120px] rounded-full pointer-events-none -z-10"></div>

          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="text-center mb-20"
          >
            <h2 className="text-4xl md:text-6xl font-bold tracking-tighter mb-6">Simple, Transparent Pricing</h2>
            <p className="text-muted-foreground text-xl max-w-2xl mx-auto">Unlock the ultimate unfair advantage for your NEET/JEE preparation.</p>
          </motion.div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            {/* Free Plan */}
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, type: "spring" }}
            >
              <Card className="bg-background/80 backdrop-blur-md border-border p-8 rounded-[2.5rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl">
                <h3 className="text-3xl font-bold mb-2">Free</h3>
                <p className="text-muted-foreground mb-8 text-lg">Perfect to get started.</p>
                <div className="text-6xl font-bold tracking-tighter mb-10">₹0<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
                <ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> 1 Daily Practice Sheet</li>
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> Basic Performance Analytics</li>
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-muted-foreground" /> Community Access</li>
                </ul>
                <Link href="/signup">
                  <Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-border font-bold text-lg hover:bg-secondary hover:text-foreground">Get Started Free</Button>
                </Link>
              </Card>
            </motion.div>

            {/* Pro Plan */}
            <motion.div
              initial={{ opacity: 0, y: 40 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, type: "spring", delay: 0.1 }}
            >
              <Card className="bg-background/80 backdrop-blur-md border-border p-8 rounded-[2.5rem] flex flex-col hover:border-border/80 transition-colors h-full z-10 relative shadow-xl">
                <h3 className="text-3xl font-bold mb-2">Pro</h3>
                <p className="text-muted-foreground mb-8 text-lg">Perfect for self-paced practice.</p>
                <div className="text-6xl font-bold tracking-tighter mb-10">₹2,499<span className="text-xl text-muted-foreground font-medium">/yr</span></div>
                <ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Unlimited Daily Practice Sheets</li>
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Weekly Test Series & Mock Tests</li>
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Detailed Performance Analytics</li>
                  <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-primary" /> Parent Dashboard Access</li>
                </ul>
                <Link href="/signup">
                  <Button variant="outline" size="lg" className="w-full rounded-2xl h-16 border-border font-bold text-lg hover:bg-secondary hover:text-foreground">Choose Pro</Button>
                </Link>
              </Card>
            </motion.div>

            {/* AI Coach Plan */}
            <motion.div
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, type: "spring", delay: 0.2 }}
              className="relative mt-8 lg:mt-0"
            >
              <div className="absolute -top-4 left-1/2 -translate-x-1/2 z-20">
                <Badge className="bg-primary text-primary-foreground font-extrabold px-6 py-2 text-sm rounded-full shadow-[0_0_20px_-2px_var(--color-primary)]">MOST POPULAR</Badge>
              </div>
              <Card className="bg-secondary/30 backdrop-blur-xl border-primary p-8 rounded-[2.5rem] flex flex-col shadow-[0_0_60px_-15px_var(--color-primary)] hover:shadow-[0_0_80px_-15px_var(--color-primary)] transition-all h-full relative">
                <div className="absolute inset-0 rounded-[2.5rem] overflow-hidden">
                   <div className="absolute inset-0 -translate-x-full animate-shine bg-gradient-to-r from-transparent via-white/10 to-transparent z-0 pointer-events-none"></div>
                </div>
                <div className="relative z-10 flex flex-col h-full mt-4">
                  <h3 className="text-3xl font-bold mb-2">AI Coach</h3>
                  <p className="text-muted-foreground mb-8 text-lg">The complete AI-driven system.</p>
                  <div className="text-6xl font-bold tracking-tighter mb-10 text-primary drop-shadow-[0_0_10px_var(--color-primary)]">₹4,999<span className="text-xl text-foreground font-medium">/yr</span></div>
                  <ul className="space-y-5 mb-10 flex-1 font-medium text-lg">
                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Everything in Pro</li>
                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> AI Spaced Repetition (Mistakes)</li>
                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> 24/7 Streaming AI Tutor Chat</li>
                    <li className="flex items-center gap-4"><CheckCircle2 size={24} className="text-[#00F0FF]" /> Predictive Rank & College Predictor</li>
                  </ul>
                  <Link href="/signup">
                    <Button size="lg" className="w-full rounded-2xl h-16 font-bold text-lg bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_0_20px_-5px_var(--color-primary)] transition-all">Get AI Coach</Button>
                  </Link>
                </div>
              </Card>
            </motion.div>
          </div>
        </section>

        {/* Tier Comparison Matrix */}
        <section className="py-24 px-6 max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-5xl font-bold tracking-tighter mb-4">Compare Features</h2>
            <p className="text-muted-foreground text-lg max-w-2xl mx-auto">See exactly what you get with each PragatiVeer plan.</p>
          </div>
          
          <div className="overflow-x-auto rounded-2xl border border-border/50 bg-secondary/10 backdrop-blur-sm shadow-xl">
            <table className="w-full text-left border-collapse min-w-[700px]">
              <thead>
                <tr className="border-b border-border/50 bg-background/50">
                  <th className="p-4 md:p-6 font-bold text-lg w-2/5">Feature</th>
                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5">Free</th>
                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-primary drop-shadow-[0_0_5px_var(--color-primary)]">Pro</th>
                  <th className="p-4 md:p-6 font-bold text-lg text-center w-1/5 text-[#00F0FF] drop-shadow-[0_0_5px_rgba(0,240,255,0.5)]">AI Coach</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border/30 text-sm md:text-base">
                {[
                  { name: "Daily Practice Sheets", free: "1/day", pro: "Unlimited", ai: "Unlimited" },
                  { name: "Answer Keys", free: true, pro: true, ai: true },
                  { name: "Basic Progress Dashboard", free: true, pro: true, ai: true },
                  { name: "Streak Tracking", free: true, pro: true, ai: true },
                  { name: "Leaderboard (City/School)", free: true, pro: true, ai: true },
                  { name: "Topic-wise Micro-tests", free: "5/day", pro: "Unlimited", ai: "Unlimited" },
                  { name: "Weekly Test Series", free: false, pro: true, ai: true },
                  { name: "Full-Length Mock Tests", free: false, pro: "4/month", ai: "Unlimited" },
                  { name: "Previous Year Papers", free: false, pro: true, ai: true },
                  { name: "Detailed Performance Analytics", free: false, pro: true, ai: true },
                  { name: "Chapter-wise Progress", free: false, pro: true, ai: true },
                  { name: "Doubt Resolution (Community)", free: false, pro: true, ai: true },
                  { name: "Parent Dashboard", free: false, pro: true, ai: true },
                  { name: "Offline Mode (Download DPS)", free: false, pro: true, ai: true },
                  { name: "AI Mistake Tracking", free: false, pro: false, ai: true },
                  { name: "Spaced Repetition", free: false, pro: false, ai: true },
                  { name: "Personalized Daily Study Plan", free: false, pro: false, ai: true },
                  { name: "AI Tutor Chat", free: false, pro: false, ai: true },
                  { name: "Exam Readiness Score", free: false, pro: false, ai: true },
                  { name: "Exam Day Strategy", free: false, pro: false, ai: true },
                  { name: "College Predictor", free: false, pro: false, ai: true },
                  { name: "Study Time Optimization", free: false, pro: false, ai: true },
                ].map((feature, idx) => (
                  <tr key={idx} className="hover:bg-background/40 transition-colors">
                    <td className="p-4 md:p-6 font-medium">{feature.name}</td>
                    <td className="p-4 md:p-6 text-center text-muted-foreground">
                      {typeof feature.free === 'boolean' ? (feature.free ? <CheckCircle2 className="mx-auto text-muted-foreground" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold">{feature.free}</span>}
                    </td>
                    <td className="p-4 md:p-6 text-center">
                      {typeof feature.pro === 'boolean' ? (feature.pro ? <CheckCircle2 className="mx-auto text-primary" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-primary">{feature.pro}</span>}
                    </td>
                    <td className="p-4 md:p-6 text-center bg-[#00F0FF]/5">
                      {typeof feature.ai === 'boolean' ? (feature.ai ? <CheckCircle2 className="mx-auto text-[#00F0FF]" size={20} /> : <Minus className="mx-auto opacity-30" size={20} />) : <span className="font-semibold text-[#00F0FF]">{feature.ai}</span>}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
      </main>

      {/* Global Footer (Static) */}
      <footer className="relative z-10 bg-background/90 backdrop-blur-md border-t border-border pt-16 pb-8">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
            <div className="md:col-span-1 space-y-4">
              <div className="relative h-16 w-64 mb-6">
                <Image
                  src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
                  alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left dark:hidden"
                />
                <Image
                  src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
                  alt="PragatiVeer" fill className="object-contain object-left scale-135 origin-left hidden dark:block"
                />
              </div>
              <p className="text-sm text-muted-foreground font-medium leading-relaxed">
                Re-engineering NEET & JEE preparation with adaptive AI models. Learn faster, rank higher.
              </p>
              <div className="flex items-center gap-4 pt-2">
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                </Link>
                <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
                  <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
                </Link>
              </div>
            </div>

            <div>
              <h4 className="font-bold mb-6 tracking-tight text-foreground">Product</h4>
              <ul className="space-y-3 text-sm font-medium text-muted-foreground">
                <li><Link href="#features" className="hover:text-primary transition-colors">Features</Link></li>
                <li><Link href="#pricing" className="hover:text-primary transition-colors">Pricing</Link></li>
                <li><Link href="/dashboard" className="hover:text-primary transition-colors">Student Dashboard</Link></li>
                <li><Link href="/admin" className="hover:text-[#00F0FF] transition-colors">Admin Panel</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-6 tracking-tight text-foreground">Company</h4>
              <ul className="space-y-3 text-sm font-medium text-muted-foreground">
                <li><Link href="/about" className="hover:text-primary transition-colors">About Us</Link></li>
                <li><Link href="/contact" className="hover:text-primary transition-colors">Contact</Link></li>
                <li><Link href="#" className="hover:text-primary transition-colors">Careers</Link></li>
              </ul>
            </div>

            <div>
              <h4 className="font-bold mb-6 tracking-tight text-foreground">Legal</h4>
              <ul className="space-y-3 text-sm font-medium text-muted-foreground">
                <li><Link href="#" className="hover:text-primary transition-colors">Privacy Policy</Link></li>
                <li><Link href="#" className="hover:text-primary transition-colors">Terms of Service</Link></li>
              </ul>
            </div>
          </div>

          <div className="border-t border-border pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-sm text-muted-foreground font-medium">© {new Date().getFullYear()} PragatiVeer. All rights reserved.</p>
            <div className="flex items-center gap-2 text-sm text-muted-foreground font-medium">
              Made with <div className="size-2 rounded-full bg-primary animate-pulse"></div> by AI Agents
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}