/* global React */
function Benefits() {
  const items = [
    "売上の不安から解放される",
    "お客様が自然と通い続ける",
    "スタッフが育つ",
    "自分がいなくても回る",
    "休みが増える",
  ];
  return (
    <section id="benefits" className="philosophy">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">06</div>
            <div className="eyebrow">BENEFITS</div>
            <div className="hr"></div>
            <div className="kicker-jp">未来・ベネフィット</div>
          </div>
          <div>
            <div className="section-title">
              AIS塾を受講すると、<br/>
              <em>こうなります。</em>
            </div>
          </div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 0, borderTop: "1px solid var(--line-2)"}}>
          {items.map((t, i) => (
            <div key={i} style={{padding: "40px 32px", borderBottom: "1px solid var(--line-2)", borderRight: "1px solid var(--line-2)", background: "var(--paper)"}}>
              <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: 28, color: "var(--gold)", marginBottom: 16}}>{String(i+1).padStart(2, "0")}</div>
              <div style={{fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.8, letterSpacing: "0.04em"}}>{t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Benefits = Benefits;