/* global React */
function Audience() {
  return (
    <section id="audience" className="flow">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">07</div>
            <div className="eyebrow">FOR WHOM</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(300px, 1fr))", gap: 24}}>
          <AudienceCard
            label="Type A"
            title="スタッフがいるサロン"
            points={["経営に限界を感じている", "属人化をなくしたい", "離職を防ぎたい", "任せる組織を作りたい"]}
          />
          <AudienceCard
            label="Type B"
            title="個人・夫婦サロン"
            points={["このまま働き続けるのが不安", "もっと余裕を持ちたい", "生産性を上げたい", "休みを増やしたい"]}
          />
        </div>
      </div>
    </section>
  );
}

function AudienceCard({ label, title, points }) {
  return (
    <div style={{background: "var(--paper)", border: "1px solid var(--line-2)", padding: 40}}>
      <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: 22, color: "var(--gold)"}}>{label}</div>
      <h3 style={{marginTop: 8, fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500, letterSpacing: "0.08em", lineHeight: 1.5}}>{title}</h3>
      <div style={{width: 48, height: 1, background: "var(--gold)", margin: "24px 0"}}></div>
      <ul style={{listStyle: "none", padding: 0, margin: 0}}>
        {points.map((p, i) => (
          <li key={i} style={{padding: "12px 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: 12, color: "var(--gold)"}}>—</span>{p}
          </li>
        ))}
      </ul>
    </div>
  );
}
window.Audience = Audience;