/* global React */
function Lawyers() {
  const lawyers = [
    {
      slug: "asato-noriaki",
      photo: "/assets/lawyers/asato.jpg",
      initials: "AN",
      name: "朝戸 統覚",
      en: "Asato Noriaki",
      role: "代表 / Founder & CEO",
      spec: ["起業家", "M&A", "資金調達", "ベンチャー投資", "IPO支援", "ジェネラルコーポレート"],
      bio: ["2015 一橋大学法学部 卒業 / 予備試験合格。", "2016 司法試験合格 / 東京大学法科大学院 中退。", "2017 アンダーソン・毛利・友常法律事務所 入所。", "2020 AZX Professionals Group 入所。", "2024 Legal Agent 創業（ANRI・BoostCapital より調達）。"],
    },
    {
      slug: "hayakawa-daisuke",
      photo: "/assets/lawyers/hayakawa.jpg",
      initials: "HD",
      name: "早川 大介",
      en: "Hayakawa Daisuke",
      role: "弁護士 / 企業法務Practice",
      spec: ["起業家", "インハウス", "企業法務全般", "上場企業法務", "スタートアップ法務"],
      bio: ["2019 東京都立大学法科大学院 修了。", "2020 司法試験合格。", "2022 弁護士登録（東京弁護士会）。", "上場企業・スタートアップを中心に100社以上の企業法務案件・インハウス支援に従事。", "2024 MySecond法律事務所 設立。", "2025 日本養殖株式会社 代表取締役CEO 兼務 / 2026 Legal Agent ジョイン。"],
    },
    {
      slug: "sugai-takashi",
      photo: "/assets/lawyers/sugai.png",
      initials: "ST",
      name: "須貝 崇史",
      en: "Sugai Takashi",
      role: "弁護士 / 企業法務Practice",
      spec: ["スタートアップ法務", "契約業務DX", "事業開発経験", "予防法務", "紛争対応", "家事事件"],
      bio: ["立教大学法学部 卒業 / 中央大学法科大学院 修了。", "2019.09 司法試験合格。", "2019.12 ContractS株式会社 CEO室（契約業務DX・事業開発に従事）。", "2021.12 最高裁判所司法研修所。", "2023.01 法律事務所アルシエン。", "2026.04 Legal Agent法律事務所 参画。"],
    },
    {
      slug: "hirukawa-kosuke",
      photo: "/assets/lawyers/hirukawa.jpg",
      initials: "HK",
      name: "比留川 浩介",
      en: "Hirukawa Kosuke",
      role: "弁護士 / 知財Practice",
      spec: ["知的財産分野全般", "特許紛争", "特許庁出向", "スタートアップ法務", "一般民事"],
      bio: ["東京工業高等専門学校 卒業。", "東京工業大学 生命理工学研究科 修了。", "都内特許事務所にて弁理士実務・訴訟業務に従事。", "2019.04 特許庁出向（スタートアップ支援等）。", "2025 Legal Agent 参加。"],
    },
    {
      slug: "makita-shinya",
      photo: "/assets/lawyers/makita.svg",
      initials: "SM",
      name: "蒔田 信也",
      en: "Makita Shinya",
      role: "エンジニア / Product Engineering",
      spec: ["AI Agent開発", "Wordアドイン", "Office JS", "クラウド基盤", "プロダクト運用", "機能改善"],
      bio: ["インフラ・クラウド環境の開発基盤構築に従事。", "LegalAgent の Word AI Agent 開発に参画。", "リリース後の運用、バグ修正、機能追加を担当。", "Word の変更履歴など、法務特有の作法に対応するプロダクト開発に従事。"],
    },
    {
      slug: "miya-sota",
      photo: "/assets/lawyers/miya.svg",
      initials: "MS",
      name: "宮 颯太",
      en: "Miya Sota",
      role: "エンジニア / software engineer",
      spec: ["プロダクト開発"],
      bio: ["IXサービスにおいて、バックエンド開発を中心に、機能開発・基盤改善を担当。", "HR DX領域の採用支援プロダクトにおいて、立ち上げ期から開発を担当。", "受託案件にて、顧客課題の整理から設計・開発・改善までを一貫して担当。", "LegalAgent のプロダクト開発に参画。"],
    },
  ];
  return (
    <section id="lawyers" className="lawyers section section--ink" data-screen-label="09 Lawyers">
      <div className="container">
        <div className="lawyers__head reveal">
          <span className="eyebrow">Our Team</span>
          <h2 className="lawyers__title heading-jp">
            専門性と<br/><span className="heading-nowrap">多様なバックグラウンドを持つ</span><br/><em>所属弁護士とエンジニア</em>
          </h2>
        </div>
        <div className="lawyers__grid">
          {lawyers.map((l, i) => (
            <a
              key={i}
              href={`/lawyers/${l.slug}/`}
              className={`lawyer lawyer--link reveal reveal--delay-${i + 1} lift spotlight`}
              aria-label={`${l.name}（${l.en}）のプロフィールを見る`}
            >
              <div className="lawyer__portrait" aria-hidden="true">
                {l.photo
                  ? <img src={l.photo} alt={l.name} loading="lazy" />
                  : <span>{l.initials}</span>}
                <svg viewBox="0 0 200 200" className="lawyer__portrait-ring"><circle cx="100" cy="100" r="98" fill="none" stroke="currentColor" strokeWidth="0.5"/></svg>
              </div>
              <div className="lawyer__head">
                <span className="kicker-en">{l.en}</span>
                <h3 className="lawyer__name">{l.name}</h3>
                <span className="label">{l.role}</span>
              </div>
              <div className="lawyer__spec">
                {l.spec.map((s, k) => (<span key={k}>{s}</span>))}
              </div>
              <ul className="lawyer__bio">
                {l.bio.map((b, k) => (<li key={k}>{b}</li>))}
              </ul>
              <span className="lawyer__more">
                プロフィールを見る
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" strokeWidth="1.2"/></svg>
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Lawyers = Lawyers;