'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 { ACCENT_ENHANCER_FAQS } from './accentEnhancerSeoData';
import {
  Mic,
  Volume2,
  ArrowRight,
  Star,
  Sparkles,
  GraduationCap,
  Play,
  CheckCircle2,
  Zap,
  BarChart3,
  Award,
  Infinity,
  BookOpen,
  Ear,
  Languages,
  Repeat2,
  School,
  Waves,
  ShieldCheck,
} 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
        type="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`}
        aria-label={`Play the /${symbol}/ sound as in ${word}`}
      >
        <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
        type="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}"`}
        aria-label={`Play the example word ${word} for the /${symbol}/ sound`}
      >
        <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({ workspaceOnly = false }) {
  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 (
    <>
      {!workspaceOnly && <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">

        {!workspaceOnly && (
        <>
        <nav aria-label="Breadcrumb" className="mx-auto mb-6 flex max-w-5xl items-center gap-2 px-1 text-xs font-semibold" style={{ color: '#8B6B7A' }}>
          <Link href="/" className="transition-colors hover:text-[#4A1429]">Home</Link>
          <span aria-hidden="true">/</span>
          <Link href="/tools" className="transition-colors hover:text-[#4A1429]">Tools</Link>
          <span aria-hidden="true">/</span>
          <span style={{ color: '#4A1429' }}>Interactive Phonemic Chart</span>
        </nav>

        {/* 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' }}>
              Free · Interactive · British English Audio · 44 Sounds
            </span>
          </div>
          <h1 className="max-w-4xl text-2xl sm:text-4xl font-black mb-3 leading-tight" style={{ color: '#4A1429' }}>
            Interactive Phonemic Chart: <span style={{ color: '#D4B038' }}>44 English Sounds with Audio</span>
          </h1>
          <p className="text-sm leading-7 max-w-3xl" style={{ color: '#6B4455' }}>
            Use this free interactive phonemic chart to explore the 44 sounds commonly taught in British English pronunciation. Tap any IPA symbol to hear the individual sound, or choose its example word to hear the phoneme in context. Practise the 12 monophthongs, 8 diphthongs and 24 consonants at your own pace.
          </p>
          <Link
            href="/tools-dashboard/accent-enhancer"
            className="mt-7 inline-flex min-h-12 items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-black text-white transition-opacity hover:opacity-90"
            style={{ background: '#4A1429' }}
          >
            Open the phonemic chart <ArrowRight className="h-4 w-4" aria-hidden="true" />
          </Link>
        </motion.div>
        </>
        )}

        {workspaceOnly && (
        <>
        {/* 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>

            </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>
        {!workspaceOnly && <SeoContent />}
      </div>
      {!workspaceOnly && <CVFooter />}
    </>
  );
}

const practiceSteps = [
  ['1', 'Listen to the symbol', 'Tap an IPA symbol to hear the target sound in isolation.'],
  ['2', 'Hear the example word', 'Play the word beneath it to notice the sound in a natural context.'],
  ['3', 'Repeat carefully', 'Copy the sound first, then repeat the complete word without rushing.'],
  ['4', 'Compare a contrast', 'Move between similar sounds such as /iː/ and /ɪ/ or /v/ and /w/.'],
  ['5', 'Record yourself', 'Replay your own voice and compare it with the reference audio.'],
  ['6', 'Use connected speech', 'Move from sounds to words, phrases, sentences and spontaneous speaking.'],
];

const soundContrasts = [
  ['/iː/ vs /ɪ/', 'sheep / ship', 'Compare vowel length and tongue position.'],
  ['/æ/ vs /ʌ/', 'cap / cup', 'Notice the change in jaw opening and centrality.'],
  ['/θ/ vs /ð/', 'thought / those', 'Both use the tongue near the teeth; voicing creates the contrast.'],
  ['/v/ vs /w/', 'vest / west', 'Compare lip-and-teeth contact with rounded lips.'],
  ['/s/ vs /z/', 'sip / zip', 'The mouth position is similar, but /z/ uses vocal-fold vibration.'],
  ['/tʃ/ vs /dʒ/', 'chip / jam', 'Compare the voiceless and voiced affricates.'],
];

const teacherUses = [
  'Model a new sound before learners repeat a word.',
  'Contrast minimal pairs during listening and speaking practice.',
  'Correct pronunciation without relying on inconsistent English spelling.',
  'Teach learners how to read dictionary transcriptions independently.',
  'Demonstrate voiced and voiceless consonant pairs.',
  'Build short drilling sequences from sound to sentence level.',
  'Add phonemic symbols when presenting new vocabulary.',
  'Encourage learner autonomy between lessons.',
];

function SeoContent() {
  return (
    <div className="border-t" style={{ borderColor: '#E5DDD5' }}>
      <section className="bg-white">
        <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-black uppercase tracking-[0.2em]" style={{ color: '#9A7417' }}>Pronunciation practice</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight sm:text-4xl" style={{ color: '#4A1429' }}>How to use the interactive phonemic chart</h2>
            <p className="mt-4 text-sm leading-7 sm:text-base" style={{ color: '#6B4455' }}>
              Treat the chart as a listening-and-speaking tool, not a list to memorise. Work on one small group of sounds, listen closely and move gradually from controlled repetition into real communication.
            </p>
          </div>
          <ol className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {practiceSteps.map(([number, title, text]) => (
              <li key={number} className="rounded-2xl border bg-[#FAF5F0] p-6" style={{ borderColor: '#E5DDD5' }}>
                <span className="flex h-9 w-9 items-center justify-center rounded-full text-xs font-black text-white" style={{ background: '#4A1429' }}>{number}</span>
                <h3 className="mt-5 text-base font-black" style={{ color: '#4A1429' }}>{title}</h3>
                <p className="mt-2 text-sm leading-6" style={{ color: '#6B4455' }}>{text}</p>
              </li>
            ))}
          </ol>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <Link href="/tools/speech-analyser" className="inline-flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-extrabold text-white transition-opacity hover:opacity-90" style={{ background: '#4A1429' }}>
              Record and analyse your speech <ArrowRight className="h-4 w-4" />
            </Link>
            <Link href="/voice-and-accent-level-test" className="inline-flex items-center gap-2 rounded-xl border bg-white px-5 py-3 text-sm font-extrabold transition-colors hover:bg-[#FAF5F0]" style={{ borderColor: '#4A1429', color: '#4A1429' }}>
              Check your pronunciation level
            </Link>
          </div>
        </div>
      </section>

      <section className="bg-[#FAF5F0]">
        <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="grid gap-8 lg:grid-cols-[1.05fr_.95fr] lg:items-start">
            <div>
              <div className="flex h-11 w-11 items-center justify-center rounded-xl" style={{ background: 'rgba(212,176,56,0.16)', color: '#4A1429' }}><Languages className="h-5 w-5" /></div>
              <h2 className="mt-5 text-3xl font-black tracking-tight" style={{ color: '#4A1429' }}>What is a phonemic chart?</h2>
              <div className="mt-5 space-y-4 text-sm leading-7 sm:text-base" style={{ color: '#6B4455' }}>
                <p>
                  A <strong style={{ color: '#4A1429' }}>phoneme</strong> is a contrastive speech sound: changing it can change the meaning of a word. A phonemic chart organises these sounds visually and represents them with symbols, many of which come from the International Phonetic Alphabet (IPA).
                </p>
                <p>
                  This matters because English spelling does not map neatly onto pronunciation. The same spelling can represent different sounds, and the same sound can appear with different spellings. Phonemic transcription gives learners and teachers a more reliable way to discuss how a word is pronounced.
                </p>
                <p>
                  Dictionaries commonly place phonemic transcriptions between slashes, such as <strong style={{ color: '#4A1429' }}>/ʃɪp/</strong>. Learning to recognise common English IPA symbols can therefore support vocabulary, listening and independent pronunciation practice.
                </p>
              </div>
            </div>
            <aside className="rounded-3xl border bg-white p-7 shadow-sm" style={{ borderColor: '#E5DDD5' }}>
              <p className="text-xs font-black uppercase tracking-[0.18em]" style={{ color: '#9A7417' }}>The traditional teaching model</p>
              <div className="mt-6 grid grid-cols-3 gap-3 text-center">
                {[
                  ['44', 'English sounds'],
                  ['20', 'Vowel sounds'],
                  ['24', 'Consonants'],
                ].map(([value, label]) => (
                  <div key={label} className="rounded-2xl bg-[#F5EDE8] px-2 py-5">
                    <div className="text-3xl font-black" style={{ color: '#4A1429' }}>{value}</div>
                    <div className="mt-1 text-[10px] font-bold uppercase tracking-wide" style={{ color: '#8B6B7A' }}>{label}</div>
                  </div>
                ))}
              </div>
              <div className="mt-5 flex items-start gap-3 rounded-2xl bg-[#FFF8E6] p-4" style={{ border: '1px solid #F0D070' }}>
                <ShieldCheck className="mt-0.5 h-5 w-5 shrink-0" style={{ color: '#9A7417' }} />
                <p className="text-xs leading-5" style={{ color: '#7D641C' }}>
                  The familiar “44 sounds” model is commonly used for teaching British English pronunciation. Sound inventories and realisations vary across accents, regions and speakers.
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <section className="bg-white">
        <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-black uppercase tracking-[0.2em]" style={{ color: '#9A7417' }}>Understand the chart</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight sm:text-4xl" style={{ color: '#4A1429' }}>The 44 sounds of English</h2>
          </div>
          <div className="mt-10 grid gap-5 lg:grid-cols-2">
            <article className="rounded-3xl border p-7 sm:p-8" style={{ borderColor: '#D9E0F4', background: '#F6F8FE' }}>
              <Ear className="h-7 w-7" style={{ color: '#1E3FA0' }} />
              <h3 className="mt-5 text-2xl font-black" style={{ color: '#4A1429' }}>English vowel sounds</h3>
              <p className="mt-4 text-sm leading-7" style={{ color: '#6B4455' }}>
                Vowels are produced without a complete obstruction of the airflow. The traditional British English phonemic chart presents <strong>12 monophthongs</strong> and <strong>8 diphthongs</strong>.
              </p>
              <div className="mt-6 space-y-4">
                <div className="rounded-2xl bg-white p-5">
                  <h4 className="font-black" style={{ color: '#4A1429' }}>Monophthongs</h4>
                  <p className="mt-2 text-sm leading-6" style={{ color: '#6B4455' }}>The vowel quality stays relatively steady, as in <strong>sleep</strong> /iː/, <strong>slip</strong> /ɪ/, <strong>food</strong> /uː/ and <strong>cup</strong> /ʌ/.</p>
                </div>
                <div className="rounded-2xl bg-white p-5">
                  <h4 className="font-black" style={{ color: '#4A1429' }}>Diphthongs</h4>
                  <p className="mt-2 text-sm leading-6" style={{ color: '#6B4455' }}>The tongue and mouth move from one vowel quality towards another, as in <strong>game</strong> /eɪ/, <strong>toy</strong> /ɔɪ/, <strong>mine</strong> /aɪ/ and <strong>how</strong> /aʊ/.</p>
                </div>
              </div>
            </article>
            <article className="rounded-3xl border p-7 sm:p-8" style={{ borderColor: '#DEDCE5', background: '#F8F7FA' }}>
              <Waves className="h-7 w-7" style={{ color: '#4A1429' }} />
              <h3 className="mt-5 text-2xl font-black" style={{ color: '#4A1429' }}>English consonant sounds</h3>
              <p className="mt-4 text-sm leading-7" style={{ color: '#6B4455' }}>
                Consonants are formed by narrowing or blocking the airflow somewhere in the vocal tract. Teachers often describe them through <strong>place of articulation</strong>, <strong>manner of articulation</strong> and whether the sound is voiced.
              </p>
              <div className="mt-6 rounded-2xl bg-white p-5">
                <h4 className="font-black" style={{ color: '#4A1429' }}>Voiced and voiceless pairs</h4>
                <p className="mt-2 text-sm leading-6" style={{ color: '#6B4455' }}>
                  Sounds such as /p/ and /b/, /f/ and /v/, /θ/ and /ð/, or /s/ and /z/ use similar mouth positions. The main contrast is vocal-fold vibration. Place two fingers lightly on your throat to feel the vibration in the voiced sound.
                </p>
              </div>
              <div className="mt-4 rounded-2xl bg-white p-5">
                <h4 className="font-black" style={{ color: '#4A1429' }}>From symbol to speech</h4>
                <p className="mt-2 text-sm leading-6" style={{ color: '#6B4455' }}>Practise the consonant alone, then at the beginning, middle and end of words before moving into phrases and sentences.</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section className="bg-[#FAF5F0]">
        <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="grid gap-10 lg:grid-cols-[.72fr_1.28fr] lg:items-start">
            <div>
              <div className="flex h-11 w-11 items-center justify-center rounded-xl" style={{ background: '#4A1429', color: '#D4B038' }}><Repeat2 className="h-5 w-5" /></div>
              <h2 className="mt-5 text-3xl font-black tracking-tight" style={{ color: '#4A1429' }}>Difficult English sound contrasts</h2>
              <p className="mt-4 text-sm leading-7 sm:text-base" style={{ color: '#6B4455' }}>
                Minimal pairs differ by one sound. Comparing them helps you notice whether a contrast changes meaning and gives your practice a precise target.
              </p>
            </div>
            <div className="grid gap-4 sm:grid-cols-2">
              {soundContrasts.map(([sounds, examples, guidance]) => (
                <article key={sounds} className="rounded-2xl border bg-white p-5" style={{ borderColor: '#E5DDD5' }}>
                  <p className="text-lg font-black" style={{ color: '#4A1429' }}>{sounds}</p>
                  <p className="mt-1 text-sm font-bold" style={{ color: '#9A7417' }}>{examples}</p>
                  <p className="mt-3 text-xs leading-5" style={{ color: '#6B4455' }}>{guidance}</p>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="text-white" style={{ background: '#4A1429' }}>
        <div className="mx-auto grid max-w-6xl gap-10 px-5 py-16 sm:px-8 sm:py-20 lg:grid-cols-2 lg:items-center">
          <div>
            <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/10 text-[#D4B038]"><School className="h-5 w-5" /></div>
            <p className="mt-6 text-xs font-black uppercase tracking-[0.2em] text-[#D4B038]">For English, ESL and TESOL teachers</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight">How teachers can use the phonemic chart</h2>
            <p className="mt-4 text-sm leading-7 text-white/70 sm:text-base">
              A phonemic chart gives teachers and learners a shared visual language for pronunciation. It works best when symbols are linked to listening, mouth movement, meaningful vocabulary and communicative practice.
            </p>
            <div className="mt-7 flex flex-wrap gap-3">
              <Link href="/masterclass/cambridge-veritas-voice-and-accent-trainer-certification" className="inline-flex items-center gap-2 rounded-xl bg-[#D4B038] px-5 py-3 text-sm font-extrabold text-[#3D0F22] transition-opacity hover:opacity-90">Explore pronunciation teacher training <ArrowRight className="h-4 w-4" /></Link>
              <Link href="/certifications/cambridge-veritas-certificate-in-TESOL" className="inline-flex items-center gap-2 rounded-xl border border-white/25 bg-white/5 px-5 py-3 text-sm font-extrabold text-white transition-colors hover:bg-white/10">Explore TESOL training</Link>
            </div>
          </div>
          <ul className="grid gap-3 sm:grid-cols-2">
            {teacherUses.map((item) => (
              <li key={item} className="flex items-start gap-3 rounded-xl border border-white/10 bg-white/[0.05] p-4 text-sm leading-6 text-white/80">
                <CheckCircle2 className="mt-1 h-4 w-4 shrink-0 text-[#D4B038]" />
                {item}
              </li>
            ))}
          </ul>
        </div>
      </section>

      <section className="bg-white">
        <div className="mx-auto max-w-6xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="mx-auto max-w-3xl text-center">
            <p className="text-xs font-black uppercase tracking-[0.2em]" style={{ color: '#9A7417' }}>Beyond individual sounds</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight sm:text-4xl" style={{ color: '#4A1429' }}>Move from phonemes to natural speech</h2>
            <p className="mt-4 text-sm leading-7 sm:text-base" style={{ color: '#6B4455' }}>
              Clear pronunciation depends on more than individual vowels and consonants. Word stress, sentence stress, rhythm, intonation, linking, weak forms and other connected-speech features all shape how easy speech is to understand. Use the chart to build accuracy, then apply each sound while speaking at phrase and sentence level.
            </p>
          </div>
          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {[
              ['Analyse your speech', 'Use the Speech Analyser for feedback on pronunciation, fluency, intonation, grammar and vocabulary.', '/tools/speech-analyser', 'Open Speech Analyser'],
              ['Build clearer pronunciation', 'Learn how structured listening, modelling, repetition and feedback can improve spoken clarity.', '/english-pronunciation-training', 'Explore pronunciation training'],
              ['Practise with a trainer', 'Move from isolated sounds into stress, rhythm, connected speech and real communication.', '/voice-and-accent-classes', 'Explore voice and accent classes'],
            ].map(([title, text, href, label]) => (
              <article key={title} className="flex min-h-64 flex-col rounded-3xl border bg-[#FAF5F0] p-7" style={{ borderColor: '#E5DDD5' }}>
                <h3 className="text-xl font-black" style={{ color: '#4A1429' }}>{title}</h3>
                <p className="mt-3 text-sm leading-6" style={{ color: '#6B4455' }}>{text}</p>
                <Link href={href} className="mt-auto inline-flex items-center gap-2 pt-6 text-sm font-extrabold hover:underline" style={{ color: '#7C1728' }}>{label} <ArrowRight className="h-4 w-4" /></Link>
              </article>
            ))}
          </div>
          <div className="mt-8"><CTABanner /></div>
        </div>
      </section>

      <section className="bg-[#FAF5F0]">
        <div className="mx-auto max-w-4xl px-5 py-16 sm:px-8 sm:py-20">
          <div className="text-center">
            <p className="text-xs font-black uppercase tracking-[0.2em]" style={{ color: '#9A7417' }}>Frequently asked questions</p>
            <h2 className="mt-3 text-3xl font-black tracking-tight sm:text-4xl" style={{ color: '#4A1429' }}>English phonemic chart FAQs</h2>
          </div>
          <div className="mt-10 space-y-3">
            {ACCENT_ENHANCER_FAQS.map(({ question, answer }) => (
              <details key={question} className="group rounded-2xl border bg-white open:shadow-md" style={{ borderColor: '#E5DDD5' }}>
                <summary className="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 text-sm font-black marker:content-none sm:text-base" style={{ color: '#4A1429' }}>
                  {question}
                  <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[#F5EDE8] text-lg transition-transform group-open:rotate-45" aria-hidden="true">+</span>
                </summary>
                <p className="px-6 pb-6 text-sm leading-7" style={{ color: '#6B4455' }}>{answer}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section className="border-t bg-white" style={{ borderColor: '#E5DDD5' }}>
        <div className="mx-auto max-w-6xl px-5 py-10 sm:px-8">
          <div className="flex flex-col justify-between gap-5 rounded-2xl bg-[#F5EDE8] p-6 sm:flex-row sm:items-center">
            <div className="flex items-start gap-4">
              <BookOpen className="mt-0.5 h-5 w-5 shrink-0" style={{ color: '#8B1C1C' }} />
              <div>
                <h2 className="text-sm font-black" style={{ color: '#4A1429' }}>About this pronunciation reference</h2>
                <p className="mt-1 max-w-3xl text-xs leading-5" style={{ color: '#6B4455' }}>
                  This chart uses a British-English reference model for teaching and was last reviewed on 7 October 2026. It is a learning aid, not a claim that every English accent has an identical sound inventory. Learn more about Cambridge Veritas standards in our editorial policy.
                </p>
              </div>
            </div>
            <div className="flex shrink-0 flex-wrap gap-3 text-xs font-bold">
              <Link href="/editorial-policy" className="hover:underline" style={{ color: '#7C1728' }}>Editorial policy</Link>
              <a href="https://www.internationalphoneticassociation.org/" target="_blank" rel="noopener noreferrer" className="hover:underline" style={{ color: '#7C1728' }}>International Phonetic Association</a>
              <Link href="/blog/pronunciation" className="hover:underline" style={{ color: '#7C1728' }}>Pronunciation guides</Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// -- 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 move from sounds to clearer speech?
      </h2>
      <p className="text-white/60 text-sm max-w-lg mx-auto mb-7 leading-relaxed">
        Continue with structured pronunciation practice, connected speech and guidance for clearer everyday and professional communication.
      </p>

      <div className="flex flex-col sm:flex-row gap-3 justify-center">
        <Link href="/voice-and-accent-classes"
          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" />
          Explore Voice & Accent Classes
          <ArrowRight className="w-4 h-4" />
        </Link>
        <Link href="/tools/speech-analyser"
          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' }}>
          <Mic className="w-4 h-4" />
          Analyse Your Speech
        </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>
  );
}
