// Posture & Movement Assessment — SVG body diagrams + corrective protocols
// Mounts to #posture-root

(function() {
  const { useState, useEffect } = React;

  // Language helpers (re-renders subscribers on lang change)
  function useLang() {
    const [lang, setLang] = useState(window.PilatesI18n?.getLang() || "en");
    useEffect(() => {
      if (!window.PilatesI18n) return;
      return window.PilatesI18n.subscribe(setLang);
    }, []);
    return lang;
  }
  function tt(key) { return window.PilatesI18n?.t(key) || key; }
  function pick(obj, lang) { return obj && typeof obj === "object" && obj[lang] !== undefined ? obj[lang] : obj?.en ?? obj; }

  /* ════════════════════════════════════════════════════
     POSTURE TYPES DATA
     ════════════════════════════════════════════════════ */
  const POSTURES = [
    {
      id: "ideal",
      name: { en: "Ideal", th: "ท่าทางในอุดมคติ" },
      tag: { en: "neutral", th: "เป็นกลาง" },
      chars: {
        en: "Head, cervical, thoracic, lumbar, and pelvis aligned in a natural neutral position. The plumb line passes through the ear, shoulder, greater trochanter, knee, and ankle. Joints and muscles function with maximum efficiency and minimum strain.",
        th: "หัว คอ ลำตัว เอว และเชิงกรานเรียงเป็นแนวตรงตามธรรมชาติ เส้นดิ่งลากผ่านหู ไหล่ ข้อสะโพก เข่า และข้อเท้าเป๊ะๆ คือตอนที่ข้อต่อและกล้ามเนื้อทำงานได้เต็มที่ โดยไม่ต้องออกแรงฝืนให้เหนื่อยฟรีนั่นเอง",
      },
      strengthen: null,
      stretch: null,
      protocol: {
        en: ["Full Pilates repertoire", "Core stability work", "Full-body mobility", "Balanced strength · all planes"],
        th: ["ฝึกพิลาทิสได้ครบทุกท่าเลย", "งานเสริมความมั่นคงแกนกลาง", "ความคล่องตัวทั้งร่างกาย", "ความแข็งแรงสมดุล · ทุกระนาบ"],
      },
    },
    {
      id: "kypholordosis",
      name: { en: "Kypho-Lordosis", th: "หลังค่อมบวกพุงยื่น" },
      tag: { en: "anterior pelvic tilt", th: "เชิงกรานเอียงหน้า" },
      chars: {
        en: "Forward head, exaggerated thoracic kyphosis (rounded upper back), hyper-lordosis (excessive lower back arch), and anterior pelvic tilt. The anterior chain is shortened; the posterior chain and deep core are lengthened and weakened.",
        th: "คืออาการที่หัวยื่นไปข้างหน้า หลังส่วนบนโก่ง และหลังส่วนล่างแอ่นเกินไปจนกล้ามเนื้อล้าได้ง่ายๆ นะ เชิงกรานเอียงไปข้างหน้าด้วย กล้ามเนื้อด้านหน้าหดสั้น ส่วนกล้ามเนื้อด้านหลังและแกนกลางลึกถูกยืดยาวจนอ่อนแรงเลยล่ะ",
      },
      strengthen: {
        en: ["Cervical flexors", "Mid · lower trapezius", "Rhomboids", "Serratus anterior", "Pelvic floor", "Transversus abdominis", "Obliques", "Hamstrings (eccentric)"],
        th: ["กล้ามเนื้องอคอ", "Trapezius กลางและล่าง", "Rhomboids", "Serratus anterior", "อุ้งเชิงกราน", "Transversus abdominis", "Obliques", "Hamstrings (แบบยืดยาว)"],
      },
      stretch: {
        en: ["Upper trapezius", "Pectoralis major · minor", "Cervical extensors", "Iliopsoas (hip flexors)"],
        th: ["Trapezius บน", "Pectoralis major · minor", "กล้ามเนื้อเหยียดคอ", "Iliopsoas (กล้ามเนื้องอสะโพก)"],
      },
      protocol: {
        en: ["Swan / Swan Dive", "Pulling Straps", "Chest Lift series", "Pelvic Curl", "Single-leg stretch", "Hip flexor mobilizers"],
        th: ["Swan / Swan Dive", "Pulling Straps", "ชุด Chest Lift", "Pelvic Curl", "Single-leg stretch", "ท่ายืดสะโพก"],
      },
    },
    {
      id: "flatback",
      name: { en: "Flat Back", th: "หลังแบนเกินไป" },
      tag: { en: "posterior pelvic tilt", th: "เชิงกรานเอียงหลัง" },
      chars: {
        en: "Forward head, upper thoracic hyper-kyphosis, and a flattened lower thoracic / lumbar spine (loss of natural lordotic curve). Posterior pelvic tilt with extended hip and knee joints. The lumbar spine needs to regain segmental mobility.",
        th: "คือตอนที่หัวยื่นไปข้างหน้า หลังส่วนบนค่อม และหลังส่วนล่างขาดความโค้งตามธรรมชาติ ทำให้หลังเราแข็งทื่อและขยับลำบากค่ะ เชิงกรานเอียงหลัง สะโพกและเข่าเหยียดตึง — กระดูกสันหลังเอวต้องได้กลับมาขยับทีละข้อนะ",
      },
      strengthen: {
        en: ["Iliopsoas (hip flexors)", "Cervical flexors", "Thoracic extensors", "Mid · lower trapezius"],
        th: ["Iliopsoas (งอสะโพก)", "กล้ามเนื้องอคอ", "กล้ามเนื้อเหยียดหลังบน", "Trapezius กลางและล่าง"],
      },
      stretch: {
        en: ["Hamstrings", "Rectus abdominis", "Obliques"],
        th: ["Hamstrings", "Rectus abdominis", "Obliques"],
      },
      protocol: {
        en: ["Spine Twist", "Cat–Cow articulation", "Leg Pull Front", "Extension series", "Saw", "Hip flexor opener"],
        th: ["Spine Twist", "Cat–Cow articulation", "Leg Pull Front", "ชุดเหยียดหลัง", "Saw", "ท่าเปิดสะโพก"],
      },
    },
    {
      id: "swayback",
      name: { en: "Sway Back", th: "หลังแอ่นสะโพกยื่น" },
      tag: { en: "pelvis forward shift", th: "เชิงกรานเลื่อนไปหน้า" },
      chars: {
        en: "Forward head, long thoracic kyphosis, decreased lumbar lordosis, posterior pelvic tilt with the entire pelvis shifted forward of the plumb line, hyper-extended knees. Hamstrings are extremely short-and-tight; the deep core and upper back are inhibited.",
        th: "เป็นอาการที่หัวยื่นไปข้างหน้า หลังส่วนบนค่อมยาวลงไปถึงเอว เอวแบน เชิงกรานโย้ไปข้างหน้า เข่าเหยียดแอ่น แถมกล้ามเนื้อต้นขาด้านหลัง (Hamstrings) ยังตึงเปรี๊ยะเลยล่ะ ส่วนแกนกลางลึกและหลังบนกลับไม่ค่อยทำงาน",
      },
      strengthen: {
        en: ["Mid · lower trapezius", "Rhomboids", "Cervical flexors", "Gluteus medius", "External obliques", "Pelvic floor"],
        th: ["Trapezius กลางและล่าง", "Rhomboids", "กล้ามเนื้องอคอ", "Gluteus medius", "External obliques", "อุ้งเชิงกราน"],
      },
      stretch: {
        en: ["Hamstrings", "Upper trapezius", "Pectorals", "Internal obliques"],
        th: ["Hamstrings", "Trapezius บน", "Pectorals", "Internal obliques"],
      },
      protocol: {
        en: ["Side-lying Leg series", "Wall Roll Down", "Rowing", "Scapular isolation", "Hamstring stretch", "Standing alignment work"],
        th: ["ชุด Side-lying Leg", "Wall Roll Down", "Rowing", "การแยกสะบัก", "ท่ายืด Hamstring", "การฝึกท่ายืน"],
      },
    },
  ];

  /* ════════════════════════════════════════════════════
     POSTURE FIGURES — side profile, viewBox 0 0 90 280
     ════════════════════════════════════════════════════ */

  function FigureIdeal() {
    return (
      <svg viewBox="0 0 90 280" className="psv">
        <line x1="45" y1="0" x2="45" y2="278" className="svg-plumb"/>
        <ellipse cx="40" cy="16" rx="10" ry="12" className="svg-head"/>
        <path d="M38,28 L40,38" className="svg-body-line"/>
        <line x1="28" y1="38" x2="58" y2="38" className="svg-shoulder"/>
        <path d="M36,38 C31,55 30,82 31,112 C32,135 32,150 33,162" className="svg-body-line"/>
        <path d="M52,38 C57,55 57,82 56,112 C54,135 53,150 53,162" className="svg-body-line"/>
        <line x1="31" y1="162" x2="55" y2="162" className="svg-pelvis"/>
        <line x1="43" y1="162" x2="43" y2="212" className="svg-leg"/>
        <circle cx="43" cy="212" r="3.5" className="svg-knee"/>
        <line x1="43" y1="215" x2="43" y2="262" className="svg-leg"/>
        <path d="M40,262 L52,266" className="svg-foot" strokeLinecap="round"/>
        <path d="M42,38 C40,60 47,93 44,123 C42,143 42,158 43,162" className="svg-spine"/>
        <circle cx="41" cy="42" r="1.8" className="svg-spine-node"/>
        <circle cx="46" cy="91" r="1.8" className="svg-spine-node"/>
        <circle cx="43" cy="138" r="1.8" className="svg-spine-node"/>
        <circle cx="43" cy="160" r="1.8" className="svg-spine-node"/>
      </svg>
    );
  }

  function FigureKL() {
    return (
      <svg viewBox="0 0 90 280" className="psv">
        <line x1="45" y1="0" x2="45" y2="278" className="svg-plumb"/>
        <ellipse cx="28" cy="16" rx="10" ry="12" className="svg-head"/>
        <path d="M26,28 L32,42" className="svg-body-line"/>
        <line x1="18" y1="44" x2="52" y2="40" className="svg-shoulder"/>
        <path d="M28,42 C22,58 20,85 22,112 C23,133 25,148 26,164" className="svg-body-line"/>
        <path d="M44,40 C62,58 64,88 58,112 C54,133 50,150 52,164" className="svg-body-line"/>
        <path d="M24,160 L50,168" className="svg-pelvis"/>
        <path d="M35,165 L33,212" className="svg-leg"/>
        <circle cx="33" cy="212" r="3.5" className="svg-knee"/>
        <path d="M33,215 L35,262" className="svg-leg"/>
        <path d="M32,262 L44,266" className="svg-foot" strokeLinecap="round"/>
        <path d="M34,42 C27,62 60,95 54,125 C44,145 38,155 42,165" className="svg-spine"/>
        <circle cx="34" cy="46" r="1.8" className="svg-spine-node"/>
        <circle cx="59" cy="96" r="1.8" className="svg-spine-node"/>
        <circle cx="40" cy="148" r="1.8" className="svg-spine-node"/>
        <circle cx="41" cy="163" r="1.8" className="svg-spine-node"/>
      </svg>
    );
  }

  function FigureFlat() {
    return (
      <svg viewBox="0 0 90 280" className="psv">
        <line x1="45" y1="0" x2="45" y2="278" className="svg-plumb"/>
        <ellipse cx="36" cy="16" rx="10" ry="12" className="svg-head"/>
        <path d="M36,28 L38,40" className="svg-body-line"/>
        <line x1="24" y1="40" x2="58" y2="40" className="svg-shoulder"/>
        <path d="M34,40 C29,56 28,84 29,114 C30,136 31,150 31,162" className="svg-body-line"/>
        <path d="M50,40 C56,52 56,80 55,112 C54,134 52,150 52,162" className="svg-body-line"/>
        <path d="M29,166 L53,158" className="svg-pelvis"/>
        <path d="M40,162 L42,212" className="svg-leg"/>
        <circle cx="42" cy="212" r="3.5" className="svg-knee"/>
        <path d="M42,215 L40,262" className="svg-leg"/>
        <path d="M37,262 L49,266" className="svg-foot" strokeLinecap="round"/>
        <path d="M39,40 C37,62 48,90 47,120 C46,142 45,158 45,162" className="svg-spine"/>
        <circle cx="38" cy="44" r="1.8" className="svg-spine-node"/>
        <circle cx="47" cy="89" r="1.8" className="svg-spine-node"/>
        <circle cx="46" cy="138" r="1.8" className="svg-spine-node"/>
        <circle cx="45" cy="160" r="1.8" className="svg-spine-node"/>
      </svg>
    );
  }

  function FigureSway() {
    return (
      <svg viewBox="0 0 90 280" className="psv">
        <line x1="45" y1="0" x2="45" y2="278" className="svg-plumb"/>
        <ellipse cx="31" cy="16" rx="10" ry="12" className="svg-head"/>
        <path d="M29,28 L33,42" className="svg-body-line"/>
        <line x1="20" y1="42" x2="54" y2="42" className="svg-shoulder"/>
        <path d="M29,42 C24,58 22,88 25,118 C27,138 27,150 28,160" className="svg-body-line"/>
        <path d="M45,42 C57,62 58,92 54,118 C51,138 48,150 48,160" className="svg-body-line"/>
        <path d="M26,164 L50,156" className="svg-pelvis"/>
        <path d="M37,160 L40,212" className="svg-leg"/>
        <circle cx="40" cy="212" r="3.5" className="svg-knee"/>
        <path d="M40,215 L37,262" className="svg-leg"/>
        <path d="M34,262 L46,266" className="svg-foot" strokeLinecap="round"/>
        <path d="M35,42 C29,65 55,102 51,132 C48,150 43,158 38,162" className="svg-spine"/>
        <circle cx="34" cy="46" r="1.8" className="svg-spine-node"/>
        <circle cx="54" cy="100" r="1.8" className="svg-spine-node"/>
        <circle cx="46" cy="148" r="1.8" className="svg-spine-node"/>
        <circle cx="39" cy="160" r="1.8" className="svg-spine-node"/>
      </svg>
    );
  }

  const POSTURE_FIGS = { ideal: FigureIdeal, kypholordosis: FigureKL, flatback: FigureFlat, swayback: FigureSway };

  /* ════════════════════════════════════════════════════
     CROSSED SYNDROME DIAGRAMS — front view torso, viewBox 0 0 160 160
     ════════════════════════════════════════════════════ */

  function DiagramUCS() {
    return (
      <svg viewBox="0 0 160 160" className="pst-crossed-diagram">
        {/* Head */}
        <ellipse cx="80" cy="22" rx="14" ry="16" className="svg-head"/>
        {/* Neck */}
        <path d="M72,38 L72,48 M88,38 L88,48" className="svg-body-line"/>
        {/* Shoulders raised (UCS hallmark) */}
        <path d="M30,52 C24,46 18,46 18,50 L22,62" className="svg-body-line" strokeWidth="1.4"/>
        <path d="M130,52 C136,46 142,46 142,50 L138,62" className="svg-body-line" strokeWidth="1.4"/>
        {/* Torso */}
        <path d="M30,52 L40,62 L40,128 L60,140 L100,140 L120,128 L120,62 L130,52"
          fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.2"/>
        {/* Tight diagonal: upper traps ⇢ pectorals */}
        <path d="M28,46 Q80,80 132,128" className="svg-tight"/>
        <path d="M132,46 Q80,80 28,128" className="svg-weak"/>
        {/* Diagonal endpoint markers */}
        <circle cx="28" cy="46" r="4" fill="#b8341c" opacity="0.85"/>
        <circle cx="132" cy="128" r="4" fill="#b8341c" opacity="0.85"/>
        <circle cx="132" cy="46" r="4" fill="#2c5d8c" opacity="0.85"/>
        <circle cx="28" cy="128" r="4" fill="#2c5d8c" opacity="0.85"/>
        {/* Labels */}
        <text x="3" y="42" className="svg-label-tight">upper trap</text>
        <text x="98" y="138" className="svg-label-tight">pectorals</text>
        <text x="104" y="42" className="svg-label-weak">deep nf</text>
        <text x="3" y="138" className="svg-label-weak">lower trap</text>
      </svg>
    );
  }

  function DiagramLCS() {
    return (
      <svg viewBox="0 0 160 160" className="pst-crossed-diagram">
        {/* Lower torso outline (waist → mid-thigh, anterior view) */}
        <path d="M40,10 L40,60 C40,80 50,100 60,118 L100,118 C110,100 120,80 120,60 L120,10 Z"
          fill="var(--paper-2)" stroke="var(--ink)" strokeWidth="1.2"/>
        {/* Pelvic crests indication */}
        <path d="M40,30 L52,38 M120,30 L108,38" className="svg-body-line"/>
        {/* Thigh lines */}
        <path d="M62,118 L60,150" className="svg-body-line"/>
        <path d="M98,118 L100,150" className="svg-body-line"/>
        {/* Tight diagonal: thoracolumbar extensors ⇢ hip flexors */}
        <path d="M28,12 Q80,70 132,140" className="svg-tight"/>
        <path d="M132,12 Q80,70 28,140" className="svg-weak"/>
        {/* Endpoint markers */}
        <circle cx="28" cy="12" r="4" fill="#b8341c" opacity="0.85"/>
        <circle cx="132" cy="140" r="4" fill="#b8341c" opacity="0.85"/>
        <circle cx="132" cy="12" r="4" fill="#2c5d8c" opacity="0.85"/>
        <circle cx="28" cy="140" r="4" fill="#2c5d8c" opacity="0.85"/>
        {/* Labels */}
        <text x="3" y="9" className="svg-label-tight">erectors</text>
        <text x="98" y="155" className="svg-label-tight">hip flex.</text>
        <text x="98" y="9" className="svg-label-weak">abdom.</text>
        <text x="3" y="155" className="svg-label-weak">glut. max</text>
      </svg>
    );
  }

  /* ════════════════════════════════════════════════════
     POSTURE PANEL (tab 1)
     ════════════════════════════════════════════════════ */

  function PosturePanel() {
    const [active, setActive] = useState("ideal");
    const lang = useLang();
    const p = POSTURES.find(x => x.id === active);
    const Fig = POSTURE_FIGS[active];

    return (
      <div>
        <div className="pst-figure-strip">
          {POSTURES.map(po => {
            const F = POSTURE_FIGS[po.id];
            return (
              <button
                key={po.id}
                className="pst-figure-card"
                data-active={active === po.id}
                onClick={() => setActive(po.id)}
              >
                <div className="pst-figure-wrap"><F /></div>
                <div className="pst-figure-name">{pick(po.name, lang)}</div>
                <div className="pst-figure-tag">// {pick(po.tag, lang)}</div>
              </button>
            );
          })}
        </div>

        <div className="pst-detail">
          <div className="pst-detail-head">
            <div className="pst-detail-meta">{lang === "th" ? "ประเภท" : "type"} · {pick(p.tag, lang)}</div>
            <div className="pst-detail-name">{pick(p.name, lang)}</div>
            <p className="pst-detail-chars">{pick(p.chars, lang)}</p>
          </div>

          {p.strengthen ? (
            <>
              <div>
                <div className="pst-col-head">{tt("posture.col.strengthen")}</div>
                <ul className="pst-mlist strengthen">
                  {pick(p.strengthen, lang).map(m => <li key={m}>{m}</li>)}
                </ul>
              </div>
              <div>
                <div className="pst-col-head">{tt("posture.col.stretch")}</div>
                <ul className="pst-mlist stretch">
                  {pick(p.stretch, lang).map(m => <li key={m}>{m}</li>)}
                </ul>
              </div>
              <div>
                <div className="pst-col-head">{tt("posture.col.protocol")}</div>
                <ul className="pst-mlist exercises">
                  {pick(p.protocol, lang).map(e => <li key={e}>{e}</li>)}
                </ul>
              </div>
            </>
          ) : (
            <div style={{gridColumn: "1 / -1"}}>
              <div className="pst-col-head">{tt("posture.col.protocol")}</div>
              <ul className="pst-mlist exercises" style={{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(220px, 1fr))",gap:"7px 24px"}}>
                {pick(p.protocol, lang).map(e => <li key={e}>{e}</li>)}
              </ul>
            </div>
          )}
        </div>

        {/* Crossed Syndromes */}
        <div className="pst-crossed-header">
          <span className="pst-crossed-num">{lang === "th" ? "// ซินโดรมข้ามแกน" : "// crossed syndromes"}</span>
          <span className="pst-crossed-title">{lang === "th" ? <>รูปแบบ <em>ข้ามแกน</em> ของ Janda</> : <>Janda's <em>crossed</em> patterns</>}</span>
          <p className="pst-crossed-blurb">
            {lang === "th"
              ? "ความไม่สมดุลของกล้ามเนื้อที่พบบ่อยมากเลย — กล้ามเนื้อตึงในแนวทแยงนึงจะจับคู่กับกล้ามเนื้อตรงข้ามที่อ่อนแรงในแนวทแยงอีกฝั่งพอดี เกิดเป็นรูปตัว X พาดผ่านร่างกายเลยล่ะ"
              : "Predictable muscle imbalances where tight muscles on one diagonal pair with weak antagonists on the opposite diagonal — forming an X across the body."}
          </p>
        </div>

        <div className="pst-crossed-grid">
          <div className="pst-crossed-panel">
            <div className="pst-crossed-diagram-wrap"><DiagramUCS /></div>
            <div>
              <div className="pst-crossed-name">{lang === "th" ? "Upper Crossed Syndrome" : "Upper Crossed"}</div>
              <div className="pst-crossed-abbr">{lang === "th" ? "// UCS · ไหล่ห่อ · ศีรษะยื่นหน้า" : "// UCS · rounded shoulder · forward head"}</div>
              <div className="pst-crossed-row">
                <div>
                  <div className="pst-mini-head tight">{lang === "th" ? "▲ ตึง" : "▲ tight"}</div>
                  <ul className="pst-mini-list tight">
                    <li>Upper trapezius</li>
                    <li>Levator scapulae</li>
                    <li>Pectoralis major · minor</li>
                  </ul>
                </div>
                <div>
                  <div className="pst-mini-head weak">{lang === "th" ? "▽ อ่อนแรง" : "▽ weak"}</div>
                  <ul className="pst-mini-list weak">
                    <li>Lower trapezius</li>
                    <li>Serratus anterior</li>
                    <li>{lang === "th" ? "กล้ามเนื้องอคอชั้นลึก" : "Deep neck flexors"}</li>
                  </ul>
                </div>
              </div>
              <div className="pst-rx">
                <span className="pst-rx-label">{lang === "th" ? "// แนะนำ" : "// rx"}</span>
                {["Y / T / W", "Wall slides", "Rowing", "Chin tucks", "Chest opener"].map(e => (
                  <span key={e} className="pst-rx-pill">{e}</span>
                ))}
              </div>
            </div>
          </div>

          <div className="pst-crossed-panel">
            <div className="pst-crossed-diagram-wrap"><DiagramLCS /></div>
            <div>
              <div className="pst-crossed-name">{lang === "th" ? "Lower Crossed Syndrome" : "Lower Crossed"}</div>
              <div className="pst-crossed-abbr">{lang === "th" ? "// LCS · เชิงกรานเอียงหน้า · เอวแอ่น" : "// LCS · anterior tilt · arched lumbar"}</div>
              <div className="pst-crossed-row">
                <div>
                  <div className="pst-mini-head tight">{lang === "th" ? "▲ ตึง" : "▲ tight"}</div>
                  <ul className="pst-mini-list tight">
                    <li>{lang === "th" ? "Thoracolumbar extensors (เหยียดหลัง)" : "Thoracolumbar extensors"}</li>
                    <li>Iliopsoas</li>
                    <li>Rectus femoris</li>
                  </ul>
                </div>
                <div>
                  <div className="pst-mini-head weak">{lang === "th" ? "▽ อ่อนแรง" : "▽ weak"}</div>
                  <ul className="pst-mini-list weak">
                    <li>Rectus abdominis</li>
                    <li>Obliques</li>
                    <li>Gluteus maximus</li>
                  </ul>
                </div>
              </div>
              <div className="pst-rx">
                <span className="pst-rx-label">{lang === "th" ? "// แนะนำ" : "// rx"}</span>
                {["Plank", "Dead Bug", "Bridging", "Glute activation", "Hip flexor stretch"].map(e => (
                  <span key={e} className="pst-rx-pill">{e}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  /* ════════════════════════════════════════════════════
     LEG ALIGNMENT DATA + FIGURES
     ════════════════════════════════════════════════════ */

  const LEGS = [
    {
      id: "ideal",
      name: { en: "Ideal Alignment", th: "การจัดเรียงในอุดมคติ" },
      latin: { en: "neutral femur · neutral knee", th: "ต้นขาเป็นกลาง · เข่าเป็นกลาง" },
      chars: {
        en: "Femurs are parallel. Knees track over the second toe and align with the hip joint. Feet are parallel or slightly externally rotated. Bodyweight loads through the centerline of each foot.",
        th: "กระดูกต้นขาขนาน เข่าเรียงตามแนวนิ้วเท้าที่ 2 และสะโพก เท้าวางขนานกันหรือชี้ออกเล็กน้อย น้ำหนักลงผ่านกึ่งกลางของเท้าแต่ละข้าง",
      },
      strengthen: {
        en: ["Maintain symmetric strength across hip rotators, abductors, and adductors"],
        th: ["รักษาความแข็งแรงสมดุลของกล้ามเนื้อหมุนสะโพก กางสะโพก และหุบสะโพก"],
      },
      cue: {
        en: ["Track knee over second toe", "Tripod foot · big-toe / pinky / heel", "Hip-knee-ankle stack alignment"],
        th: ["ให้เข่าเรียงเหนือนิ้วเท้าที่ 2", "เท้าสามจุด · นิ้วโป้ง / นิ้วก้อย / ส้น", "เรียงสะโพก-เข่า-ข้อเท้าให้ตรงแนว"],
      },
    },
    {
      id: "varum",
      name: { en: "Bow-Leg", th: "ขาโก่ง" },
      latin: { en: "Genu Varum", th: "Genu Varum" },
      chars: {
        en: "Femurs internally rotated, knees hyper-extended and abducted (apart), with the ankle and foot pronated. Loading pattern collapses to the medial foot; lateral knee structures are stressed.",
        th: "กระดูกต้นขาหมุนเข้าด้านใน เข่าเหยียดแอ่นและกางออก ข้อเท้าและฝ่าเท้าคว่ำ (pronated) น้ำหนักทรุดไปด้านในของเท้า โครงสร้างด้านนอกของเข่าถูกกดทับ",
      },
      tight: {
        en: ["Hip internal rotators", "Hip flexors (limit hip extension)", "Peroneus group (evertors)"],
        th: ["กล้ามเนื้อหมุนสะโพกเข้าด้านใน", "กล้ามเนื้องอสะโพก (จำกัดการเหยียดสะโพก)", "Peroneus group (กล้ามเนื้อคว่ำเท้า)"],
      },
      weak: {
        en: ["Hip external rotators", "Gluteus maximus", "Tibialis anterior / posterior (arch support)"],
        th: ["กล้ามเนื้อหมุนสะโพกออกด้านนอก", "Gluteus maximus (กล้ามเนื้อก้น)", "Tibialis anterior / posterior (พยุงอุ้งเท้า)"],
      },
      stretch: {
        en: ["Hip internal rotators", "Hip flexors", "Lateral calf · peroneal group"],
        th: ["กล้ามเนื้อหมุนสะโพกเข้าด้านใน", "กล้ามเนื้องอสะโพก", "กล้ามเนื้อน่องด้านนอก · Peroneus"],
      },
      strengthen: {
        en: ["Gluteus maximus", "Hip external rotators", "Arch support (tibialis ant/post) — prevent flat foot"],
        th: ["Gluteus maximus (ก้น)", "กล้ามเนื้อหมุนสะโพกออก", "Tibialis ant/post — พยุงอุ้งเท้าไม่ให้แบน"],
      },
      cue: {
        en: ["Shift weight to mid-foot and heel", "Avoid locking knees", "Engage glutes to externally rotate femur"],
        th: ["กระจายน้ำหนักไปกึ่งกลางเท้าและส้น", "ห้ามล็อคเข่า", "เกร็งก้นเพื่อหมุนต้นขาออกด้านนอก"],
      },
    },
    {
      id: "valgum",
      name: { en: "Knock-Knee", th: "เข่าบีบเข้า / ขาฉิ่ง" },
      latin: { en: "Genu Valgum", th: "Genu Valgum" },
      chars: {
        en: "Static: femurs externally rotated at rest with knees hyper-extended and adducted (close together), ankle supinated. Dynamic: in squat / lunge, the femur adducts and internally rotates — dynamic valgus risks ACL and patellofemoral injury.",
        th: "ในท่าหยุดนิ่ง กระดูกต้นขาหมุนออกด้านนอก เข่าหุบเข้าหากันและเหยียดแอ่น ข้อเท้าหงาย ขณะเคลื่อนไหว (Squat/Lunge) ต้นขาหุบและหมุนเข้า — Dynamic valgus เสี่ยงต่อการบาดเจ็บ ACL และปวดลูกสะบ้า",
      },
      tight: {
        en: ["Quadriceps (quad-dominant pattern)", "Tensor Fasciae Latae (TFL)", "Iliotibial band (IT band)"],
        th: ["Quadriceps (กล้ามเนื้อหน้าขาเด่นเกินไป)", "Tensor Fasciae Latae (TFL)", "Iliotibial band (IT band)"],
      },
      weak: {
        en: ["Gluteus medius", "Hip external rotators", "Gluteus maximus"],
        th: ["Gluteus medius (สะโพกด้านข้าง)", "กล้ามเนื้อหมุนสะโพกออก", "Gluteus maximus (ก้นใหญ่)"],
      },
      stretch: {
        en: ["Quadriceps", "TFL", "IT band (lateral thigh)"],
        th: ["Quadriceps (หน้าขา)", "TFL", "IT band (ด้านข้างต้นขา)"],
      },
      strengthen: {
        en: ["Gluteus medius (critical for valgus control)", "Hip external rotators", "Gluteus maximus"],
        th: ["Gluteus medius (สำคัญที่สุดในการคุม valgus)", "กล้ามเนื้อหมุนสะโพกออก", "Gluteus maximus"],
      },
      cue: {
        en: ["Strict knee-over-toe in squat/lunge", "Cue knees out, not collapsing in", "Pre-activate glute med before loading"],
        th: ["รักษาเข่าให้ตรงนิ้วเท้าใน Squat/Lunge อย่างเคร่งครัด", "คุมเข่าออกด้านนอก ไม่ให้บีบเข้า", "กระตุ้น Gluteus medius ก่อนการโหลดแรง"],
      },
    },
    {
      id: "recurvatum",
      name: { en: "Hyperextended Knees", th: "ข้อเข่าเหยียดแอ่น" },
      latin: { en: "Genu Recurvatum", th: "Genu Recurvatum" },
      chars: {
        en: "The knee joint is pushed back past 0° — beyond the normal straight-line angle. Bodyweight shifts onto the heels, distorting the alignment of the pelvis and the lumbar spine above.",
        th: "ข้อเข่าถูกดันเหยียดไปด้านหลังเกินมุมปกติ (เกิน 0 องศา) น้ำหนักตัวมักตกไปที่ส้นเท้า ส่งผลให้แนวกระดูกเชิงกรานและหลังส่วนล่างผิดปกติตามมา",
      },
      tight: {
        en: ["Quadriceps", "Soleus (deep calf — pulls shin backward)"],
        th: ["Quadriceps (หน้าขา)", "Soleus (น่องส่วนลึก — ดึงหน้าแข้งเอนไปหลัง)"],
      },
      weak: {
        en: ["Hamstrings", "Popliteus (knee flexor at the back of the joint)"],
        th: ["Hamstrings (หลังต้นขา)", "Popliteus (กล้ามเนื้อข้อพับเข่า)"],
      },
      stretch: {
        en: ["Quadriceps", "Soleus (calf)"],
        th: ["Quadriceps (หน้าขา)", "Soleus (น่อง)"],
      },
      strengthen: {
        en: ["Hamstrings — eccentric emphasis (braking the knee)", "Popliteus", "Proprioception · stop locking the knee in daily life"],
        th: ["Hamstrings — เน้นแบบ Eccentric (เบรกข้อเข่า)", "Popliteus", "การรับรู้ของร่างกาย — เลิกล็อคเข่าในชีวิตประจำวัน"],
      },
      cue: {
        en: ["Standing: keep a 'soft' micro-bend in the knees", "Stack hip-knee-ankle in a true vertical", "On the reformer/mat: never push the knees backward into the joint"],
        th: ["ขณะยืน: ปล่อยเข่า 'นุ่ม' งอเล็กน้อย ไม่ล็อค", "เรียงสะโพก-เข่า-ข้อเท้าให้ตรงดิ่งจริง", "บนรีฟอร์มเมอร์/เสื่อ: ไม่ดันเข่าไปด้านหลังจนล็อค"],
      },
    },
  ];

  function LegIdeal() {
    return (
      <svg viewBox="0 0 160 200" className="psv">
        <line x1="80" y1="0" x2="80" y2="200" className="svg-plumb"/>
        {/* Pelvis */}
        <rect x="58" y="8" width="44" height="22" rx="3" className="svg-pelvis-box"/>
        <line x1="58" y1="18" x2="102" y2="18" className="svg-body-line"/>
        {/* Hip joints */}
        <circle cx="68" cy="28" r="3" className="svg-knee-dot"/>
        <circle cx="92" cy="28" r="3" className="svg-knee-dot"/>
        {/* Femurs - parallel */}
        <line x1="68" y1="30" x2="68" y2="110" className="svg-leg-bone"/>
        <line x1="92" y1="30" x2="92" y2="110" className="svg-leg-bone"/>
        {/* Knees */}
        <circle cx="68" cy="112" r="5" className="svg-leg-fill"/>
        <circle cx="92" cy="112" r="5" className="svg-leg-fill"/>
        {/* Tibias - parallel */}
        <line x1="68" y1="117" x2="68" y2="178" className="svg-leg-bone"/>
        <line x1="92" y1="117" x2="92" y2="178" className="svg-leg-bone"/>
        {/* Feet */}
        <path d="M58,178 L78,178 L80,188 L60,188 Z" className="svg-foot"/>
        <path d="M82,178 L102,178 L102,188 L82,188 Z" className="svg-foot"/>
      </svg>
    );
  }

  function LegVarum() {
    return (
      <svg viewBox="0 0 160 200" className="psv">
        <line x1="80" y1="0" x2="80" y2="200" className="svg-plumb"/>
        <rect x="58" y="8" width="44" height="22" rx="3" className="svg-pelvis-box"/>
        <line x1="58" y1="18" x2="102" y2="18" className="svg-body-line"/>
        <circle cx="68" cy="28" r="3" className="svg-knee-dot"/>
        <circle cx="92" cy="28" r="3" className="svg-knee-dot"/>
        {/* Femurs splay outward, knees apart */}
        <line x1="68" y1="30" x2="48" y2="110" className="svg-leg-bone"/>
        <line x1="92" y1="30" x2="112" y2="110" className="svg-leg-bone"/>
        <circle cx="48" cy="112" r="5" className="svg-leg-fill"/>
        <circle cx="112" cy="112" r="5" className="svg-leg-fill"/>
        {/* Tibias angle back inward toward feet */}
        <line x1="48" y1="117" x2="64" y2="178" className="svg-leg-bone"/>
        <line x1="112" y1="117" x2="96" y2="178" className="svg-leg-bone"/>
        {/* Feet together — pronated (rolled inward) */}
        <path d="M54,178 L74,178 L78,188 L58,188 Z" className="svg-foot"/>
        <path d="M82,178 L102,178 L106,188 L86,188 Z" className="svg-foot"/>
        {/* Rotation arrows on femurs - internal rotation */}
        <path d="M70,55 A 8 8 0 0 0 62 55" className="svg-femur" fill="none"/>
        <path d="M90,55 A 8 8 0 0 1 98 55" className="svg-femur" fill="none"/>
        {/* Pronation indicators */}
        <path d="M68,194 L74,196 L68,198" stroke="#b8341c" strokeWidth="1.2" fill="none"/>
        <path d="M92,194 L86,196 L92,198" stroke="#b8341c" strokeWidth="1.2" fill="none"/>
      </svg>
    );
  }

  function LegValgum() {
    return (
      <svg viewBox="0 0 160 200" className="psv">
        <line x1="80" y1="0" x2="80" y2="200" className="svg-plumb"/>
        <rect x="58" y="8" width="44" height="22" rx="3" className="svg-pelvis-box"/>
        <line x1="58" y1="18" x2="102" y2="18" className="svg-body-line"/>
        <circle cx="68" cy="28" r="3" className="svg-knee-dot"/>
        <circle cx="92" cy="28" r="3" className="svg-knee-dot"/>
        {/* Femurs angle inward toward knees that touch */}
        <line x1="68" y1="30" x2="76" y2="108" className="svg-leg-bone"/>
        <line x1="92" y1="30" x2="84" y2="108" className="svg-leg-bone"/>
        {/* Knees nearly touching */}
        <circle cx="76" cy="112" r="5" className="svg-leg-fill"/>
        <circle cx="84" cy="112" r="5" className="svg-leg-fill"/>
        {/* Tibias splay outward */}
        <line x1="76" y1="117" x2="60" y2="178" className="svg-leg-bone"/>
        <line x1="84" y1="117" x2="100" y2="178" className="svg-leg-bone"/>
        {/* Feet apart, supinated (rolled outward) */}
        <path d="M48,178 L70,178 L66,188 L46,188 Z" className="svg-foot"/>
        <path d="M90,178 L112,178 L114,188 L94,188 Z" className="svg-foot"/>
        {/* External rotation arrows */}
        <path d="M62,55 A 8 8 0 0 1 70 55" className="svg-femur" fill="none"/>
        <path d="M98,55 A 8 8 0 0 0 90 55" className="svg-femur" fill="none"/>
        {/* Dynamic valgus indicator (collapsing inward) */}
        <path d="M76,90 L84,90" stroke="#b8341c" strokeWidth="1.4"/>
        <path d="M80,86 L80,94" stroke="#b8341c" strokeWidth="1.4"/>
      </svg>
    );
  }

  function LegRecurvatum() {
    return (
      <svg viewBox="0 0 160 200" className="psv">
        <line x1="80" y1="0" x2="80" y2="200" className="svg-plumb"/>
        <rect x="58" y="8" width="44" height="22" rx="3" className="svg-pelvis-box"/>
        <line x1="58" y1="18" x2="102" y2="18" className="svg-body-line"/>
        <circle cx="68" cy="28" r="3" className="svg-knee-dot"/>
        <circle cx="92" cy="28" r="3" className="svg-knee-dot"/>
        {/* Femurs straight down — slight forward lean at thigh */}
        <line x1="68" y1="30" x2="72" y2="110" className="svg-leg-bone"/>
        <line x1="92" y1="30" x2="88" y2="110" className="svg-leg-bone"/>
        {/* Knees pushed BACK — hyperextended */}
        <circle cx="60" cy="114" r="5" className="svg-leg-fill"/>
        <circle cx="100" cy="114" r="5" className="svg-leg-fill"/>
        {/* Tibias angle FORWARD from the hyperextended knee */}
        <line x1="60" y1="118" x2="72" y2="178" className="svg-leg-bone"/>
        <line x1="100" y1="118" x2="88" y2="178" className="svg-leg-bone"/>
        {/* Feet flat */}
        <path d="M62,178 L82,178 L84,188 L64,188 Z" className="svg-foot"/>
        <path d="M78,178 L98,178 L96,188 L78,188 Z" className="svg-foot"/>
        {/* Backward push arrows at the knees (highlight the hyperextension) */}
        <path d="M50,114 L42,114" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M44,111 L42,114 L44,117" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M110,114 L118,114" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M116,111 L118,114 L116,117" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        {/* Vertical reference line through knee showing it sits behind plumb */}
        <line x1="68" y1="40" x2="68" y2="170" stroke="var(--ink-3)" strokeWidth="0.6" strokeDasharray="2,2" opacity="0.5"/>
        <line x1="92" y1="40" x2="92" y2="170" stroke="var(--ink-3)" strokeWidth="0.6" strokeDasharray="2,2" opacity="0.5"/>
      </svg>
    );
  }

  const LEG_FIGS = { ideal: LegIdeal, varum: LegVarum, valgum: LegValgum, recurvatum: LegRecurvatum };

  function LegPanel() {
    const lang = useLang();
    return (
      <div className="leg-strip">
        {LEGS.map(l => {
          const F = LEG_FIGS[l.id];
          return (
            <div key={l.id} className="leg-card">
              <div className="leg-figure-wrap"><F /></div>
              <div>
                <div className="leg-name">{pick(l.name, lang)}</div>
                <div className="leg-latin">// {pick(l.latin, lang)}</div>
              </div>
              <p className="leg-chars">{pick(l.chars, lang)}</p>
              {l.tight && (
                <div>
                  <div className="leg-section-head" style={{color: "#b8341c"}}>{lang === "th" ? "// ▲ ตึง / ทำงานหนักเกิน" : "// ▲ tight / overactive"}</div>
                  <ul className="leg-list" style={{}}>
                    {pick(l.tight, lang).map(m => <li key={m} style={{color: "#b8341c"}}><span style={{color: "#b8341c", fontSize: "7px"}}>▲</span> {m}</li>)}
                  </ul>
                </div>
              )}
              {l.weak && (
                <div>
                  <div className="leg-section-head" style={{color: "#2c5d8c"}}>{lang === "th" ? "// ▽ อ่อนแรง / ถูกยับยั้ง" : "// ▽ weak / inhibited"}</div>
                  <ul className="leg-list" style={{}}>
                    {pick(l.weak, lang).map(m => <li key={m} style={{color: "#2c5d8c"}}><span style={{color: "#2c5d8c", fontSize: "7px"}}>▽</span> {m}</li>)}
                  </ul>
                </div>
              )}
              {l.stretch && (
                <div>
                  <div className="leg-section-head">{tt("posture.col.stretch")}</div>
                  <ul className="leg-list">
                    {pick(l.stretch, lang).map(m => <li key={m}><span style={{color: "var(--ink-2)", fontSize: "7px"}}>□</span> {m}</li>)}
                  </ul>
                </div>
              )}
              <div>
                <div className="leg-section-head">{lang === "th" ? "// เสริมความแข็งแรง · กระตุ้น" : "// strengthen / activate"}</div>
                <ul className="leg-list strengthen">
                  {pick(l.strengthen, lang).map(m => <li key={m}>{m}</li>)}
                </ul>
              </div>
              <div>
                <div className="leg-section-head">{tt("posture.col.cue")}</div>
                <ul className="leg-list cue">
                  {pick(l.cue, lang).map(c => <li key={c}>{c}</li>)}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  /* ════════════════════════════════════════════════════
     MOVEMENT ASSESSMENT DATA + FIGURES
     ════════════════════════════════════════════════════ */

  const MOVEMENTS = [
    {
      id: "rolldown", num: "01",
      name: { en: "Standing Roll Down", th: "ม้วนตัวลงขณะยืน" },
      purpose: {
        en: "Articulate the spine one segment at a time, then return to standing. Assesses spinal segmentation, weight distribution, alignment of spine / pelvis / legs, and neck-and-shoulder tightness.",
        th: "ลองก้มตัวม้วนกระดูกสันหลังลงทีละข้อแล้วม้วนกลับขึ้นมายืน เพื่อดูว่ากระดูกสันหลังเรายังขยับได้ทีละข้อมั้ย น้ำหนักเรากระจายตรงไหน แนวกระดูกสันหลัง เชิงกรานและขาเป็นยังไง แล้วคอกับไหล่ตึงหรือเปล่านะ",
      },
      watch: {
        en: "Skipped segments · weight shift forward · cervical or shoulder gripping · hamstring pull",
        th: "ข้อที่ขยับไม่ลื่น · น้ำหนักโน้มไปหน้า · คอหรือไหล่เกร็ง · Hamstring ดึง",
      },
    },
    {
      id: "armsup", num: "02",
      name: { en: "Arms Superior", th: "ยกแขนขึ้นเหนือหัว" },
      purpose: {
        en: "Lift arms forward or to the side overhead and return. Assesses shoulder ROM, scapulohumeral rhythm, and compensation patterns.",
        th: "ยกแขนไปด้านหน้าหรือด้านข้างขึ้นเหนือหัวแล้วเอาลง มาดูว่าหัวไหล่ขยับได้กว้างแค่ไหน ต้นแขนกับสะบักทำงานพร้อมกันมั้ย และเราใช้ส่วนไหนชดเชยอยู่หรือเปล่านะ",
      },
      watch: {
        en: "Lumbar arch · scapular hike · elbow flexion · rib flare",
        th: "หลังแอ่น · สะบักยกสูง · งอข้อศอกช่วย · ซี่โครงเปิดบาน",
      },
    },
    {
      id: "lateral", num: "03",
      name: { en: "Lateral Bending", th: "เอียงตัวไปด้านข้าง" },
      purpose: {
        en: "Side-bend the trunk and return; repeat to the other side. Assesses lateral spinal mobility, pelvic shift, weight transfer, and core stability.",
        th: "เอียงลำตัวไปด้านข้างแล้วกลับมาตรง ทำสลับซ้ายขวา เพื่อเช็คว่ากระดูกสันหลังเอียงข้างได้กว้างแค่ไหน เชิงกรานเลื่อนมั้ย น้ำหนักโยกยังไง และแกนกลางนิ่งพอหรือเปล่า",
      },
      watch: {
        en: "Pelvis sliding · loss of axial length · asymmetric ROM L vs R",
        th: "เชิงกรานเลื่อน · ตัวสั้นลง · เอียงซ้าย-ขวาไม่เท่ากัน",
      },
    },
    {
      id: "twist", num: "04",
      name: { en: "Spine Twist", th: "บิดเอว" },
      purpose: {
        en: "Arms at shoulder height; rotate left and right. Assesses thoracic rotation, pelvic / scapular stability, and compensations like lumbar extension or pelvic rotation.",
        th: "ยกแขนระดับไหล่ แล้วบิดลำตัวไปซ้ายและขวา มาดูว่าหลังส่วนอกบิดได้ดีมั้ย เชิงกรานกับสะบักนิ่งหรือเปล่า แล้วมีการชดเชยอย่างเอวแอ่นหรือเชิงกรานบิดตามมั้ย",
      },
      watch: {
        en: "Pelvis turning with trunk · lumbar arching · scapular elevation",
        th: "เชิงกรานหมุนตาม · เอวแอ่น · สะบักยกสูง",
      },
    },
    {
      id: "kneebend", num: "05",
      name: { en: "Double Knee Bend", th: "ย่อเข่าสองข้าง" },
      purpose: {
        en: "Bilateral knee flexion and return. Assesses leg alignment (patellar tracking, ankle deviation), core / knee / ankle stability, and dynamic valgus.",
        th: "งอเข่าทั้งสองข้างลงแล้วยืดกลับ เพื่อเช็คแนวขา (ลูกสะบ้าวิ่งตรงมั้ย ข้อเท้าบิดมั้ย) ความมั่นคงของแกนกลาง เข่า ข้อเท้า และดูว่าเข่าหุบเข้า (Dynamic valgus) ไหม",
      },
      watch: {
        en: "Knees collapsing inward (valgus) · hip adduction · foot pronation",
        th: "เข่าหุบเข้าด้านใน (valgus) · สะโพกหุบเข้า · เท้าคว่ำ",
      },
    },
    {
      id: "oneleg", num: "06",
      name: { en: "One Leg Standing", th: "ยืนขาเดียว" },
      purpose: {
        en: "Lift one leg, hold 10 seconds, switch. Assesses balance and pelvic stability. A dropped or tilted pelvis indicates gluteus medius weakness on the stance side.",
        th: "ยกขาข้างหนึ่งค้างไว้ 10 วินาที แล้วสลับข้าง เพื่อดูการทรงตัวและว่าเชิงกรานเรานิ่งพอมั้ย ถ้าเชิงกรานตกหรือเอียงแสดงว่า Gluteus medius ของขาที่รับน้ำหนักอ่อนแรงนะ",
      },
      watch: {
        en: "Hip drop (Trendelenburg) · trunk lean · ankle wobble",
        th: "เชิงกรานตก (Trendelenburg) · ลำตัวเอน · ข้อเท้าโยกเย้",
      },
    },
  ];

  function StickHead({cx, cy, r=5}) { return <circle cx={cx} cy={cy} r={r} className="svg-mvt-head"/>; }

  function MvtRollDown() {
    return (
      <svg viewBox="0 0 100 100" className="mvt-figure">
        {/* Standing ghost */}
        <g className="svg-mvt-ghost">
          <circle cx="30" cy="22" r="4"/>
          <line x1="30" y1="26" x2="30" y2="60"/>
          <line x1="30" y1="60" x2="30" y2="88"/>
          <line x1="30" y1="35" x2="22" y2="50"/>
          <line x1="30" y1="35" x2="38" y2="50"/>
        </g>
        {/* Rolled-down position */}
        <StickHead cx="70" cy="55"/>
        <path d="M70,60 C 68,68 65,72 60,75 C 56,78 54,80 56,84" className="svg-mvt-stick"/>
        <line x1="56" y1="84" x2="56" y2="92" className="svg-mvt-stick"/>
        <line x1="70" y1="60" x2="78" y2="72" className="svg-mvt-stick"/>
        <path d="M62,72 L72,75" className="svg-mvt-stick"/>
        {/* Arrow indicating direction */}
        <path d="M44,28 Q 55,40 60,52" className="svg-mvt-arrow" fill="none"/>
        <path d="M58,50 L62,52 L60,56" className="svg-mvt-arrow"/>
      </svg>
    );
  }

  function MvtArmsUp() {
    return (
      <svg viewBox="0 0 100 100" className="mvt-figure">
        <StickHead cx="50" cy="22"/>
        {/* Body */}
        <line x1="50" y1="27" x2="50" y2="65" className="svg-mvt-stick"/>
        {/* Legs */}
        <line x1="50" y1="65" x2="42" y2="92" className="svg-mvt-stick"/>
        <line x1="50" y1="65" x2="58" y2="92" className="svg-mvt-stick"/>
        {/* Arms raised overhead */}
        <line x1="50" y1="35" x2="32" y2="14" className="svg-mvt-stick"/>
        <line x1="50" y1="35" x2="68" y2="14" className="svg-mvt-stick"/>
        {/* Arrows up */}
        <path d="M30,28 L26,18 L34,18 L30,28" className="svg-mvt-arrow"/>
        <path d="M70,28 L66,18 L74,18 L70,28" className="svg-mvt-arrow"/>
        {/* Ghost arms at side */}
        <line x1="50" y1="35" x2="40" y2="60" className="svg-mvt-ghost"/>
        <line x1="50" y1="35" x2="60" y2="60" className="svg-mvt-ghost"/>
      </svg>
    );
  }

  function MvtLateral() {
    return (
      <svg viewBox="0 0 100 100" className="mvt-figure">
        {/* Side-bent figure */}
        <circle cx="40" cy="22" r="5" className="svg-mvt-head"/>
        <path d="M40,27 C 42,38 48,52 55,65" className="svg-mvt-stick"/>
        <line x1="55" y1="65" x2="50" y2="92" className="svg-mvt-stick"/>
        <line x1="55" y1="65" x2="60" y2="92" className="svg-mvt-stick"/>
        <line x1="42" y1="35" x2="28" y2="48" className="svg-mvt-stick"/>
        <line x1="46" y1="42" x2="58" y2="50" className="svg-mvt-stick"/>
        {/* Ghost upright */}
        <g className="svg-mvt-ghost">
          <circle cx="52" cy="22" r="4"/>
          <line x1="52" y1="26" x2="55" y2="65"/>
        </g>
        {/* Curved arrow */}
        <path d="M62,22 Q 56,20 50,22" className="svg-mvt-arrow" fill="none"/>
        <path d="M52,20 L48,22 L52,25" className="svg-mvt-arrow"/>
      </svg>
    );
  }

  function MvtTwist() {
    return (
      <svg viewBox="0 0 100 100" className="mvt-figure">
        <StickHead cx="50" cy="22"/>
        <line x1="50" y1="27" x2="50" y2="68" className="svg-mvt-stick"/>
        <line x1="50" y1="68" x2="42" y2="92" className="svg-mvt-stick"/>
        <line x1="50" y1="68" x2="58" y2="92" className="svg-mvt-stick"/>
        {/* Arms extended sideways - rotated */}
        <line x1="50" y1="38" x2="22" y2="46" className="svg-mvt-stick"/>
        <line x1="50" y1="38" x2="78" y2="30" className="svg-mvt-stick"/>
        {/* Rotation arrow */}
        <path d="M30,16 Q 50,8 70,16" className="svg-mvt-arrow" fill="none"/>
        <path d="M68,14 L72,16 L70,20" className="svg-mvt-arrow"/>
      </svg>
    );
  }

  function MvtKneeBend() {
    return (
      <svg viewBox="0 0 100 100" className="mvt-figure">
        <StickHead cx="50" cy="20"/>
        <line x1="50" y1="25" x2="50" y2="58" className="svg-mvt-stick"/>
        {/* Bent legs */}
        <line x1="50" y1="58" x2="40" y2="76" className="svg-mvt-stick"/>
        <line x1="40" y1="76" x2="42" y2="92" className="svg-mvt-stick"/>
        <line x1="50" y1="58" x2="60" y2="76" className="svg-mvt-stick"/>
        <line x1="60" y1="76" x2="58" y2="92" className="svg-mvt-stick"/>
        {/* Knees marked */}
        <circle cx="40" cy="76" r="2.5" fill="var(--accent)"/>
        <circle cx="60" cy="76" r="2.5" fill="var(--accent)"/>
        {/* Arms forward */}
        <line x1="50" y1="32" x2="35" y2="42" className="svg-mvt-stick"/>
        <line x1="50" y1="32" x2="65" y2="42" className="svg-mvt-stick"/>
        {/* Down arrow */}
        <path d="M82,40 L82,60 L78,56 M82,60 L86,56" className="svg-mvt-arrow" fill="none"/>
      </svg>
    );
  }

  function MvtOneLeg() {
    return (
      <svg viewBox="0 0 100 100" className="mvt-figure">
        <StickHead cx="50" cy="20"/>
        <line x1="50" y1="25" x2="50" y2="58" className="svg-mvt-stick"/>
        {/* Stance leg */}
        <line x1="50" y1="58" x2="48" y2="92" className="svg-mvt-stick"/>
        {/* Lifted leg */}
        <line x1="50" y1="58" x2="62" y2="72" className="svg-mvt-stick"/>
        <line x1="62" y1="72" x2="68" y2="58" className="svg-mvt-stick"/>
        {/* Arms */}
        <line x1="50" y1="32" x2="38" y2="48" className="svg-mvt-stick"/>
        <line x1="50" y1="32" x2="62" y2="48" className="svg-mvt-stick"/>
        {/* Ground */}
        <line x1="20" y1="92" x2="80" y2="92" className="svg-mvt-ghost"/>
        {/* Timer indicator */}
        <text x="78" y="22" fontSize="9" fill="var(--accent)" fontFamily="monospace">10s</text>
      </svg>
    );
  }

  const MVT_FIGS = {
    rolldown: MvtRollDown, armsup: MvtArmsUp, lateral: MvtLateral,
    twist: MvtTwist, kneebend: MvtKneeBend, oneleg: MvtOneLeg,
  };

  function MovementPanel() {
    const lang = useLang();
    return (
      <div className="mvt-grid">
        {MOVEMENTS.map(m => {
          const F = MVT_FIGS[m.id];
          const youtube = "https://www.youtube.com/results?search_query="
            + encodeURIComponent(m.name.en + " pilates assessment");
          return (
            <div key={m.id} className="mvt-card">
              <div className="mvt-figure-wrap"><F /></div>
              <div>
                <div className="mvt-num">// {m.num}</div>
                <div className="mvt-name">{pick(m.name, lang)}</div>
                <p className="mvt-purpose">{pick(m.purpose, lang)}</p>
                <div className="mvt-watch">
                  <strong>{lang === "th" ? "สังเกต" : "watch for"}</strong>
                  {pick(m.watch, lang)}
                </div>
                <div className="mvt-video">
                  <a className="mvt-video-link yt" href={youtube}
                    target="_blank" rel="noopener noreferrer">▶ YouTube <span className="mvt-video-arr">↗</span></a>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  /* ════════════════════════════════════════════════════
     FOOT & ANKLE DATA — bilingual EN / TH
     ════════════════════════════════════════════════════ */
  const FEET = [
    {
      id: "supination",
      name: { en: "Supination / Toe-in", th: "การหงายฝ่าเท้า / ปลายเท้าชี้เข้า" },
      latin: { en: "inversion · medial rotation", th: "หงายเข้าใน · หมุนเข้าใน" },
      relatedKey: "valgum",
      relatedLabel: { en: "Knock-Knee · Genu Valgum", th: "เข่าบีบเข้า · Genu Valgum" },
      chars: {
        en: "The sole rolls inward (inversion) — \"like scooping soup.\" Commonly paired with toe-in posture and medial rotation of the joints. Often correlates with Knock-Knee / Genu Valgum: femurs externally rotated, knees hyperextended and adducted.",
        th: "ฝ่าเท้าบิดเข้าด้านใน (Inversion) ในคู่มือมีเทคนิคจำง่ายๆ ว่า \"SUPINATION เหมือนการตักซุป\" มักสัมพันธ์กับสภาวะปลายเท้าชี้เข้าด้านใน (Toe-in) และการหมุนเข้าด้านในของข้อต่อ มักพบร่วมกับ Knock-Knee / Genu Valgum — กระดูกต้นขาหมุนออก ข้อเข่าเหยียดแอ่นและบีบเข้าหากัน",
      },
      overactive: {
        en: ["Tibialis anterior (invertor)", "Tibialis posterior (invertor)"],
        th: ["Tibialis anterior (กล้ามเนื้อหงายเท้า)", "Tibialis posterior (กล้ามเนื้อหงายเท้า)"],
      },
      strengthen: {
        en: ["Peroneus longus (evertor)", "Peroneus brevis (evertor)"],
        th: ["Peroneus longus (กล้ามเนื้อคว่ำเท้า)", "Peroneus brevis (กล้ามเนื้อคว่ำเท้า)"],
      },
      exercises: {
        en: [
          { name: "Footwork · Second Position Parallel", note: "Heels on the bar hip-width, feet parallel. Forces midline knee tracking and balanced foot loading — the foot must not invert under spring load." },
          { name: "Footwork · Second Position Medially Rotated", note: "Toes and knees pointing in (toe-in). Recruits medial hip rotators and trains the ankle to resist over-inversion during movement." },
        ],
        th: [
          { name: "Footwork · Second Position (Parallel)", note: "เหยียบบาร์ด้วยส้นเท้าโดยกางขาเท่าช่วงสะโพกและวางเท้าขนานกัน บังคับให้รักษาแนวการจัดเรียงของข้อเข่าให้อยู่กึ่งกลางฝ่าเท้า และปรับสมดุลการลงน้ำหนักไม่ให้เท้าหงายหรือพลิก" },
          { name: "Footwork · Second Position (Medially Rotated)", note: "บิดปลายเท้าและเข่าชิดเข้าหากัน (Toe-in) กระตุ้นการทำงานของกลุ่มกล้ามเนื้อหมุนสะโพกเข้าด้านใน ช่วยให้ผู้ฝึกเรียนรู้การควบคุมข้อเท้าไม่ให้บิดหงายมากเกินไป" },
        ],
      },
    },
    {
      id: "pronation",
      name: { en: "Pronation / Toe-out", th: "การคว่ำฝ่าเท้า / ปลายเท้าชี้ออก" },
      latin: { en: "eversion · lateral rotation", th: "คว่ำออก · หมุนออก" },
      relatedKey: "varum",
      relatedLabel: { en: "Bow-Leg · Genu Varum", th: "ขาโก่ง · Genu Varum" },
      chars: {
        en: "The sole rolls outward (eversion) — often resulting in flat feet (collapsed arches). Commonly paired with toe-out posture and lateral rotation of the joints. Often correlates with Bow-Leg / Genu Varum: femurs internally rotated, knees abducted (apart).",
        th: "ฝ่าเท้าบิดออกด้านนอก (Eversion) มักส่งผลให้เกิดภาวะเท้าแบน (Arches collapsed) มักสัมพันธ์กับสภาวะปลายเท้าชี้ออกด้านนอก (Toe-out) และการหมุนออกของข้อต่อ มักพบร่วมกับ Bow-Leg / Genu Varum — กระดูกต้นขาหมุนเข้าด้านใน ข้อเข่ากางออก",
      },
      overactive: {
        en: ["Peroneus longus (evertor)", "Peroneus brevis (evertor)", "Peroneus tertius (evertor)"],
        th: ["Peroneus longus (คว่ำเท้า)", "Peroneus brevis (คว่ำเท้า)", "Peroneus tertius (คว่ำเท้า)"],
      },
      strengthen: {
        en: ["Tibialis anterior (invertor + arch support)", "Tibialis posterior (deep arch support)", "Toe flexors (intrinsic foot)"],
        th: ["Tibialis anterior (พยุงอุ้งเท้า)", "Tibialis posterior (พยุงอุ้งเท้าชั้นลึก)", "กล้ามเนื้องอนิ้วเท้า"],
      },
      exercises: {
        en: [
          { name: "Footwork · Toes Apart Heels Together (Pilates 'V')", note: "Balls of the feet on the bar, heels touching, toes out. Trains hip external rotators and demands intrinsic foot activation to prevent the ankle from collapsing on the press." },
          { name: "Footwork · Second Position Laterally Rotated", note: "Heels wide on the bar, legs and feet rotated out. Trains knee-over-toe alignment in a wide stance and builds strength in the thigh and hip." },
          { name: "Double Calf Stretch", note: "Balls of feet on the bar, heels press below the bar line. Releases the plantar flexors (gastroc/soleus) and restores ankle mobility — essential for both pronated and supinated patterns." },
        ],
        th: [
          { name: "Footwork · Toes Apart Heels Together (Pilates 'V')", note: "วางจมูกเท้าบนบาร์ ส้นเท้าชิดกัน ปลายเท้าแยกออก เสริมความแข็งแรงของกล้ามเนื้อหมุนข้อสะโพกออกด้านนอก และต้องอาศัยการเกร็งกล้ามเนื้ออุ้งเท้าเพื่อไม่ให้ข้อเท้าคว่ำและแบนราบขณะดันเครื่อง" },
          { name: "Footwork · Second Position (Laterally Rotated)", note: "วางส้นเท้าบนบาร์ให้กว้างที่สุด หมุนขาและปลายเท้าออกด้านนอก ฝึกการจัดเรียงแนวเข่าให้ชี้ไปตามกึ่งกลางของเท้าที่เปิดออก และสร้างความแข็งแรงให้กล้ามเนื้อต้นขาและสะโพก" },
          { name: "Double Calf Stretch", note: "ใช้ปลายเท้ายันบาร์แล้วกดส้นเท้าลงด้านล่าง ยืดคลายกล้ามเนื้อน่อง (Plantar flexors) และเพิ่มความยืดหยุ่นข้อเท้า จำเป็นสำหรับการปรับสมดุลของฝ่าเท้าทั้งแบบคว่ำและหงาย" },
        ],
      },
    },
  ];

  /* ── FOOT SVG DIAGRAMS (rear view — shows ankle tilt + toe direction) ── */
  function FootSVGSupination() {
    // Both feet rolling onto outer edges; toes pointing inward
    return (
      <svg viewBox="0 0 200 200" className="psv">
        <line x1="10" y1="184" x2="190" y2="184" className="svg-plumb"/>
        {/* Tibias angled inward at top, ankles point out */}
        <line x1="64" y1="20" x2="68" y2="130" className="svg-leg-bone"/>
        <line x1="136" y1="20" x2="132" y2="130" className="svg-leg-bone"/>
        {/* Left foot — rolled onto outer edge */}
        <path d="M40,184 L60,160 L84,158 L88,184 Z" className="svg-foot"/>
        <circle cx="68" cy="132" r="4" className="svg-knee-dot"/>
        {/* Right foot */}
        <path d="M112,184 L116,158 L140,160 L160,184 Z" className="svg-foot"/>
        <circle cx="132" cy="132" r="4" className="svg-knee-dot"/>
        {/* Toe direction arrows — pointing inward */}
        <path d="M55,196 L75,196" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M73,193 L75,196 L73,199" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M145,196 L125,196" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M127,193 L125,196 L127,199" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        {/* Ankle inversion arrows */}
        <path d="M68,140 L48,150" stroke="var(--accent)" strokeWidth="1.2" fill="none" opacity="0.7"/>
        <path d="M132,140 L152,150" stroke="var(--accent)" strokeWidth="1.2" fill="none" opacity="0.7"/>
        <text x="100" y="14" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--ink-3)" letterSpacing="0.12em">REAR VIEW</text>
      </svg>
    );
  }
  function FootSVGPronation() {
    // Both feet rolled inward; toes pointing outward; flat arches
    return (
      <svg viewBox="0 0 200 200" className="psv">
        <line x1="10" y1="184" x2="190" y2="184" className="svg-plumb"/>
        <line x1="76" y1="20" x2="68" y2="130" className="svg-leg-bone"/>
        <line x1="124" y1="20" x2="132" y2="130" className="svg-leg-bone"/>
        {/* Left foot — collapsed arch, rolled inward */}
        <path d="M40,184 L52,162 L84,162 L96,184 Z" className="svg-foot"/>
        <circle cx="68" cy="132" r="4" className="svg-knee-dot"/>
        {/* Right foot */}
        <path d="M104,184 L116,162 L148,162 L160,184 Z" className="svg-foot"/>
        <circle cx="132" cy="132" r="4" className="svg-knee-dot"/>
        {/* Toe direction arrows — pointing outward */}
        <path d="M70,196 L48,196" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M50,193 L48,196 L50,199" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M130,196 L152,196" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        <path d="M150,193 L152,196 L150,199" stroke="#b8341c" strokeWidth="1.4" fill="none"/>
        {/* Ankle eversion arrows pointing inward */}
        <path d="M68,140 L88,150" stroke="var(--accent)" strokeWidth="1.2" fill="none" opacity="0.7"/>
        <path d="M132,140 L112,150" stroke="var(--accent)" strokeWidth="1.2" fill="none" opacity="0.7"/>
        <text x="100" y="14" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--ink-3)" letterSpacing="0.12em">REAR VIEW</text>
      </svg>
    );
  }
  const FOOT_FIGS = { supination: FootSVGSupination, pronation: FootSVGPronation };

  function FootPanel() {
    const lang = useLang();
    return (
      <div className="leg-strip" style={{gridTemplateColumns: "1fr 1fr"}}>
        {FEET.map(f => {
          const F = FOOT_FIGS[f.id];
          return (
            <div key={f.id} className="leg-card">
              <div className="leg-figure-wrap"><F /></div>
              <div>
                <div className="leg-name">{pick(f.name, lang)}</div>
                <div className="leg-latin">// {pick(f.latin, lang)}</div>
              </div>
              <div style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: "10px",
                letterSpacing: "0.06em", color: "var(--accent)",
                padding: "6px 10px", border: "1px solid var(--accent)",
                display: "inline-block", marginTop: "-6px", alignSelf: "flex-start"
              }}>{tt("posture.related")} · {pick(f.relatedLabel, lang)}</div>
              <p className="leg-chars">{pick(f.chars, lang)}</p>
              <div>
                <div className="leg-section-head">// {lang === "th" ? "ทำงานหนักเกิน · ควรยืด" : "overactive · stretch"}</div>
                <ul className="leg-list strengthen" style={{}}>
                  {pick(f.overactive, lang).map(m => <li key={m} style={{color: "var(--ink-2)"}}>{m}</li>)}
                </ul>
              </div>
              <div>
                <div className="leg-section-head">// {lang === "th" ? "ควรเสริมความแข็งแรง" : "strengthen"}</div>
                <ul className="leg-list strengthen">
                  {pick(f.strengthen, lang).map(m => <li key={m}>{m}</li>)}
                </ul>
              </div>
              <div>
                <div className="leg-section-head">{tt("posture.col.exercises")}</div>
                <ul className="leg-list cue">
                  {pick(f.exercises, lang).map((ex, i) => (
                    <li key={i} style={{flexDirection: "column", alignItems: "flex-start", gap: "2px"}}>
                      <span style={{color: "var(--ink)", fontWeight: 500}}>{ex.name}</span>
                      <span style={{color: "var(--ink-2)", fontSize: "10px", fontWeight: 400, lineHeight: 1.5, marginLeft: "0"}}>{ex.note}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    );
  }

  /* ════════════════════════════════════════════════════
     MAIN COMPONENT — TABS
     ════════════════════════════════════════════════════ */

  function PostureSection() {
    const [tab, setTab] = useState("movement");
    const lang = useLang();
    const TABS = [
      { id: "movement", num: "03.1", label: tt("posture.tab.movement"), count: tt("posture.tab.movement.count") },
      { id: "posture",  num: "03.2", label: tt("posture.tab.types"),    count: tt("posture.tab.types.count") },
      { id: "legs",     num: "03.3", label: tt("posture.tab.legs"),     count: tt("posture.tab.legs.count") },
      { id: "feet",     num: "03.4", label: tt("posture.tab.feet"),     count: tt("posture.tab.feet.count") },
    ];
    return (
      <div className="posture-wrap">
        <div className="pst-tabs">
          {TABS.map(t => (
            <button
              key={t.id}
              className="pst-tab"
              data-active={tab === t.id}
              onClick={() => setTab(t.id)}
            >
              <span className="tab-num">§ {t.num}</span>
              <span>{t.label}</span>
              <span style={{fontSize:"9px",letterSpacing:"0.08em",opacity:0.6,marginTop:"2px"}}>{t.count}</span>
            </button>
          ))}
        </div>
        <div style={{paddingTop:"32px"}}>
          {tab === "posture"  && <PosturePanel />}
          {tab === "legs"     && <LegPanel />}
          {tab === "feet"     && <FootPanel />}
          {tab === "movement" && <MovementPanel />}
        </div>
      </div>
    );
  }

  /* ── Mount ── */
  const root = document.getElementById("posture-root");
  if (root) ReactDOM.createRoot(root).render(<PostureSection />);
})();