const Courses = () => {
  const courses = [
    {
      num: "01",
      zh: "美容乙丙級證照班",
      en: "Beauty Licensing",
      desc: "從皮膚學、化妝、護膚到衛生概論，從零基礎到考照一次到位。李老師親自帶班，小班實作。",
      tags: ["乙級 · 丙級", "彈性梯次", "李老師親授"],
      price: "歡迎來電洽詢",
      img: "img/course-beauty.jpg",
      focus: "center 30%",
    },
    {
      num: "02",
      zh: "美髮乙丙級證照班",
      en: "Hair Licensing",
      desc: "剪、燙、染、造型全流程訓練。考照必備技法 + 沙龍實戰，為進入專業沙龍做準備。",
      tags: ["乙級 · 丙級", "實作優先", "彈性梯次"],
      price: "歡迎來電洽詢",
      img: "img/course-hair.jpg",
      focus: "center 35%",
    },
    {
      num: "03",
      zh: "轉職 · 創業班",
      en: "Career & Studio",
      desc: "證照 + 開店實務整合課程。包含成本管控、空間陳設、社群經營與客戶維繫一條龍。",
      tags: ["全日進修", "含創業輔導", "在地深耕"],
      price: "歡迎來電洽詢",
      img: "img/course-startup.jpg",
      focus: "center 40%",
    },
    {
      num: "04",
      zh: "男士理髮班",
      en: "Barbering",
      desc: "專攻男士剪髮、推剃、鬍鬚修面與傳統理髮。乙丙級證照輔導，適合男性進修與開店。",
      tags: ["男士理髮", "乙級 · 丙級", "獨立練習工位"],
      price: "歡迎來電洽詢",
      img: "img/course-barber.jpg",
      focus: "center 30%",
      barber: true,
    },
  ];
  return (
    <section id="courses" className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">課 程 總 覽</div>
          <h2 className="zh-serif">
            <span className="u-gold-line"/>四大主力課程<span className="u-gold-line"/>
          </h2>
          <div className="sub"><span className="display-en">Four Disciplines.</span> 一技在手，從證照到開店的完整路徑。</div>
        </div>

        <div className="courses-grid">
          {courses.map((c) => (
            <article key={c.num} className={"course-card" + (c.barber ? " barber" : "")}>
              <div className="cover">
                <ImgPh src={c.img} label={c.zh} focus={c.focus} tone={c.barber ? "dark" : "warm"} />
                <div className="num">{c.num}</div>
              </div>
              <div className="body">
                <div>
                  <h3>{c.zh}</h3>
                  <div className="en-name">{c.en}</div>
                </div>
                <p className="desc">{c.desc}</p>
                <div className="meta">
                  {c.tags.map((t) => <span key={t} className="pill">{t}</span>)}
                </div>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginTop: 4}}>
                  <span className="price">{c.price}</span>
                  <a href="#signup" className="arrow-link">瞭解詳情 <span className="arr">→</span></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Courses = Courses;