/* global React */
function AINative() {
  return (
    <section id="ai-native" className="ai-native section section--ink" data-screen-label="06 AI Native">
      <div className="container">
        <div className="ai-native__head reveal">
          <div>
            <span className="eyebrow">Our Approach to AI</span>
            <h2 className="ai-native__title heading-jp">
              AIに<em>置き換える</em>のではなく、<br/>
              AIで<em>武装する</em>
            </h2>
          </div>
          <p className="ai-native__lede body-jp">
            弁護士が、AI Agentを使いこなし、リサーチ・ドラフティング・レビューを高速化<br/>
            その上で、判断と責任は弁護士が担う——それが LegalAgent の AI Native です
          </p>
        </div>

        <div className="ai-native__diagram reveal reveal--delay-1">
          <div className="ai-native__node ai-native__node--client">
            <span className="kicker-en">Client</span>
            <strong>貴社の法務</strong>
            <em>Slack / Teams</em>
          </div>
          <div className="ai-native__flow">
            <span className="ai-native__flow-line" />
            <span className="ai-native__flow-label">02 連携</span>
          </div>
          <div className="ai-native__node ai-native__node--center">
            <span className="kicker-en">LegalAgent</span>
            <strong>専門弁護士</strong>
            <em>+ 自社開発 AI Agent</em>
            <ul className="ai-native__node-list">
              <li>判例・法令リサーチ</li>
              <li>ドラフティング支援</li>
              <li>レビュー差分検知</li>
              <li>ナレッジ蓄積</li>
            </ul>
          </div>
          <div className="ai-native__flow">
            <span className="ai-native__flow-line" />
            <span className="ai-native__flow-label">03 納品</span>
          </div>
          <div className="ai-native__node ai-native__node--output">
            <span className="kicker-en">Output</span>
            <strong>高速・高品質</strong>
            <em>当日〜翌営業日</em>
          </div>
        </div>

        <div className="ai-native__pillars">
          <article className="ai-native__pillar reveal reveal--delay-1">
            <span className="tag-num">01</span>
            <h3>セキュア基盤</h3>
            <p>外部通信・データを全て暗号化。適切なユーザー管理により、関係者以外がチャット履歴を参照することはありません</p>
          </article>
          <article className="ai-native__pillar reveal reveal--delay-2">
            <span className="tag-num">02</span>
            <h3>判断は人間が担う</h3>
            <p>AIは、リサーチ・ドラフト・レビューの効率化に限定的に活用。最終的な法的判断と責任は、必ず弁護士が担います</p>
          </article>
          <article className="ai-native__pillar reveal reveal--delay-3">
            <span className="tag-num">03</span>
            <h3>蓄積されるナレッジ</h3>
            <p>貴社の社内ルール・取引慣行・過去の判断履歴を学習し、属人化させない。組織として法務品質を上げ続けます</p>
          </article>
          <article className="ai-native__pillar reveal reveal--delay-1">
            <span className="tag-num">04</span>
            <h3>固定価格を実現</h3>
            <p>AI活用による効率化を価格に還元。タイムチャージではなく、固定価格でコストの予見性を担保します</p>
          </article>
        </div>
      </div>
    </section>
  );
}

window.AINative = AINative;