/* global React */
function Curriculum() {
  return (
    <section id="curriculum" className="mentor">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">04</div>
            <div className="eyebrow">PROGRAM</div>
            <div className="hr"></div>
            <div className="kicker-jp">コース全体像</div>
          </div>
          <div>
            <div className="section-title">
              AIS塾は、<br/>
              <em>2Step</em>構成。
            </div>
          </div>
        </div>

        <div style={{display: "grid", gridTemplateColumns: "1fr", gap: 40, marginTop: 20}}>
          <CurriculumStep
            step="Step 01"
            en="Client Education"
            title="美容意識を上げる顧客教育"
            sub="売上を2倍にする土台を作る"
            contents={["来店頻度を月1回へ", "マイナステントリートメント導入", "売れるカウンセリング習得"]}
            results={["来店が習慣化", "提案が通る", "ホームケアが売れる", "顧客の満足度が上がる"]}
          />
          <CurriculumStep
            step="Step 02"
            en="Subscription Model"
            title="定額制モデル構築"
            sub="一生涯通う顧客を作る"
            contents={["会員メニュー設計", "コース設計", "決済設計", "継続率を高める接客", "チームビルド"]}
            results={["売上が安定", "繁閑差が消える", "誰でも活躍できる組織へ"]}
          />
        </div>
      </div>
    </section>
  );
}

function CurriculumStep({ step, en, title, sub, contents, results }) {
  return (
    <div style={{border: "1px solid var(--line-2)", background: "var(--paper)", display: "grid", gridTemplateColumns: "1fr"}}>
      <div style={{display: "grid", gridTemplateColumns: "1fr", gap: 0}}>
        <div style={{padding: "40px 40px 32px", borderBottom: "1px solid var(--line)"}}>
          <div style={{display: "flex", gap: 20, alignItems: "baseline", flexWrap: "wrap"}}>
            <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: 32, color: "var(--gold)"}}>{step}</div>
            <div style={{fontFamily: "var(--latin-sans)", fontSize: 11, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase"}}>{en}</div>
          </div>
          <h3 style={{marginTop: 12, fontFamily: "var(--serif)", fontSize: "clamp(24px, 2.6vw, 34px)", fontWeight: 500, letterSpacing: "0.06em", lineHeight: 1.5}}>{title}</h3>
          <div style={{marginTop: 8, fontFamily: "var(--serif)", fontSize: 16, color: "var(--gold-deep)", letterSpacing: "0.08em"}}>—— {sub}</div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "1fr", padding: 40, gap: 40}}>
          <div>
            <div style={{fontFamily: "var(--latin-sans)", fontSize: 10, letterSpacing: "0.3em", color: "var(--gold-deep)", textTransform: "uppercase", marginBottom: 16}}>Contents — 内容</div>
            <ul style={{listStyle: "none", padding: 0, margin: 0}}>
              {contents.map((c, i) => (
                <li key={i} style={{padding: "10px 0", paddingLeft: 24, position: "relative", fontFamily: "var(--serif)", fontSize: 15, lineHeight: 1.8, borderBottom: "1px dashed var(--line)"}}>
                  <span style={{position: "absolute", left: 0, top: 10, color: "var(--gold)"}}>—</span>{c}
                </li>
              ))}
            </ul>
          </div>
          <div style={{padding: 24, background: "var(--ivory)", border: "1px solid var(--line)"}}>
            <div style={{fontFamily: "var(--latin-sans)", fontSize: 10, letterSpacing: "0.3em", color: "var(--gold-deep)", textTransform: "uppercase", marginBottom: 16}}>Results — 結果</div>
            <ul style={{listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8}}>
              {results.map((r, i) => (
                <li key={i} style={{fontFamily: "var(--serif)", fontSize: 14.5, lineHeight: 1.8, paddingLeft: 18, position: "relative"}}>
                  <span style={{position: "absolute", left: 0, color: "var(--gold)"}}>✓</span>{r}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
window.Curriculum = Curriculum;