/* global React */
function PracticeIcon({ type }) {
  const common = { fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" };
  const icons = {
    document: (
      <React.Fragment>
        <path {...common} d="M7 3.5h7l3 3v13H7z" />
        <path {...common} d="M14 3.5v3h3" />
        <path {...common} d="M10 10h4.5M10 13.5h7M10 17h5" />
      </React.Fragment>
    ),
    growth: (
      <React.Fragment>
        <path {...common} d="M4 18.5h16" />
        <path {...common} d="M6.5 16v-4M11.5 16V8.5M16.5 16V5.5" />
        <path {...common} d="M6 9.5l4-3 3 1.5 4.5-4" />
      </React.Fragment>
    ),
    shield: (
      <React.Fragment>
        <path {...common} d="M12 3.5l7 2.5v5.5c0 4.1-2.6 7-7 8.5-4.4-1.5-7-4.4-7-8.5V6z" />
        <path {...common} d="M8.5 11.8l2.2 2.2 4.8-5" />
      </React.Fragment>
    ),
    people: (
      <React.Fragment>
        <circle {...common} cx="9" cy="8" r="2.6" />
        <circle {...common} cx="16" cy="8.8" r="2.1" />
        <path {...common} d="M4.5 18c.8-3.1 2.6-4.6 4.5-4.6s3.7 1.5 4.5 4.6" />
        <path {...common} d="M13.8 14.2c1.8.2 3.2 1.5 3.8 3.8" />
      </React.Fragment>
    ),
    idea: (
      <React.Fragment>
        <path {...common} d="M8 10a4 4 0 1 1 8 0c0 1.7-1 2.6-1.8 3.5-.5.5-.7 1-.7 1.8h-3c0-.8-.2-1.3-.7-1.8C9 12.6 8 11.7 8 10z" />
        <path {...common} d="M10.3 18h3.4M10.8 20h2.4M12 3v1.2M5.5 6l1 .7M18.5 6l-1 .7" />
      </React.Fragment>
    ),
    deal: (
      <React.Fragment>
        <path {...common} d="M5 12l4-4 3 3 3-3 4 4" />
        <path {...common} d="M7 14l2 2 2-2 2 2 2-2" />
        <path {...common} d="M4 9l3-3M20 9l-3-3" />
      </React.Fragment>
    ),
    scale: (
      <React.Fragment>
        <path {...common} d="M12 4v16M7 20h10M5 7h14M8 7l-3 6h6zM16 7l-3 6h6z" />
      </React.Fragment>
    ),
    network: (
      <React.Fragment>
        <circle {...common} cx="6" cy="7" r="2" />
        <circle {...common} cx="18" cy="7" r="2" />
        <circle {...common} cx="12" cy="17" r="2" />
        <path {...common} d="M8 7h8M7 8.8l4 6.4M17 8.8l-4 6.4" />
      </React.Fragment>
    ),
    lock: (
      <React.Fragment>
        <rect {...common} x="6" y="10" width="12" height="9" rx="1.5" />
        <path {...common} d="M9 10V8a3 3 0 0 1 6 0v2M12 14v2" />
      </React.Fragment>
    ),
    globe: (
      <React.Fragment>
        <circle {...common} cx="12" cy="12" r="8" />
        <path {...common} d="M4 12h16M12 4c2.2 2.3 3.2 5 3.2 8S14.2 17.7 12 20M12 4c-2.2 2.3-3.2 5-3.2 8s1 5.7 3.2 8" />
      </React.Fragment>
    ),
    finance: (
      <React.Fragment>
        <path {...common} d="M5 17h14M7 17V9h3v8M11 17V6h3v11M15 17v-5h3v5" />
        <path {...common} d="M5 20h14" />
      </React.Fragment>
    ),
    tech: (
      <React.Fragment>
        <rect {...common} x="6" y="6" width="12" height="12" rx="2" />
        <path {...common} d="M9.5 12l2-2M9.5 12l2 2M14.5 10l-1 4M8 3v3M12 3v3M16 3v3M8 18v3M12 18v3M16 18v3" />
      </React.Fragment>
    ),
    building: (
      <React.Fragment>
        <path {...common} d="M6 20V5h12v15M9 8h2M13 8h2M9 12h2M13 12h2M9 16h2M13 16h2" />
      </React.Fragment>
    ),
    general: (
      <React.Fragment>
        <rect {...common} x="5" y="8" width="14" height="11" rx="1.5" />
        <path {...common} d="M9 8V6h6v2M5 12h14" />
      </React.Fragment>
    ),
  };
  return (
    <span className="practice__icon" aria-hidden="true">
      <svg viewBox="0 0 24 24">{icons[type] || icons.general}</svg>
    </span>
  );
}

function Practice() {
  const areas = [
    { num: "01", t: "契約関連業務", d: "契約書の作成・レビュー・修正。", href: "/services/contracts/", icon: "document" },
    { num: "02", t: "スタートアップ法務", d: "創業・資本政策、SO設計、資金調達対応。", href: "/services/startup-legal/", icon: "growth" },
    { num: "03", t: "コンプライアンス支援", d: "個人情報保護法、下請法、フリーランス保護法等。", href: "/services/compliance/", icon: "shield" },
    { num: "04", t: "労務管理・人事労務", d: "就業規則、ハラスメント対応、労働紛争。", href: "/services/labor-hr/", icon: "people" },
    { num: "05", t: "知的財産権関連", d: "商標、特許、意匠、著作権、ライセンス契約。", href: "/services/intellectual-property/", icon: "idea" },
    { num: "06", t: "M&A・事業承継", d: "デューデリジェンス、SPA、事業承継支援。", href: "/services/ma/", icon: "deal" },
    { num: "07", t: "訴訟・紛争解決", d: "生成AIを用いた証拠整理・訴訟対応。", href: "/services/dispute-resolution/", icon: "scale" },
    { num: "08", t: "コーポレートガバナンス", d: "株主対応・株主総会・法務DD対応。", href: "/services/corporate-governance/", icon: "building" },
    { num: "09", t: "IPO支援", d: "インハウス弁護士の知見に基づく上場準備。", href: "/services/ipo-support/", icon: "growth" },
    { num: "10", t: "セキュリティ関連", d: "自社サービス提供の知見に基づく専門対応。", href: "/services/security-legal/", icon: "lock" },
    { num: "11", t: "IP・エンタメ法務", d: "複雑なIP・エンタメスキームへの対応。", href: "/services/ip-entertainment/", icon: "idea" },
    { num: "12", t: "Web3", d: "専門知識に基づくWeb3サービス支援。", href: "/services/web3/", icon: "network" },
    { num: "13", t: "生成AIに関する法的相談対応", d: "自社AIサービス提供の知見を踏まえた相談対応。", href: "/services/ai-legal-consulting/", icon: "tech" },
    { num: "14", t: "広告審査", d: "生成AIを用いた効率的な広告・表示チェック。", href: "/services/advertising-review/", icon: "document" },
    { num: "15", t: "発信者情報開示", d: "誹謗中傷を受けた場合の迅速な初動対応。", href: "/services/sender-information-disclosure/", icon: "scale" },
    { num: "16", t: "英語案件（クロスボーダー）", d: "生成AIを用いたリーズナブルな英文対応。", href: "/services/cross-border-english/", icon: "globe" },
    { num: "17", t: "ファンド設立", d: "LPA・LLP・届出まで一気通貫で対応。", href: "/services/fund-formation/", icon: "finance" },
    { num: "18", t: "VC・CVC投資対応", d: "固定価格でスタートアップ投資を迅速支援。", href: "/services/vc-cvc-investment/", icon: "finance" },
    { num: "19", t: "独占禁止法・競争法", d: "業務提携・販売条件・下請取引の確認。", href: "/services/antitrust-competition/", icon: "network" },
    { num: "20", t: "個人情報保護・データ保護", d: "プライバシーポリシー・Cookie・越境移転。", href: "/services/data-privacy/", icon: "lock" },
    { num: "21", t: "FinTech・資金決済法務", d: "決済・前払式支払手段・金融規制対応。", href: "/services/fintech-payments/", icon: "finance" },
    { num: "22", t: "ヘルスケア・薬機法", d: "医療広告・健康データ・薬機法表示確認。", href: "/services/healthcare-pharma/", icon: "shield" },
    { num: "23", t: "IT・SaaS・システム開発", d: "利用規約・SLA・開発契約・障害対応。", href: "/services/it-saas-development/", icon: "tech" },
    { num: "24", t: "危機管理・社内調査", d: "不祥事・内部通報・再発防止対応。", href: "/services/crisis-management/", icon: "shield" },
    { num: "25", t: "事業提携・JV", d: "共同事業・収益分配・権利関係の整理。", href: "/services/alliance-jv/", icon: "deal" },
    { num: "26", t: "ファイナンス・資金調達", d: "借入・社債・エクイティ・担保保証。", href: "/services/corporate-finance/", icon: "finance" },
    { num: "27", t: "労働組合・労基署対応", d: "団体交渉・是正勧告・労務紛争対応。", href: "/services/labor-union-labor-standards/", icon: "people" },
    { num: "28", t: "事業再生・債権回収", d: "倒産対応・内容証明・保全執行。", href: "/services/restructuring-insolvency-collections/", icon: "finance" },
    { num: "29", t: "税務争訟・税務調査", d: "調査対応・審査請求・税理士連携。", href: "/services/tax-disputes/", icon: "document" },
    { num: "30", t: "不動産・建設法務", d: "売買・賃貸借・工事請負・瑕疵対応。", href: "/services/real-estate-construction/", icon: "building" },
    { num: "31", t: "環境・エネルギー法務", d: "PPA・EPC・廃棄物・環境規制。", href: "/services/environment-energy/", icon: "shield" },
    { num: "32", t: "食品・景表法・表示規制", d: "食品表示・健康食品広告・キャンペーン。", href: "/services/food-labeling-regulation/", icon: "document" },
    { num: "33", t: "モビリティ法務", d: "MaaS・物流・車両データ・利用規約。", href: "/services/mobility-automotive/", icon: "tech" },
    { num: "34", t: "宇宙・ディープテック法務", d: "共同研究開発・知財・規制・資金調達。", href: "/services/space-deeptech/", icon: "network" },
    { num: "35", t: "スポーツ法務", d: "スポンサー契約・選手契約・権利ビジネス。", href: "/services/sports-law/", icon: "deal" },
    { num: "36", t: "学校法人・教育関連法務", d: "EdTech・未成年者情報・保護者対応。", href: "/services/education-school/", icon: "document" },
    { num: "37", t: "自治体・公共サービス法務", d: "PPP・PFI・自治体連携・入札契約。", href: "/services/public-sector-government/", icon: "building" },
    { num: "38", t: "その他企業法務全般", d: "上記以外もご相談ください。", href: "/services/general-corporate/", icon: "general" },
  ];

  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・IPO・ファンド・訴訟、データ、FinTech、ヘルスケア、危機管理まで。LegalAgentは、企業法務の全ての分野について対応が可能です。
          </p>
        </div>

        <div className="practice__grid">
          {areas.map((a, i) => (
            <a
              key={a.num}
              href={a.href}
              className={`practice__item reveal reveal--delay-${(i % 3) + 1} lift`}
              aria-label={`${a.t}のサービス詳細を見る`}
            >
              <div className="practice__item-head">
                <span className="tag-num">{a.num}</span>
                <span className="practice__rule" />
                <PracticeIcon type={a.icon} />
              </div>
              <h3 className="practice__item-title"><span>{a.t}</span></h3>
              <p className="practice__item-desc">{a.d}</p>
            </a>
          ))}
        </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;