/* 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>専門性と迅速性を兼ね備えた、</span>
              <span>新時代の<em>法律事務所</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 · 顧問サービス</span>
            </div>
            <h3 className="services__card-title">
              <em>In-House Counsel</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="#strengths" 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 · Investment</span>
            </div>
            <h3 className="services__card-title">
              <em>M&amp;A &amp; Capital</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>SO発行・登記対応</li>
            </ul>
            <div className="services__card-foot">
              <a href="#focus" className="services__card-link hover-line">M&A支援を見る →</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</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>ストックオプション設計・登記</li>
              <li><span>04</span>規約・利用規約・プライバシーポリシー整備</li>
            </ul>
            <div className="services__card-foot">
              <a href="#strengths" 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;