/* global React */
function Problem() {
  const items = [
    "売上が月によってバラバラで不安定",
    "自分がいないとお店が回らない",
    "客単価が上がらない",
    "スタッフが育たず辞めてしまう",
  ];
  return (
    <section id="problem" className="philosophy">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">01</div>
            <div className="eyebrow">ISSUES</div>
            <div className="hr"></div>
            <div className="kicker-jp">共感・悩み</div>
          </div>
          <div>
            <div className="section-title">
              サロン経営で、<br/>
              こんな<em>悩み</em>ありませんか？
            </div>
          </div>
        </div>
        <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 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>
        <p className="quote" style={{marginTop: 56, fontSize: "clamp(20px, 2.2vw, 28px)"}}>
          このまま続けるほど、<br/>
          <em>「時間・売上・人材」</em>すべてが苦しくなります。
        </p>
      </div>
    </section>
  );
}
window.Problem = Problem;