/* global React */
function Essence() {
  const cycle = ["学ぶ", "実践する", "検証する", "改善する"];
  const features = [
    "すぐに使える仕組みを提供",
    "そのまま真似して結果を出すことも可能",
    "自サロンに合わせたカスタマイズも可能",
  ];
  return (
    <section id="essence" className="course">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num" style={{color: "var(--gold-soft)"}}>03</div>
            <div className="eyebrow">ESSENCE</div>
            <div className="hr" style={{background: "var(--gold-soft)"}}></div>
            <div className="kicker-jp" style={{color: "var(--muted-2)"}}>塾の本質</div>
          </div>
          <div>
            <div className="section-title">
              知識を学ぶだけでは、<br/>
              <em style={{color: "var(--gold-soft)"}}>ありません。</em>
            </div>
          </div>
        </div>

        <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 0, margin: "60px 0", border: "1px solid rgba(201,168,103,0.22)"}}>
          {cycle.map((c, i) => (
            <div key={i} style={{padding: "48px 32px", textAlign: "center", borderRight: i < cycle.length - 1 ? "1px solid rgba(201,168,103,0.22)" : "none", position: "relative"}}>
              <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: 40, color: "var(--gold-soft)", lineHeight: 1}}>{String(i+1).padStart(2, "0")}</div>
              <div style={{marginTop: 20, fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "0.12em"}}>{c}</div>
            </div>
          ))}
        </div>

        <p style={{fontFamily: "var(--serif)", fontSize: "clamp(18px, 2vw, 24px)", lineHeight: 2, color: "rgba(250,247,242,0.9)", letterSpacing: "0.06em", textAlign: "center"}}>
          このサイクルを回しながら、<br/>
          <em style={{fontStyle: "normal", color: "var(--gold-soft)"}}>"あなたのサロン専用の定額モデル"</em>を完成させます。
        </p>

        <div style={{marginTop: 60, paddingTop: 40, borderTop: "1px solid rgba(201,168,103,0.22)", display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 24}}>
          {features.map((f, i) => (
            <div key={i} style={{padding: "24px 28px", border: "1px solid rgba(201,168,103,0.22)", display: "flex", gap: 16, alignItems: "baseline"}}>
              <span style={{color: "var(--gold-soft)", fontSize: 18}}>✓</span>
              <div style={{fontFamily: "var(--serif)", fontSize: 15.5, lineHeight: 1.8, color: "rgba(250,247,242,0.9)"}}>{f}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Essence = Essence;