/* global React */
function Results() {
  const stats = [
    { num: "100+", label: "顧問契約数", en: "Clients", desc: "プライム上場企業からスタートアップまで、100社以上の取引実績" },
    { num: "1営業日", label: "標準納期", en: "Response", desc: "ご依頼から原則1営業日以内に納品。ビジネスのスピードを止めません" },
    { num: "98%", label: "有料プラン継続率", en: "Retention", desc: "サービス品質と価格設定への高い満足度を、数字が証明しています" },
    { num: "2–10x", label: "対応スピード比", en: "Velocity", desc: "従来の法律事務所と比較して、2〜10倍の速さで案件対応が可能です" },
  ];
  return (
    <section id="results" className="results section section--ink" data-screen-label="07 Results">
      <div className="container">
        <div className="results__head reveal">
          <span className="eyebrow">By the Numbers</span>
          <h2 className="results__title heading-jp">
            数字で見る、<em>LegalAgent</em>の現在地
          </h2>
        </div>
        <div className="results__grid">
          {stats.map((s, i) => (
            <article key={i} className={`results__item reveal reveal--delay-${(i % 3) + 1} lift`}>
              <span className="kicker-en">{s.en}</span>
              <strong className="results__num num-flicker">{s.num}</strong>
              <span className="results__label">{s.label}</span>
              <p className="results__desc">{s.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Results = Results;