const ExamInfo = () => {
  // 115 年度（2026）技術士技能檢定全國統一日程
  // 來源：勞動部勞動力發展署技能檢定中心 https://skill.tcte.edu.tw/schedule.php
  const exams = [
    { month: "MAY", day: "05", y: "2026", name: "第二梯次 報名截止", sub: "美容、女子美髮、男子理髮 乙級+丙級｜4/24 起報名", count: "報名中" },
    { month: "JUL", day: "05", y: "2026", name: "第二梯次 學科測試", sub: "乙級+丙級 統一測試日｜7/5（日）", count: "全年最大梯次" },
    { month: "SEP", day: "07", y: "2026", name: "第三梯次 報名截止", sub: "僅 丙級｜8/27 起報名", count: "丙級最後機會" },
    { month: "NOV", day: "08", y: "2026", name: "第三梯次 學科測試", sub: "僅 丙級 學科｜11/8（日）", count: "今年壓軸場" },
  ];
  const rates = [
    { label: "美容乙級 · 2025 年度通過率", value: 96, n: "96%" },
    { label: "美髮乙級 · 2025 年度通過率", value: 92, n: "92%" },
    { label: "美容丙級 · 2025 年度通過率", value: 98, n: "98%" },
    { label: "美髮丙級 · 2025 年度通過率", value: 97, n: "97%" },
  ];
  return (
    <section id="exam" className="section" style={{background: "var(--paper)"}}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">考 照 資 訊</div>
          <h2>115 年度乙丙級考試時程</h2>
          <div className="sub"><span className="display-en">License Exam Schedule · 2026</span> 美容、女子美髮、男子理髮 一年三梯次</div>
        </div>

        <div className="exam-grid">
          <div className="exam-list">
            {exams.map((e, i) => (
              <div key={i} className="exam-row">
                <div className="date">
                  {e.day}<small>{e.month} · {e.y}</small>
                </div>
                <div className="name">
                  {e.name}
                  <small>{e.sub}</small>
                </div>
                <div className="countdown">{e.count}</div>
                <a href="#signup" className="arrow-link">報名輔導 <span className="arr">→</span></a>
              </div>
            ))}
          </div>

          <aside className="exam-stats">
            <div className="eyebrow">Pass Rate · 2025</div>
            <h3>歷年通過率</h3>
            <div className="rate-list">
              {rates.map((r) => (
                <div key={r.label} className="rate-item">
                  <div className="label"><span>{r.label}</span><span className="n">{r.n}</span></div>
                  <div className="bar"><div className="fill" style={{ width: r.value + "%" }}/></div>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 28, fontSize: 12.5, color: "#c0a58c", letterSpacing: ".12em", lineHeight: 1.8 }}>
              *上方時程依勞動部技能檢定中心 115 年度全國日程，<br/>術科地點與日期由術科辦理單位於測試前 14 日寄送通知。<br/>
              通過率為示意數據，實際成績依官方公告。
            </p>
          </aside>
        </div>
      </div>
    </section>
  );
};

window.ExamInfo = ExamInfo;