/* global React */
function About() {
  const benefits = [
    "超安定型の売上構造",
    "月初に売上の80％が決まる仕組み",
    "顧客の美容意識が上がる導線",
    "属人化しないチーム経営",
    "誰でも成果を出せる仕組み",
  ];
  return (
    <section id="about" className="flow">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">02</div>
            <div className="eyebrow">SOLUTION</div>
            <div className="hr"></div>
            <div className="kicker-jp">AIS塾とは？</div>
          </div>
          <div>
            <div className="section-title">
              その悩み、<br/>
              <em>AIS塾</em>で解決できます。
            </div>
            <p style={{marginTop: 32, fontFamily: "var(--serif)", fontSize: 17, lineHeight: 2.1, color: "var(--ink-2)", letterSpacing: "0.04em"}}>
              売上を追い続ける経営から抜け出し、<br/>
              <strong style={{color: "var(--gold-deep)"}}>「安定して伸び続けるサロン」</strong>へ変える仕組みを学ぶ、<br/>
              実践型プログラム。定額制（サブスク型）美容室の仕組みを学び、
              自分のサロンに落とし込むためのAIS塾です。
            </p>
          </div>
        </div>

        <div style={{marginTop: 40, padding: "48px 0", borderTop: "1px solid var(--line-2)", borderBottom: "1px solid var(--line-2)"}}>
          <div style={{fontFamily: "var(--latin-sans)", fontSize: 11, letterSpacing: "0.3em", color: "var(--gold-deep)", textTransform: "uppercase", marginBottom: 28}}>
            What You Gain — 得られること
          </div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "20px 40px"}}>
            {benefits.map((b, i) => (
              <div key={i} style={{display: "grid", gridTemplateColumns: "36px 1fr", gap: 16, alignItems: "baseline"}}>
                <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: 22, color: "var(--gold)"}}>{String(i+1).padStart(2, "0")}</div>
                <div style={{fontFamily: "var(--serif)", fontSize: 16, lineHeight: 1.8, letterSpacing: "0.04em"}}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;