'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import { AnimatePresence, motion } from 'framer-motion';
import {
  ArrowRight,
  Award,
  BookOpen,
  Camera,
  ChevronRight,
  CheckCircle2,
  ClipboardList,
  Globe,
  GraduationCap,
  LockKeyhole,
  MessageSquare,
  Mic,
  PenLine,
  Play,
  ShieldCheck,
  SlidersHorizontal,
  Sparkles,
  Star,
  Target,
  Users,
  Volume2,
  Zap,
} from 'lucide-react';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';
import { useNavigate } from '@/lib/nextRouterAdapter';
import { TOOLS_HUB_FAQS } from './toolsSeoData';

const TOOLS = [
  {
    id: 'writing-analyser',
    path: '/tools/writing-analyser',
    icon: PenLine,
    label: 'Writing Analyser',
    tagline: 'AI IELTS writing feedback for learners and teachers',
    description:
      'Submit an essay, letter or report and receive practice feedback on task response, organisation, grammar and vocabulary.',
    teacherUse: 'Use it to model IELTS writing feedback, compare drafts and discuss why a response needs stronger organisation or language control.',
    learnerUse: 'Practise IELTS writing with clearer next steps before an official test.',
    badge: 'IELTS Writing',
    badgeColor: '#4A1429',
    accentColor: '#4A1429',
    category: 'Writing',
    categories: ['Writing', 'IELTS', 'Assessment', 'For Teachers'],
    popular: true,
    stats: { label: 'feedback areas', value: '4' },
    preview: 'writing',
  },
  {
    id: 'speech-analyser',
    path: '/tools/speech-analyser',
    icon: Mic,
    label: 'Speech Analyser',
    tagline: 'AI English speaking assessment',
    description:
      'Record spoken English and receive diagnostic feedback on pronunciation, intonation, fluency, grammar and vocabulary.',
    teacherUse: 'Use reports for speaking placement, pronunciation feedback, IELTS speaking practice and learner progress discussions.',
    learnerUse: 'Check speaking strengths and improvement areas with CEFR and test-benchmark estimates for practice.',
    badge: 'Speaking Assessment',
    badgeColor: '#1E3FA0',
    accentColor: '#1E3FA0',
    category: 'Speaking',
    categories: ['Speaking', 'Assessment', 'IELTS', 'For Teachers', 'Pronunciation'],
    popular: true,
    stats: { label: 'speaking dimensions', value: '5' },
    preview: 'speech',
  },
  {
    id: 'practice-accent-with-ella',
    path: '/tools/practice-accent-with-ella',
    icon: MessageSquare,
    label: 'Talk with Ella',
    tagline: 'AI pronunciation and accent-practice coach',
    description:
      'Chat or speak with Ella for pronunciation drills, word stress practice, sentence stress and clearer spoken delivery.',
    teacherUse: 'Use Ella for extra pronunciation practice after class or as a model for learner self-study tasks.',
    learnerUse: 'Practise sounds, stress and speaking clarity in short guided conversations.',
    badge: 'Voice Coach',
    badgeColor: '#6B1E3D',
    accentColor: '#6B1E3D',
    category: 'Speaking',
    categories: ['Speaking', 'Pronunciation'],
    stats: { label: 'practice mode', value: 'AI coach' },
    preview: 'chat',
    coach: 'Ella',
  },
  {
    id: 'practice-ielts-with-emma',
    path: '/tools/practice-ielts-with-emma',
    icon: GraduationCap,
    label: 'Talk with Emma',
    tagline: 'AI IELTS practice and teaching coach',
    description:
      'Discuss IELTS speaking, writing feedback, assessment criteria and lesson ideas with a dedicated IELTS-practice coach.',
    teacherUse: 'Use Emma to brainstorm IELTS lesson activities, feedback language and exam-preparation follow-up tasks.',
    learnerUse: 'Ask IELTS speaking and writing practice questions before or after using the analyser tools.',
    badge: 'IELTS Expert',
    badgeColor: '#1A5C3A',
    accentColor: '#1A5C3A',
    category: 'Speaking',
    categories: ['IELTS', 'Speaking', 'Writing', 'For Teachers'],
    stats: { label: 'focus area', value: 'IELTS' },
    preview: 'chat',
    coach: 'Emma',
  },
  {
    id: 'practice-english-with-eva',
    path: '/tools/practice-english-with-eva',
    icon: BookOpen,
    label: 'Talk with Eva',
    tagline: 'Grammar, Vocab & Communication',
    description:
      'Eva focuses on grammar accuracy, vocabulary expansion and everyday communication for building strong English foundations.',
    teacherUse: 'Use Eva for extra learner practice around grammar explanations, vocabulary review and everyday communication.',
    learnerUse: 'Practise grammar, vocabulary and everyday English questions in a low-pressure chat format.',
    badge: 'Language Coach',
    badgeColor: '#5B2D8E',
    accentColor: '#5B2D8E',
    category: 'Speaking',
    categories: ['Speaking', 'For Teachers'],
    stats: { label: 'practice area', value: 'CEFR' },
    preview: 'chat',
    coach: 'Eva',
  },
  {
    id: 'practice-tesol-with-ellie',
    path: '/tools/practice-tesol-with-ellie',
    icon: Users,
    label: 'Talk with Ellie',
    tagline: 'TESOL Teacher Training Coach',
    description:
      'Ellie is your professional development partner for lesson design, classroom strategy and TESOL methodology.',
    teacherUse: 'Use Ellie to explore lesson planning, classroom management, feedback strategies and TESOL methodology questions.',
    learnerUse: 'Useful for trainee teachers who want to revise TESOL concepts and teaching scenarios.',
    badge: 'Teacher Training',
    badgeColor: '#B8610A',
    accentColor: '#B8610A',
    category: 'Teaching',
    categories: ['For Teachers'],
    stats: { label: 'teacher pathway', value: 'TESOL' },
    preview: 'chat',
    coach: 'Ellie',
  },
  {
    id: 'photo-mode',
    path: '/tools/photo-mode',
    icon: Camera,
    label: 'Photo Description',
    tagline: 'Describe pictures like an examiner',
    description:
      'Look at an image and describe it out loud. Get AI feedback on vocabulary range, grammar and spoken coherence.',
    teacherUse: 'Use image prompts for speaking fluency, vocabulary expansion and classroom discussion tasks.',
    learnerUse: 'Build spontaneous speaking confidence by describing real scenes aloud.',
    badge: 'Speaking Practice',
    badgeColor: '#0E4D6B',
    accentColor: '#0E4D6B',
    category: 'Speaking',
    categories: ['Speaking'],
    stats: { label: 'skill focus', value: 'fluency' },
    preview: 'photo',
  },
  {
    id: 'oral-drill',
    path: '/tools/oral-drill',
    icon: Volume2,
    label: 'Pronunciation Drill',
    tagline: 'Master every English sound',
    description:
      'Search a word, say it aloud and receive pronunciation feedback so you can focus on sounds that need practice.',
    teacherUse: 'Use it for minimal-pair practice, word-level pronunciation homework and individual sound correction.',
    learnerUse: 'Practise difficult English words and sounds with repeatable feedback.',
    badge: 'Pronunciation',
    badgeColor: '#7A1818',
    accentColor: '#7A1818',
    category: 'Pronunciation',
    categories: ['Pronunciation', 'Assessment', 'For Teachers'],
    stats: { label: 'feedback type', value: 'phoneme' },
    preview: 'drill',
  },
  {
    id: 'accent-enhancer',
    path: '/tools/accent-enhancer',
    icon: Globe,
    label: 'Accent Enhancer',
    tagline: 'All 44 English phonemes, interactive',
    description:
      'Explore the full British English phonemic chart. Tap any symbol or word to hear it and track your progress as you go.',
    teacherUse: 'Use the chart to teach vowel and consonant sounds, phonemic awareness, word stress and pronunciation contrasts.',
    learnerUse: 'Explore English sounds visually and listen to model words for self-study.',
    badge: 'Phonemic Chart',
    badgeColor: '#1E3FA0',
    accentColor: '#1E3FA0',
    category: 'Pronunciation',
    categories: ['Pronunciation', 'For Teachers'],
    stats: { label: 'Sounds explored', value: '44 phonemes' },
    preview: 'accent',
  },
];

const CATEGORIES = ['All', 'For Teachers', 'Pronunciation', 'Speaking', 'IELTS', 'Writing', 'Assessment'];

const TEACHER_WORKFLOWS = [
  {
    icon: Target,
    phase: 'Before class',
    title: 'Diagnose learner needs',
    text: 'Use Speech Analyser to identify pronunciation, fluency and grammar patterns before planning a speaking lesson.',
  },
  {
    icon: Volume2,
    phase: 'During class',
    title: 'Teach pronunciation clearly',
    text: 'Use Accent Enhancer and Pronunciation Drill for phoneme modelling, minimal pairs and word-stress practice.',
  },
  {
    icon: ClipboardList,
    phase: 'After class',
    title: 'Assign focused practice',
    text: 'Assign speaking, pronunciation or IELTS writing practice and ask learners to bring reports to the next lesson.',
  },
  {
    icon: Users,
    phase: 'Teacher development',
    title: 'Explore TESOL methodology',
    text: 'Use Ellie to review lesson planning, classroom management, feedback language and teacher-training concepts.',
  },
];

const GOAL_MATCHES = [
  ['Teach pronunciation', 'Accent Enhancer', '/tools/accent-enhancer'],
  ['Diagnose speaking', 'Speech Analyser', '/tools/speech-analyser'],
  ['Practise individual words', 'Pronunciation Drill', '/tools/oral-drill'],
  ['Teach IELTS writing', 'Writing Analyser', '/tools/writing-analyser'],
  ['Teach IELTS speaking', 'Talk with Emma', '/tools/practice-ielts-with-emma'],
  ['Plan TESOL lessons', 'Talk with Ellie', '/tools/practice-tesol-with-ellie'],
  ['Build spoken fluency', 'Photo Description', '/tools/photo-mode'],
  ['Improve voice and accent', 'Talk with Ella', '/tools/practice-accent-with-ella'],
];

const LEARNING_SIGNALS = [
  'Pronunciation and phonemic awareness',
  'Fluency, pace and pausing',
  'Intonation and sentence stress',
  'Grammar accuracy and range',
  'Vocabulary range and precision',
  'Writing organisation and task response',
  'CEFR-aligned practice guidance',
  'IELTS-related speaking and writing feedback',
];

const PATHWAY_CARDS = [
  {
    icon: BookOpen,
    title: 'I am learning English',
    text: 'Start with Speech Analyser, Pronunciation Drill, Photo Description, Eva or Ella to practise independently and understand your next step.',
    cta: 'Explore learner tools',
  },
  {
    icon: GraduationCap,
    title: 'I teach English',
    text: 'Use the hub for pronunciation modelling, IELTS feedback, speaking diagnostics, classroom follow-up and TESOL professional development.',
    cta: 'Explore teacher tools',
  },
  {
    icon: Award,
    title: 'I want teacher training',
    text: 'Use the free tools as a bridge into Cambridge Veritas TESOL, IELTS trainer and Voice & Accent trainer certification pathways.',
    cta: 'View certification links',
  },
];

const VIDEO_CARDS = [
  {
    title: 'Live IELTS Writing Band 7+ Demo',
    desc: 'Watch how feedback turns a draft into a stronger IELTS response.',
    label: 'Writing Analyser',
    color: '#4A1429',
  },
  {
    title: 'AI Speaking Score Walkthrough',
    desc: 'See how pronunciation, fluency and intonation feedback are presented.',
    label: 'Speech Analyser',
    color: '#1E3FA0',
  },
  {
    title: 'Pronunciation Drill Demo',
    desc: 'A practical look at using drills to build clearer spoken English.',
    label: 'Pronunciation Drill',
    color: '#7A1818',
  },
];

function WritingPreview() {
  return (
    <div className="rounded-xl overflow-hidden text-left" style={{ background: '#FAF5F0', border: '1px solid #E5DDD5' }}>
      <div className="px-3 py-2 flex items-center justify-between" style={{ background: '#4A1429' }}>
        <span className="text-[9px] font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>
          AI Band Score Result
        </span>
      </div>
      <div className="p-3">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-10 h-10 rounded-full flex items-center justify-center shrink-0" style={{ background: 'linear-gradient(135deg,#4A1429,#6B1E3D)' }}>
            <span className="text-sm font-black text-white">7</span>
          </div>
          <div className="flex-1">
            <div className="text-[9px] font-black uppercase tracking-wide mb-0.5" style={{ color: '#8B6B7A' }}>
              Overall Band Score
            </div>
            <div className="h-2 rounded-full overflow-hidden" style={{ background: '#E5DDD5' }}>
              <div className="h-full rounded-full" style={{ width: '78%', background: 'linear-gradient(90deg,#4A1429,#D4B038)' }} />
            </div>
          </div>
        </div>
        {[
          ['Fluency', '7.5', 83],
          ['Grammar', '6.5', 72],
          ['Vocabulary', '7.0', 78],
          ['Organisation', '7.0', 78],
        ].map(([label, score, pct]) => (
          <div key={label} className="flex items-center gap-2 mb-1">
            <span className="text-[8px] font-bold w-16 shrink-0" style={{ color: '#6B4455' }}>{label}</span>
            <div className="flex-1 h-1.5 rounded-full overflow-hidden" style={{ background: '#F0E8E0' }}>
              <div className="h-full rounded-full" style={{ width: `${pct}%`, background: '#D4B038' }} />
            </div>
            <span className="text-[8px] font-black w-5 text-right" style={{ color: '#4A1429' }}>{score}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function SpeechPreview() {
  return (
    <div className="rounded-xl overflow-hidden text-left" style={{ background: '#EEF2FF', border: '1px solid #C7D2FE' }}>
      <div className="px-3 py-2" style={{ background: '#1E3FA0' }}>
        <span className="text-[9px] font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>
          Speaking Score Breakdown
        </span>
      </div>
      <div className="p-3">
        <div className="flex gap-2 mb-2 flex-wrap">
          {[
            ['Pronunciation', 7.5, '#1E3FA0'],
            ['Fluency', 6.5, '#4A1429'],
            ['Grammar', 7.0, '#1A5C3A'],
            ['Vocabulary', 6.5, '#5B2D8E'],
            ['Intonation', 7.0, '#B8610A'],
          ].map(([label, score, color]) => (
            <div key={label} className="flex flex-col items-center px-2 py-1.5 rounded-lg" style={{ background: `${color}15`, border: `1px solid ${color}30` }}>
              <span className="text-sm font-black leading-none" style={{ color }}>{score}</span>
              <span className="text-[7px] font-bold mt-0.5" style={{ color: '#6B4455' }}>{label}</span>
            </div>
          ))}
        </div>
        <div className="rounded-lg px-3 py-2 text-[8px] leading-relaxed" style={{ background: 'white', color: '#4A1429' }}>
          Work on consonant clusters like str and spl for a cleaner accent.
        </div>
      </div>
    </div>
  );
}

function ChatPreview({ color = '#6B1E3D', name = 'Ella' }) {
  return (
    <div className="rounded-xl overflow-hidden text-left" style={{ background: '#FAF5F0', border: '1px solid #E5DDD5' }}>
      <div className="px-3 py-2 flex items-center gap-2" style={{ background: color }}>
        <div className="w-5 h-5 rounded-full bg-white/20 flex items-center justify-center">
          <span className="text-[8px] font-black text-white">{name[0]}</span>
        </div>
        <span className="text-[9px] font-black text-white">{name} AI Coach</span>
        <span className="ml-auto w-2 h-2 rounded-full bg-green-400" />
      </div>
      <div className="p-3 space-y-2">
        <div className="rounded-2xl rounded-tl-sm px-3 py-2 max-w-[85%]" style={{ background: 'white', border: '1px solid #E5DDD5' }}>
          <p className="text-[8px] leading-relaxed" style={{ color: '#2D0F1C' }}>
            Hi! I am {name}. What would you like to work on today?
          </p>
        </div>
        <div className="rounded-2xl rounded-tr-sm px-3 py-2 max-w-[75%] ml-auto" style={{ background: `linear-gradient(135deg, ${color}, ${color}cc)` }}>
          <p className="text-[8px] leading-relaxed text-white">Help me with word stress please.</p>
        </div>
        <div className="rounded-2xl rounded-tl-sm px-3 py-2 max-w-[85%]" style={{ background: 'white', border: '1px solid #E5DDD5' }}>
          <p className="text-[8px] leading-relaxed" style={{ color: '#2D0F1C' }}>
            Great choice. Try saying photograph and photography slowly.
          </p>
          <p className="text-[7px] mt-1 font-bold" style={{ color: '#D4B038' }}>
            Pronunciation Score: 8/10
          </p>
        </div>
      </div>
    </div>
  );
}

function PhotoPreview() {
  return (
    <div className="rounded-xl overflow-hidden text-left" style={{ background: '#E0F2FE', border: '1px solid #BAE6FD' }}>
      <div className="px-3 py-2" style={{ background: '#0E4D6B' }}>
        <span className="text-[9px] font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>
          Photo Description Feedback
        </span>
      </div>
      <Image
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&q=70"
        alt="Mountain practice scene"
        width={400}
        height={70}
        unoptimized
        className="w-full object-cover"
        style={{ maxHeight: 70 }}
      />
      <div className="p-3 space-y-1.5">
        {[
          { label: 'Vocabulary Range', score: 8, note: 'Strong descriptive adjectives' },
          { label: 'Grammar Accuracy', score: 7, note: 'Minor tense inconsistency' },
          { label: 'Spoken Coherence', score: 8, note: 'Logical flow, well structured' },
        ].map((item) => (
          <div key={item.label}>
            <div className="flex justify-between mb-0.5">
              <span className="text-[7px] font-bold" style={{ color: '#0E4D6B' }}>{item.label}</span>
              <span className="text-[7px] font-black" style={{ color: '#0E4D6B' }}>{item.score}/10</span>
            </div>
            <div className="h-1.5 rounded-full overflow-hidden" style={{ background: '#BAE6FD' }}>
              <div className="h-full rounded-full" style={{ width: `${item.score * 10}%`, background: '#0E4D6B' }} />
            </div>
            <p className="text-[7px] mt-0.5" style={{ color: '#4B7A8A' }}>{item.note}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function DrillPreview() {
  return (
    <div className="rounded-xl overflow-hidden text-left" style={{ background: '#FEF2F2', border: '1px solid #FECACA' }}>
      <div className="px-3 py-2" style={{ background: '#7A1818' }}>
        <span className="text-[9px] font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>
          {'Pronunciation Score - "Thought"'}
        </span>
      </div>
      <div className="p-3">
        <div className="flex items-center justify-between mb-2">
          <div>
            <div className="text-lg font-black" style={{ color: '#7A1818' }}>thought</div>
            <div className="text-xs font-bold" style={{ color: '#B45454' }}>/thawt/</div>
          </div>
          <div className="w-12 h-12 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg,#7A1818,#B45454)' }}>
            <span className="text-base font-black text-white">84%</span>
          </div>
        </div>
        <div className="space-y-1">
          {[
            ['th', 'tongue placement', true],
            ['aw', 'long vowel', true],
            ['t', 'final stop', false],
          ].map(([sound, label, correct]) => (
            <div key={sound} className="flex items-center gap-2 px-2 py-1 rounded-lg" style={{ background: correct ? 'rgba(22,163,74,0.08)' : 'rgba(220,38,38,0.08)', border: `1px solid ${correct ? 'rgba(22,163,74,0.25)' : 'rgba(220,38,38,0.25)'}` }}>
              <span className="text-xs font-black w-6" style={{ color: correct ? '#16A34A' : '#DC2626' }}>{sound}</span>
              <span className="text-[8px]" style={{ color: '#6B4455' }}>{label}</span>
              <span className="ml-auto text-[8px] font-black" style={{ color: correct ? '#16A34A' : '#DC2626' }}>{correct ? 'Correct' : 'Improve'}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AccentPreview() {
  const vowels = [['i:', 'sleep'], ['i', 'slip'], ['u', 'good'], ['u:', 'food'], ['e', 'ten'], ['uh', 'better']];
  return (
    <div className="rounded-xl overflow-hidden text-left" style={{ background: '#EEF2FF', border: '1px solid #C7D2FE' }}>
      <div className="px-3 py-2" style={{ background: '#1E3FA0' }}>
        <span className="text-[9px] font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>
          Interactive Phonemic Chart
        </span>
      </div>
      <div className="p-3">
        <div className="text-[8px] font-black uppercase tracking-wide mb-2" style={{ color: '#6B4455' }}>
          Vowel Sounds - tap to hear
        </div>
        <div className="grid grid-cols-6 gap-1 mb-2">
          {vowels.map(([sym, word]) => (
            <div key={sym} className="flex flex-col items-center rounded-lg py-1.5" style={{ background: '#1E3FA0' }}>
              <span className="text-xs font-black text-white">{sym}</span>
              <span className="text-[6px] text-white/60 mt-0.5">{word}</span>
            </div>
          ))}
        </div>
        <div className="flex items-center gap-2 px-2 py-1.5 rounded-lg" style={{ background: 'rgba(212,176,56,0.1)', border: '1px solid rgba(212,176,56,0.3)' }}>
          <span className="text-[8px] font-bold" style={{ color: '#8B6914' }}>Progress: 18 / 44 sounds heard</span>
          <div className="flex-1 h-1.5 rounded-full overflow-hidden ml-1" style={{ background: 'rgba(212,176,56,0.2)' }}>
            <div className="h-full rounded-full" style={{ width: '41%', background: '#D4B038' }} />
          </div>
        </div>
      </div>
    </div>
  );
}

function ToolPreview({ type, accentColor, coach }) {
  if (type === 'writing') return <WritingPreview />;
  if (type === 'speech') return <SpeechPreview />;
  if (type === 'chat') return <ChatPreview color={accentColor} name={coach} />;
  if (type === 'photo') return <PhotoPreview />;
  if (type === 'drill') return <DrillPreview />;
  if (type === 'accent') return <AccentPreview />;
  return null;
}

function ToolCard({ tool, index }) {
  const navigate = useNavigate();
  const Icon = tool.icon;
  const [hovered, setHovered] = useState(false);

  const openTool = () => navigate(tool.path);

  return (
    <motion.article
      initial={{ opacity: 0, y: 30 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: index * 0.05, duration: 0.4 }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={openTool}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          openTool();
        }
      }}
      role="button"
      tabIndex={0}
      className="relative cursor-pointer rounded-3xl overflow-hidden flex flex-col focus:outline-none focus:ring-4 focus:ring-[#D4B038]/30"
      style={{
        background: 'white',
        border: hovered ? `2px solid ${tool.accentColor}` : '2px solid #F0E8E0',
        boxShadow: hovered
          ? `0 20px 60px ${tool.accentColor}22, 0 8px 24px rgba(0,0,0,0.08)`
          : '0 4px 16px rgba(0,0,0,0.06)',
        transition: 'all 0.3s ease',
        transform: hovered ? 'translateY(-6px)' : 'translateY(0)',
      }}
    >
      {tool.popular && (
        <div className="absolute top-4 right-4 z-10 flex items-center gap-1 px-2.5 py-1 rounded-full" style={{ background: '#D4B038', boxShadow: '0 2px 8px rgba(212,176,56,0.4)' }}>
          <Star className="w-2.5 h-2.5 text-white fill-white" />
          <span className="text-[9px] font-black uppercase tracking-wider text-white">Popular</span>
        </div>
      )}

      <div className="h-1.5 shrink-0" style={{ background: `linear-gradient(90deg, ${tool.accentColor}, ${tool.accentColor}88)` }} />

      <div className="p-5 flex flex-col flex-1">
        <div className="flex items-start gap-3 mb-3">
          <div className="w-12 h-12 rounded-2xl flex items-center justify-center shrink-0" style={{ background: hovered ? tool.accentColor : `${tool.accentColor}12`, transition: 'background 0.3s' }}>
            <Icon className="w-5 h-5" style={{ color: hovered ? 'white' : tool.accentColor, transition: 'color 0.3s' }} />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="font-black text-sm leading-tight mb-1" style={{ color: '#1A0610' }}>{tool.label}</h3>
            <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wide" style={{ background: `${tool.badgeColor}15`, color: tool.badgeColor, border: `1px solid ${tool.badgeColor}30` }}>
              {tool.badge}
            </span>
          </div>
        </div>

        <p className="text-xs font-black mb-1.5" style={{ color: tool.accentColor }}>{tool.tagline}</p>
        <p className="text-xs leading-relaxed mb-4" style={{ color: '#6B4455' }}>{tool.description}</p>

        <div className="rounded-xl px-3 py-2 mb-4" style={{ background: `${tool.accentColor}0D`, border: `1px solid ${tool.accentColor}24` }}>
          <div className="flex items-start gap-2">
            <Users className="w-3.5 h-3.5 shrink-0 mt-0.5" style={{ color: tool.accentColor }} />
            <p className="text-[10px] leading-relaxed" style={{ color: '#4A1429' }}>
              <span className="font-black">Teacher use: </span>
              {tool.teacherUse}
            </p>
          </div>
        </div>

        <div className="mb-4">
          <ToolPreview type={tool.preview} accentColor={tool.accentColor} coach={tool.coach} />
        </div>

        <div className="flex items-center justify-between mt-auto gap-3">
          <div>
            <div className="text-xs font-black" style={{ color: '#4A1429' }}>{tool.stats.value}</div>
            <div className="text-[10px] font-semibold" style={{ color: '#8B6B7A' }}>{tool.stats.label}</div>
          </div>
          <motion.button
            type="button"
            onClick={(event) => {
              event.stopPropagation();
              openTool();
            }}
            animate={{ x: hovered ? 3 : 0 }}
            transition={{ duration: 0.2 }}
            className="flex items-center gap-1.5 px-4 py-2 rounded-xl text-xs font-black shrink-0"
            style={{
              background: hovered ? tool.accentColor : `${tool.accentColor}12`,
              color: hovered ? 'white' : tool.accentColor,
              transition: 'background 0.3s, color 0.3s',
            }}
          >
            Try Now <ArrowRight className="w-3.5 h-3.5" />
          </motion.button>
        </div>
      </div>
    </motion.article>
  );
}

export default function ToolsIndexPage() {
  const [activeCategory, setActiveCategory] = useState('All');

  const filtered = activeCategory === 'All'
    ? TOOLS
    : TOOLS.filter((tool) => tool.categories?.includes(activeCategory));

  return (
    <>
      <CVHeader />
      <main className="min-h-screen overflow-x-hidden" style={{ background: '#FAF5F0' }}>

      <section
        className="relative overflow-hidden"
        style={{ background: 'linear-gradient(135deg, #1A0610 0%, #4A1429 45%, #2D0A18 80%, #0E0308 100%)' }}
      >
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            backgroundImage:
              'linear-gradient(rgba(212,176,56,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(212,176,56,0.04) 1px, transparent 1px)',
            backgroundSize: '60px 60px',
          }}
        />
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background: 'linear-gradient(180deg, rgba(212,176,56,0.08), transparent 34%, rgba(0,0,0,0.18))',
          }}
        />
        <div className="absolute top-0 left-0 right-0 h-1" style={{ background: 'linear-gradient(90deg, transparent 0%, #D4B038 30%, #F0C840 50%, #D4B038 70%, transparent 100%)' }} />

        <div className="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 py-14 sm:py-24 text-center">
          <motion.div
            initial={{ opacity: 0, y: -16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="inline-flex w-full max-w-[18rem] sm:max-w-xl sm:w-auto items-center justify-center gap-2 px-3 sm:px-5 py-2.5 rounded-full mb-7"
            style={{
              background: 'linear-gradient(135deg, rgba(212,176,56,0.22), rgba(212,176,56,0.1))',
              border: '1.5px solid rgba(212,176,56,0.55)',
              boxShadow: '0 0 24px rgba(212,176,56,0.15)',
            }}
          >
            <Zap className="w-3.5 h-3.5 fill-[#D4B038]" style={{ color: '#D4B038' }} />
            <span className="min-w-0 text-center text-[9px] sm:text-xs font-black uppercase tracking-wide sm:tracking-widest leading-relaxed whitespace-normal" style={{ color: '#F0D060' }}>
              AI tools for TESOL, TEFL, ESL, IELTS and pronunciation practice
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
            className="text-[28px] sm:text-6xl font-black text-white leading-tight mb-5 break-words"
            style={{ textShadow: '0 2px 40px rgba(0,0,0,0.5)' }}
          >
            Free AI English Tools for<br />
            <span className="inline-block max-w-full" style={{ color: '#D4B038', textShadow: '0 0 40px rgba(212,176,56,0.5), 0 2px 20px rgba(212,176,56,0.3)' }}>
              TESOL Teachers &amp; Learners
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
            className="text-sm sm:text-lg leading-relaxed max-w-2xl mx-auto mb-8 sm:mb-10"
            style={{ color: 'rgba(255,255,255,0.75)' }}
          >
            Teach and practise English with AI-powered tools for pronunciation, speaking, writing, IELTS and TESOL.
            <strong className="text-white"> Use interactive phonemic charts, speaking analysis, writing feedback and specialist AI coaches for English learners and teachers.</strong>
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
            className="flex flex-wrap items-center justify-center gap-3 mb-10"
          >
            {[
              { value: '9', label: 'English tools' },
              { value: '44', label: 'phonemes' },
              { value: 'CEFR', label: 'practice guidance' },
              { value: 'Free', label: 'to try' },
            ].map(({ value, label }) => (
              <div key={label} className="flex flex-col items-center px-6 py-3 rounded-2xl" style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', backdropFilter: 'blur(8px)' }}>
                <div className="text-xl sm:text-2xl font-black flex items-center gap-1" style={{ color: '#F0D060', textShadow: '0 0 20px rgba(212,176,56,0.4)' }}>
                  {value}
                </div>
                <div className="text-[10px] font-bold uppercase tracking-widest mt-0.5" style={{ color: 'rgba(255,255,255,0.45)' }}>
                  {label}
                </div>
              </div>
            ))}
          </motion.div>

          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8 }} className="flex flex-col items-center gap-1.5">
            <span className="text-xs font-semibold" style={{ color: 'rgba(255,255,255,0.35)' }}>Choose your tool below</span>
            <motion.div animate={{ y: [0, 7, 0] }} transition={{ repeat: Infinity, duration: 1.5 }}>
              <ChevronRight className="w-5 h-5 rotate-90" style={{ color: 'rgba(212,176,56,0.7)' }} />
            </motion.div>
          </motion.div>
        </div>
      </section>

      <section className="max-w-7xl mx-auto px-4 sm:px-6 py-14">
        <div className="text-center mb-10">
          <h2 className="text-3xl sm:text-4xl font-black mb-3" style={{ color: '#4A1429' }}>
            AI Tools for English Teaching, IELTS &amp; Pronunciation
          </h2>
          <p className="text-base max-w-xl mx-auto" style={{ color: '#8B6B7A' }}>
            Choose the right tool for teaching pronunciation, diagnosing speaking, giving IELTS feedback or helping learners practise independently.
          </p>
        </div>

        <div className="flex flex-wrap gap-2 justify-center mb-10">
          {CATEGORIES.map((category) => (
            <button
              key={category}
              onClick={() => setActiveCategory(category)}
              className="px-5 py-2.5 rounded-2xl text-sm font-black transition-all"
              style={activeCategory === category
                ? { background: '#4A1429', color: 'white', boxShadow: '0 4px 16px rgba(74,20,41,0.3)' }
                : { background: 'white', color: '#6B4455', border: '2px solid #E5DDD5' }}
            >
              {category}
            </button>
          ))}
        </div>

        <AnimatePresence mode="wait">
          <motion.div
            id="tools-grid"
            key={activeCategory}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            transition={{ duration: 0.2 }}
            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
          >
            {filtered.map((tool, index) => (
              <ToolCard key={tool.id} tool={tool} index={index} />
            ))}
          </motion.div>
        </AnimatePresence>
      </section>

      <section className="py-16 px-6" style={{ background: 'white' }}>
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-10">
            <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-4" style={{ background: 'rgba(74,20,41,0.08)', border: '1px solid rgba(74,20,41,0.18)', color: '#4A1429' }}>
              <Users className="w-4 h-4" />
              <span className="text-xs font-black uppercase tracking-widest">For TESOL &amp; TEFL teachers</span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-black mb-3" style={{ color: '#4A1429' }}>
              How English Teachers Can Use These Tools
            </h2>
            <p className="text-base max-w-2xl mx-auto" style={{ color: '#8B6B7A' }}>
              Use the hub before class, during lessons, after class and in your own teacher development. AI supports practice and feedback; teacher judgement still leads the learning.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-4 gap-5">
            {TEACHER_WORKFLOWS.map((item, index) => {
              const Icon = item.icon;
              return (
                <motion.article
                  key={item.phase}
                  initial={{ opacity: 0, y: 18 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.08 }}
                  className="rounded-2xl p-5"
                  style={{ background: '#FAF5F0', border: '1px solid #E5DDD5' }}
                >
                  <div className="w-11 h-11 rounded-2xl flex items-center justify-center mb-4" style={{ background: '#4A1429' }}>
                    <Icon className="w-5 h-5" style={{ color: '#D4B038' }} />
                  </div>
                  <div className="text-[10px] font-black uppercase tracking-widest mb-1" style={{ color: '#B8610A' }}>{item.phase}</div>
                  <h3 className="text-base font-black mb-2" style={{ color: '#4A1429' }}>{item.title}</h3>
                  <p className="text-sm leading-relaxed" style={{ color: '#6B4455' }}>{item.text}</p>
                </motion.article>
              );
            })}
          </div>

          <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
            <a
              href="/certifications/cambridge-veritas-certificate-in-TESOL"
              className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl font-black text-sm"
              style={{ background: '#4A1429', color: 'white' }}
            >
              CVTE TESOL Certification <ArrowRight className="w-4 h-4" />
            </a>
            <a
              href="/masterclass/cambridge-veritas-voice-and-accent-trainer-certification"
              className="inline-flex items-center justify-center gap-2 px-5 py-3 rounded-xl font-black text-sm"
              style={{ background: '#FAF5F0', color: '#4A1429', border: '2px solid #E5DDD5' }}
            >
              Voice &amp; Accent Trainer Pathway
            </a>
          </div>
        </div>
      </section>

      <section className="py-16 px-6" style={{ background: '#FAF5F0' }}>
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-black mb-3" style={{ color: '#4A1429' }}>
              Choose the Right Tool for Your Teaching Goal
            </h2>
            <p className="text-base max-w-2xl mx-auto" style={{ color: '#8B6B7A' }}>
              Start with the classroom task, then open the tool that fits it.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {GOAL_MATCHES.map(([goal, tool, href]) => (
              <a
                key={goal}
                href={href}
                className="group rounded-2xl p-5 transition-all hover:-translate-y-1"
                style={{ background: 'white', border: '1px solid #E5DDD5', boxShadow: '0 4px 16px rgba(0,0,0,0.04)' }}
              >
                <div className="text-[10px] font-black uppercase tracking-widest mb-2" style={{ color: '#B8610A' }}>Goal</div>
                <h3 className="text-sm font-black mb-3" style={{ color: '#1A0610' }}>{goal}</h3>
                <div className="flex items-center justify-between gap-3 rounded-xl px-3 py-2" style={{ background: 'rgba(74,20,41,0.06)', color: '#4A1429' }}>
                  <span className="text-xs font-black">{tool}</span>
                  <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 px-6" style={{ background: 'white' }}>
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-[0.95fr_1.05fr] gap-8 items-center">
            <div>
              <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-4" style={{ background: 'rgba(212,176,56,0.14)', border: '1px solid rgba(212,176,56,0.35)', color: '#8B6914' }}>
                <Sparkles className="w-4 h-4" />
                <span className="text-xs font-black uppercase tracking-widest">English-language feedback</span>
              </div>
              <h2 className="text-3xl sm:text-4xl font-black mb-4" style={{ color: '#4A1429' }}>
                AI Feedback Built for English Language Learning
              </h2>
              <p className="text-base leading-relaxed mb-5" style={{ color: '#6B4455' }}>
                Cambridge Veritas tools focus on the language signals English learners and teachers actually discuss: pronunciation, fluency, intonation, grammar, vocabulary, writing organisation, CEFR guidance and IELTS-related practice feedback.
              </p>
              <p className="text-sm leading-relaxed" style={{ color: '#8B6B7A' }}>
                Feedback is intended for practice, classroom discussion and self-assessment. Official IELTS, PTE, TOEFL and CEFR results must still come from approved testing bodies.
              </p>
            </div>
            <div className="grid sm:grid-cols-2 gap-3">
              {LEARNING_SIGNALS.map((signal) => (
                <div key={signal} className="flex items-start gap-3 rounded-2xl px-4 py-3" style={{ background: '#FAF5F0', border: '1px solid #E5DDD5' }}>
                  <CheckCircle2 className="w-4 h-4 shrink-0 mt-0.5" style={{ color: '#D4B038' }} />
                  <span className="text-sm font-semibold leading-relaxed" style={{ color: '#4A1429' }}>{signal}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="py-16 px-6" style={{ background: 'white' }}>
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-10">
            <h2 className="text-3xl font-black mb-3" style={{ color: '#4A1429' }}>
              Responsible AI for English Teaching
            </h2>
            <p className="text-base" style={{ color: '#8B6B7A' }}>
              AI tools can speed up practice and feedback, but they should not replace professional teacher judgement.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {[
              {
                icon: ShieldCheck,
                title: 'Trainer-Reviewed Direction',
                desc: 'Tool prompts and learning flows are built around Cambridge Veritas teaching practice, IELTS preparation and pronunciation training.',
              },
              {
                icon: SlidersHorizontal,
                title: 'Diagnostic, Not Official',
                desc: 'Scores and benchmarks support practice and classroom discussion. They are not official IELTS, PTE, TOEFL or CEFR results.',
              },
              {
                icon: LockKeyhole,
                title: 'Privacy-Aware Practice',
                desc: 'Teachers should use AI outputs responsibly, review feedback before high-stakes decisions and follow learner privacy expectations.',
              },
            ].map((item, index) => {
              const Icon = item.icon;
              return (
                <motion.div
                  key={item.title}
                  initial={{ opacity: 0, y: 16 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: index * 0.1 }}
                  className="rounded-2xl p-6 text-center"
                  style={{ background: '#FAF5F0', border: '1px solid #E5DDD5' }}
                >
                  <div className="w-12 h-12 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ background: '#4A1429' }}>
                    <Icon className="w-6 h-6" style={{ color: '#D4B038' }} />
                  </div>
                  <h3 className="font-black text-base mb-2" style={{ color: '#4A1429' }}>{item.title}</h3>
                  <p className="text-sm leading-relaxed" style={{ color: '#6B4455' }}>{item.desc}</p>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="py-16 px-6" style={{ background: '#FAF5F0' }}>
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-6">
            <h2 className="text-3xl font-black mb-2" style={{ color: '#4A1429' }}>For Learners and Teachers</h2>
            <p className="text-sm" style={{ color: '#8B6B7A' }}>
              Choose your pathway, then use the hub as a practical bridge between independent practice, classroom feedback and professional teacher training.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
            {PATHWAY_CARDS.map((card, index) => {
              const Icon = card.icon;
              return (
              <motion.article
                key={card.title}
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="rounded-2xl p-6 flex flex-col"
                style={{ background: 'white', border: '1px solid #E5DDD5', boxShadow: '0 4px 20px rgba(0,0,0,0.06)' }}
              >
                <div className="w-12 h-12 rounded-2xl flex items-center justify-center mb-4" style={{ background: '#4A1429' }}>
                  <Icon className="w-6 h-6" style={{ color: '#D4B038' }} />
                </div>
                <h3 className="font-black text-base mb-2" style={{ color: '#1A0610' }}>{card.title}</h3>
                <p className="text-sm leading-relaxed flex-1 mb-5" style={{ color: '#6B4455' }}>{card.text}</p>
                <div className="inline-flex items-center gap-2 text-xs font-black" style={{ color: '#4A1429' }}>
                  {card.cta}
                  <ArrowRight className="w-3.5 h-3.5" />
                </div>
              </motion.article>
              );
            })}
          </div>

          <motion.div
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mt-10 rounded-3xl px-8 py-8 text-center"
            style={{ background: 'linear-gradient(135deg, #4A1429, #6B1E3D)', boxShadow: '0 8px 32px rgba(74,20,41,0.25)' }}
          >
            <p className="text-base font-black text-white mb-1">Start with a free English teaching or practice tool.</p>
            <p className="text-sm mb-5" style={{ color: 'rgba(255,255,255,0.6)' }}>
              Open a tool, test a classroom workflow, or use a report as the starting point for your next lesson.
            </p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <button
                onClick={() => document.getElementById('tools-grid')?.scrollIntoView({ behavior: 'smooth' })}
                className="flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-black text-sm hover:opacity-90 transition-all"
                style={{ background: 'linear-gradient(135deg, #D4B038, #B8942A)', color: '#3D0F22', boxShadow: '0 4px 16px rgba(212,176,56,0.4)' }}
              >
                <Zap className="w-4 h-4" /> Try a Free Tool Now
              </button>
              <a
                href="/certifications/cambridge-veritas-certificate-in-TESOL"
                className="flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-black text-sm transition-all hover:bg-white/20"
                style={{ background: 'rgba(255,255,255,0.1)', border: '2px solid rgba(255,255,255,0.25)', color: 'white' }}
              >
                <GraduationCap className="w-4 h-4" /> Explore TESOL Certification
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      <section className="py-16 px-6" style={{ background: 'white' }}>
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-8">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full mb-4" style={{ background: 'rgba(255,0,0,0.07)', border: '1px solid rgba(255,0,0,0.2)' }}>
              <Play className="w-4 h-4 fill-[#FF0000]" style={{ color: '#FF0000' }} />
              <span className="text-xs font-black uppercase tracking-widest" style={{ color: '#CC0000' }}>Live On YouTube</span>
            </div>
            <h2 className="text-3xl font-black mb-2" style={{ color: '#4A1429' }}>See the tools in action</h2>
            <p className="text-sm max-w-xl mx-auto" style={{ color: '#8B6B7A' }}>
              Watch live classes and practice sessions from Cambridge Veritas trainers.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
            {VIDEO_CARDS.map((video, index) => (
              <motion.a
                key={video.title}
                href="https://www.youtube.com/@CambridgeVeritas/streams"
                target="_blank"
                rel="noopener noreferrer"
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="rounded-2xl overflow-hidden cursor-pointer group block"
                style={{ background: 'white', border: '1px solid #E5DDD5', boxShadow: '0 4px 16px rgba(0,0,0,0.06)' }}
              >
                <div className="relative aspect-video" style={{ background: `linear-gradient(135deg, ${video.color}, #1A0610)` }}>
                  <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
                  <div className="absolute inset-0 flex items-center justify-center">
                    <motion.div whileHover={{ scale: 1.1 }} className="w-14 h-14 rounded-full flex items-center justify-center" style={{ background: 'rgba(255,0,0,0.9)', boxShadow: '0 4px 20px rgba(255,0,0,0.5)' }}>
                      <Play className="w-6 h-6 text-white ml-1" />
                    </motion.div>
                  </div>
                  <div className="absolute top-2 left-2 px-2 py-1 rounded-lg text-[9px] font-black" style={{ background: video.color, color: 'white' }}>
                    {video.label}
                  </div>
                </div>
                <div className="p-4">
                  <h3 className="text-sm font-black mb-1 leading-snug" style={{ color: '#1A0610' }}>{video.title}</h3>
                  <p className="text-xs leading-relaxed" style={{ color: '#8B6B7A' }}>{video.desc}</p>
                </div>
              </motion.a>
            ))}
          </div>
        </div>
      </section>

      <section id="faq" className="py-16 px-6" style={{ background: '#FAF5F0' }}>
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-black mb-2" style={{ color: '#4A1429' }}>
              Frequently Asked Questions
            </h2>
            <p className="text-sm max-w-2xl mx-auto" style={{ color: '#8B6B7A' }}>
              Clear answers for English learners, TESOL teachers, TEFL teachers and IELTS trainers using Cambridge Veritas tools.
            </p>
          </div>

          <div className="grid gap-3">
            {TOOLS_HUB_FAQS.map((faq) => (
              <article
                key={faq.q}
                className="rounded-2xl p-5"
                style={{ background: 'white', border: '1px solid #E5DDD5', boxShadow: '0 3px 12px rgba(0,0,0,0.04)' }}
              >
                <h3 className="text-sm font-black mb-2" style={{ color: '#4A1429' }}>{faq.q}</h3>
                <p className="text-sm leading-relaxed" style={{ color: '#6B4455' }}>{faq.a}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 px-6" style={{ background: 'linear-gradient(135deg, #4A1429 0%, #2D0A18 100%)' }}>
        <div className="max-w-3xl mx-auto text-center">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-5" style={{ background: 'rgba(212,176,56,0.12)', border: '1px solid rgba(212,176,56,0.3)' }}>
              <Award className="w-4 h-4" style={{ color: '#D4B038' }} />
              <span className="text-xs font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>
                Ready to go further?
              </span>
            </div>
            <h2 className="text-3xl sm:text-4xl font-black text-white mb-3 leading-tight">
              Turn tools into better<br />
              <span style={{ color: '#D4B038' }}>English teaching practice</span>
            </h2>
            <p className="text-base mb-8 max-w-xl mx-auto" style={{ color: 'rgba(255,255,255,0.6)' }}>
              Use the free AI tools for practice, then build deeper teaching expertise through Cambridge Veritas TESOL, IELTS trainer and Voice & Accent trainer programmes.
            </p>
            <div className="grid sm:grid-cols-3 gap-3 justify-center">
              <a
                href="/certifications/cambridge-veritas-certificate-in-TESOL"
                className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl font-black text-base hover:opacity-90 transition-all"
                style={{ background: 'linear-gradient(135deg, #D4B038, #B8942A)', color: '#3D0F22', boxShadow: '0 6px 24px rgba(212,176,56,0.4)' }}
              >
                <GraduationCap className="w-5 h-5" /> CVTE TESOL
              </a>
              <a
                href="/masterclass/cambridge-veritas-certificate-in-ielts-masterclass"
                className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl font-black text-base transition-all hover:bg-white/20"
                style={{ background: 'rgba(255,255,255,0.1)', border: '2px solid rgba(255,255,255,0.25)', color: 'white' }}
              >
                <PenLine className="w-4 h-4" /> CVIM IELTS
              </a>
              <a
                href="/masterclass/cambridge-veritas-voice-and-accent-trainer-certification"
                className="flex items-center justify-center gap-2 px-8 py-4 rounded-2xl font-black text-base transition-all hover:bg-white/20"
                style={{ background: 'rgba(255,255,255,0.1)', border: '2px solid rgba(255,255,255,0.25)', color: 'white' }}
              >
                <Volume2 className="w-4 h-4" /> CVAT Voice
              </a>
            </div>
          </motion.div>
        </div>
      </section>

      </main>
      <CVFooter />
    </>
  );
}