const Works = () => {
  const works = [
    { tag: "證照合格", label: "結業合影 · 乙丙級榮獲",   img: "img/cert-01.jpg", cls: "w-1", focus: "center 22%" },
    { tag: "證照合格", label: "結業合影 · 全班合照",     img: "img/cert-02.jpg", cls: "w-2", focus: "center 22%" },
    { tag: "證照合格", label: "結業合影 · 跨齡同學",     img: "img/cert-03.jpg", cls: "w-3", focus: "center 25%" },
    { tag: "結業大合照", label: "結業合影 · 比讚那一刻", img: "img/cert-04.jpg", cls: "w-4", focus: "center 25%" },
    { tag: "教學現場", label: "美髮捲燙 · 老師示範",     img: "img/cert-05.jpg", cls: "w-5", focus: "center 50%" },
    { tag: "證照合格", label: "結業合影 · 七位同期合格", img: "img/cert-06.jpg", cls: "w-6", focus: "center 35%" },
    { tag: "課堂實作", label: "學員剪髮練習 · 真人模具", img: "img/cert-07.jpg", cls: "w-7", focus: "center 45%" },
  ];
  return (
    <section id="works" className="section" style={{background: "var(--paper-2)"}}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">學 員 成 果</div>
          <h2>每一張證照，都是親手考過的</h2>
          <div className="sub"><span className="display-en">Certified Together.</span> 跟著李老師，從一張證照走到下一張。</div>
        </div>

        <div className="works-gallery">
          {works.map((w, i) => (
            <div key={i} className={"work " + w.cls}>
              <div className="tag">{w.tag}</div>
              <ImgPh src={w.img} label={w.label} focus={w.focus} />
            </div>
          ))}
        </div>

      </div>
    </section>
  );
};

window.Works = Works;