const Testimonials = () => {
  const slides = [
    {
      quote: "從行政轉職到美容師，我本來以為三十五歲才開始太晚了。林老師幫我把化妝的每個步驟拆開來一次次練，半年後我不只考過乙級，還進了信義區的沙龍。",
      name: "Emma · 張韵嫻",
      role: "轉職美容師 · 前行政專員",
      tag: "女性轉職見證",
      photo: "學員肖像 · 轉職見證",
    },
    {
      quote: "開自己的店是我從二十歲就有的夢想。美如玉的創業班把選址、成本到社群經營全教完，第八個月我的小店收支平衡了。現在回想，最值得的投資就是那一張證照。",
      name: "Tina · 吳映凡",
      role: "自有沙龍主理人",
      tag: "創業開店見證",
      photo: "學員肖像 · 創業開店",
    },
    {
      quote: "男生學美容美髮，一開始真的不好意思走進補習班。但 Barber 班是獨立教室、男師主帶，我在裡面學剪、學修面、學怎麼跟客人聊天。現在我是中山區 Barber Shop 的駐店設計師。",
      name: "Kai · 蔡凱豪",
      role: "Barber 駐店設計師",
      tag: "男學員 Barber 見證",
      photo: "學員肖像 · Barber",
      dark: true,
    },
  ];
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((x) => (x + 1) % slides.length), 7000);
    return () => clearInterval(t);
  }, []);
  const prev = () => setI((x) => (x - 1 + slides.length) % slides.length);
  const next = () => setI((x) => (x + 1) % slides.length);

  return (
    <section className="section testimonials">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow-zh">學 員 心 得</div>
          <h2>每一個走出教室的身影，都有故事</h2>
          <div className="sub"><span className="display-en">Voices from our alumni.</span></div>
        </div>

        <div className="testi-stage">
          {slides.map((s, idx) => (
            <div key={idx} className={"testi-slide " + (idx === i ? "active" : "")}>
              <div className="portrait">
                <ImgPh label={s.photo} tone={s.dark ? "dark" : "warm"} />
              </div>
              <div>
                <p className="testi-quote">{s.quote}</p>
                <div className="testi-meta">
                  <span className="name">{s.name}</span>
                  <span className="role">{s.role}</span>
                  <span className="tag">{s.tag}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="testi-controls">
          <div className="testi-dots">
            {slides.map((_, idx) => (
              <button key={idx} aria-label={`見證 ${idx+1}`}
                className={"testi-dot " + (idx === i ? "active" : "")}
                onClick={() => setI(idx)} />
            ))}
          </div>
          <div className="testi-nav">
            <button onClick={prev} aria-label="上一則">←</button>
            <button onClick={next} aria-label="下一則">→</button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Testimonials = Testimonials;