/* global React */
function Challenges() {
  const issues = [
    { num: "01", title: "法務部の業務逼迫", desc: "法務部員の人材不足により、業務が増大・逼迫している。優秀な法務部員の採用は人材紹介費用だけで200〜400万円" },
    { num: "02", title: "受身・保守的な対応", desc: "従来の法律事務所は受身・保守的で、ビジネスのスピードと乖離。重要な意思決定が、法務待ちで停滞してしまう" },
    { num: "03", title: "不透明なタイムチャージ", desc: "従来の事務所は時間単価制が中心で、見積もりが立たない。コストの予見性が低く、相談を躊躇させてしまう" },
    { num: "04", title: "事業理解の浅さ", desc: "外部の弁護士は、貴社のビジネスや社内ルールを把握しないまま回答することが多く、実務に踏み込んだ提案ができない" },
  ];
  return (
    <section className="challenges section section--ink" data-screen-label="03 Challenges">
      <div className="container">
        <div className="challenges__head reveal">
          <div className="challenges__head-text">
            <span className="eyebrow">The Problem</span>
            <h2 className="challenges__title heading-jp">
              企業と法律事務所が抱える、<br/>根深い<em>四つの課題</em>
            </h2>
          </div>
          <p className="challenges__lede body-jp">
            法務の現場では、人材不足とコスト負担、保守的な対応とスピード乖離が常態化しています。<br/>
            LegalAgentは、高い専門性とスピード、そして事業理解に基づいて、これらを根本から解消します
          </p>
        </div>

        <div className="challenges__grid">
          {issues.map((it, i) => (
            <article key={it.num} className={`challenges__item reveal reveal--delay-${i + 1} lift`}>
              <span className="challenges__num">{it.num}</span>
              <h3 className="challenges__item-title">{it.title}</h3>
              <p className="challenges__item-desc">{it.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Challenges = Challenges;