/* global React */
function Results() {
  const metrics = [
    { n: "5% → 86%", l: "パーマ率" },
    { n: "120%", l: "売上・前年比" },
    { n: "¥960,000", l: "トリートメント売上（3ヶ月）" },
  ];
  const voices = [
    "マンネリを打破できた",
    "顧客との信頼関係が深まった",
    "売上だけでなく\"楽しさ\"が戻った",
    "スタッフとの関係性が変わった",
  ];
  return (
    <section id="results" className="voice">
      <div className="container">
        <div className="section-head">
          <div className="label-col">
            <div className="num">05</div>
            <div className="eyebrow">RESULTS</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: 24, marginBottom: 80}}>
          {metrics.map((m, i) => (
            <div key={i} style={{padding: "48px 36px", background: "var(--paper)", borderTop: "2px solid var(--gold)"}}>
              <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: "clamp(40px, 4.5vw, 60px)", color: "var(--gold-deep)", lineHeight: 1, letterSpacing: "0.02em"}}>{m.n}</div>
              <div style={{marginTop: 20, paddingTop: 16, borderTop: "1px solid var(--line)", fontSize: 12.5, letterSpacing: "0.22em", color: "var(--muted)", textTransform: "uppercase"}}>{m.l}</div>
            </div>
          ))}
        </div>

        <div style={{paddingTop: 60, borderTop: "1px solid var(--line)"}}>
          <div style={{fontFamily: "var(--latin-sans)", fontSize: 11, letterSpacing: "0.32em", color: "var(--gold-deep)", textTransform: "uppercase", marginBottom: 28}}>Voices — 受講者の声</div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 20}}>
            {voices.map((v, i) => (
              <div key={i} style={{padding: "28px 32px", background: "var(--paper)", position: "relative"}}>
                <div style={{fontFamily: "var(--latin-serif)", fontStyle: "italic", fontSize: 40, color: "var(--gold-soft)", lineHeight: 0.6, position: "absolute", top: 18, right: 20}}>"</div>
                <p style={{fontFamily: "var(--serif)", fontSize: 15, lineHeight: 2, letterSpacing: "0.04em", color: "var(--ink-2)", margin: 0}}>{v}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Results = Results;