import Navbar from '../components/Navbar'
import AnimatedBackground from '../components/AnimatedBackground'
import { motion } from 'framer-motion'
import { useMemo, useRef } from 'react'
import { Link } from 'react-router-dom'
import { 
  AcademicCapIcon,
  BriefcaseIcon,
  CommandLineIcon,
  DocumentTextIcon,
  SparklesIcon,
  ChatBubbleLeftRightIcon,
  ArrowRightIcon,
  GlobeAltIcon,
  PresentationChartBarIcon,
} from '@heroicons/react/24/outline'
import Footer from '../components/Footer'
import TestimonialsCarousel from '../components/TestimonialsCarousel'
import { useTheme } from '../theme/ThemeContext'

const fadeUp = (d=0) => ({ initial:{opacity:0,y:24}, whileInView:{opacity:1,y:0}, viewport:{once:true, amount:.3}, transition:{duration:.6, delay:d} })
const containerStagger = {
  hidden: { opacity: 0 },
  show: { opacity: 1, transition: { staggerChildren: 0.08 } }
}
const itemMotion = {
  hidden: { opacity: 0, y: 18, scale: .98 },
  show: { opacity: 1, y: 0, scale: 1, transition: { duration: .5 } }
}

export default function Landing(){
  const { theme } = useTheme() || { theme: { imagery: 'abstract', anim: 'medium', parallax: 'medium' } }
  const animScale = theme.anim === 'strong' ? 1.06 : theme.anim === 'medium' ? 1.02 : 1.005
  const isTouch = typeof window !== 'undefined' && matchMedia('(pointer:coarse)').matches
  const baseParallax = theme.parallax === 'strong' ? 8 : theme.parallax === 'medium' ? 6 : 3
  const parallaxFactor = isTouch ? Math.max(2, baseParallax - 4) : baseParallax

  const images = useMemo(() => {
    const sets = {
      abstract: {
        hero: 'https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=1600&auto=format&fit=crop',
        jobs: 'https://images.unsplash.com/photo-1553877522-43269d4ea984?q=80&w=1600&auto=format&fit=crop',
        roadmaps: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1600&auto=format&fit=crop',
        resume: 'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?q=80&w=1600&auto=format&fit=crop',
        mock: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1600&auto=format&fit=crop',
        insights: 'https://images.unsplash.com/photo-1516321497487-e288fb19713f?q=80&w=1600&auto=format&fit=crop',
      },
      illustrations: {
        hero: 'https://images.unsplash.com/photo-1542751371-adc38448a05e?q=80&w=1600&auto=format&fit=crop',
        jobs: 'https://images.unsplash.com/photo-1611162618479-7d7a39e9be50?q=80&w=1600&auto=format&fit=crop',
        roadmaps: 'https://images.unsplash.com/photo-1545239351-1141bd82e8a6?q=80&w=1600&auto=format&fit=crop',
        resume: 'https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=1600&auto=format&fit=crop',
        mock: 'https://images.unsplash.com/photo-1516557070061-c3d1653fa646?q=80&w=1600&auto=format&fit=crop',
        insights: 'https://images.unsplash.com/photo-1520975922203-b5a9cb27689a?q=80&w=1600&auto=format&fit=crop',
      },
      photos: {
        hero: 'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=1600&auto=format&fit=crop',
        jobs: 'https://images.unsplash.com/photo-1497493292307-31c376b6e479?q=80&w=1600&auto=format&fit=crop',
        roadmaps: 'https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?q=80&w=1600&auto=format&fit=crop',
        resume: 'https://images.unsplash.com/photo-1529101091764-c3526daf38fe?q=80&w=1600&auto=format&fit=crop',
        mock: 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop',
        insights: 'https://images.unsplash.com/photo-1534759846116-5791a4b5528c?q=80&w=1600&auto=format&fit=crop',
      }
    }
    return sets[theme.imagery] || sets.abstract
  }, [theme.imagery])
  const heroTiltRef = useRef(null)
  const onHeroMouseMove = (e) => {
    const el = heroTiltRef.current
    if(!el) return
    const rect = el.getBoundingClientRect()
    const x = e.clientX - rect.left
    const y = e.clientY - rect.top
    const rx = ((y / rect.height) - 0.5) * (-parallaxFactor) // tilt X
    const ry = ((x / rect.width) - 0.5) * parallaxFactor  // tilt Y
    el.style.transform = `perspective(800px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`
  }
  const onHeroMouseLeave = () => {
    const el = heroTiltRef.current
    if(!el) return
    el.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0)'
  }
  return (
    <div className="relative min-h-screen overflow-hidden">
      <AnimatedBackground />
      {/* Subtle background image for hero depth */}
      <img
        src="https://images.unsplash.com/photo-1543286386-2e659306cd6c?q=80&w=1920&auto=format&fit=crop"
        alt="bg"
        className="pointer-events-none select-none absolute inset-0 -z-20 h-full w-full object-cover opacity-[0.06]"
        loading="lazy"
      />
      <Navbar />

      {/* Hero */}
      <section className="relative mx-auto max-w-7xl px-6 pt-20 pb-16">
        <div className="relative grid lg:grid-cols-2 gap-10 items-center">
          <motion.div {...fadeUp(0)}>
            <h1 className="text-4xl md:text-6xl font-semibold tracking-tight leading-tight">
              Your Career. <span className="text-brand-400">Supercharged.</span>
            </h1>
            <p className="mt-4 text-slate-300 max-w-xl">
              One place to discover jobs & internships, follow curated roadmaps, build resumes & cover letters,
              practice mock interviews, and ace placements — all in one powerful platform.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <motion.div whileHover={{ y: -2, scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                <Link to="/auth/signup" className="px-5 py-3 rounded bg-brand-600 hover:bg-brand-500 text-white shadow-glow inline-flex items-center gap-2">
                  Get Started <ArrowRightIcon className="w-5 h-5"/>
                </Link>
              </motion.div>
              <motion.div whileHover={{ y: -2, scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                <a href="#features" className="px-5 py-3 rounded bg-slate-800 hover:bg-slate-700 inline-flex items-center gap-2">
                  Explore Features
                </a>
              </motion.div>
            </div>
            {/* Removed small utility line per request */}
          </motion.div>
          <motion.div {...fadeUp(.1)} className="relative" onMouseMove={onHeroMouseMove} onMouseLeave={onHeroMouseLeave}>
          <div ref={heroTiltRef} className="relative rounded-2xl overflow-hidden border border-slate-800 bg-slate-900/40 shadow-xl transition-transform will-change-transform">
                {/* Professional career guidance hero image */}
                <img
                  src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop"
                  alt="Career guidance and professional development"
                  className="w-full h-80 object-cover"
                  referrerPolicy="no-referrer"
                  loading="eager"
                />
                {/* Lighten overlay so the image reads strongly */}
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950/40 to-transparent" />
                <div className="absolute bottom-0 p-6">
                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/70 border border-slate-800 text-slate-300 text-sm">
                    <SparklesIcon className="w-4 h-4" style={{ color: 'var(--brand)' }}/> Professional Career Platform
                  </div>
                </div>
              </div>
          </motion.div>
        </div>
      </section>

      {/* Decorative gradient blobs */}
      <div className="pointer-events-none absolute -left-24 top-40 h-80 w-80 rounded-full bg-brand-500/10 blur-3xl"/>
      <div className="pointer-events-none absolute -right-24 top-[600px] h-80 w-80 rounded-full bg-indigo-500/10 blur-3xl"/>

      {/* Features grid */}
      <section id="features" className="mx-auto max-w-7xl px-6 py-10">
        <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">Everything you need for your career journey</motion.h2>
        <motion.p {...fadeUp(.05)} className="mt-2 text-slate-400 max-w-3xl">Beautiful, fast, and built to help you succeed: search jobs, learn with roadmaps, practice interviews, and generate polished resumes & letters.</motion.p>
        <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
          <Feature icon={BriefcaseIcon} title="Jobs & Internships" desc="Find roles that fit you, track applications, and uncover salary trends — all in one place." animScale={animScale}/>
          <Feature icon={AcademicCapIcon} title="Learning Roadmaps" desc="Follow step‑by‑step paths with curated resources, milestones, and checkpoints to stay consistent." animScale={animScale}/>
          <Feature icon={DocumentTextIcon} title="Resume & Cover Letters" desc="Build ATS‑friendly documents with proven sections and export crisp PDFs in seconds." animScale={animScale}/>
          <Feature icon={CommandLineIcon} title="Placement Prep" desc="Practice MCQs, coding and interviews — build confidence before you apply." animScale={animScale}/>
          <Feature icon={ChatBubbleLeftRightIcon} title="Mock Interviews" desc="Rehearse realistic interviews, reflect on transcripts, and fix gaps before the real one." animScale={animScale}/>
          <Feature icon={GlobeAltIcon} title="Higher Studies" desc="Compare programs, shortlist universities, and plan requirements without the overwhelm." animScale={animScale}/>
          <Feature icon={PresentationChartBarIcon} title="Industry Insights" desc="See in‑demand roles, compare salary bands, and know which skills to learn next." animScale={animScale}/>
        </motion.div>
      </section>

      {/* Industry Insights */}
      <section className="mx-auto max-w-7xl px-6 py-10">
        <motion.div {...fadeUp(0)} className="grid lg:grid-cols-2 gap-8 items-center">
          <div>
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/70 border border-slate-800 text-slate-300 text-sm">
              <PresentationChartBarIcon className="w-4 h-4" style={{ color: 'var(--brand)' }}/> Industry Insights
            </div>
            <h2 className="mt-3 text-2xl md:text-3xl font-semibold">Know what's trending — and what to learn next</h2>
            <p className="mt-3 text-slate-300 max-w-xl">
              Explore in-demand roles by your interests, compare salary bands (min/median/max), and reveal your personal skill gaps so you can upskill with confidence.
            </p>
            <ul className="mt-5 space-y-2 text-slate-300">
              <li className="flex items-start gap-2"><span className="mt-1 h-2 w-2 rounded-full bg-brand-400"/> Trending roles by interest</li>
              <li className="flex items-start gap-2"><span className="mt-1 h-2 w-2 rounded-full bg-emerald-400"/> Min/Median/Max salary bands</li>
              <li className="flex items-start gap-2"><span className="mt-1 h-2 w-2 rounded-full bg-fuchsia-400"/> Personalized skill gaps and next steps</li>
            </ul>
            <div className="mt-6">
              <motion.div whileHover={{ y: -2, scale: 1.02 }} whileTap={{ scale: 0.98 }}>
                <Link to="/insights" className="px-4 py-2 rounded bg-slate-800 hover:bg-slate-700 inline-flex items-center gap-2">
                  Explore Insights <ArrowRightIcon className="w-4 h-4"/>
                </Link>
              </motion.div>
            </div>
          </div>
          <motion.div {...fadeUp(.05)} className="relative overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/40 p-6">
            <img src={images.insights} alt="Insights preview" className="w-full h-64 object-cover opacity-80" loading="lazy"/>
            <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent"/>
            <div className="absolute bottom-0 p-4 text-slate-300 text-sm">Live analytics • Personalized by interests</div>
          </motion.div>
        </motion.div>
      </section>

      {/* Visual showcase rows */}
      <section className="mx-auto max-w-7xl px-6 py-6">
        <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="grid lg:grid-cols-2 gap-6">
          <Showcase
            image={images.jobs}
            badge="Jobs & Salaries"
            title="Discover roles that match your skills"
            desc="Search globally, filter smartly, and bookmark your best matches."
            cta={{ href:'/jobs', label:'Explore Jobs' }}
          />
          <Showcase
            image={images.roadmaps}
            badge="Roadmaps"
            title="Structured learning without the guesswork"
            desc="Step-by-step guidance and resources to master in-demand skills."
            cta={{ href:'/roadmaps', label:'View Roadmaps' }}
          />
          <Showcase
            image={images.resume}
            badge="Resume Builder"
            title="Craft polished resumes in minutes"
            desc="Drag-and-drop sections, preview live, and export crisp PDFs."
            cta={{ href:'/resume-builder', label:'Build Resume' }}
          />
          <Showcase
            image={images.mock}
            badge="Mock Interviews"
            title="Practice confidently with realistic flows"
            desc="Practice common questions, review transcripts, and iterate fast."
            cta={{ href:'/mock-interview', label:'Start a Mock' }}
          />
        </motion.div>
      </section>

      {/* How it helps */}
      {HowItHelps()}

      {/* Popular Paths */}
      {PopularPaths()}

      {/* Why choose us */}
      {WhyChooseUs()}

      {/* Stats band */}
      <section className="mx-auto max-w-7xl px-6 py-12">
        <motion.div {...fadeUp(0)} className="grid sm:grid-cols-3 gap-4">
          <Stat number="50k+" label="Jobs Indexed"/>
          <Stat number="200+" label="Roadmap Steps"/>
          <Stat number="100%" label="Free to Use"/>
        </motion.div>
      </section>

      {/* Testimonials */}
      <section className="mx-auto max-w-7xl px-6 py-12">
        <motion.h3 {...fadeUp(0)} className="text-xl font-semibold">What learners say</motion.h3>
        <div className="mt-6">
          <TestimonialsCarousel />
        </div>
      </section>

      {/* FAQ */}
      {FaqSection()}

      {/* CTA */}
      <section className="mx-auto max-w-7xl px-6 py-16">
        <div className="relative overflow-hidden rounded-2xl border border-slate-800 bg-gradient-to-r from-slate-900 to-slate-800 p-8">
          <motion.div {...fadeUp(0)} className="relative">
            <h3 className="text-2xl md:text-3xl font-semibold">Your next step starts here</h3>
            <p className="mt-2 text-slate-300">Sign in with Google and start exploring jobs, roadmaps, and more — it’s free.</p>
            <div className="mt-6 flex gap-3">
              <motion.div whileHover={{ y: -2, scale: 1.04 }} whileTap={{ scale: 0.98 }}>
                <Link to="/auth/signup" className="inline-flex items-center gap-2 px-5 py-3 rounded text-white" style={{ backgroundColor: 'var(--brand)' }}>
                  Get Started <ArrowRightIcon className="w-5 h-5"/>
                </Link>
              </motion.div>
              <motion.div whileHover={{ y: -2, scale: 1.04 }} whileTap={{ scale: 0.98 }}>
                <Link to="/dashboard" className="inline-flex items-center gap-2 px-5 py-3 rounded bg-slate-800 hover:bg-slate-700">Go to Dashboard</Link>
              </motion.div>
            </div>
          </motion.div>
          <div className="pointer-events-none absolute -right-24 -top-24 h-72 w-72 rounded-full" style={{ background: 'var(--brand-glow)' }} />
        </div>
      </section>

      <Footer />
    </div>
  )
}

function Feature({ icon:Icon, title, desc, animScale = 1.02 }){
  return (
    <motion.div
      variants={itemMotion}
      whileHover={{ y: -3, scale: animScale, boxShadow: '0 0 30px var(--brand-glow)' }}
      transition={{ type: 'spring', stiffness: 220, damping: 18 }}
      className="group p-5 rounded-2xl border border-slate-800 bg-slate-900/40 hover:bg-slate-900 transition shadow-sm"
    >
      <div className="flex items-start gap-3">
        <div className="p-2 rounded-lg bg-slate-800 border border-slate-700 group-hover:border-brand-500">
          <Icon className="w-6 h-6" style={{ color: 'var(--brand)' }}/>
        </div>
        <div>
          <div className="font-semibold">{title}</div>
          <div className="text-slate-400 text-sm mt-1">{desc}</div>
        </div>
      </div>
    </motion.div>
  )
}

// "How It Helps" section
function HowItHelps(){
  return (
    <section className="mx-auto max-w-7xl px-6 py-12">
      <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">How our platform helps you succeed</motion.h2>
      <div className="mt-6 grid md:grid-cols-3 gap-4">
        <HelpCard title="Clarity → Action" desc="Turn confusion into a clear plan: from choosing a path to executing daily steps."/>
        <HelpCard title="Save Time" desc="Skip the research rabbit hole — curated roadmaps and resources in one place."/>
        <HelpCard title="Stand Out" desc="Create polished resumes/letters and track progress to showcase real growth."/>
        <HelpCard title="Be Job-Ready" desc="Practice MCQs, coding and interviews — build confidence before you apply."/>
        <HelpCard title="Stay Informed" desc="Industry Insights highlight trending roles and skills you're missing."/>
        <HelpCard title="All-In-One" desc="From jobs to higher studies, it's the hub for your career journey."/>
      </div>
    </section>
  )
}

function HelpCard({ title, desc }){
  return (
    <motion.div
      initial={{ opacity:0, y: 22, scale: .97 }}
      whileInView={{ opacity:1, y:0, scale:1 }}
      viewport={{ once: true, amount: .3 }}
      whileHover={{ y: -6, scale: 1.03 }}
      animate={{ boxShadow: [
        '0 0 0 var(--brand-glow)',
        '0 0 26px var(--brand-glow)',
        '0 0 10px var(--brand-glow)'
      ] }}
      transition={{ duration: .6 }}
      className="relative p-5 rounded-2xl border border-slate-800 bg-slate-900/40 hover:bg-slate-900 overflow-hidden"
    >
      <div className="absolute -right-20 -top-20 h-40 w-40 rounded-full bg-brand-500/10 blur-3xl" />
      <div className="font-semibold text-slate-100">{title}</div>
      <div className="text-slate-400 text-sm mt-1">{desc}</div>
    </motion.div>
  )
}

function Showcase({ image, badge, title, desc, cta }){
  return (
    <motion.div variants={itemMotion} whileHover={{ y: -3, scale: 1.02, boxShadow: '0 0 38px var(--brand-glow)' }} className="relative overflow-hidden rounded-2xl border border-slate-800 bg-slate-900/40 transition">
      <img src={image} alt={title} className="w-full h-64 object-cover opacity-80" loading="lazy" onError={(e)=>{e.currentTarget.src='https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=1600&auto=format&fit=crop'}}/>
      <div className="absolute inset-0 bg-gradient-to-t from-slate-950/80 to-transparent"/>
      <div className="absolute bottom-0 p-5">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900/70 border border-slate-800 text-slate-300 text-sm">
          <SparklesIcon className="w-4 h-4" style={{ color: 'var(--brand)' }}/> {badge}
        </div>
        <div className="mt-3 text-xl font-semibold">{title}</div>
        <div className="text-slate-300 text-sm mt-1 max-w-md">{desc}</div>
        {cta && (
          <a href={cta.href} className="mt-3 inline-flex items-center gap-2 px-4 py-2 rounded bg-slate-800 hover:bg-slate-700">
            {cta.label} <ArrowRightIcon className="w-4 h-4"/>
          </a>
        )}
      </div>
    </motion.div>
  )
}

// Popular Paths section
function PopularPaths(){
  const items = [
    { title: 'Frontend Developer', steps: 'HTML • CSS • JS • React • TS', link: '/roadmaps#frontend' },
    { title: 'Backend Developer', steps: 'Node.js • APIs • DB • Auth • DevOps', link: '/roadmaps#backend' },
    { title: 'Data Analyst', steps: 'Excel • SQL • BI • Python • Viz', link: '/roadmaps#data-analyst' },
    { title: 'AI/ML Engineer', steps: 'Python • ML • MLOps • Deploy', link: '/roadmaps#ml' },
    { title: 'Cloud Engineer', steps: 'AWS • Docker • CI/CD • Terraform', link: '/roadmaps#cloud' },
    { title: 'Mobile Developer', steps: 'Kotlin • Swift • Flutter • React Native', link: '/roadmaps#mobile' },
  ]
  const gradients = [
    'from-cyan-500/20 to-fuchsia-500/10',
    'from-emerald-500/20 to-cyan-500/10',
    'from-orange-500/20 to-rose-500/10',
    'from-indigo-500/20 to-purple-500/10',
    'from-pink-500/20 to-yellow-500/10',
    'from-sky-500/20 to-emerald-500/10',
  ]
  return (
    <section className="mx-auto max-w-7xl px-6 py-12">
      <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">Popular paths to get started</motion.h2>
      <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {items.map((it, i) => (
          <motion.a
            key={it.title}
            href={it.link}
            variants={itemMotion}
            className={`relative p-5 rounded-2xl border border-slate-800 bg-gradient-to-br ${gradients[i % gradients.length]} hover:brightness-110 transition block overflow-hidden`}
            whileHover={{ y: -6, scale: 1.05, boxShadow: '0 0 42px var(--brand-glow)' }}
          >
            <div className="absolute -right-16 -top-16 h-40 w-40 rounded-full" style={{ background: 'var(--brand-glow)' }} />
            <div className="flex items-start gap-3">
              <div className="flex-none h-9 w-9 rounded-lg bg-slate-900/60 border border-slate-700 flex items-center justify-center text-slate-200 font-semibold">
                {String(i+1).padStart(2,'0')}
              </div>
              <div>
                <div className="font-semibold">{it.title}</div>
                <div className="text-slate-300 text-sm mt-1">{it.steps}</div>
              </div>
            </div>
          </motion.a>
        ))}
      </motion.div>
    </section>
  )
}

function WhyChooseUs(){
  const features = [
    { 
      icon: '🎯', 
      title: 'All-in-One Career Platform', 
      desc: 'Single workspace for jobs, learning, resumes, and interviews — no more switching between tools.',
      highlight: 'Unified Experience'
    },
    { 
      icon: '📊', 
      title: 'Data-Driven Insights', 
      desc: 'Real-time market trends, salary data, and skill gaps help you make informed career decisions.',
      highlight: 'Smart Analytics'
    },
    { 
      icon: '🛤️', 
      title: 'Personalized Learning Paths', 
      desc: 'Adaptive roadmaps that evolve with your progress and keep you on track to your goals.',
      highlight: 'Tailored Learning'
    },
    { 
      icon: '📄', 
      title: 'ATS-Optimized Documents', 
      desc: 'Professional resume and cover letter templates that pass applicant tracking systems.',
      highlight: 'Professional Quality'
    },
    { 
      icon: '🎤', 
      title: 'Interview Practice Lab', 
      desc: 'Realistic mock interviews with AI feedback to build confidence before the real thing.',
      highlight: 'Confidence Building'
    },
    { 
      icon: '🔒', 
      title: 'Privacy & Security First', 
      desc: 'Your data stays yours with secure Google authentication and easy export options.',
      highlight: 'Your Data, Your Control'
    },
  ]
  
  return (
    <section className="mx-auto max-w-7xl px-6 py-16">
      <motion.div {...fadeUp(0)} className="text-center mb-12">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">Why Choose CareerGuide</h2>
        <p className="text-slate-400 text-lg max-w-2xl mx-auto">
          We've built the most comprehensive career platform to help you succeed at every step of your professional journey.
        </p>
      </motion.div>
      
      <motion.div 
        variants={containerStagger} 
        initial="hidden" 
        whileInView="show" 
        viewport={{ once: true, amount: .2 }} 
        className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"
      >
        {features.map((feature, index) => (
          <motion.div
            key={feature.title}
            variants={itemMotion}
            whileHover={{ y: -8, scale: 1.02, boxShadow: '0 20px 40px var(--brand-glow)' }}
            className="group relative p-6 rounded-2xl border border-slate-800 bg-slate-900/40 hover:bg-slate-900/60 transition-all duration-300 overflow-hidden"
          >
            {/* Background gradient */}
            <div className="absolute inset-0 bg-gradient-to-br from-brand-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
            
            {/* Icon */}
            <div className="text-3xl mb-4">{feature.icon}</div>
            
            {/* Content */}
            <div className="relative z-10">
              <div className="inline-block px-3 py-1 rounded-full bg-brand-500/10 border border-brand-500/20 text-brand-400 text-xs font-medium mb-3">
                {feature.highlight}
              </div>
              <h3 className="text-xl font-semibold mb-3 text-slate-100">{feature.title}</h3>
              <p className="text-slate-400 text-sm leading-relaxed">{feature.desc}</p>
            </div>
            
            {/* Hover effect line */}
            <div className="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-brand-500 to-brand-400 group-hover:w-full transition-all duration-500" />
          </motion.div>
        ))}
      </motion.div>
      
      {/* Bottom CTA */}
      <motion.div {...fadeUp(.1)} className="text-center mt-12">
        <div className="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-slate-800/50 border border-slate-700 text-slate-300">
          <span className="w-2 h-2 rounded-full bg-brand-400 animate-pulse"></span>
          <span className="text-sm">Join thousands of professionals who've accelerated their careers</span>
        </div>
      </motion.div>
    </section>
  )
}

function NodeCard({ title, desc }){
  return (
    <motion.div whileHover={{ y: -3, scale: 1.02, boxShadow: '0 0 28px var(--brand-glow)' }} className="w-[200px] lg:w-[220px] max-w-xs p-3 lg:p-4 rounded-xl border border-slate-800 bg-slate-900/70">
      <div className="font-medium text-slate-100 text-sm lg:text-base">{title}</div>
      <div className="text-slate-400 text-xs mt-1 leading-relaxed">{desc}</div>
    </motion.div>
  )
}

// FAQ section
function FaqSection(){
  const faqs = [
    { q: 'Is it free to start?', a: 'Yes. You can sign in and use core features like Jobs, Roadmaps, and Resume Builder for free.' },
    { q: 'Do I need coding experience?', a: 'No. Choose a path that matches your goal — we guide you step by step.' },
    { q: 'Will you add personalized insights?', a: 'Yes. The Insights page already showcases trends and will soon personalize by your interests and profile.' },
  ]
  return (
    <section className="mx-auto max-w-7xl px-6 py-12">
      <motion.h2 {...fadeUp(0)} className="text-2xl md:text-3xl font-semibold">Frequently asked questions</motion.h2>
      <motion.div variants={containerStagger} initial="hidden" whileInView="show" viewport={{ once: true, amount: .2 }} className="mt-6 grid md:grid-cols-3 gap-4">
        {faqs.map(f => (
          <motion.div key={f.q} variants={itemMotion} className="p-5 rounded-2xl border border-slate-800 bg-slate-900/40">
            <div className="font-medium">{f.q}</div>
            <div className="text-slate-400 text-sm mt-1">{f.a}</div>
          </motion.div>
        ))}
      </motion.div>
    </section>
  )
}

function Stat({ number, label }){
  return (
    <div className="p-5 rounded-2xl border border-slate-800 bg-slate-900/40 text-center">
      <div className="text-3xl font-semibold text-brand-400">{number}</div>
      <div className="text-slate-400 text-sm mt-1">{label}</div>
    </div>
  )
}

function Testimonial({ quote, author }){
  return (
    <motion.div {...fadeUp(.05)} className="p-5 rounded-2xl border border-slate-800 bg-slate-900/40">
      <div className="text-slate-300">"{quote}"</div>
      <div className="text-slate-500 text-sm mt-2">— {author}</div>
    </motion.div>
  )
}