// import React from "react";

// /**
//  * ThaiConsonantGrid – a visual table of Thai consonants modelled after the
//  * traditional Sanskrit‑style chart.  Each cell shows the Thai glyph and its
//  * IPA.  Rows are places of articulation, columns are manners.  Colours follow
//  * the pedagogical convention from the reference screenshot.
//  */
// export default function ThaiConsonantGrid() {
//   /** Column headers in display order */
//   const cols = [
//     "stopped",
//     "aspirated",
//     "voiced",
//     "voiced‑aspirated",
//     "nasal",
//     "semiVowel",
//     "sibilant",
//     "H‑aspirate",
//     "throatBase",
//     "others",
//   ] as const;

//   /** Row headers in display order */
//   const rows = [
//     "Deep Throat",
//     "guttural",
//     "palatal",
//     "cerebral",
//     "dental",
//     "labial",
//   ] as const;
//   type ArticulationPoint =
//     | "bilabial"
//     | "labiodental"
//     | "dental"
//     | "alveolar"
//     | "postalveolar"
//     | "retroflex"
//     | "palatal"
//     | "velar"
//     | "uvular"
//     | "pharyngeal"
//     | "glottal";
//   type ArticulationMode =
//     | "plosive"
//     | "nasal"
//     | "trill"
//     | "flap"
//     | "fricative"
//     | "affricate"
//     | "lateral fricative"
//     | "approximant"
//     | "lateral approximant";
//   type Voicing = "unvoiced" | "voiced" | "aspirated" | "voiced aspirated";
//   type VowelHeight = "high" | "close-mid" | "open-mid" | "open";
//   type VowelFront = "front" | "central" | "back";
//   type VowelRound = "rounded" | "unrounded";

//   /**
//    * Minimal description for each consonant we want to render.  Position is
//    * given by its (rowIdx, colIdx).  The colour is a Tailwind background class
//    * so you can tweak the palette in one place.
//    */
//   interface Cell {
//     row: number; // 0‑based index into rows
//     col: number; // 0‑based index into cols
//     glyph: string;
//     ipa: string;
//     colour: string; // Tailwind bg‑* class
//     highlight?: boolean; // optional neon border
//     class: "high" | "mid" | "low";
//   }

//   const cells: Cell[] = [
//     // ───────────────────── guttural row (index 1) ──────────────────────
//     {
//       row: 1,
//       col: 0,
//       glyph: "ก",
//       class: "high",
//       ipa: "/k/",
//       colour: "bg-sky-500",
//     },
//     {
//       row: 1,
//       col: 1,
//       glyph: "ข",
//       class: "high",
//       ipa: "/kʰ/",
//       colour: "bg-sky-500",
//     },
//     {
//       row: 1,
//       col: 1,
//       glyph: "ฃ",
//       class: "high",
//       ipa: "/kʰ/",
//       colour: "bg-sky-500",
//     },
//     {
//       row: 1,
//       col: 2,
//       glyph: "ค",
//       class: "high",
//       ipa: "/kʰ/",
//       colour: "bg-sky-500",
//     },
//     {
//       row: 1,
//       col: 2,
//       glyph: "ฅ",
//       class: "high",
//       ipa: "/kʰ/",
//       colour: "bg-sky-500",
//     },
//     {
//       row: 1,
//       col: 2,
//       glyph: "ฆ",
//       class: "high",
//       ipa: "/kʰ/",
//       colour: "bg-sky-500",
//     },
//     {
//       row: 1,
//       col: 4,
//       glyph: "ง",
//       ipa: "/ŋ/",
//       colour: "bg-sky-500",
//       highlight: true,
//     },

//     // ───────────────────── palatal row (index 2) ───────────────────────
//     { row: 2, col: 0, glyph: "จ", ipa: "/tɕ/", colour: "bg-pink-500" },
//     { row: 2, col: 1, glyph: "ฉ", ipa: "/tɕʰ/", colour: "bg-pink-500" },
//     { row: 2, col: 2, glyph: "ช", ipa: "/tɕʰ/", colour: "bg-pink-500" },
//     { row: 2, col: 2, glyph: "ซ", ipa: "/s/", colour: "bg-pink-500" },
//     { row: 2, col: 3, glyph: "ฌ", ipa: "/tɕʰ/", colour: "bg-pink-500" },
//     { row: 2, col: 5, glyph: "ญ", ipa: "/j/", colour: "bg-pink-500" },

//     // ───────────────────── cerebral row (index 3) ──────────────────────
//     { row: 3, col: 0, glyph: "ฎ", ipa: "/d/", colour: "bg-emerald-700" },
//     { row: 3, col: 0, glyph: "ฐ", ipa: "/t/", colour: "bg-emerald-700" },
//     { row: 3, col: 1, glyph: "ฏ", ipa: "/tʰ/", colour: "bg-emerald-700" },
//     {
//       row: 3,
//       col: 4,
//       glyph: "ฑ",
//       ipa: "/tʰ or d/",
//       colour: "bg-emerald-700",
//       highlight: true,
//     },
//     { row: 3, col: 3, glyph: "ฒ", ipa: "/tʰ/", colour: "bg-emerald-700" },
//     { row: 3, col: 4, glyph: "ณ", ipa: "/n/", colour: "bg-emerald-700" },
//     { row: 3, col: 5, glyph: "ศ", ipa: "/s/", colour: "bg-emerald-700" },
//     { row: 3, col: 5, glyph: "ษ", ipa: "/s/", colour: "bg-emerald-700" },

//     // ───────────────────── dental row (index 4) ────────────────────────
//     { row: 4, col: 0, glyph: "ต", ipa: "/d/", colour: "bg-emerald-600" },
//     { row: 4, col: 0, glyph: "ถ", ipa: "/t/", colour: "bg-emerald-600" },
//     { row: 4, col: 1, glyph: "ท", ipa: "/tʰ/", colour: "bg-emerald-600" },
//     { row: 4, col: 2, glyph: "ธ", ipa: "/tʰ/", colour: "bg-emerald-600" },
//     { row: 4, col: 4, glyph: "น", ipa: "/n/", colour: "bg-emerald-600" },
//     { row: 4, col: 6, glyph: "ส", ipa: "/s/", colour: "bg-emerald-600" },

//     // ───────────────────── labial row (index 5) ────────────────────────
//     { row: 5, col: 0, glyph: "บ", ipa: "/b/", colour: "bg-orange-500" },
//     { row: 5, col: 0, glyph: "ป", ipa: "/p/", colour: "bg-orange-500" },
//     { row: 5, col: 1, glyph: "ผ", ipa: "/pʰ/", colour: "bg-orange-500" },
//     { row: 5, col: 2, glyph: "พ", ipa: "/pʰ/", colour: "bg-orange-500" },
//     { row: 5, col: 2, glyph: "ฟ", ipa: "/f/", colour: "bg-orange-500" },
//     { row: 5, col: 3, glyph: "ภ", ipa: "/pʰ/", colour: "bg-orange-500" },
//     { row: 5, col: 4, glyph: "ม", ipa: "/m/", colour: "bg-orange-500" },
//     {
//       row: 5,
//       col: 9,
//       glyph: "ฟฬ",
//       ipa: "/l/",
//       colour: "bg-emerald-600",
//       highlight: true,
//     },

//     // ───────────────────── extra column (index^?) – throat + others ─────
//     { row: 1, col: 7, glyph: "ห", ipa: "/h/", colour: "bg-gray-400" },
//     { row: 1, col: 8, glyph: "อ", ipa: "/ʔ/", colour: "bg-gray-400" },
//   ];

//   return (
//     <div className="overflow-x-auto p-4">
//       {/* Column header */}
//       <div
//         className="grid"
//         style={{
//           gridTemplateColumns: `auto repeat(${cols.length}, minmax(4rem, 1fr))`,
//         }}
//       >
//         {/* top‑left empty cell */}
//         <div />
//         {cols.map((c) => (
//           <div
//             key={c}
//             className="bg-neutral-800 text-amber-300 text-center uppercase py-2 text-sm font-semibold border border-neutral-700"
//           >
//             {c}
//           </div>
//         ))}

//         {/* rows */}
//         {rows.map((rowLabel, ri) => (
//           <React.Fragment key={rowLabel}>
//             {/* row header */}
//             <div className="bg-neutral-900 text-amber-300 flex items-center justify-center px-2 py-1 text-xs font-bold whitespace-nowrap border border-neutral-700">
//               {rowLabel}
//             </div>
//             {/* cells within the row */}
//             {cols.map((_, ci) => {
//               // We may have multiple consonants per slot; gather them.
//               const here = cells.filter((c) => c.row === ri && c.col === ci);
//               if (here.length === 0)
//                 return <div key={ci} className="border border-neutral-700" />;

//               return (
//                 <div
//                   key={ci}
//                   className={[
//                     "border border-neutral-700 rounded-md flex flex-col items-center justify-center gap-1 p-1 text-white",
//                     here[0].colour,
//                     here.some((c) => c.highlight)
//                       ? "ring-2 ring-green-400"
//                       : "",
//                   ].join(" ")}
//                 >
//                   {here.map((c, i) => (
//                     <span key={i} className="text-sm leading-tight text-center">
//                       <span className="block text-lg font-semibold">
//                         {c.glyph}
//                       </span>
//                       <span className="block text-xs">{c.ipa}</span>
//                     </span>
//                   ))}
//                 </div>
//               );
//             })}
//           </React.Fragment>
//         ))}
//       </div>
//     </div>
//   );
// }