/* global React */
// Day 2 練習賽 · 小小駕駛員任務挑戰賽

const { useState: useS2 } = React;

const STATIONS = [
{ n: '01', name: '起點出發',     en: 'START',           task: '車輛停在起點區，聽到開始後由駕駛員啟動。',           focus: '油門控制、方向感',     color: '#00C896', icon: 'start'    },
{ n: '02', name: '安全停等區',   en: 'STOP',            task: '遇斑馬線或停等牌，車輛需停下 2 秒以上。',           focus: '煞車、反應與安全概念', color: '#FFD23F', icon: 'stop'     },
{ n: '03', name: '轉彎挑戰',     en: 'TURN',            task: '完成指定左轉或右轉，不壓到邊界線。',               focus: '轉向幅度與速度控制',   color: '#2154F0', icon: 'turn'     },
{ n: '04', name: '直線穩定行駛', en: 'STRAIGHT',        task: '沿著指定道路前進，盡量保持車身穩定。',             focus: '微調方向、避免蛇行',   color: '#6B4BFF', icon: 'straight' },
{ n: '05', name: '倒車入庫',     en: 'REVERSE PARK',    task: '將車輛倒車入庫，停入指定的垂直停車格內。',         focus: '倒車視角與微調操作',   color: '#FF8B3D', icon: 'reverse'  },
{ n: '06', name: '路邊停車',     en: 'PARALLEL PARK',   task: '沿路邊將車輛平行停入指定停車格內。',               focus: '直線停車與距離拿捏',   color: '#E84A5F', icon: 'parallel' },
{ n: '07', name: '完成運送',     en: 'DELIVERY',        task: '用機械手臂夾取或推送物件至指定區域。',             focus: '夾爪控制與團隊指揮',   color: '#FF5C39', icon: 'deliver'  }];


function StationIcon({ kind }) {
  const ink = "var(--ink)";
  switch (kind) {
    case 'start':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
        <line x1="6" y1="4" x2="6" y2="24" stroke={ink} strokeWidth="2.5" strokeLinecap="round" />
        <path d="M 6 5 L 22 5 L 18 10 L 22 16 L 6 16 Z" fill="var(--accent)" stroke={ink} strokeWidth="1.5" strokeLinejoin="round" />
      </svg>);

    case 'stop':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
        <polygon points="9,4 19,4 24,9 24,19 19,24 9,24 4,19 4,9" fill="var(--accent)" stroke={ink} strokeWidth="1.8" strokeLinejoin="round" />
        <rect x="8" y="11.5" width="12" height="2.5" fill="#fff" />
        <rect x="8" y="15" width="12" height="2.5" fill="#fff" />
      </svg>);

    case 'turn':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
        <path d="M 6 20 L 6 12 Q 6 6, 14 6 L 20 6" fill="none" stroke={ink} strokeWidth="2.5" strokeLinecap="round" />
        <polygon points="20,6 18,3 18,9" fill={ink} transform="translate(2,0)" />
      </svg>);

    case 'straight':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
        <line x1="14" y1="22" x2="14" y2="8" stroke={ink} strokeWidth="2.5" strokeLinecap="round" />
        <polygon points="14,4 10,9 18,9" fill={ink} />
        <line x1="8" y1="14" x2="8" y2="22" stroke={ink} strokeWidth="1.5" strokeDasharray="2 2" />
        <line x1="20" y1="14" x2="20" y2="22" stroke={ink} strokeWidth="1.5" strokeDasharray="2 2" />
      </svg>);

    case 'park':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
        <rect x="5" y="5" width="18" height="18" fill="var(--accent)" stroke={ink} strokeWidth="1.8" rx="3" />
        <path d="M 11 8 L 11 20 M 11 8 L 16 8 Q 19 8, 19 11.5 Q 19 15, 16 15 L 11 15" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>);

    case 'reverse':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
          {/* parking bay (open at top) */}
          <path d="M 4 6 L 4 24 L 24 24 L 24 6" fill="none" stroke={ink} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="2 2" />
          {/* car nose pointing UP (reversing in) */}
          <rect x="9" y="12" width="10" height="10" fill="var(--accent)" stroke={ink} strokeWidth="1.5" rx="1.5" />
          <rect x="11" y="12" width="6" height="2" fill={ink} />
          {/* reverse arrow */}
          <line x1="14" y1="9" x2="14" y2="3" stroke={ink} strokeWidth="2" strokeLinecap="round" />
          <polyline points="11,6 14,3 17,6" fill="none" stroke={ink} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>);

    case 'parallel':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
          {/* kerb line */}
          <line x1="3" y1="20" x2="25" y2="20" stroke={ink} strokeWidth="2" />
          {/* parking slot (parallel, along kerb) */}
          <rect x="4" y="14" width="20" height="6" fill="none" stroke={ink} strokeWidth="1.5" strokeDasharray="2 2" />
          {/* car parked in slot */}
          <rect x="6" y="15" width="16" height="4" fill="var(--accent)" stroke={ink} strokeWidth="1.2" rx="1" />
          <circle cx="9" cy="20.5" r="1.3" fill={ink} />
          <circle cx="19" cy="20.5" r="1.3" fill={ink} />
          {/* lane arrow above */}
          <polyline points="22,8 25,11 22,11 25,8 22,8" fill="none" />
          <line x1="3" y1="9" x2="22" y2="9" stroke={ink} strokeWidth="1.5" strokeDasharray="3 3" />
          <polyline points="22,6 25,9 22,12" fill="none" stroke={ink} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>);

    case 'deliver':return (
        <svg viewBox="0 0 28 28" width="28" height="28">
        <rect x="5" y="11" width="18" height="13" fill="var(--accent)" stroke={ink} strokeWidth="1.8" />
        <rect x="3" y="9" width="22" height="4" fill="var(--primary)" stroke={ink} strokeWidth="1.8" />
        <line x1="14" y1="9" x2="14" y2="24" stroke={ink} strokeWidth="1.5" />
        <path d="M 14 9 Q 11 5, 8 6 Q 9 9, 14 9 Q 19 9, 20 6 Q 17 5, 14 9 Z" fill={ink} stroke={ink} strokeWidth="1.2" />
      </svg>);

    default:return null;
  }
}

function CourseDiagram() {
  // 微型考照場域 — top-down driving-school course (7 stations)
  // L-shaped route: 01 START → 02 STOP → 03 TURN → 04 STRAIGHT → 05 REVERSE → 06 PARALLEL → 07 DELIVERY
  const W = 820, H = 380;
  const ink = "var(--ink)";
  const asphalt = "#E8E2CC";
  const ground = "#F5EFE0";
  const lane = "#FFFFFF";

  return (
    <svg viewBox={`0 0 ${W} ${H}`} xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <pattern id="dgrid2" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(11,11,14,0.06)" strokeWidth="1" />
        </pattern>
      </defs>

      {/* Field base */}
      <rect width={W} height={H} fill={ground} />
      <rect width={W} height={H} fill="url(#dgrid2)" />
      <rect x="6" y="6" width={W - 12} height={H - 12} fill="none" stroke={ink} strokeWidth="2" rx="6" />

      {/* === Road network (L-shape) === */}
      {/* Top horizontal road */}
      <rect x="40"  y="60"  width="660" height="68" fill={asphalt} stroke={ink} strokeWidth="2" />
      {/* Right vertical road */}
      <rect x="632" y="60"  width="68"  height="232" fill={asphalt} stroke={ink} strokeWidth="2" />
      {/* Bottom horizontal road */}
      <rect x="40"  y="224" width="660" height="68" fill={asphalt} stroke={ink} strokeWidth="2" />
      {/* re-stroke the right side so corners look clean */}
      <rect x="632" y="60"  width="68"  height="232" fill="none" stroke={ink} strokeWidth="2" />

      {/* Lane markings — dashed centre lines */}
      <line x1="40"  y1="94"  x2="632" y2="94"  stroke={lane} strokeWidth="2.5" strokeDasharray="10 8" />
      <line x1="666" y1="128" x2="666" y2="224" stroke={lane} strokeWidth="2.5" strokeDasharray="10 8" />
      <line x1="40"  y1="258" x2="632" y2="258" stroke={lane} strokeWidth="2.5" strokeDasharray="10 8" />

      {/* === 01 START — top-left, checkered start line === */}
      <g>
        <rect x="40" y="60" width="118" height="68" fill="#00C896" fillOpacity="0.18" />
        <line x1="158" y1="60" x2="158" y2="128" stroke="#00C896" strokeWidth="3" strokeDasharray="4 4" />
        <g transform="translate(48, 60)">
          {[0,1,2,3,4,5,6].map(i => (
            <rect key={i} x={i * 10} y="0" width="10" height="8" fill={i % 2 ? ink : '#fff'} stroke={ink} strokeWidth="0.5" />
          ))}
        </g>
        <Badge x={99} y={32} num="01" color="#00C896" label="起點" />
      </g>

      {/* === 02 STOP — zebra crossing + sign === */}
      <g>
        {[0,1,2,3,4].map(i => (
          <rect key={i} x={245 + i * 14} y="66" width="9" height="56" fill="#fff" stroke={ink} strokeWidth="0.8" />
        ))}
        <g transform="translate(275, 38)">
          <polygon points="0,-10 7.5,-7.5 10,0 7.5,7.5 0,10 -7.5,7.5 -10,0 -7.5,-7.5" fill="#FFD23F" stroke={ink} strokeWidth="1.5" />
          <text x="0" y="3" textAnchor="middle" fontFamily="Archivo Black" fontSize="8" fill={ink}>STOP</text>
        </g>
        <Badge x={275} y={162} num="02" color="#FFD23F" label="安全停等" />
      </g>

      {/* === 03 TURN — top-right corner === */}
      <g>
        <path d="M 580 94 Q 666 94, 666 160" fill="none" stroke="#2154F0" strokeWidth="3" strokeDasharray="6 4" />
        <polygon points="660,160 672,160 666,174" fill="#2154F0" />
        <Badge x={510} y={32} num="03" color="#2154F0" label="轉彎" />
      </g>

      {/* === 04 STRAIGHT — right vertical road === */}
      <g>
        <line x1="640" y1="130" x2="640" y2="222" stroke="#6B4BFF" strokeWidth="3" />
        <line x1="692" y1="130" x2="692" y2="222" stroke="#6B4BFF" strokeWidth="3" />
        <Badge x={750} y={176} num="04" color="#6B4BFF" label="直線" />
      </g>

      {/* === 05 倒車入庫 — perpendicular parking bay on bottom road === */}
      <g>
        {/* the bay extends BELOW the road */}
        <rect x="486" y="290" width="44" height="56" fill="#FF8B3D" fillOpacity="0.16" stroke="#FF8B3D" strokeWidth="2" strokeDasharray="6 3" />
        {/* car parked inside, nose toward road */}
        <rect x="494" y="304" width="28" height="34" fill="#FF8B3D" stroke={ink} strokeWidth="1.5" rx="3" />
        <rect x="500" y="304" width="16" height="4" fill={ink} />
        {/* reverse arrow from road into bay */}
        <line x1="508" y1="270" x2="508" y2="298" stroke={ink} strokeWidth="2" strokeDasharray="3 3" strokeLinecap="round" />
        <polyline points="504,294 508,300 512,294" fill="none" stroke={ink} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        <Badge x={508} y={362} num="05" color="#FF8B3D" label="倒車入庫" />
      </g>

      {/* === 06 路邊停車 — parallel parking spaces along the kerb === */}
      <g>
        {[0,1].map(i => (
          <rect key={i} x={290 + i * 80} y="284" width="68" height="22" fill="#E84A5F" fillOpacity="0.14" stroke="#E84A5F" strokeWidth="2" strokeDasharray="6 3" />
        ))}
        {/* one car parked parallel */}
        <rect x="298" y="287" width="60" height="16" fill="#E84A5F" stroke={ink} strokeWidth="1.4" rx="3" />
        <circle cx="306" cy="306" r="2" fill={ink} />
        <circle cx="350" cy="306" r="2" fill={ink} />
        <Badge x={368} y={362} num="06" color="#E84A5F" label="路邊停車" />
      </g>

      {/* === 07 完成運送 — delivery target on bottom-left === */}
      <g>
        <rect x="60" y="290" width="160" height="56" fill="#FF5C39" fillOpacity="0.15" stroke="#FF5C39" strokeWidth="2.5" strokeDasharray="6 4" />
        <g transform="translate(140, 318)">
          <circle r="22" fill="none" stroke="#FF5C39" strokeWidth="2.5" />
          <circle r="14" fill="none" stroke="#FF5C39" strokeWidth="2" />
          <circle r="6" fill="#FF5C39" />
        </g>
        <Badge x={140} y={362} num="07" color="#FF5C39" label="完成運送" />
      </g>

      {/* === Route direction arrows along the centre lines === */}
      <g stroke={ink} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none">
        <Arrow x={205} y={94}  dir="right" />
        <Arrow x={430} y={94}  dir="right" />
        <Arrow x={666} y={190} dir="down" />
        <Arrow x={566} y={258} dir="left" />
        <Arrow x={240} y={258} dir="left" />
      </g>

      {/* Footer labels */}
      <g fontFamily="JetBrains Mono" fontSize="9" fill={ink}>
        <text x="14" y="20">▲ COURSE LAYOUT</text>
        <text x={W - 14} y="20" textAnchor="end">微型考照場域 · MINI COURSE</text>
      </g>
    </svg>
  );
}

// Numbered station badge — wider rounded pill so labels never overlap
function Badge({ x, y, num, color, label }) {
  return (
    <g transform={`translate(${x},${y})`}>
      <rect x="-58" y="-13" width="116" height="26" fill="#fff" stroke="var(--ink)" strokeWidth="1.8" rx="13" />
      <circle cx="-44" cy="0" r="10" fill={color} stroke="var(--ink)" strokeWidth="1.8" />
      <text x="-44" y="3.5" textAnchor="middle" fontFamily="Archivo Black" fontSize="10" fill="var(--ink)">{num}</text>
      <text x="10" y="4" textAnchor="middle" fontFamily="Noto Sans TC" fontSize="12" fontWeight="800" fill="var(--ink)">{label}</text>
    </g>
  );
}

function Arrow({ x, y, dir }) {
  const rot = { right: 0, down: 90, left: 180, up: 270 }[dir];
  return (
    <g transform={`translate(${x},${y}) rotate(${rot})`} stroke="var(--ink)">
      <polyline points="-6,-6 0,0 -6,6" fill="none" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      <polyline points="0,-6 6,0 0,6"  fill="none" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
    </g>
  );
}

function PracticeRace() {
  return (
    <section id="practice" style={{ background: 'var(--soft-4)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">DAY 2 練習賽 · Practice Race</span>
            <h2 style={{ marginTop: 14 }}>小小駕駛員<br /><span className="accent">任務挑戰賽。</span></h2>
          </div>
          <p>
            第二天下午的暖身賽。<strong>不是決賽</strong>，是讓孩子從「不會操作」進入
            「敢操作、會判斷、能合作」的過渡活動。 60–90 分鐘、7 個任務站、每組 5 分鐘。
          </p>
        </div>

        {/* Facts strip */}
        <div className="tour-facts">
          <div className="fact"><div className="k">STATIONS</div><div className="v lg">7<span className="u">關卡</span></div></div>
          <div className="fact"><div className="k">TIMING</div><div className="v lg">5<span className="u">分鐘 / 組</span></div></div>
          <div className="fact"><div className="k">TEAM</div><div className="v lg">2<span className="u">人 · 跨校混編</span></div></div>
          <div className="fact"><div className="k">TOTAL</div><div className="v lg">100<span className="u">分滿分</span></div></div>
          <div className="fact"><div className="k">FORMAT</div><div className="v">練習賽</div></div>
          <div className="fact"><div className="k">FOCUS</div><div className="v">安全 · 合作</div></div>
        </div>

        {/* Course diagram */}
        <div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 24 }}>
          <div style={{ padding: '20px 24px', borderBottom: '2px solid var(--ink)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '.1em' }}>COURSE LAYOUT · 任務站順序</div>
              <div style={{ fontWeight: 800, fontSize: 18, marginTop: 4 }}>沿用微型考照場域 — 簡化為 7 個任務站</div>
            </div>
            <span className="chip"><span className="chip-dot"></span> 從起點到運送，依序挑戰</span>
          </div>
          <div style={{ padding: 24, background: 'var(--paper)' }}>
            <CourseDiagram />
          </div>
        </div>

        {/* 6 station cards */}
        <div className="station-grid">
          {STATIONS.map((s, i) =>
          <div className="station-card" key={s.n} style={{ '--station-color': s.color }}>
              <div className="station-head">
                <div className="station-num">{s.n}</div>
                <div className="station-icon" style={{ background: s.color }}>
                  <StationIcon kind={s.icon} />
                </div>
              </div>
              <div className="station-en">{s.en}</div>
              <h4>{s.name}</h4>
              <p>{s.task}</p>
              <div className="station-focus">
                <span className="mono">FOCUS</span>
                <span>{s.focus}</span>
              </div>
            </div>
          )}
        </div>

        {/* Scoring + bonuses */}
        <div className="practice-grid">
          <div className="card" style={{ padding: 28 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 6 }}>
              <h3>練習賽評分</h3>
              <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>TOTAL · 100 pts</span>
            </div>
            <p style={{ color: 'var(--muted)', fontSize: 13, marginBottom: 18 }}>不要求速度最快，評分以安全、穩定、合作與任務完成為主。</p>
            <ScoreBar label="任務完成度" desc="完成一個任務站給 5–8 分" pts={40} color="var(--mint)" />
            <ScoreBar label="操作穩定度" desc="車輛能平穩前進、轉彎、停止" pts={20} color="var(--blue)" />
            <ScoreBar label="團隊合作" desc="組員有分工、互相提醒、共同完成" pts={20} color="var(--primary)" />
            <ScoreBar label="安全與秩序" desc="遵守場地規則、不衝撞、不搶遙控" pts={10} color="var(--plum)" />
            <ScoreBar label="創意表現" desc="小組命名、口號、策略、車輛造型" pts={10} color="var(--accent)" />
          </div>

          <div className="card" style={{ background: 'var(--ink)', color: 'var(--bg)', padding: 28 }}>
            <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,.55)', letterSpacing: '.1em' }}>BONUS / PENALTY · 加扣分</div>
            <h3 style={{ color: 'var(--primary)', marginTop: 6, fontSize: 22 }}>怎麼加分、怎麼扣分</h3>

            <div className="bp-row" style={{ marginTop: 18 }}>
              <span className="bp-tag bp-plus">+5</span>
              <div>
                <div className="bp-name">寶物成功放置</div>
                <div className="bp-desc">將物件放入指定區域</div>
              </div>
            </div>
            <div className="bp-row">
              <span className="bp-tag bp-minus">−3</span>
              <div>
                <div className="bp-name">衝出場地</div>
                <div className="bp-desc">每次扣 3 分，無法控制由老師復位</div>
              </div>
            </div>
            <div className="bp-row">
              <span className="bp-tag bp-minus">−5</span>
              <div>
                <div className="bp-name">高速碰撞</div>
                <div className="bp-desc">撞擊車輛、同學或器材，每次 −5</div>
              </div>
            </div>
            <div className="bp-row">
              <span className="bp-tag bp-minus">−3~10</span>
              <div>
                <div className="bp-name">組內爭執</div>
                <div className="bp-desc">搶遙控器、推擠或不聽指令</div>
              </div>
            </div>

            <div style={{ marginTop: 22, padding: 14, background: 'rgba(255,255,255,.06)', borderRadius: 10, fontSize: 13, lineHeight: 1.6 }}>
              <strong style={{ color: 'var(--primary)' }}>練習賽提醒：</strong>
              每組限時 5 分鐘，未完成關卡照常給分；卡住可舉手請老師協助復位，
              該關不給分但可繼續挑戰。成績作為第三天正式比賽的參考，不作為唯一排名依據。
            </div>
          </div>
        </div>

        {/* Coach note */}
        <div className="card" style={{ marginTop: 24, padding: 22, background: 'var(--primary)', display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <div style={{ width: 56, height: 56, background: 'var(--ink)', color: 'var(--primary)', display: 'grid', placeItems: 'center', borderRadius: 14, fontFamily: 'var(--font-display)', fontSize: 22 }}>
            👋
          </div>
          <div style={{ flex: '1 1 360px' }}>
            <div style={{ fontWeight: 800, fontSize: 16 }}>給教師與工作人員的提醒</div>
            <div style={{ fontSize: 13.5, color: 'var(--ink-2)', marginTop: 6, lineHeight: 1.7 }}>
              重點不是分高下，是讓<strong>每位學生至少有一次實際操作機會</strong>。
              低年級可安排較短路線；車輛不足時可採輪流操作，未操作學生擔任觀察員或加油團。
              務必建立安全邊界，車輛行駛區與學生等待區分開。
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function ScoreBar({ label, desc, pts, color }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
        <span style={{ fontWeight: 800, fontSize: 15 }}>{label}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22 }}>{pts}<span style={{ fontSize: 12, color: 'var(--muted)', marginLeft: 4 }}>分</span></span>
      </div>
      <div style={{ height: 10, borderRadius: 999, border: '1.5px solid var(--ink)', background: 'var(--bg)', overflow: 'hidden' }}>
        <div style={{ width: `${pts}%`, height: '100%', background: color }}></div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>{desc}</div>
    </div>);

}

window.PracticeRace = PracticeRace;