'use client';

import React, { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  ArrowRight, CheckCircle2, Star, Award, Globe,
  Sparkles, MessageCircle, Play, ChevronDown, Zap,
  TrendingUp, Mic, GraduationCap, Clock, Heart,
  BadgeCheck, Trophy, X,
  Brain, Layers
} from "lucide-react";
import CVHeader from "@/components/layout/CVHeader";
import CVFooter from "@/components/layout/CVFooter";

const MAIN_SITE_ROUTES = {
  certifications: "/certifications",
  tesolCertification: "/certifications/cambridge-veritas-certificate-in-TESOL",
  tesolIntro: "/introduction-class/tesol",
  ieltsIntro: "/introduction-class/ielts",
  voiceIntro: "/introduction-class/voice-and-accent",
  ieltsMasterclass: "/masterclass/cambridge-veritas-certificate-in-ielts-masterclass",
  voiceAccent: "/masterclass/cambridge-veritas-voice-and-accent-trainer-certification",
  speechAnalyser: "/tools/speech-analyser",
  speechAnalyserPricing: "/tools/speech-analyser#pricing",
  freeAssessment: "/#free-assessment",
  cyes: "/masterclass/vnaprofessionals",
};

type GoalKey = "teach" | "ielts" | "accent" | "ai" | "institution" | "career";
type GoalResult = { text: string; cta: string; href: string };
type QuizPath = keyof typeof QUIZ_RESULTS;

// ─── QUIZ DATA ────────────────────────────────────────────────────────────────
const QUIZ_STEPS = [
  {
    q: "What best describes you right now?",
    options: [
      { label: "I want to teach English professionally", value: "teacher", emoji: "📚" },
      { label: "I want to improve my own English / accent", value: "learner", emoji: "🎯" },
      { label: "I run a school or institution", value: "institution", emoji: "🏫" },
      { label: "I'm a corporate professional needing English for work", value: "corporate", emoji: "💼" },
    ],
  },
  {
    q: "What is your biggest priority right now?",
    options: [
      { label: "A recognised certification that employers trust", value: "cert", emoji: "🏆" },
      { label: "A tool I can use immediately to improve", value: "tool", emoji: "⚡" },
      { label: "Understanding what's available first", value: "explore", emoji: "🔍" },
      { label: "Getting a quote for my team / institution", value: "team", emoji: "🤝" },
    ],
  },
  {
    q: "When are you ready to start?",
    options: [
      { label: "Right now — I'm ready", value: "now", emoji: "🚀" },
      { label: "Within the next 2–4 weeks", value: "soon", emoji: "📅" },
      { label: "I want to explore a free option first", value: "free", emoji: "🎓" },
      { label: "I'm just researching for now", value: "later", emoji: "👀" },
    ],
  },
];

const QUIZ_RESULTS = {
  teacher: {
    headline: "You're Meant to Teach at the Highest Level.",
    subtext: "Based on your answers, the CVTE® 120-Hour TESOL or CVIM® IELTS Masterclass certification is your ideal next step.",
    primary: { label: "Explore TESOL Certification", href: MAIN_SITE_ROUTES.tesolCertification },
    secondary: { label: "Explore IELTS Masterclass", href: MAIN_SITE_ROUTES.ieltsMasterclass },
    badge: "CVTE® / CVIM® Pathway",
    color: "#4A141E",
  },
  learner: {
    headline: "The Veritas Speech Analyser™ Was Built for You.",
    subtext: "Our AI-powered Speech Analyser gives you instant, expert-level feedback on your accent, fluency, and spoken English — in real time.",
    primary: { label: "Try Speech Analyser Free", href: MAIN_SITE_ROUTES.speechAnalyser },
    secondary: { label: "Book a Free Assessment", href: "#free-assessment" },
    badge: "AI Tool Pathway",
    color: "#8B1C1C",
  },
  institution: {
    headline: "We Train Your Faculty. You Lead the Results.",
    subtext: "Cambridge Veritas delivers customised institutional certification programmes for universities, language schools, and corporate L&D teams.",
    primary: { label: "Talk to a Counsellor", href: "https://wa.me/918068212576?text=Hi! I represent an institution and want to enquire about Cambridge Veritas." },
    secondary: { label: "View University Partners (CYES®)", href: MAIN_SITE_ROUTES.cyes },
    badge: "Institutional Pathway",
    color: "#3B0F18",
  },
  corporate: {
    headline: "Command the Room. Earn What You Deserve.",
    subtext: "The CVAF® Advanced Fluency or CVAT® Voice & Accent certification will set you apart in boardrooms, interviews, and international stages.",
    primary: { label: "Book Free Introduction Class", href: MAIN_SITE_ROUTES.voiceIntro },
    secondary: { label: "Chat with a Counsellor", href: "https://wa.me/918068212576?text=Hi! I'm a corporate professional looking to improve my English for work." },
    badge: "Professional Pathway",
    color: "#6B1010",
  },
};

// ─── TYPEWRITER ───────────────────────────────────────────────────────────────
function Typewriter({ words }: { words: string[] }) {
  const [idx, setIdx] = useState(0);
  const [displayed, setDisplayed] = useState("");
  const [deleting, setDeleting] = useState(false);
  useEffect(() => {
    const word = words[idx];
    let timeout: ReturnType<typeof setTimeout> | undefined;
    if (!deleting && displayed.length < word.length) {
      timeout = setTimeout(() => setDisplayed(word.slice(0, displayed.length + 1)), 65);
    } else if (!deleting && displayed.length === word.length) {
      timeout = setTimeout(() => setDeleting(true), 2400);
    } else if (deleting && displayed.length > 0) {
      timeout = setTimeout(() => setDisplayed(displayed.slice(0, -1)), 38);
    } else {
      timeout = setTimeout(() => {
        setDeleting(false);
        setIdx((idx + 1) % words.length);
      }, 0);
    }
    return () => {
      if (timeout) clearTimeout(timeout);
    };
  }, [displayed, deleting, idx, words]);
  return (
    <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D4AF37] to-[#EDD9A3]">
      {displayed}<span className="animate-pulse opacity-60">|</span>
    </span>
  );
}

// ─── ANIMATED COUNTER ─────────────────────────────────────────────────────────
function AnimatedCounter({ end, suffix = "" }: { end: number; suffix?: string }) {
  const [count, setCount] = useState(0);
  const ref = useRef<HTMLSpanElement | null>(null);
  const [started, setStarted] = useState(false);
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !started) setStarted(true);
    }, { threshold: 0.5 });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [started]);
  useEffect(() => {
    if (!started) return;
    let startTime: number | null = null;
    const animate = (ts: number) => {
      if (!startTime) startTime = ts;
      const p = Math.min((ts - startTime) / 1800, 1);
      setCount(Math.floor(p * end));
      if (p < 1) requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
  }, [started, end]);
  return <span ref={ref}>{count.toLocaleString()}{suffix}</span>;
}

// ─── FIND YOUR PATH QUIZ ──────────────────────────────────────────────────────
function FindYourPathQuiz() {
  const [step, setStep] = useState(0);
  const [answers, setAnswers] = useState<Record<number, string>>({});
  const [result, setResult] = useState<(typeof QUIZ_RESULTS)[QuizPath] | null>(null);
  const [open, setOpen] = useState(false);

  const handleAnswer = (val: string) => {
    const newAnswers = { ...answers, [step]: val };
    setAnswers(newAnswers);
    if (step < QUIZ_STEPS.length - 1) {
      setStep(step + 1);
    } else {
      // Determine result based on first answer primarily
      const path = (newAnswers[0] || "teacher") as QuizPath;
      setResult(QUIZ_RESULTS[path]);
    }
  };

  const reset = () => { setStep(0); setAnswers({}); setResult(null); };

  return (
    <>
      <button onClick={() => setOpen(true)}
        className="group inline-flex items-center gap-3 px-8 py-4 rounded-2xl font-black text-base border-2 border-[#D4AF37]/60 bg-[#D4AF37]/10 text-[#E6D3B1] hover:bg-[#D4AF37]/20 hover:border-[#D4AF37] transition-all duration-300 backdrop-blur-sm">
        <Sparkles className="w-5 h-5 text-[#D4AF37]" />
        Find Your Veritas Path — 60 sec Quiz
        <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
      </button>

      <AnimatePresence>
        {open && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            className="fixed inset-0 z-[200] bg-black/70 backdrop-blur-md flex items-center justify-center p-4"
            onClick={() => { setOpen(false); reset(); }}>
            <motion.div initial={{ scale: 0.92, y: 24 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.92, y: 24 }}
              transition={{ duration: 0.22, type: "spring" }}
              onClick={(e) => e.stopPropagation()}
              className="bg-white rounded-3xl w-full max-w-lg relative overflow-hidden shadow-2xl border-2 border-[#D4AF37]/30">

              {/* Header */}
              <div className="px-8 pt-7 pb-5 bg-gradient-to-r from-[#3B0F18] to-[#4A141E]">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <Sparkles className="w-5 h-5 text-[#D4AF37]" />
                    <span className="text-xs font-black text-[#D4AF37] uppercase tracking-widest">Find Your Veritas Path</span>
                  </div>
                  <button onClick={() => { setOpen(false); reset(); }}
                    className="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition-colors">
                    <X className="w-4 h-4 text-white" />
                  </button>
                </div>
                {!result && (
                  <div className="flex gap-1.5">
                    {QUIZ_STEPS.map((_, i) => (
                      <div key={i} className={`h-1.5 rounded-full flex-1 transition-all duration-500 ${i <= step ? "bg-[#D4AF37]" : "bg-white/20"}`} />
                    ))}
                  </div>
                )}
              </div>

              <div className="px-8 py-7">
                {!result ? (
                  <AnimatePresence mode="wait">
                    <motion.div key={step} initial={{ opacity: 0, x: 30 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -30 }} transition={{ duration: 0.2 }}>
                      <p className="text-xs font-semibold text-[#4A141E]/45 uppercase tracking-widest mb-2">Question {step + 1} of {QUIZ_STEPS.length}</p>
                      <h3 className="text-xl font-black text-[#4A141E] mb-6 leading-snug">{QUIZ_STEPS[step].q}</h3>
                      <div className="space-y-3">
                        {QUIZ_STEPS[step].options.map((opt) => (
                          <button key={opt.value} onClick={() => handleAnswer(opt.value)}
                            className="w-full flex items-center gap-4 px-5 py-4 rounded-xl border-2 border-[#E6D3B1]/50 hover:border-[#D4AF37] hover:bg-[#FDFAF7] transition-all duration-200 text-left group">
                            <span className="text-2xl flex-shrink-0">{opt.emoji}</span>
                            <span className="font-semibold text-[#4A141E] text-sm group-hover:text-[#8B1C1C] transition-colors">{opt.label}</span>
                            <ArrowRight className="w-4 h-4 text-[#D4AF37]/0 group-hover:text-[#D4AF37] ml-auto transition-all" />
                          </button>
                        ))}
                      </div>
                    </motion.div>
                  </AnimatePresence>
                ) : (
                  <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }}>
                    <div className="text-center mb-5">
                      <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-black text-white mb-4" style={{ background: result.color }}>
                        <BadgeCheck className="w-3.5 h-3.5" /> {result.badge}
                      </div>
                      <h3 className="text-2xl font-black text-[#4A141E] mb-3 leading-snug">{result.headline}</h3>
                      <p className="text-sm text-[#4A141E]/65 leading-relaxed">{result.subtext}</p>
                    </div>
                    <div className="space-y-3">
                      <a href={result.primary.href}
                        onClick={() => setOpen(false)}
                        className="w-full py-4 rounded-xl font-black text-base text-white flex items-center justify-center gap-2 transition-all hover:opacity-90"
                        style={{ background: result.color }}>
                        {result.primary.label} <ArrowRight className="w-4 h-4" />
                      </a>
                      <a href={result.secondary.href}
                        onClick={() => setOpen(false)}
                        className="w-full py-3.5 rounded-xl font-bold text-sm text-[#4A141E] border-2 border-[#E6D3B1]/60 hover:border-[#D4AF37] flex items-center justify-center gap-2 transition-all">
                        {result.secondary.label}
                      </a>
                    </div>
                    <button onClick={reset} className="w-full mt-3 text-xs text-[#4A141E]/40 hover:text-[#4A141E]/60 font-semibold">
                      ↩ Retake the quiz
                    </button>
                  </motion.div>
                )}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

// ─── FAQ ITEM ─────────────────────────────────────────────────────────────────
function FaqItem({ q, a }: { q: string; a: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={`rounded-2xl border-2 transition-colors duration-200 overflow-hidden ${open ? "border-[#D4AF37]/60" : "border-[#E6D3B1]/50"} bg-white`}>
      <button onClick={() => setOpen(!open)} className="w-full px-6 py-5 flex items-center justify-between text-left gap-4">
        <span className="font-bold text-[#4A141E] text-sm">{q}</span>
        <ChevronDown className={`w-5 h-5 text-[#D4AF37] flex-shrink-0 transition-transform duration-300 ${open ? "rotate-180" : ""}`} />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div initial={{ height: 0 }} animate={{ height: "auto" }} exit={{ height: 0 }} className="overflow-hidden">
            <div className="px-6 pb-5 border-t border-[#E6D3B1]/30">
              <p className="pt-4 text-[#4A141E]/65 leading-relaxed text-sm">{a}</p>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

// ─── JSON-LD ──────────────────────────────────────────────────────────────────
const FAQ_SCHEMA = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'What do I actually get when I enrol?',
      acceptedAnswer: { '@type': 'Answer', text: 'You receive a globally recognised, UK-regulated certification (physical hard copy sent by post), access to the Cambridge Veritas Trainer Dashboard, curated teaching resources, and in many programmes, a prestigious 1-month teacher training internship.' },
    },
    {
      '@type': 'Question',
      name: 'How is Cambridge Veritas different from other teaching qualifications?',
      acceptedAnswer: { '@type': 'Answer', text: 'Many qualifications give you a general teaching credential. Cambridge Veritas certifications are specialist, domain-specific credentials — going deep into IELTS training, voice & accent coaching, TESOL methodology, or professional English communication. The focus is on expertise, not just a certificate.' },
    },
    {
      '@type': 'Question',
      name: 'What is the Veritas Speech Analyser™?',
      acceptedAnswer: { '@type': 'Answer', text: "It's our proprietary AI tool that analyses your spoken English in real time — scoring clarity, fluency, pace, and accent deviation with expert-level precision. It's used by candidates, professionals, and students preparing for interviews, IELTS, or professional communication." },
    },
    {
      '@type': 'Question',
      name: 'Is there a free way to experience Cambridge Veritas?',
      acceptedAnswer: { '@type': 'Answer', text: 'Yes. We offer free live Introduction Classes every week (TESOL on Saturdays, IELTS Masterclass on Tuesdays), plus a free Speech Analyser demo. No credit card required.' },
    },
    {
      '@type': 'Question',
      name: 'Do I need prior teaching experience?',
      acceptedAnswer: { '@type': 'Answer', text: 'Not at all. Our programmes are designed to build expertise from the ground up. You need a proficient level of English (approximately IELTS Band 6.0 or equivalent) and a genuine interest in teaching or professional development.' },
    },
    {
      '@type': 'Question',
      name: 'Are the certifications really UK-regulated?',
      acceptedAnswer: { '@type': 'Answer', text: 'Yes. Cambridge Veritas certifications are UK-regulated qualifications built to international standards. Each certificate carries a unique verifiable ID and is recognised by schools, language academies, universities, and training organisations across 50+ countries.' },
    },
  ],
};

const TRAINER_SCHEMA = {
  '@context': 'https://schema.org',
  '@type': 'Person',
  name: 'Krishnatrya',
  jobTitle: 'Lead Trainer & Course Director',
  worksFor: { '@id': 'https://cambridgeveritas.com/#organization' },
  hasCredential: [
    { '@type': 'EducationalOccupationalCredential', name: 'PhD in Education Management', credentialCategory: 'degree', recognizedBy: { '@type': 'CollegeOrUniversity', name: 'City University of London' } },
  ],
  knowsAbout: ['TESOL', 'IELTS Examining', 'Voice and Accent Training', 'Curriculum Design'],
  memberOf: { '@type': 'Organization', name: 'IATEFL' },
};

const AGGREGATE_RATING_SCHEMA = {
  '@context': 'https://schema.org',
  '@type': 'EducationalOrganization',
  '@id': 'https://cambridgeveritas.com/#organization',
  name: 'Cambridge Veritas',
  aggregateRating: {
    '@type': 'AggregateRating',
    ratingValue: '4.9',
    reviewCount: '25000',
    bestRating: '5',
    worstRating: '1',
  },
  review: [
    {
      '@type': 'Review',
      author: { '@type': 'Person', name: 'Jasbir Reid' },
      reviewBody: 'Before Cambridge Veritas, I was running a school without a professional qualification to back it. After CVTE®, I became a certified TESOL leader — and the credibility that brought was immediate.',
      reviewRating: { '@type': 'Rating', ratingValue: '5', bestRating: '5' },
      itemReviewed: { '@type': 'Course', name: 'CVTE® 120-Hour TESOL Certification', provider: { '@id': 'https://cambridgeveritas.com/#organization' } },
    },
    {
      '@type': 'Review',
      author: { '@type': 'Person', name: 'Sunithi Soni' },
      reviewBody: 'The quality of training is unreal. Session by session, I felt my teaching transform. Krishnatrya\'s IELTS methodology gave me the precision I was missing. Best investment I\'ve ever made.',
      reviewRating: { '@type': 'Rating', ratingValue: '5', bestRating: '5' },
      itemReviewed: { '@type': 'Course', name: 'CVIM® IELTS Masterclass', provider: { '@id': 'https://cambridgeveritas.com/#organization' } },
    },
    {
      '@type': 'Review',
      author: { '@type': 'Person', name: 'Shikha' },
      reviewBody: 'The Voice & Accent programme completely changed how I carry myself in a room. I now train professionals and my confidence in both coaching and speaking has transformed entirely.',
      reviewRating: { '@type': 'Rating', ratingValue: '5', bestRating: '5' },
      itemReviewed: { '@type': 'Course', name: 'CVAT® Voice & Accent Trainer Certification', provider: { '@id': 'https://cambridgeveritas.com/#organization' } },
    },
  ],
};

// ─── MAIN PAGE ────────────────────────────────────────────────────────────────
export default function Homepage() {
  const [showSticky, setShowSticky] = useState(false);
  const [activeGoal, setActiveGoal] = useState<GoalKey | null>(null);
  const [testimonialIdx, setTestimonialIdx] = useState(0);

  useEffect(() => {
    const onScroll = () => setShowSticky(window.scrollY > 500);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const timer = setInterval(() => setTestimonialIdx(p => (p + 1) % 3), 5000);
    return () => clearInterval(timer);
  }, []);

  const GOALS: Array<{ key: GoalKey; icon: typeof GraduationCap; label: string; color: string; iconBg: string }> = [
    { key: "teach", icon: GraduationCap, label: "Become a Certified English Teacher", color: "#4A141E", iconBg: "#F6EFE9" },
    { key: "ielts", icon: Trophy, label: "Specialise in IELTS Training", color: "#7C3D12", iconBg: "#FEF3E8" },
    { key: "accent", icon: Mic, label: "Build a Voice & Accent Career", color: "#1E4D7C", iconBg: "#EBF4FF" },
    { key: "ai", icon: Brain, label: "Analyse & Improve My Spoken English", color: "#1A5E3A", iconBg: "#EDFAF4" },
    { key: "institution", icon: Layers, label: "Train My Institution or Team", color: "#5B21B6", iconBg: "#F3EFFE" },
    { key: "career", icon: TrendingUp, label: "Elevate My Professional Credibility", color: "#B45309", iconBg: "#FFFBEB" },
  ];

  const GOAL_RESULT: Record<GoalKey, GoalResult> = {
    teach: { text: "The CVTE® 120-Hour TESOL is your pathway.", cta: "Explore TESOL", href: MAIN_SITE_ROUTES.tesolCertification },
    ielts: { text: "The CVIM® IELTS Masterclass is for you.", cta: "Explore CVIM®", href: MAIN_SITE_ROUTES.ieltsMasterclass },
    accent: { text: "The CVAT® Voice & Accent TTT is perfect.", cta: "Explore CVAT®", href: MAIN_SITE_ROUTES.voiceAccent },
    ai: { text: "The Veritas Speech Analyser™ is your tool.", cta: "Try It Free", href: MAIN_SITE_ROUTES.speechAnalyser },
    institution: { text: "We have institutional pathways. Let's talk.", cta: "WhatsApp Us", href: "https://wa.me/918068212576?text=Hello" },
    career: { text: "CVAF® Advanced Fluency will transform you.", cta: "Learn More", href: "https://cambridgeveritas.com/certifications/cambridge-veritas-certificate-in-advanced-fluency" },
  };

  const TESTIMONIALS = [
    {
      name: "Jasbir Reid",
      role: "CVTE® Certified TESOL Trainer · Visakhapatnam",
      quote: "Before Cambridge Veritas, I was running a school without a professional qualification to back it. After CVTE®, I became a certified TESOL leader — and the credibility that brought was immediate.",
      youtubeId: "lQIuypsznbA",
      cert: "CVTE®",
      photo: "https://media.base44.com/images/public/6964e0a6688c9dcda2637c42/5f5f00f91_image.png",
    },
    {
      name: "Sunithi Soni",
      role: "CVIM® Certified Coach · India",
      quote: "The quality of training is unreal. Session by session, I felt my teaching transform. Krishnatrya's IELTS methodology gave me the precision I was missing. Best investment I've ever made.",
      youtubeId: "BxCxz0ceVg0",
      cert: "CVIM®",
      photo: "https://media.base44.com/images/public/6964e0a6688c9dcda2637c42/d27ad2b52_image.png",
    },
    {
      name: "Shikha",
      role: "CVAT® Voice & Accent Trainer",
      quote: "The Voice & Accent programme completely changed how I carry myself in a room. I now train professionals and my confidence in both coaching and speaking has transformed entirely.",
      youtubeId: "-YzoTTx56VA",
      cert: "CVAT®",
      photo: "https://media.base44.com/images/public/6964e0a6688c9dcda2637c42/3488b19bc_image.png",
    },
  ];

  return (
    <div className="min-h-screen bg-white overflow-x-hidden">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(FAQ_SCHEMA) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(TRAINER_SCHEMA) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(AGGREGATE_RATING_SCHEMA) }} />
      <CVHeader />

      {/* ── STICKY CTA BAR ── */}
      <AnimatePresence>
        {showSticky && (
          <motion.div initial={{ y: -60 }} animate={{ y: 0 }} exit={{ y: -60 }}
            className="fixed top-0 left-0 right-0 z-[100] bg-gradient-to-r from-[#3B0F18] to-[#4A141E] border-b-2 border-[#D4AF37]/40 shadow-2xl">
            <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
              <div className="flex items-center gap-3">
                <div className="w-7 h-7 rounded-lg bg-[#D4AF37] flex items-center justify-center flex-shrink-0">
                  <span className="text-[9px] font-black text-[#4A141E]">CV</span>
                </div>
                <span className="text-sm font-bold text-[#E6D3B1] hidden sm:block">Cambridge Veritas · UK Regulated Certifications</span>
              </div>
              <div className="flex items-center gap-3">
                <a href={MAIN_SITE_ROUTES.freeAssessment}
                  className="px-5 py-2 rounded-xl font-black text-xs bg-[#8B1C1C] text-white hover:bg-[#6B1010] transition-all">
                  Free Intro Class
                </a>
                <a href="https://wa.me/918068212576?text=Hello" target="_blank" rel="noopener noreferrer"
                  className="px-5 py-2 rounded-xl font-bold text-xs bg-white/10 text-[#E6D3B1] border border-white/20 flex items-center gap-1.5 hover:bg-white/20 transition-all">
                  <MessageCircle className="w-3.5 h-3.5" /> WhatsApp
                </a>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ══════════════════════════════════════════════════════════════════
          1. HERO
      ══════════════════════════════════════════════════════════════════ */}
      <section className="relative min-h-[95vh] flex items-center bg-gradient-to-br from-[#3B0F18] via-[#4A141E] to-[#5A1A22] overflow-hidden">
        {/* Background texture */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 left-0 w-full h-full opacity-[0.03]"
            style={{ backgroundImage: "linear-gradient(#D4AF37 1px, transparent 1px), linear-gradient(90deg, #D4AF37 1px, transparent 1px)", backgroundSize: "60px 60px" }} />
          <div className="absolute top-20 right-1/4 w-[600px] h-[600px] bg-[#D4AF37]/10 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-[#8B1C1C]/20 rounded-full blur-3xl" />
        </div>

        <div className="relative z-10 w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
          <div className="grid lg:grid-cols-2 gap-12 items-center">

            {/* LEFT: Copy */}
            <div className="text-center lg:text-left">
              <motion.div initial={{ opacity: 0, y: -12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
                className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full border border-[#D4AF37]/35 bg-[#D4AF37]/8 mb-6">
                <BadgeCheck className="w-4 h-4 text-[#D4AF37] flex-shrink-0" />
                <span className="text-xs font-bold text-[#E6D3B1] uppercase tracking-[0.15em]">UK Regulated · Globally Recognised · Est. 2014</span>
              </motion.div>

              <motion.h1 initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1, duration: 0.7 }}
                className="text-4xl sm:text-5xl lg:text-6xl font-black text-white mb-5 leading-[1.07]">
                The Career Certification That<br />
                <Typewriter words={["Changes Everything.", "Opens Global Doors.", "Commands Premium Pay.", "Earns Global Respect.", "Transforms Professionals."]} />
              </motion.h1>

              <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3 }}
                className="text-base sm:text-lg text-[#E6D3B1]/65 mb-8 font-light leading-relaxed max-w-xl mx-auto lg:mx-0">
                Cambridge Veritas issues UK-regulated career certifications to teachers, trainers, and professionals who want to command premium rates, lead in their field, and build careers that travel across <strong className="text-[#D4AF37] font-semibold">50+ countries</strong>.
              </motion.p>

              <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }}
                className="flex flex-col sm:flex-row items-center lg:items-start justify-center lg:justify-start gap-4 mb-8">
                <a href={MAIN_SITE_ROUTES.certifications}
                  className="w-full sm:w-auto group inline-flex items-center justify-center gap-2.5 px-8 py-4 rounded-2xl font-black text-base bg-[#8B1C1C] text-white hover:bg-[#6B1010] shadow-2xl hover:scale-[1.02] transition-all duration-300">
                  Explore Certifications <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                </a>
                <div className="w-full sm:w-auto">
                  <FindYourPathQuiz />
                </div>
              </motion.div>

              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6 }}
                className="flex items-center justify-center lg:justify-start gap-3 flex-wrap">
                <div className="flex -space-x-2">
                  {[
                    { src: "https://media.base44.com/images/public/6964e0a6688c9dcda2637c42/5f5f00f91_image.png", alt: "Jasbir Reid – CVTE® Graduate" },
                    { src: "https://media.base44.com/images/public/6964e0a6688c9dcda2637c42/3488b19bc_image.png", alt: "Shikha – CVAT® Graduate" },
                  ].map(({ src, alt }, i) => (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img key={i} src={src} className="w-8 h-8 rounded-full border-2 border-[#3B0F18] object-cover object-top" alt={alt} />
                  ))}
                  {[
                    { n: "S+S", alt: "Sunithi Soni – CVIM® Graduate" },
                    { n: "P+N", alt: "Priya Nair – Cambridge Veritas Graduate" },
                  ].map(({ n, alt }, i) => (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img key={`av-${i}`} src={`https://ui-avatars.com/api/?name=${n}&size=32&background=${["D4AF37","8B1C1C"][i]}&color=F6EFE9&bold=true`}
                      className="w-8 h-8 rounded-full border-2 border-[#3B0F18]" alt={alt} />
                  ))}
                </div>
                <div className="flex gap-0.5">{[...Array(5)].map((_, i) => <Star key={i} className="w-3.5 h-3.5 fill-[#D4AF37] text-[#D4AF37]" />)}</div>
                <span className="text-xs text-[#E6D3B1]/50 font-semibold">Trusted by 25,000+ professionals</span>
              </motion.div>
            </div>

            {/* RIGHT: Brand credential showcase — hidden on mobile */}
            <motion.div initial={{ opacity: 0, x: 32 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.35, duration: 0.9 }}
              className="hidden lg:flex flex-col gap-5">

              {/* Top: Live stat cards */}
              <div className="grid grid-cols-3 gap-3">
                {[
                  { val: "25K+", label: "Certified Globally", icon: Globe },
                  { val: "50+",  label: "Countries",         icon: Award },
                  { val: "4.9★", label: "Avg. Rating",       icon: Star },
                ].map((s, i) => (
                  <motion.div key={i} initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6 + i * 0.08 }}
                    className="flex flex-col items-center justify-center p-4 rounded-2xl border border-[#D4AF37]/25 bg-white/6 backdrop-blur-sm text-center">
                    <s.icon className="w-4 h-4 text-[#D4AF37] mb-1.5" />
                    <div className="text-xl font-black text-white leading-none">{s.val}</div>
                    <div className="text-[9px] text-[#E6D3B1]/50 font-semibold mt-1 uppercase tracking-wider">{s.label}</div>
                  </motion.div>
                ))}
              </div>

              {/* Centre: Big certification visual */}
              <motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.7, duration: 0.7 }}
                className="relative rounded-3xl overflow-hidden border border-[#D4AF37]/30 shadow-2xl"
                style={{ background: "linear-gradient(135deg, #1A0508 0%, #2B0A11 50%, #380f17 100%)" }}>
                {/* Decorative glow */}
                <div className="absolute top-0 right-0 w-48 h-48 bg-[#D4AF37]/12 rounded-full blur-3xl pointer-events-none" />
                <div className="absolute bottom-0 left-0 w-40 h-40 bg-[#8B1C1C]/20 rounded-full blur-3xl pointer-events-none" />

                <div className="relative p-7">
                  <div className="flex items-center gap-2 mb-5">
                    <div className="w-8 h-8 rounded-lg bg-[#D4AF37] flex items-center justify-center flex-shrink-0">
                      <span className="text-[10px] font-black text-[#3B0F18]">CV</span>
                    </div>
                    <div>
                      <p className="text-[9px] font-black text-[#D4AF37] uppercase tracking-widest">UK Regulated · Level 4 & 5</p>
                      <p className="text-xs font-bold text-[#E6D3B1]/70">Cambridge Veritas Certifications</p>
                    </div>
                  </div>

                  {/* Cert badges */}
                  <div className="grid grid-cols-2 gap-2 mb-5">
                    {[
                      { code: "CVTE®", name: "120-Hr TESOL",       color: "#4A141E", glow: "#8B1C1C" },
                      { code: "CVIM®", name: "IELTS Masterclass",  color: "#7C3D12", glow: "#B8620A" },
                      { code: "CVAT®", name: "Voice & Accent",     color: "#1E4D7C", glow: "#2E72B8" },
                      { code: "CVAF®", name: "Advanced Fluency",   color: "#1A5E3A", glow: "#28A05E" },
                    ].map((c, i) => (
                      <motion.div key={i} initial={{ opacity: 0, x: i % 2 === 0 ? -10 : 10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: 0.85 + i * 0.07 }}
                        className="flex items-center gap-2.5 px-3 py-2.5 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 transition-colors group cursor-default">
                        <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 border border-[#D4AF37]/30"
                          style={{ background: `${c.glow}30` }}>
                          <span className="text-[9px] font-black text-[#D4AF37]">{c.code.replace("®","")}</span>
                        </div>
                        <div>
                          <p className="text-[10px] font-black text-[#D4AF37]">{c.code}</p>
                          <p className="text-[9px] text-[#E6D3B1]/45 leading-tight">{c.name}</p>
                        </div>
                      </motion.div>
                    ))}
                  </div>

                  {/* Featured quote strip */}
                  <div className="rounded-xl bg-[#D4AF37]/10 border border-[#D4AF37]/20 p-3.5">
                    <div className="flex gap-0.5 mb-1.5">{[...Array(5)].map((_,i)=><Star key={i} className="w-2.5 h-2.5 fill-[#D4AF37] text-[#D4AF37]"/>)}</div>
                    <p className="text-xs text-[#E6D3B1]/85 italic leading-relaxed mb-2">
                      &quot;My teaching income tripled after CVTE®. The credential speaks before I do.&quot;
                    </p>
                    <p className="text-[9px] font-black text-[#D4AF37]">Jasbir Reid · CVTE® Graduate</p>
                  </div>
                </div>
              </motion.div>

              {/* Bottom: Trust strip */}
              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1.1 }}
                className="flex items-center justify-between px-4 py-3 rounded-2xl border border-white/10 bg-white/5">
                {["British Council", "IDP Education", "Amity Univ.", "IATEFL"].map((org, i) => (
                  <span key={i} className="text-[9px] font-bold text-[#E6D3B1]/35 uppercase tracking-wider">{org}</span>
                ))}
              </motion.div>
            </motion.div>

          </div>
        </div>

        {/* Scroll chevron — hidden on split layout desktop */}
        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 animate-bounce lg:hidden">
          <ChevronDown className="w-6 h-6 text-[#D4AF37]/40" />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          2. STATS BAR
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-12 bg-[#FDFAF7] border-b border-[#E6D3B1]/50">
        <div className="max-w-5xl mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
            {[
              { val: 25000, suffix: "+", label: "Certified Graduates" },
              { val: 50, suffix: "+", label: "Countries" },
              { fixed: "4.9★", label: "Average Rating" },
              { val: 14, suffix: "", label: "Nations Trained In" },
            ].map((s, i) => (
                <motion.div key={i} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}>
                  <div className="text-3xl md:text-4xl font-black text-[#4A141E] mb-1">
                    {typeof s.val === "number" ? <AnimatedCounter end={s.val} suffix={s.suffix} /> : s.fixed}
                  </div>
                <p className="text-xs text-[#4A141E]/50 font-semibold uppercase tracking-wider">{s.label}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          3. GOAL SELECTOR — "I want to…"
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-[#FDFAF7]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-12">
            <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-[0.22em] mb-3">Start Here</p>
            <h2 className="text-4xl md:text-5xl font-black text-[#4A141E] mb-3">What Do You Want to Achieve?</h2>
            <p className="text-[#4A141E]/55 max-w-md mx-auto text-base">Choose your goal. We&apos;ll show you exactly where to start.</p>
          </motion.div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-8">
            {GOALS.map((g, i) => (
              <motion.button key={g.key} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.07 }}
                onClick={() => setActiveGoal(activeGoal === g.key ? null : g.key)}
                className={`group flex flex-col items-start gap-3 p-6 rounded-2xl border-2 text-left transition-all duration-300 hover:shadow-lg ${activeGoal === g.key ? "border-[#D4AF37] shadow-xl" : "border-[#E6D3B1]/50 bg-white hover:border-[#D4AF37]/50"}`}
                style={{ background: activeGoal === g.key ? `linear-gradient(135deg, ${g.color}10, ${g.color}18)` : "" }}>
                <div className="w-10 h-10 rounded-xl flex items-center justify-center transition-all"
                  style={{ background: activeGoal === g.key ? g.color : g.iconBg }}>
                  <g.icon className="w-5 h-5 transition-all" style={{ color: activeGoal === g.key ? "#fff" : g.color }} />
                </div>
                <span className={`font-bold text-sm leading-snug transition-colors ${activeGoal === g.key ? "text-[#4A141E]" : "text-[#4A141E]/75"}`}>{g.label}</span>
              </motion.button>
            ))}
          </div>

          {/* Result panel */}
          <AnimatePresence>
            {activeGoal && GOAL_RESULT[activeGoal] && (
              <motion.div initial={{ opacity: 0, y: -12, height: 0 }} animate={{ opacity: 1, y: 0, height: "auto" }} exit={{ opacity: 0, y: -12, height: 0 }}
                className="overflow-hidden">
                <div className="flex flex-col sm:flex-row items-center gap-5 p-6 rounded-2xl bg-gradient-to-r from-[#4A141E] to-[#3B0F18] border border-[#D4AF37]/30 shadow-xl">
                  <CheckCircle2 className="w-7 h-7 text-[#D4AF37] flex-shrink-0" />
                  <p className="font-bold text-[#E6D3B1] flex-1 text-base sm:text-left text-center">{GOAL_RESULT[activeGoal].text}</p>
                  <a href={GOAL_RESULT[activeGoal].href}
                    className="flex-shrink-0 inline-flex items-center gap-2 px-7 py-3 rounded-xl font-black text-sm bg-[#8B1C1C] text-white hover:bg-[#6B1010] transition-all whitespace-nowrap">
                    {GOAL_RESULT[activeGoal].cta} <ArrowRight className="w-4 h-4" />
                  </a>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          4. TWO CORE PRODUCTS (clear, not a catalogue)
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-14">
            <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-[0.22em] mb-3">What We Offer</p>
            <h2 className="text-4xl md:text-5xl font-black text-[#4A141E] mb-3">Two Ways to Transform Your Career</h2>
            <p className="text-[#4A141E]/55 max-w-lg mx-auto">At Cambridge Veritas, everything leads to one of two outcomes: a verified career certification that opens global doors, or an AI-powered tool that helps you measure and improve your spoken English.</p>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-6">
            {/* Product 1: Certifications */}
            <motion.div initial={{ opacity: 0, x: -24 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}
              className="relative rounded-3xl overflow-hidden border-2 border-[#D4AF37]/40 shadow-2xl group">
              <div className="absolute inset-0 bg-gradient-to-br from-[#3B0F18] to-[#1A0508]" />
              <div className="absolute top-0 right-0 w-64 h-64 bg-[#D4AF37]/8 rounded-full blur-3xl" />
              <div className="relative p-8 md:p-10">
                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#D4AF37]/15 border border-[#D4AF37]/30 mb-6">
                  <span className="w-2 h-2 rounded-full bg-[#D4AF37] animate-pulse" />
                  <span className="text-xs font-black text-[#D4AF37] uppercase tracking-widest">Certification Programmes</span>
                </div>
                <h3 className="text-3xl font-black text-white mb-3 leading-tight">UK-Regulated Credentials.<br />Recognised Worldwide.</h3>
                <p className="text-[#E6D3B1]/65 mb-6 leading-relaxed text-sm">
                  From 120-Hour TESOL to IELTS Masterclass, Voice & Accent to Medical English — every Cambridge Veritas certification is a Level 4 or Level 5 UK-regulated qualification, designed to be verifiable, credible, and career-changing.
                </p>
                <div className="flex flex-wrap gap-2 mb-8">
                  {["CVTE® TESOL", "CVIM® IELTS", "CVAT® Voice", "CVAF® Fluency", "CVMP® Medical", "CVCAC® Negotiations"].map((c, i) => (
                    <span key={i} className="px-3 py-1 rounded-full text-xs font-bold bg-white/8 border border-[#D4AF37]/25 text-[#E6D3B1]/75">{c}</span>
                  ))}
                </div>
                <div className="flex flex-wrap gap-3">
                  <a href={MAIN_SITE_ROUTES.certifications}
                    className="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-black text-sm bg-[#8B1C1C] text-white hover:bg-[#6B1010] transition-all shadow-lg">
                    Explore All Programmes <ArrowRight className="w-4 h-4" />
                  </a>
                  <a href={MAIN_SITE_ROUTES.tesolIntro}
                    className="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-sm bg-white/10 text-[#E6D3B1] border border-white/20 hover:bg-white/18 transition-all">
                    Free Intro Class
                  </a>
                </div>
              </div>
            </motion.div>

            {/* Product 2: Speech Analyser */}
            <motion.div id="speech-analyser" initial={{ opacity: 0, x: 24 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}
              className="relative rounded-3xl overflow-hidden border-2 border-[#D4AF37]/40 shadow-2xl group bg-white">
              <div className="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-[#D4AF37] to-[#B8912A]" />
              <div className="p-8 md:p-10">
                <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#4A141E]/8 border border-[#4A141E]/15 mb-6">
                  <Brain className="w-3.5 h-3.5 text-[#8B1C1C]" />
                  <span className="text-xs font-black text-[#8B1C1C] uppercase tracking-widest">AI-Powered Tool</span>
                </div>
                <h3 className="text-3xl font-black text-[#4A141E] mb-3 leading-tight">Veritas Speech Analyser™<br /><span className="text-[#8B1C1C]">Hear Yourself Differently.</span></h3>
                <p className="text-[#4A141E]/60 mb-6 leading-relaxed text-sm">
                  Our proprietary AI tool analyses your spoken English in real time — scoring clarity, fluency, pace, and accent deviation with expert-level precision. Used by 5,000+ professionals and candidates preparing for high-stakes communication.
                </p>

                {/* Fake analyser UI */}
                <div className="rounded-2xl bg-[#F6EFE9] border border-[#E6D3B1]/60 p-5 mb-6">
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex items-center gap-2">
                      <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                      <span className="text-xs font-black text-[#4A141E] uppercase tracking-widest">Live Analysis</span>
                    </div>
                    <span className="text-xs text-[#4A141E]/40 font-semibold">Veritas AI™</span>
                  </div>
                  {[
                    { label: "Clarity", score: 87, color: "#4A141E" },
                    { label: "Fluency", score: 74, color: "#8B1C1C" },
                    { label: "Pace", score: 92, color: "#D4AF37" },
                  ].map((m, i) => (
                    <div key={i} className="mb-2.5">
                      <div className="flex justify-between text-xs font-semibold text-[#4A141E]/60 mb-1">
                        <span>{m.label}</span><span className="font-black text-[#4A141E]">{m.score}%</span>
                      </div>
                      <div className="h-2 rounded-full bg-[#E6D3B1]/60 overflow-hidden">
                        <motion.div initial={{ width: 0 }} whileInView={{ width: `${m.score}%` }} viewport={{ once: true }} transition={{ delay: i * 0.15, duration: 1.2, ease: "easeOut" }}
                          className="h-full rounded-full" style={{ background: m.color }} />
                      </div>
                    </div>
                  ))}
                </div>

                <div className="flex flex-wrap gap-3">
                  <a href={MAIN_SITE_ROUTES.speechAnalyser} target="_blank" rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-black text-sm bg-[#4A141E] text-white hover:bg-[#3B0F18] transition-all shadow-lg">
                    Try Speech Analyser <Zap className="w-4 h-4 text-[#D4AF37]" />
                  </a>
                  <a href={MAIN_SITE_ROUTES.speechAnalyserPricing} target="_blank" rel="noopener noreferrer"
                    className="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-sm border-2 border-[#E6D3B1]/60 text-[#4A141E] hover:border-[#D4AF37] transition-all">
                    View Pricing
                  </a>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          5. BEFORE / AFTER TRANSFORMATION
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-[#FDFAF7]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-14">
            <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-[0.22em] mb-3">The Transformation</p>
            <h2 className="text-4xl md:text-5xl font-black text-[#4A141E] mb-3">Where You Are vs. Where You Could Be</h2>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-6">
            <motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}
              className="p-8 rounded-3xl bg-white border-2 border-gray-200">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center">
                  <X className="w-5 h-5 text-gray-400" />
                </div>
                <h3 className="text-xl font-black text-gray-500">Without Cambridge Veritas</h3>
              </div>
              <div className="space-y-3.5">
                {[
                  "Stagnating in a role with no clear progression path",
                  "No verified credential to justify charging premium",
                  "Skills developed informally — hard to prove to employers",
                  "No AI tool to objectively measure your spoken English",
                  "Limited to local markets with no international mobility",
                  "No formal qualification visible to global recruiters",
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-3 text-sm text-gray-500">
                    <div className="w-5 h-5 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <X className="w-3 h-3 text-gray-400" />
                    </div>
                    {item}
                  </div>
                ))}
              </div>
            </motion.div>

            <motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}
              className="p-8 rounded-3xl bg-gradient-to-br from-[#4A141E] to-[#3B0F18] border-2 border-[#D4AF37]/50 relative overflow-hidden shadow-2xl">
              <div className="absolute top-4 right-4">
                <Sparkles className="w-7 h-7 text-[#D4AF37] animate-pulse" />
              </div>
              <div className="flex items-center gap-3 mb-6">
                <div className="w-10 h-10 rounded-xl bg-[#D4AF37]/20 flex items-center justify-center">
                  <CheckCircle2 className="w-5 h-5 text-[#D4AF37]" />
                </div>
                <h3 className="text-xl font-black text-[#E6D3B1]">After Cambridge Veritas</h3>
              </div>
              <div className="space-y-3.5">
                {[
                  "Holding a verified, UK-regulated career certification",
                  "Commanding premium rates as a recognised specialist",
                  "Operating with expert methodology and measurable impact",
                  "AI Speech Analyser objectively tracks your progress",
                  "Working across 50+ countries — online or in person",
                  "LinkedIn credential visible and verifiable to employers globally",
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-3 text-sm text-[#E6D3B1]/85">
                    <div className="w-5 h-5 rounded-full bg-[#D4AF37]/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                      <CheckCircle2 className="w-3 h-3 text-[#D4AF37]" />
                    </div>
                    {item}
                  </div>
                ))}
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          6. FREE ASSESSMENT / INTRO CLASS WIDGET
      ══════════════════════════════════════════════════════════════════ */}
      <section id="free-assessment" className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-12">
            <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-[0.22em] mb-3">No Risk. No Cost.</p>
            <h2 className="text-4xl md:text-5xl font-black text-[#4A141E] mb-3">Start with Something Free</h2>
            <p className="text-[#4A141E]/55 max-w-xl mx-auto">Three ways to experience Cambridge Veritas before you invest — all completely free.</p>
          </motion.div>

          <div className="grid sm:grid-cols-3 gap-5">
            {[
              {
                emoji: "📝", badge: "Free · Live", title: "TESOL Introduction Class",
                desc: "90 minutes with Krishnatrya. Discover the CVTE® 120-Hour TESOL pathway live.", day: "Saturdays · 7 PM IST",
                cta: "Reserve a Seat", href: MAIN_SITE_ROUTES.tesolIntro, featured: false,
              },
              {
                emoji: "🏆", badge: "Most Popular · Free · Live", title: "IELTS Masterclass Intro",
                desc: "Explore the CVIM® Train-the-Trainer framework and learn what IELTS specialists earn.", day: "Tuesdays · 7 PM IST",
                cta: "Reserve a Seat", href: MAIN_SITE_ROUTES.ieltsIntro, featured: true,
              },
              {
                emoji: "🎙️", badge: "Free · Live", title: "Voice & Accent Introduction",
                desc: "Discover what a Voice & Accent career looks like. 90 minutes with Krishnatrya — live and interactive.", day: "Weekly · 7 PM IST",
                cta: "Reserve a Seat", href: MAIN_SITE_ROUTES.voiceIntro, featured: false,
              },
            ].map((c, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}
                className={`relative flex flex-col p-6 rounded-2xl border-2 transition-all duration-300 hover:shadow-xl hover:-translate-y-1 ${c.featured ? "bg-gradient-to-b from-[#3B0F18] to-[#4A141E] border-[#D4AF37]/60" : "bg-white border-[#E6D3B1]/50 hover:border-[#D4AF37]/50"}`}>
                {c.featured && (
                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-[#D4AF37] text-[9px] font-black text-[#4A141E] uppercase tracking-widest shadow-lg whitespace-nowrap">
                    Most Popular
                  </div>
                )}
                <div className="text-3xl mb-3">{c.emoji}</div>
                <span className={`text-[10px] font-black uppercase tracking-widest mb-2 ${c.featured ? "text-[#D4AF37]" : "text-[#8B1C1C]"}`}>{c.badge}</span>
                <h3 className={`font-black text-base mb-2 leading-snug ${c.featured ? "text-white" : "text-[#4A141E]"}`}>{c.title}</h3>
                <p className={`text-xs leading-relaxed mb-4 flex-1 ${c.featured ? "text-[#E6D3B1]/60" : "text-[#4A141E]/55"}`}>{c.desc}</p>
                <div className={`flex items-center gap-1.5 text-xs font-semibold mb-5 ${c.featured ? "text-[#D4AF37]/60" : "text-[#4A141E]/40"}`}>
                  <Clock className="w-3.5 h-3.5" /> {c.day}
                </div>
                <a href={c.href}
                  className={`w-full py-3 rounded-xl font-black text-sm text-center transition-all ${c.featured ? "bg-[#8B1C1C] text-white hover:bg-[#6B1010]" : "bg-[#F6EFE9] text-[#4A141E] hover:bg-[#E6D3B1]/60 border border-[#E6D3B1]/50"}`}>
                  {c.cta} →
                </a>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          7. TRAINER AUTHORITY
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-[#FDFAF7] border-t border-[#E6D3B1]/40">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col md:flex-row gap-12 items-center">
            <motion.div initial={{ opacity: 0, x: -24 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} className="flex-shrink-0 text-center">
              <div className="relative inline-block mb-5">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src="https://media.base44.com/images/public/6964e0a6688c9dcda2637c42/028e3ffa8_krishnatryacambridgeveritastrainer.png"
                  alt="Krishnatrya" className="w-44 h-44 rounded-3xl border-2 border-[#D4AF37]/50 shadow-2xl object-cover" />
                <div className="absolute -bottom-3 -right-3 px-3 py-1.5 rounded-xl bg-[#D4AF37] shadow-lg">
                  <span className="text-[10px] font-black text-[#4A141E]">PhD · 10+ Yrs</span>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-2 w-48 mx-auto">
                {[{ v: "10+", l: "Years Experience" }, { v: "14", l: "Countries" }, { v: "4.9★", l: "Rated" }, { v: "PhD", l: "City Univ." }].map((s, i) => (
                  <div key={i} className="p-2.5 rounded-xl bg-white border border-[#E6D3B1]/60 shadow-sm text-center">
                    <div className="text-base font-black text-[#4A141E]">{s.v}</div>
                    <div className="text-[9px] text-[#4A141E]/45 font-semibold">{s.l}</div>
                  </div>
                ))}
              </div>
            </motion.div>

            <motion.div initial={{ opacity: 0, x: 24 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} className="flex-1">
              <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-widest mb-2">The Person Behind Every Cambridge Veritas Programme</p>
              <h3 className="text-3xl md:text-4xl font-black text-[#4A141E] mb-2">Krishnatrya</h3>
              <p className="text-[#8B1C1C] font-bold mb-1 text-lg">Lead Trainer & Course Director · Cambridge Veritas</p>
              <p className="text-[#4A141E]/50 text-xs font-semibold mb-5 uppercase tracking-wider">Every curriculum. Every certification. Every methodology. Designed and delivered by him.</p>
              <p className="text-[#4A141E]/70 leading-relaxed mb-6 text-sm">
                Krishnatrya is not just the trainer — he personally designed every Cambridge Veritas certification curriculum. With <strong className="text-[#4A141E]">over 10 years</strong> of training experience across corporations, universities, and institutions in <strong className="text-[#4A141E]">14 countries</strong>, his methodologies are built to UK Level 4 and Level 5 regulated standards. He has delivered programmes for the <strong className="text-[#4A141E]">British Council</strong> and faculty at <strong className="text-[#4A141E]">City University of London</strong>, holds a <strong className="text-[#4A141E]">PhD in Education Management</strong>, and is an active IELTS Examiner and IATEFL member.
              </p>
              <div className="flex flex-wrap gap-2 mb-7">
                {["PhD — City University London", "British Council Trainer", "IELTS Examiner", "IATEFL Member", "TESOL Specialist", "Curriculum Designer"].map((t, i) => (
                  <span key={i} className="px-3 py-1.5 rounded-full bg-[#F6EFE9] border border-[#E6D3B1]/60 text-xs font-semibold text-[#4A141E]/70">{t}</span>
                ))}
              </div>
              <div className="flex flex-wrap gap-3">
                <a href="https://www.linkedin.com/in/krishnatrya/" target="_blank" className="inline-flex items-center gap-2 px-7 py-3 rounded-xl font-black text-sm bg-[#8B1C1C] text-white hover:bg-[#6B1010] transition-all shadow-lg">
                  Learn with Krishnatrya <ArrowRight className="w-4 h-4" />
                </a>
                <a href="https://wa.me/918068212576?text=Hello" target="_blank" rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 px-7 py-3 rounded-xl font-bold text-sm bg-[#4A141E]/10 text-[#4A141E] border border-[#4A141E]/20 hover:bg-[#4A141E]/15 transition-all">
                  <MessageCircle className="w-4 h-4" />
                  Speak to Our Team
                </a>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          8. TESTIMONIALS — Auto-rotating
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-gradient-to-b from-[#4A141E] to-[#3B0F18]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-14">
            <p className="text-xs font-black text-[#D4AF37]/80 uppercase tracking-[0.22em] mb-3">Real Graduates · Real Results</p>
            <h2 className="text-4xl md:text-5xl font-black text-white mb-3">Lives Changed. Careers Built.</h2>
            <p className="text-[#E6D3B1]/55 max-w-md mx-auto text-sm">Hear directly from professionals who made the decision — and never looked back.</p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
            {TESTIMONIALS.map((item, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }}
                onClick={() => setTestimonialIdx(i)}
                className={`relative cursor-pointer rounded-2xl border-2 overflow-hidden transition-all duration-300 ${testimonialIdx === i ? "border-[#D4AF37] shadow-2xl scale-[1.02]" : "border-white/10 hover:border-[#D4AF37]/50"}`}>
                {/* Photo header */}
                <div className="relative h-40 overflow-hidden bg-[#2B0A11]">
                  {item.photo ? (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img src={item.photo} alt={item.name}
                      className="w-full h-full object-cover object-top opacity-90" />
                  ) : (
                    <div className="w-full h-full flex items-center justify-center">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img src={`https://ui-avatars.com/api/?name=${item.name.replace(" ", "+")}&background=D4AF37&color=4A141E&bold=true&size=120`}
                        alt={item.name} className="w-24 h-24 rounded-full border-4 border-[#D4AF37]/50" />
                    </div>
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-[#2B0A11]/80 via-transparent to-transparent" />
                  <div className="absolute bottom-3 left-4 right-4 flex items-end justify-between">
                    <div>
                      <div className="flex items-center gap-1.5 flex-wrap">
                        <h4 className="font-black text-white text-sm drop-shadow">{item.name}</h4>
                        <span className="px-2 py-0.5 rounded-full text-[9px] font-black bg-[#D4AF37] text-[#4A141E]">{item.cert}</span>
                      </div>
                      <p className="text-[10px] text-[#E6D3B1]/75 font-semibold mt-0.5">{item.role}</p>
                    </div>
                    {testimonialIdx === i && (
                      <div className="px-2 py-1 rounded-full bg-[#D4AF37] text-[8px] font-black text-[#4A141E] uppercase tracking-widest">Featured</div>
                    )}
                  </div>
                </div>
                {/* Card body */}
                <div className={`p-5 ${testimonialIdx === i ? "bg-white/12" : "bg-white/6 hover:bg-white/10"}`}>
                  <div className="flex gap-0.5 mb-3">{[...Array(5)].map((_, j) => <Star key={j} className="w-3 h-3 fill-[#D4AF37] text-[#D4AF37]" />)}</div>
                  <p className="text-[#E6D3B1]/90 text-sm leading-relaxed italic mb-4">&quot;{item.quote}&quot;</p>
                  <a href={`https://www.youtube.com/watch?v=${item.youtubeId}`} target="_blank" rel="noopener noreferrer"
                    onClick={(e) => e.stopPropagation()}
                    className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-red-600/80 text-white text-[10px] font-black hover:bg-red-600 transition-all">
                    <Play className="w-3 h-3" fill="white" /> Watch Final Presentation
                  </a>
                </div>
              </motion.div>
            ))}
          </div>
          <div className="flex justify-center gap-2">
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => setTestimonialIdx(i)}
                className={`rounded-full transition-all duration-300 ${i === testimonialIdx ? "w-8 h-2.5 bg-[#D4AF37]" : "w-2.5 h-2.5 bg-white/25"}`} />
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          9. TRUST — Institutions + Social Impact
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-16 bg-white border-t border-[#E6D3B1]/30">
        <div className="max-w-5xl mx-auto px-4">
          <p className="text-center text-xs font-black text-[#4A141E]/40 uppercase tracking-[0.18em] mb-8">
            Professionals from these organisations have enrolled in Cambridge Veritas programmes
          </p>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-12">
            {[
              { name: "British Council", bg: "#0065BD" },
              { name: "IDP Education", bg: "#005A96" },
              { name: "Amity University", bg: "#1B3A6B" },
              { name: "International House", bg: "#8B1C1C" },
              { name: "Accenture", bg: "#6A0DAD" },
              { name: "Ministry of Education", bg: "#1A5276" },
              { name: "British School of Mgmt", bg: "#2C3E50" },
              { name: "Vivekananda Institute", bg: "#117A65" },
              { name: "Manipal University", bg: "#B5200D" },
              { name: "Mastercard", bg: "#C41E1E" },
            ].map((inst, i) => (
              <motion.div key={i} initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ delay: i * 0.03 }}
                className="flex items-center justify-center rounded-xl px-3 py-4 min-h-[52px] shadow-sm hover:shadow-md hover:scale-[1.03] transition-all duration-200"
                style={{ backgroundColor: inst.bg }}>
                <span className="text-[9px] font-black text-white leading-tight text-center">{inst.name}</span>
              </motion.div>
            ))}
          </div>

          {/* Social impact — elevated block */}
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}
            className="rounded-3xl overflow-hidden border-2 border-[#D4AF37]/30 shadow-xl">
            <div className="bg-gradient-to-r from-[#4A141E] to-[#3B0F18] px-7 py-5 flex items-center gap-4">
              <div className="w-10 h-10 rounded-full bg-[#D4AF37]/20 border border-[#D4AF37]/40 flex items-center justify-center flex-shrink-0">
                <Heart className="w-5 h-5 text-[#D4AF37]" fill="#D4AF37" />
              </div>
              <div>
                <p className="text-[10px] font-black text-[#D4AF37]/80 uppercase tracking-widest">Cambridge Veritas Gives Back</p>
                <h4 className="font-black text-white text-base">Your Enrolment Changes More Than Your Career</h4>
              </div>
            </div>
            <div className="bg-[#FDFAF7] px-7 py-6">
              <div className="grid sm:grid-cols-2 gap-5 items-center">
                <div>
                  <p className="text-[#4A141E]/75 text-sm leading-relaxed mb-4">
                    A portion of every Cambridge Veritas enrolment goes directly to our <strong className="text-[#4A141E]">Social Impact Programme (SIP)</strong> — actively supporting underprivileged children across India with education, nutrition, and medical care. Managed by <strong className="text-[#4A141E]">Ketto</strong>, India&apos;s most trusted social impact platform.
                  </p>
                  <p className="text-xs text-[#4A141E]/45 font-semibold italic">&quot;Small actions. Big impact.&quot;</p>
                </div>
                <div className="grid grid-cols-3 gap-3">
                  {[
                    { icon: "📚", title: "Education", desc: "Quality schooling for underprivileged children" },
                    { icon: "🍱", title: "Nutrition", desc: "Daily healthy meals for children in need" },
                    { icon: "🏥", title: "Healthcare", desc: "Immediate medical care when it matters most" },
                  ].map((c, i) => (
                    <div key={i} className="text-center p-3 rounded-xl bg-white border border-[#E6D3B1]/60 shadow-sm">
                      <div className="text-2xl mb-1.5">{c.icon}</div>
                      <p className="text-xs font-black text-[#4A141E] mb-0.5">{c.title}</p>
                      <p className="text-[9px] text-[#4A141E]/45 leading-tight">{c.desc}</p>
                    </div>
                  ))}
                </div>
              </div>
              <div className="mt-4 pt-4 border-t border-[#E6D3B1]/40 flex items-center gap-2">
                <span className="px-2.5 py-1 rounded-full bg-green-100 text-green-700 text-[9px] font-black uppercase tracking-wider">Active Programme</span>
                <span className="text-xs text-[#4A141E]/45 font-semibold">Verified & managed via Ketto SIP</span>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          10. FAQ
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-[#FDFAF7] border-t border-[#E6D3B1]/40">
        <div className="max-w-2xl mx-auto px-4 sm:px-6">
          <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-10">
            <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-[0.22em] mb-3">Got Questions?</p>
            <h2 className="text-3xl md:text-4xl font-black text-[#4A141E] mb-3">Common Questions</h2>
            <p className="text-[#4A141E]/55 text-sm">Everything you need to know before you start.</p>
          </motion.div>
          <div className="space-y-3">
            {[
              { q: "What do I actually get when I enrol?", a: "You receive a globally recognised, UK-regulated certification (physical hard copy sent by post), access to the Cambridge Veritas Trainer Dashboard, curated teaching resources, and in many programmes, a prestigious 1-month teacher training internship." },
              { q: "How is Cambridge Veritas different from other teaching qualifications?", a: "Many qualifications give you a general teaching credential. Cambridge Veritas certifications are specialist, domain-specific credentials — going deep into IELTS training, voice & accent coaching, TESOL methodology, or professional English communication. The focus is on expertise, not just a certificate." },
              { q: "What is the Veritas Speech Analyser™?", a: "It's our proprietary AI tool that analyses your spoken English in real time — scoring clarity, fluency, pace, and accent deviation. It's used by candidates, professionals, and students preparing for interviews, IELTS, or professional communication." },
              { q: "Is there a free way to experience Cambridge Veritas?", a: "Yes. We offer free live Introduction Classes every week (TESOL on Saturdays, IELTS Masterclass on Tuesdays), plus a free Speech Analyser demo. No credit card required." },
              { q: "Do I need prior teaching experience?", a: "Not at all. Our programmes are designed to build expertise from the ground up. You need a proficient level of English (approximately IELTS Band 6.0 or equivalent) and a genuine interest in teaching or professional development." },
              { q: "Are the certifications really UK-regulated?", a: "Yes. Cambridge Veritas certifications are UK-regulated qualifications built to international standards. Each certificate carries a unique verifiable ID and is recognised by schools, language academies, universities, and training organisations across 50+ countries." },
            ].map((faq, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.05 }}>
                <FaqItem q={faq.q} a={faq.a} />
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════
          11. FINAL CTA
      ══════════════════════════════════════════════════════════════════ */}
      <section className="py-24 bg-white border-t-4 border-[#D4AF37]/40">
        <div className="max-w-3xl mx-auto px-4 text-center">
          <motion.div initial={{ opacity: 0, y: 24 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
            {/* Gold accent line */}
            <div className="flex justify-center mb-8">
              <div className="w-16 h-1 rounded-full bg-gradient-to-r from-[#D4AF37] to-[#B8912A]" />
            </div>
            <p className="text-xs font-black text-[#8B1C1C] uppercase tracking-[0.22em] mb-4">Take the Next Step</p>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-black text-[#4A141E] mb-5 leading-[1.07]">
              Your Career Certification<br />
              <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#8B1C1C] to-[#D4AF37]">Starts Here.</span>
            </h2>
            <p className="text-[#4A141E]/55 text-lg mb-10 max-w-xl mx-auto leading-relaxed">
              Join professionals across 50+ countries who chose Cambridge Veritas to build verifiable, career-defining credentials.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
              <a href={MAIN_SITE_ROUTES.certifications}
                className="group inline-flex items-center justify-center gap-2.5 px-10 py-5 rounded-2xl font-black text-lg bg-[#4A141E] text-white hover:bg-[#3B0F18] transition-all duration-300 shadow-xl hover:scale-[1.02]">
                Explore Certifications <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </a>
              <a href="https://wa.me/918068212576?text=Hi! I want to find the right Cambridge Veritas programme for me."
                target="_blank" rel="noopener noreferrer"
                className="inline-flex items-center justify-center gap-2.5 px-10 py-5 rounded-2xl font-bold text-lg bg-[#25D366] text-white hover:bg-[#1fb855] transition-all duration-300 shadow-lg hover:scale-[1.02]">
                <MessageCircle className="w-5 h-5" /> WhatsApp a Counsellor
              </a>
            </div>
            <p className="text-[#4A141E]/35 text-xs">
              Or call: <a href="tel:+918068212576" className="text-[#8B1C1C] hover:underline font-semibold">+918068212576</a>
              {" · "}
              <a href="mailto:contact@cambridgeveritas.com" className="text-[#8B1C1C] hover:underline font-semibold">contact@cambridgeveritas.com</a>
            </p>
          </motion.div>
        </div>
      </section>

      <CVFooter />

      
    </div>
  );
}
