function Classes({ onNavigate }) {
  const courses = [
    {
      id: "trial",
      tag: "はじめての方へ",
      title: "体験講座",
      romaji: "trial lesson",
      price: "¥500",
      duration: "約 60 分",
      desc: "墨と筆、そして和紙にはじめて触れる時間。道具はすべてこちらでご用意します。一文字、お好きな字を持ち帰っていただけます。",
      includes: ["筆・墨・紙ご用意あり", "手ぶらでお越しください", "お一人様 1 回まで"],
    },
    {
      id: "regular",
      tag: "通常講座",
      title: "本講座",
      romaji: "regular course",
      price: "¥3,000",
      duration: "約 90 分 / 回",
      desc: "ご自身のペースで、筆文字をじっくり学ぶ講座。月二回ペースが目安です。季節の言葉や、贈りたい言葉を中心にお稽古します。",
      includes: ["少人数制（4 名まで）", "月二回が目安", "お道具持参も可"],
      featured: true,
    },
    {
      id: "private",
      tag: "個別",
      title: "プライベートレッスン",
      romaji: "private session",
      price: "応相談",
      duration: "ご相談ください",
      desc: "ご結婚、ご出産、開業など、特別な節目に合わせた個別のお稽古。ご希望の言葉や仕上がりに合わせて構成します。",
      includes: ["1〜2 名", "出張も応相談", "完全予約制"],
    },
  ];

  return (
    <section className="section classes-section" id="classes">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow">classes &nbsp;·&nbsp; 講座</div>
          <h2 className="section-title">講座のご案内</h2>
          <p className="section-sub">はじめての一筆から、続けるお稽古まで。</p>
        </div>

        <div className="class-grid">
          {courses.map(c => (
            <article key={c.id} className={"class-card" + (c.featured ? " is-featured" : "")}>
              {c.featured && <div className="class-flag">人気の講座</div>}
              <div className="class-tag">{c.tag}</div>
              <h3 className="class-title">
                {c.title}
                <span className="romaji"> &nbsp;{c.romaji}</span>
              </h3>
              <p className="class-desc">{c.desc}</p>
              <ul className="class-list">
                {c.includes.map((it, i) => <li key={i}>{it}</li>)}
              </ul>
              <div className="class-foot">
                <div>
                  <div className="class-price">{c.price}</div>
                  <div className="class-duration">{c.duration}</div>
                </div>
                <button
                  className={"btn " + (c.featured ? "btn-primary" : "btn-outline") + " btn-sm"}
                  onClick={() => onNavigate("contact")}
                >
                  申し込む →
                </button>
              </div>
            </article>
          ))}
        </div>

        <p className="caption classes-note">
          ※ 講座は事前予約制です。お申し込みはお問い合わせフォームからお願いいたします。
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Classes });