/* global React */
function Results() {
  const stats = [
    {
      num: "100+", label: "顧問契約数", en: "Clients",
      desc: "プライム上場企業からスタートアップまで、100社以上の取引実績。",
      // Counter animation: 0 → 100, suffix "+"
      countTo: 100, countSuffix: "+", countPrefix: "",
    },
    {
      num: "1営業日", label: "標準納期", en: "Response",
      desc: "ご依頼から原則1営業日以内に納品。ビジネスのスピードを止めません。",
      // Countdown: 10 → 1 営業日(従来事務所の体感値からの圧縮を表現)
      countFrom: 10, countTo: 1, countSuffix: "営業日", countPrefix: "",
    },
    {
      num: "98%", label: "有料プラン継続率", en: "Retention",
      desc: "サービス品質と価格設定への高い満足度を、数字が証明しています。",
      // Counter: 0 → 98, suffix "%"
      countTo: 98, countSuffix: "%", countPrefix: "",
    },
    {
      num: "2–10x", label: "対応スピード比", en: "Velocity",
      desc: "従来の法律事務所と比較して、2〜10倍の速さで案件対応が可能です。",
      // Counter: 0 → 10, prefix "2–", suffix "x"
      countTo: 10, countSuffix: "x", countPrefix: "2–",
    },
  ];
  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"
                data-count-to={s.countTo}
                data-count-from={s.countFrom != null ? s.countFrom : 0}
                data-count-prefix={s.countPrefix}
                data-count-suffix={s.countSuffix}
                data-count-duration="1800"
              >
                {s.num}
              </strong>
              <span className="results__label">{s.label}</span>
              <p className="results__desc">{s.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Results = Results;