/* global React */
function Practice() {
  const areas = [
    { num: "01", t: "契約関連業務", d: "契約書の作成・レビュー・修正" },
    { num: "02", t: "スタートアップ法務", d: "創業・資本政策、SO設計、資金調達対応" },
    { num: "03", t: "コンプライアンス支援", d: "個人情報保護法、下請法、フリーランス保護法等" },
    { num: "04", t: "労務管理・人事労務", d: "就業規則、ハラスメント対応、労働紛争" },
    { num: "05", t: "企業設立・組織再編", d: "持株会、SO設計、合併・分割・株式交換" },
    { num: "06", t: "知的財産権関連", d: "商標、特許、意匠、著作権、ライセンス契約" },
    { num: "07", t: "M&A・事業承継", d: "デューデリジェンス、SPA、事業承継支援" },
    { num: "08", t: "訴訟・紛争解決", d: "商事・民事・労働訴訟、仲裁、債権回収" },
    { num: "09", t: "コーポレートガバナンス", d: "取締役会・株主総会の運営支援" },
    { num: "10", t: "その他企業法務全般", d: "上記以外もご相談ください" },
  ];

  return (
    <section id="practice" className="practice section section--ink" data-screen-label="05 Practice Areas">
      <div className="container">
        <div className="practice__head reveal">
          <div>
            <span className="eyebrow">Practice Areas</span>
            <h2 className="practice__title heading-jp">
              企業法務の<em>全分野</em>に、<br/>対応可能です
            </h2>
          </div>
          <p className="practice__lede body-jp">
            日常の契約レビューから、M&A・資金調達・訴訟まで。LegalAgentは、企業法務の全ての分野について対応が可能です
          </p>
        </div>

        <div className="practice__grid">
          {areas.map((a, i) => (
            <article key={a.num} className={`practice__item reveal reveal--delay-${(i % 3) + 1} lift`}>
              <div className="practice__item-head">
                <span className="tag-num">{a.num}</span>
                <span className="practice__rule" />
              </div>
              <h3 className="practice__item-title">{a.t}</h3>
              <p className="practice__item-desc">{a.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Practice = Practice;

function Focus() {
  return (
    <section className="focus section section--paper" data-screen-label="06 Focus Areas">
      <div className="container">
        <div className="focus__head reveal">
          <span className="eyebrow">Focus Areas</span>
          <h2 className="focus__title heading-jp">注力分野</h2>
        </div>

        <div className="focus__grid">
          <article className="focus__card reveal reveal--delay-1 lift spotlight">
            <div className="focus__card-meta">
              <span className="tag-num">01</span>
              <span className="label">In-House Service</span>
            </div>
            <h3 className="focus__card-title">インハウスサービス</h3>
            <p className="focus__card-lede">単なる受身の対応を超えた、能動的な法務サービス</p>
            <ul className="focus__card-list">
              <li>Slack常駐の弁護士による継続的なリスク検知</li>
              <li>受身ではなく、能動的・柔軟な対応</li>
              <li>即日・翌営業日納品</li>
              <li>会社のルール・ビジネスに沿ったアウトプット</li>
              <li>内部法務部員のように対応</li>
            </ul>
          </article>

          <article className="focus__card focus__card--alt reveal reveal--delay-2 lift spotlight">
            <div className="focus__card-meta">
              <span className="tag-num">02</span>
              <span className="label">M&A Support</span>
            </div>
            <h3 className="focus__card-title">M&A支援</h3>
            <p className="focus__card-lede">「法務対応でディールが停滞する」という課題を解消</p>
            <ul className="focus__card-list">
              <li>M&A弁護士による迅速・的確なDD解析とレポート作成</li>
              <li>資料開示から2〜5営業日でのリスク分析</li>
              <li>SPA交渉支援・論点整理の高速化</li>
              <li>迅速なM&A実現により企業の非連続的成長に貢献</li>
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}

window.Focus = Focus;