/* global React */
function Cases() {
  const cases = [
    {
      tag: "Case 01",
      kind: "プライム上場企業 A社",
      sector: "Listed Enterprise",
      headline: "契約レビューの工数を、最大10分の1に",
      body: "従来、10〜30ページに及ぶ契約書の全文チェックが求められ、法務部門の負担が非常に大きい状況でした。LegalAgentの導入後、自社レビュー基準に基づき重要箇所のみを効率的に確認する運用へと移行し、契約レビュー工数が5〜10分の1に短縮されました",
      voice: "固定料金による明確なコスト設定は、コストの把握という観点からも非常に安心感があります",
      kpi: [
        { v: "1/10", l: "工数削減" },
        { v: "固定", l: "料金体系" },
      ],
    },
    {
      tag: "Case 02",
      kind: "Boost Capital 様",
      sector: "Venture Capital",
      headline: "投資決定から実行までが、格段にスピードアップ",
      body: "スタートアップ投資で締結が必要な、投資契約書・株主間契約書・分配合意書・定款といった複雑かつ長大な契約書についても、固定金額で、クオリティの高い成果物を即時に受領できます。スタートアップ投資においてはスピード感が重要です",
      voice: "法的リスクを定額・素早く把握でき、投資決定から実行までのスピードが格段に上がりました",
      kpi: [
        { v: "定額", l: "契約4点セット" },
        { v: "即時", l: "納品" },
      ],
    },
  ];
  return (
    <section className="cases section section--paper-2" data-screen-label="08 Case Studies">
      <div className="container">
        <div className="cases__head reveal">
          <span className="eyebrow">Case Studies</span>
          <h2 className="cases__title heading-jp">導入事例</h2>
        </div>
        <div className="cases__grid">
          {cases.map((c, i) => (
            <article key={i} className={`case-card reveal reveal--delay-${i + 1} lift spotlight`}>
              <div className="case-card__head">
                <span className="tag-num">{c.tag}</span>
                <span className="kicker-en">{c.sector}</span>
              </div>
              <span className="label case-card__kind">{c.kind}</span>
              <h3 className="case-card__title">{c.headline}</h3>
              <p className="case-card__body">{c.body}</p>
              <blockquote className="case-card__voice">
                <span className="case-card__quote">”</span>
                {c.voice}
              </blockquote>
              <div className="case-card__kpi">
                {c.kpi.map((k, j) => (
                  <div key={j}>
                    <strong>{k.v}</strong>
                    <em>{k.l}</em>
                  </div>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Cases = Cases;