'use client'

import { useState } from 'react';
import Link from 'next/link';
import { motion, AnimatePresence } from 'framer-motion';
import CVHeader from '@/components/layout/CVHeader';
import CVFooter from '@/components/layout/CVFooter';
import { withBasePath } from '@/lib/basePath';
import {
  Mic,
  Volume2,
  ArrowRight,
  Star,
  Sparkles,
  GraduationCap,
  Users,
  Play,
  CheckCircle2,
  Zap,
  BarChart3,
  Award,
  Infinity,
} from 'lucide-react';

// -- Phonemic Data -------------------------------------------------------------

const AUDIO_BASE = withBasePath('/accent-enhancer');
const AUDIO_INDEX_BY_WORD = {
  sleep: 1,
  slip: 2,
  good: 3,
  food: 4,
  ten: 5,
  better: 6,
  word: 7,
  more: 8,
  tap: 9,
  cup: 10,
  bar: 11,
  gone: 12,
  hear: 13,
  game: 14,
  pure: 15,
  toy: 16,
  no: 17,
  where: 18,
  mine: 19,
  how: 20,
  pen: 21,
  fig: 22,
  tip: 23,
  thought: 24,
  chip: 25,
  save: 26,
  sure: 27,
  cat: 28,
  bit: 29,
  vase: 30,
  done: 31,
  those: 32,
  jam: 33,
  zoo: 34,
  vision: 35,
  goal: 36,
  him: 37,
  may: 38,
  not: 39,
  sing: 40,
  reach: 41,
  lie: 42,
  will: 43,
  yet: 44,
};

const withAudio = (item) => {
  const index = AUDIO_INDEX_BY_WORD[item.word];
  if (!index) return item;
  return {
    ...item,
    symbolAudio: `${AUDIO_BASE}/${index}-${item.word}-1.mp3`,
    wordAudio: `${AUDIO_BASE}/${index}-${item.word}-2.mp3`,
  };
};

const monophthongs = [
  [
    { symbol: 'iː', word: 'sleep' },
    { symbol: 'ɪ',  word: 'slip'  },
    { symbol: 'ʊ',  word: 'good'  },
    { symbol: 'uː', word: 'food'  },
    { symbol: 'e',  word: 'ten'   },
    { symbol: 'ə',  word: 'better'},
  ],
  [
    { symbol: 'ɜː', word: 'word'  },
    { symbol: 'ɔː', word: 'more'  },
    { symbol: 'æ',  word: 'tap'   },
    { symbol: 'ʌ',  word: 'cup'   },
    { symbol: 'ɑː', word: 'bar'   },
    { symbol: 'ɒ',  word: 'gone'  },
  ],
];

const diphthongs = [
  [
    { symbol: 'ɪə', word: 'hear'  },
    { symbol: 'eɪ', word: 'game'  },
    { symbol: 'ʊə', word: 'pure'  },
    { symbol: 'ɔɪ', word: 'toy'   },
  ],
  [
    { symbol: 'əʊ', word: 'no'    },
    { symbol: 'eə', word: 'where' },
    { symbol: 'aɪ', word: 'mine'  },
    { symbol: 'aʊ', word: 'how'   },
  ],
];

const consonants = [
  { symbol: 'p',  word: 'pen'     },
  { symbol: 'b',  word: 'bit'     },
  { symbol: 't',  word: 'tip'     },
  { symbol: 'd',  word: 'done'    },
  { symbol: 'k',  word: 'cat'     },
  { symbol: 'g',  word: 'goal'    },
  { symbol: 'f',  word: 'fig'     },
  { symbol: 'v',  word: 'vase'    },
  { symbol: 'θ',  word: 'thought' },
  { symbol: 'ð',  word: 'those'   },
  { symbol: 's',  word: 'save'    },
  { symbol: 'z',  word: 'zoo'     },
  { symbol: 'ʃ',  word: 'sure'    },
  { symbol: 'ʒ',  word: 'vision'  },
  { symbol: 'tʃ', word: 'chip'    },
  { symbol: 'dʒ', word: 'jam'     },
  { symbol: 'h',  word: 'him'     },
  { symbol: 'm',  word: 'may'     },
  { symbol: 'n',  word: 'not'     },
  { symbol: 'ŋ',  word: 'sing'    },
  { symbol: 'r',  word: 'reach'   },
  { symbol: 'l',  word: 'lie'     },
  { symbol: 'w',  word: 'will'    },
  { symbol: 'j',  word: 'yet'     },
];

// -- Sound Card ----------------------------------------------------------------

function SoundCard({ symbol, word, symbolAudio, wordAudio, variant = 'blue', size = 'md', onHeard }) {
  const [playingSymbol, setPlayingSymbol] = useState(false);
  const [playingWord, setPlayingWord] = useState(false);
  const [heard, setHeard] = useState(false);

  const styles = {
    blue: { bg: '#1E3FA0', text: '#ffffff', subText: 'rgba(255,255,255,0.65)', subBg: 'rgba(0,0,0,0.2)', glow: 'rgba(30,63,160,0.4)' },
    red:  { bg: '#B01C34', text: '#ffffff', subText: 'rgba(255,255,255,0.65)', subBg: 'rgba(0,0,0,0.2)', glow: 'rgba(176,28,52,0.4)' },
    dark: { bg: '#1C1C2E', text: '#ffffff', subText: 'rgba(255,255,255,0.55)', subBg: 'rgba(0,0,0,0.25)', glow: 'rgba(28,28,46,0.5)' },
  };
  const s = styles[variant];
  const responsiveWidth = size === 'sm'
    ? 'w-[54px] min-w-[54px] sm:w-[62px] sm:min-w-[62px]'
    : 'w-[54px] min-w-[54px] min-[390px]:w-[58px] min-[390px]:min-w-[58px] sm:w-[72px] sm:min-w-[72px]';

  const playAudio = (url, isSymbol) => {
    if (!url) return;
    const audio = new Audio(url);
    setPlayingSymbol(isSymbol);
    setPlayingWord(!isSymbol);
    audio.onended = () => { setPlayingSymbol(false); setPlayingWord(false); };
    audio.onerror = () => { setPlayingSymbol(false); setPlayingWord(false); };
    audio.play().catch(() => { setPlayingSymbol(false); setPlayingWord(false); });
    if (!heard) { setHeard(true); onHeard?.(symbol); }
  };

  const isPlaying = playingSymbol || playingWord;

  return (
    <div
      className={`relative flex flex-col rounded-lg select-none shrink-0 ${responsiveWidth}`}
      style={{
        background: s.bg,
        boxShadow: isPlaying ? `0 0 14px ${s.glow}, 0 2px 8px rgba(0,0,0,0.25)` : '0 1px 4px rgba(0,0,0,0.2)',
        border: isPlaying ? `2px solid rgba(255,255,255,0.4)` : heard ? '2px solid rgba(52,211,153,0.6)' : '2px solid transparent',
        transition: 'box-shadow 0.2s, border 0.2s',
      }}
    >
      {/* Symbol area — tap to hear the isolated phoneme sound */}
      <motion.button
        onClick={(e) => { e.stopPropagation(); playAudio(symbolAudio, true); }}
        whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
        whileTap={{ scale: 0.93 }}
        className="flex items-center justify-center w-full cursor-pointer"
        style={{ paddingTop: 10, paddingBottom: 8 }}
        title={`Hear the /${symbol}/ sound`}
      >
        <span className="font-black text-xl leading-none" style={{ color: playingSymbol ? '#D4B038' : s.text }}>{symbol}</span>
      </motion.button>

      {/* Divider */}
      <div style={{ height: 1, background: 'rgba(255,255,255,0.15)' }} />

      {/* Word area — tap to hear the full word spoken naturally */}
      <motion.button
        onClick={(e) => { e.stopPropagation(); playAudio(wordAudio, false); }}
        whileHover={{ backgroundColor: 'rgba(255,255,255,0.08)' }}
        whileTap={{ scale: 0.93 }}
        className="flex items-center justify-center w-full cursor-pointer"
        style={{ paddingTop: 4, paddingBottom: 7, background: 'rgba(0,0,0,0.18)' }}
        title={`Hear the word "${word}"`}
      >
        <span className="text-[10px] font-bold tracking-wide" style={{ color: playingWord ? '#D4B038' : s.subText }}>{word}</span>
      </motion.button>

      {isPlaying && (
        <motion.div
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          className="absolute -top-2 -right-2 w-4 h-4 rounded-full flex items-center justify-center pointer-events-none"
          style={{ background: '#D4B038', zIndex: 10 }}
        >
          <Volume2 className="w-2.5 h-2.5 text-[#3D0F22]" />
        </motion.div>
      )}
      {!isPlaying && heard && (
        <motion.div
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          className="absolute -top-2 -right-2 w-4 h-4 rounded-full flex items-center justify-center pointer-events-none"
          style={{ background: '#34D399', zIndex: 10 }}
        >
          <CheckCircle2 className="w-2.5 h-2.5 text-white" />
        </motion.div>
      )}
    </div>
  );
}

// -- Main Page -----------------------------------------------------------------

export default function AccentEnhancer() {
  const [activeTab, setActiveTab] = useState('chart');
  const [heardSounds, setHeardSounds] = useState(new Set());

  const totalSounds = 44;
  const heardCount = heardSounds.size;
  const progressPct = Math.round((heardCount / totalSounds) * 100);

  const markHeard = (symbol) => setHeardSounds(prev => new Set([...prev, symbol]));

  return (
    <>
      <CVHeader />
      <div className="min-h-screen overflow-x-hidden" style={{ background: '#FAF5F0' }}>
        <div className="max-w-7xl mx-auto px-3 sm:px-6 py-6 sm:py-10">

        {/* Hero */}
        <motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} className="mb-8 text-center flex flex-col items-center">
          <div className="inline-flex items-center gap-2 rounded-full border px-3.5 py-1.5 mb-4"
            style={{ background: 'rgba(212,176,56,0.12)', borderColor: 'rgba(212,176,56,0.4)' }}>
            <Sparkles className="w-3 h-3" style={{ color: '#B8942A' }} />
            <span className="text-[11px] font-bold uppercase tracking-widest" style={{ color: '#8B6914' }}>
              Accent Enhancer · 44 English Sounds
            </span>
          </div>
          <h1 className="text-2xl sm:text-4xl font-black mb-2 leading-tight" style={{ color: '#4A1429' }}>
            Phonemic Chart <span style={{ color: '#D4B038' }}>|</span> 44 English Sound Symbols
          </h1>
          <p className="text-sm leading-relaxed max-w-2xl" style={{ color: '#6B4455' }}>
            The symbols on this clickable chart represent the 44 sounds used in English speech. <strong>Tap on each symbol or sample word to hear it.</strong>
          </p>
        </motion.div>

        {/* Tab switcher */}
        <div className="flex gap-2 mb-8 justify-center flex-wrap">
          {[
            { id: 'chart', label: 'Phonemic Chart', icon: Sparkles },
            { id: 'course', label: 'Voice & Accent Course', icon: GraduationCap },
          ].map(tab => {
            const TabIcon = tab.icon;
            return (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className="w-full sm:w-auto sm:min-w-[220px] px-5 py-2.5 rounded-xl text-sm font-bold transition-all inline-flex items-center justify-center gap-2"
              style={activeTab === tab.id
                ? { background: '#4A1429', color: '#ffffff', boxShadow: '0 4px 14px rgba(74,20,41,0.3)' }
                : { background: 'white', color: '#6B4455', border: '1px solid #E5DDD5' }}
            >
              {TabIcon && <TabIcon className="w-4 h-4" />}
              {tab.label}
            </button>
          );
          })}
        </div>

        <AnimatePresence mode="wait">

          {/* -- CHART TAB -- */}
          {activeTab === 'chart' && (
            <motion.div key="chart" initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }} className="flex flex-col gap-5 mx-auto w-full" style={{ maxWidth: 900 }}>

              {/* Instruction chip + progress */}
              <div className="flex flex-col sm:flex-row items-center gap-3 px-4 py-3 rounded-xl"
                style={{ background: '#FFF8E6', border: '1px solid #F0D070' }}>
                <div className="flex items-center gap-2 shrink-0">
                  <Volume2 className="w-4 h-4" style={{ color: '#B8942A' }} />
                  <span className="text-sm font-semibold" style={{ color: '#8B6914' }}>
                    Tap any card to hear the sound in British English
                  </span>
                </div>
                <div className="flex items-center gap-3 sm:ml-auto w-full sm:w-auto">
                  <div className="flex-1 sm:w-32 h-2 rounded-full overflow-hidden" style={{ background: 'rgba(180,140,30,0.2)' }}>
                    <motion.div
                      className="h-full rounded-full"
                      style={{ background: 'linear-gradient(90deg, #B8942A, #D4B038)' }}
                      initial={{ width: 0 }}
                      animate={{ width: `${progressPct}%` }}
                      transition={{ duration: 0.4 }}
                    />
                  </div>
                  <span className="text-xs font-black whitespace-nowrap" style={{ color: '#8B6914' }}>
                    {heardCount}/{totalSounds}
                    {heardCount === totalSounds && (
                      <Sparkles className="w-3 h-3 inline-block ml-1" style={{ color: '#B8942A' }} />
                    )}
                  </span>
                </div>
              </div>

              {/* VOWELS PANEL */}
              <div className="rounded-2xl shadow-sm w-full"
                style={{ background: 'white', border: '1px solid #E5DDD5' }}>

                <div className="py-3 text-center border-b" style={{ background: '#F5EDE8', borderColor: '#E5DDD5' }}>
                  <span className="text-xs font-black uppercase tracking-widest" style={{ color: '#4A1429' }}>Vowel Sounds <span className="font-normal opacity-60">(20)</span></span>
                </div>

                <div className="p-3 sm:p-6 flex flex-col lg:flex-row gap-0 items-stretch">
                  {/* Monophthongs */}
                  <div className="flex-1 lg:flex-[3] flex flex-col items-center gap-3 py-4 px-1 sm:px-4 min-w-0">
                    <div className="text-[11px] font-black uppercase tracking-widest" style={{ color: '#8B6B7A' }}>Monophthongs</div>
                    <div className="grid grid-cols-3 min-[440px]:grid-cols-6 gap-2 justify-items-center">
                      {monophthongs.flat().map(item => <SoundCard key={item.symbol} {...withAudio(item)} variant="blue" onHeard={markHeard} />)}
                    </div>
                  </div>

                  {/* Divider */}
                  <div className="hidden lg:block w-px" style={{ background: '#E5DDD5' }} />
                  <div className="block lg:hidden h-px w-full" style={{ background: '#E5DDD5' }} />

                  {/* Diphthongs */}
                  <div className="flex-1 lg:flex-[2] flex flex-col items-center gap-3 py-4 px-1 sm:px-4 min-w-0">
                    <div className="text-[11px] font-black uppercase tracking-widest" style={{ color: '#8B6B7A' }}>Diphthongs</div>
                    <div className="flex flex-col gap-2 items-center">
                      <div className="flex gap-2">
                        {diphthongs.flat().slice(0, 4).map(item => <SoundCard key={item.symbol} {...withAudio(item)} variant="red" onHeard={markHeard} />)}
                      </div>
                      <div className="flex gap-2">
                        {diphthongs.flat().slice(4).map(item => <SoundCard key={item.symbol} {...withAudio(item)} variant="red" onHeard={markHeard} />)}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              {/* CONSONANTS PANEL */}
              <div className="rounded-2xl shadow-sm w-full"
                style={{ background: 'white', border: '1px solid #E5DDD5' }}>

                <div className="py-3 text-center border-b" style={{ background: '#F5EDE8', borderColor: '#E5DDD5' }}>
                  <span className="text-xs font-black uppercase tracking-widest" style={{ color: '#4A1429' }}>Consonant Sounds <span className="font-normal opacity-60">(24)</span></span>
                </div>

                <div className="p-3 sm:p-4 flex justify-center">
                  <div className="grid grid-cols-4 min-[420px]:grid-cols-6 sm:grid-cols-12 gap-1.5 justify-items-center">
                    {consonants.map(item => <SoundCard key={item.symbol} {...withAudio(item)} variant="dark" size="sm" onHeard={markHeard} />)}
                  </div>
                </div>
              </div>

              {/* CTA Banner */}
              <CTABanner />

            </motion.div>
          )}

          {/* -- COURSE TAB -- */}
          {activeTab === 'course' && (
            <motion.div
              key="course"
              initial={{ opacity: 0, y: 12 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -8 }}
              className="mx-auto w-full"
              style={{ maxWidth: 900 }}
            >
              <CourseSection />
            </motion.div>
          )}

        </AnimatePresence>
        </div>
      </div>
      <CVFooter />
    </>
  );
}

// -- CTA Banner ----------------------------------------------------------------

function CTABanner() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}
      className="rounded-2xl p-5 sm:p-8 text-center"
      style={{ background: 'linear-gradient(135deg, #4A1429 0%, #6B1E3D 100%)', boxShadow: '0 8px 32px rgba(74,20,41,0.25)' }}
    >
      <div className="inline-flex items-center gap-2 mb-3 px-3 py-1.5 rounded-full"
        style={{ background: 'rgba(212,176,56,0.15)', border: '1px solid rgba(212,176,56,0.3)' }}>
        <GraduationCap className="w-3.5 h-3.5" style={{ color: '#D4B038' }} />
        <span className="text-[11px] font-black uppercase tracking-widest" style={{ color: '#D4B038' }}>Take It Further</span>
      </div>

      <h2 className="text-2xl sm:text-3xl font-black text-white mb-2">
        Ready to transform your accent?
      </h2>
      <p className="text-white/60 text-sm max-w-lg mx-auto mb-7 leading-relaxed">
        Our certified Cambridge Veritas trainers will guide you from phoneme practice to confident, clear communication.
      </p>

      <div className="flex flex-col sm:flex-row gap-3 justify-center">
        <Link href="/checkout/cvat"
          className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl font-extrabold text-sm transition-all hover:opacity-90"
          style={{ background: 'linear-gradient(135deg, #D4B038, #B8942A)', color: '#3D0F22', boxShadow: '0 6px 20px rgba(212,176,56,0.4)' }}>
          <GraduationCap className="w-4 h-4" />
          Enroll Now — Voice & Accent Course
          <ArrowRight className="w-4 h-4" />
        </Link>
        <Link href="/introduction-class/voice-and-accent"
          className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl font-extrabold text-sm transition-all hover:bg-white/20"
          style={{ background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff' }}>
          <Users className="w-4 h-4" />
          Join Free Live Intro Class
        </Link>
      </div>
    </motion.div>
  );
}

// -- Course Section ------------------------------------------------------------

function CourseSection() {
  const benefits = [
    'Master all 44 English phonemes with expert guidance',
    'Reduce your accent for professional & academic settings',
    'Live feedback from certified Cambridge Veritas trainers',
    'International certification upon completion',
    'Flexible schedule — learn at your own pace',
    'Access to exclusive pronunciation drills & resources',
  ];

  const highlights = [
    { icon: Mic, title: 'Live Trainer Sessions', desc: 'Weekly live classes with certified accent coaches' },
    { icon: BarChart3, title: 'Progress Tracking', desc: 'AI-powered analysis to monitor your improvement' },
    { icon: Award, title: 'Cambridge Certification', desc: 'Internationally recognised certificate on completion' },
    { icon: Infinity, title: 'Lifetime Access', desc: 'Course materials available forever after enrolment' },
  ];

  return (
    <div className="space-y-6">

      {/* Social proof bar */}
      <div className="rounded-2xl px-6 py-4 w-full flex flex-wrap items-center justify-center sm:justify-between gap-6"
        style={{ background: 'white', border: '1px solid #E5DDD5' }}>
        {[
          { value: '2,400+', label: 'Students Enrolled' },
          { value: '4.9', label: 'Average Rating', icon: Star },
          { value: '94%', label: 'Completion Rate' },
          { value: '30+', label: 'Countries' },
        ].map(({ value, label, icon }) => {
          const MetricIcon = icon;
          return (
          <div key={label} className="text-center">
            <div className="text-xl font-black flex items-center justify-center gap-1" style={{ color: '#4A1429' }}>
              {value}
              {MetricIcon && <MetricIcon className="w-4 h-4 fill-[#4A1429]" />}
            </div>
            <div className="text-[11px] font-semibold uppercase tracking-wide" style={{ color: '#8B6B7A' }}>{label}</div>
          </div>
        );
        })}
      </div>

      {/* Hero card */}
      <div className="rounded-2xl overflow-hidden shadow-sm"
        style={{ background: 'white', border: '1px solid #E5DDD5' }}>
        <div className="h-2" style={{ background: 'linear-gradient(90deg, #4A1429, #D4B038)' }} />
        <div className="p-8">
          <div className="inline-flex items-center gap-2 mb-4 px-3 py-1.5 rounded-full"
            style={{ background: '#FFF8E6', border: '1px solid #F0D070' }}>
            <Star className="w-3.5 h-3.5 fill-[#D4B038]" style={{ color: '#D4B038' }} />
            <span className="text-[11px] font-black uppercase tracking-widest" style={{ color: '#8B6914' }}>Cambridge Veritas Certified</span>
          </div>

          <h2 className="text-3xl font-black mb-3 leading-tight" style={{ color: '#4A1429' }}>
            Voice & Accent<br />
            <span style={{ color: '#D4B038' }}>Trainer Certification</span>
          </h2>
          <p className="text-sm leading-relaxed mb-6 max-w-lg" style={{ color: '#6B4455' }}>
            The most comprehensive voice and accent program — designed by Cambridge linguistics experts to transform how you sound and communicate.
          </p>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-7">
            {benefits.map((b, i) => (
              <div key={i} className="flex items-start gap-2.5">
                <CheckCircle2 className="w-4 h-4 mt-0.5 shrink-0" style={{ color: '#D4B038' }} />
                <span className="text-sm font-medium" style={{ color: '#4A1429' }}>{b}</span>
              </div>
            ))}
          </div>

          <div className="flex flex-col sm:flex-row gap-3">
            <Link href="/checkout/cvat"
              className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl font-extrabold text-sm hover:opacity-90 transition-all"
              style={{ background: 'linear-gradient(135deg, #4A1429, #6B1E3D)', color: '#ffffff', boxShadow: '0 6px 20px rgba(74,20,41,0.3)' }}>
              <GraduationCap className="w-4 h-4" /> Enroll Now <ArrowRight className="w-4 h-4" />
            </Link>
            <Link href="/introduction-class/voice-and-accent"
              className="flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl font-extrabold text-sm transition-all"
              style={{ background: 'white', border: '2px solid #4A1429', color: '#4A1429' }}>
              <Play className="w-4 h-4" /> Join Free Live Intro Class
            </Link>
          </div>
        </div>
      </div>

      {/* Highlights */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {highlights.map((h, i) => {
          const HighlightIcon = h.icon;
          return (
          <motion.div key={i}
            initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: i * 0.07 }}
            className="rounded-2xl p-5 shadow-sm"
            style={{ background: 'white', border: '1px solid #E5DDD5' }}>
            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-2"
              style={{ background: 'rgba(212,176,56,0.15)', color: '#4A1429' }}>
              {HighlightIcon && <HighlightIcon className="w-5 h-5" />}
            </div>
            <div className="font-extrabold mb-1 text-sm" style={{ color: '#4A1429' }}>{h.title}</div>
            <div className="text-sm leading-relaxed" style={{ color: '#6B4455' }}>{h.desc}</div>
          </motion.div>
        );
        })}
      </div>

      {/* Live class nudge */}
      <div className="rounded-2xl p-6 flex items-start gap-4 shadow-sm"
        style={{ background: '#FFF8E6', border: '1px solid #F0D070' }}>
        <div className="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
          style={{ background: '#D4B038' }}>
          <Zap className="w-5 h-5 text-white" />
        </div>
        <div className="flex-1">
          <div className="font-black text-base mb-1" style={{ color: '#4A1429' }}>Not sure yet? Try the Free Live Class first</div>
          <p className="text-sm leading-relaxed mb-3" style={{ color: '#8B6914' }}>
            Join our free live introduction session and experience the Cambridge Veritas teaching methodology before you commit.
          </p>
          <Link href="/introduction-class/voice-and-accent"
            className="inline-flex items-center gap-1.5 text-sm font-bold hover:underline"
            style={{ color: '#4A1429' }}>
            Register for Free Live Class <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}