/* global React */
const { useEffect, useRef } = React;

function Services() {
  return (
    <section id="services" className="services section section--paper" data-screen-label="02 Services">
      <div className="container">
        <div className="services__head reveal">
          <div>
            <span className="eyebrow">Our Services</span>
            <h2 className="services__title heading-jp">
              <span className="heading-line">専門性と迅速性を</span>
              <span className="heading-line">兼ね備えた、</span>
              <span className="heading-line">生成AI時代の<em className="heading-nowrap">法律事務所</em></span>
            </h2>
          </div>
          <p className="services__lede body-jp">専門性を持った弁護士が、貴社のビジネスに深く入り込み、内製化に近い形で法務を支援します。法務アウトソーシング、M&A支援、スタートアップの資金調達支援まで、一気通貫で対応いたします。

          </p>
        </div>

        <div className="services__grid">
          <article className="services__card reveal reveal--delay-1 lift spotlight">
            <div className="services__card-meta">
              <span className="tag-num">01</span>
              <span className="label">Retainer · Legal Outsourcing</span>
            </div>
            <h3 className="services__card-title">
              <em>Legal Outsourcing</em><br />法務アウトソーシング
            </h3>
            <p className="services__card-desc">
              法務アウトソーシングとして、Slack・Teams に常駐する弁護士が、貴社の社内法務部員に近い形で対応します。受身の相談対応にとどまらず、法務リスクを早期に検知し、ビジネスの意思決定を支えます。
            </p>
            <ul className="services__card-list">
              <li><span>01</span>契約書レビュー・ドラフト</li>
              <li><span>02</span>労務・コンプライアンス相談</li>
              <li><span>03</span>知的財産・利用規約の整備</li>
              <li><span>04</span>社内規程・ガバナンス支援</li>
            </ul>
            <div className="services__card-foot">
              <a href="/services/legal-outsourcing/" className="services__card-link hover-line">サービスの詳細 →</a>
            </div>
            <div className="services__card-figure" aria-hidden="true">
              <div className="services__figure-mock">
                <div className="services__figure-head">
                  <span /><span /><span />
                  <em>Slack — #legal-channel</em>
                </div>
                <div className="services__figure-line">
                  <strong>クライアント様</strong>
                  <p>新規取引先からNDAが届きました。レビューお願いできますか。</p>
                </div>
                <div className="services__figure-line services__figure-line--us">
                  <strong>担当弁護士</strong>
                  <p>承知しました。本日中にコメント付きでお戻しいたします。<br /><em>nda_review.docx · 添付済み ✓</em></p>
                </div>
              </div>
            </div>
          </article>

          <article className="services__card services__card--dark reveal reveal--delay-2 lift spotlight">
            <div className="services__card-meta">
              <span className="tag-num">02</span>
              <span className="label">M&amp;A Support</span>
            </div>
            <h3 className="services__card-title">
              <em>M&amp;A Support</em><br />M&A支援
            </h3>
            <p className="services__card-desc">
              「法務でディールが停滞する」という課題を解消します。資料開示から2〜5営業日で初期リスク分析を完了し、リーガルデューデリジェンス、SPA交渉、論点整理を高速化します。
            </p>
            <ul className="services__card-list">
              <li><span>01</span>リーガルデューデリジェンス</li>
              <li><span>02</span>SPA・株主間契約の作成・交渉</li>
              <li><span>03</span>表明保証・補償条項の設計</li>
              <li><span>04</span>クロージング・PMI対応</li>
            </ul>
            <div className="services__card-foot">
              <a href="/services/ma/" className="services__card-link hover-line">サービスの詳細 →</a>
            </div>
            <div className="services__card-figure" aria-hidden="true">
              <div className="services__figure-deal">
                <div className="services__figure-deal-row">
                  <span className="label">Deal Stage</span>
                  <em>Phase 02 / 04</em>
                </div>
                <div className="services__figure-deal-bar">
                  <span style={{ width: "55%" }} />
                </div>
                <ul className="services__figure-deal-list">
                  <li><strong>D-01</strong>資料開示・スコープ確定<em>完了</em></li>
                  <li><strong>D-02</strong>リーガルDD・論点整理<em>進行中</em></li>
                  <li><strong>D-03</strong>SPAドラフト・交渉<em>—</em></li>
                  <li><strong>D-04</strong>クロージング対応<em>—</em></li>
                </ul>
              </div>
            </div>
          </article>

          <article className="services__card reveal reveal--delay-3 lift spotlight">
            <div className="services__card-meta">
              <span className="tag-num">03</span>
              <span className="label">Startup Legal · Fundraising</span>
            </div>
            <h3 className="services__card-title">
              <em>Startup Legal</em><br />スタートアップ法務
            </h3>
            <p className="services__card-desc">
              シードからIPO直前まで、フェーズに応じた法務を伴走支援します。資金調達支援を中心に、創業期の体制整備、投資契約、SO設計、上場準備まで、成長を止めない法務基盤を提供します。
            </p>
            <ul className="services__card-list">
              <li><span>01</span>創業・資本政策・株主間契約</li>
              <li><span>02</span>シード・シリーズAの資金調達対応</li>
              <li><span>03</span>投資契約・優先株式・J-KISS対応</li>
              <li><span>04</span>ストックオプション設計・登記</li>
            </ul>
            <div className="services__card-foot">
              <a href="/services/startup-legal/" className="services__card-link hover-line">サービスの詳細 →</a>
            </div>
            <div className="services__card-figure" aria-hidden="true">
              <div className="services__figure-deal">
                <div className="services__figure-deal-row">
                  <span className="label">Growth Stage</span>
                  <em>Seed → IPO</em>
                </div>
                <div className="services__figure-deal-bar">
                  <span style={{ width: "40%" }} />
                </div>
                <ul className="services__figure-deal-list">
                  <li><strong>G-01</strong>創業・資本政策<em>整備</em></li>
                  <li><strong>G-02</strong>シリーズA／SO設計<em>進行中</em></li>
                  <li><strong>G-03</strong>シリーズB以降<em>—</em></li>
                  <li><strong>G-04</strong>IPO準備<em>—</em></li>
                </ul>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>);

}

window.Services = Services;