/* global React */
function Careers() {
  const roles = ["弁護士", "スタッフ", "エンジニア"];
  const rolesHref = "/careers/#roles";
  return (
    <section id="careers" className="careers section section--paper-2" data-screen-label="12 Careers">
      <div className="container">
        <div className="careers__inner reveal">
          <div className="careers__text">
            <span className="eyebrow">Careers</span>
            <h2 className="careers__title heading-jp">
              生成AI時代の<br/>
              法律事務所を、<br/>
              <em>共に創る</em>
            </h2>
            <p className="careers__lede body-jp">
              LegalAgent では、企業法務に向き合う弁護士、実務を支えるスタッフ、AI Native Law Firm の基盤をつくるエンジニアを募集しています。
              少しでも関心をお持ちいただいた方は、まずはカジュアル面談からお話しできればと考えています。
            </p>
            <div className="careers__actions">
              <a href="/careers/" className="btn btn--gold">
                採用情報を見る
                <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                  <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.2"/>
                </svg>
              </a>
              <a
                href="https://docs.google.com/forms/d/e/1FAIpQLSfnISmoDvD8DqGZznyJoBk1vQvNRJo9UtB80zBDJgMfZ--U0w/viewform"
                className="btn btn--ghost-dark"
                target="_blank"
                rel="noopener"
              >
                カジュアル面談へ
              </a>
            </div>
          </div>
          <div className="careers__roles" aria-label="募集職種">
            {roles.map((role, i) => (
              <a key={role} href={rolesHref} className={`careers__role reveal reveal--delay-${i + 1}`}>
                {role}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Careers = Careers;