const Teachers = () => {
  const credentials = [
    "美容美髮理髮 乙級／丙級 技術士",
    "勞動部技能檢定 監評資歷",
    "創業班・深造班・職前訓練 主理教師",
  ];
  const expertise = [
    { k: "美容", v: "基礎護膚 · 彩妝 · 乙丙級術科" },
    { k: "美髮", v: "剪燙染造型 · 沙龍實戰 · 乙丙級術科" },
    { k: "理髮", v: "傳統理髮 · 男士修剪 · 乙丙級術科" },
    { k: "創業", v: "開店成本估算 · 設備採購 · 客群經營" },
  ];
  return (
    <section id="teachers" className="section" style={{background: "var(--paper)"}}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">主 理 老 師</div>
          <h2>最專業的老師 協助你踏上最專業的道路</h2>
          <div className="sub"><span className="display-en">Meet the Master.</span></div>
        </div>

        <div className="teacher-solo">
          <div className="teacher-solo-portrait">
            <ImgPh src="img/teacher-portrait.jpg" label="李秀裡老師肖像" focus="center 25%" />
            <div className="teacher-solo-badge">
              <div className="zh">主理老師</div>
              <div className="en">Founder · Master</div>
            </div>
          </div>

          <div className="teacher-solo-info">
            <div className="kicker">
              <span className="line" />
              <span className="eyebrow">Lee Hsiu-Li · since 1980</span>
            </div>
            <h3 className="teacher-solo-name">
              李秀裡 <span className="teacher-solo-name-zh">老師</span>
              <em className="teacher-solo-name-en">Lee Hsiu-Li</em>
            </h3>
            <p className="teacher-solo-lede">
              從成立至今，美如玉從一把剪刀、一支刷子，陪著一屆又一屆學員走過考照、進沙龍、開自己的店。
            </p>

            <div className="teacher-solo-creds">
              <h5>資歷</h5>
              <ul>
                {credentials.map((c) => <li key={c}>{c}</li>)}
              </ul>
            </div>

            <div className="teacher-solo-expertise">
              <h5>教學專業</h5>
              <div className="grid">
                {expertise.map((e) => (
                  <div key={e.k} className="cell">
                    <div className="k">{e.k}</div>
                    <div className="v">{e.v}</div>
                  </div>
                ))}
              </div>
            </div>

            <div className="teacher-solo-quote">
              <span className="mark">「</span>
              一個學生來，我教到他考過、會做、能養活自己，才算我教完了。
              <span className="mark">」</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Teachers = Teachers;