const WhyUs = () => {
  const items = [
    { n: "01", zh: "高通過率", en: "High Pass Rate", p: "乙丙級通過率長年維持 九成以上，全程模擬考制度，讓你考前就胸有成竹。" },
    { n: "02", zh: "業界師資", en: "Industry Masters", p: "老師擁有開店輔導經驗，並持續於業界接案、培養設計師。" },
    { n: "03", zh: "小班一對一", en: "Small-class", p: "每班最多 12 人，保證老師能手把手看到每一刀、每一筆化妝痕。" },
    { n: "04", zh: "結業輔導", en: "Career Support", p: "合作沙龍推薦就業、創業班提供選址與進貨協助，結業不是終點。" },
  ];
  return (
    <section className="section why">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">為 什 麼 選 美 如 玉</div>
          <h2>四件事，決定了我們與別人不同</h2>
          <div className="sub"><span className="display-en">What sets us apart.</span></div>
        </div>
        <div className="why-grid">
          {items.map((it) => (
            <div key={it.n} className="why-item">
              <div className="n">{it.n}</div>
              <h3>{it.zh}</h3>
              <div className="eyebrow" style={{marginBottom: 14}}>{it.en}</div>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.WhyUs = WhyUs;