const Schedule = () => {
  const rows = [
    { course: "美容乙級證照班", en: "Beauty License · Level B", time: "週二、四 19:00 ~ 22:00", start: "2026 / 05 / 12", seats: 4, status: "招生中", s: "open" },
    { course: "美髮乙級證照班", en: "Hair License · Level B",   time: "週一、三 19:00 ~ 22:00", start: "2026 / 05 / 19", seats: 2, status: "熱門剩 2 位", s: "hot" },
    { course: "美容丙級證照班", en: "Beauty License · Level C", time: "週六 09:00 ~ 17:00",     start: "2026 / 06 / 07", seats: 6, status: "招生中", s: "open" },
    { course: "美髮丙級證照班", en: "Hair License · Level C",   time: "週日 09:00 ~ 17:00",     start: "2026 / 06 / 14", seats: 3, status: "即將額滿", s: "few" },
    { course: "轉職 · 創業班",  en: "Career & Studio Program",  time: "週二、四、六 全日",     start: "2026 / 07 / 01", seats: 5, status: "招生中", s: "open" },
    { course: "男士 Barber 班", en: "Barbering Program",        time: "週一、五 19:00 ~ 22:00", start: "2026 / 07 / 15", seats: 1, status: "熱門剩 1 位", s: "hot" },
  ];
  return (
    <section id="schedule" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">開 課 時 間 表</div>
          <h2>2026 下半年課程梯次</h2>
          <div className="sub"><span className="display-en">Upcoming Cohorts.</span> 小班制、席次有限，建議提早預約試聽。</div>
        </div>
        <table className="schedule-table">
          <thead>
            <tr>
              <th>課程</th>
              <th>上課時段</th>
              <th>開課日</th>
              <th>剩餘名額</th>
              <th>狀態</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="course-cell">{r.course}<span className="en">{r.en}</span></td>
                <td>{r.time}</td>
                <td style={{fontFamily:"var(--font-display)",fontStyle:"italic"}}>{r.start}</td>
                <td style={{color:"var(--ink-2)"}}>{r.seats} 位</td>
                <td><span className={"status " + r.s}>{r.status}</span></td>
                <td><a href="#signup" className="arrow-link">預約 <span className="arr">→</span></a></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
};

window.Schedule = Schedule;