/* global React */
const { useEffect, useRef } = React;

function Nav({ onContact }) {
  const isEn = window.LA_I18N && window.LA_I18N.isEnglish && window.LA_I18N.isEnglish();
  const langHref = window.LA_I18N ? window.LA_I18N.alternatePath(isEn ? "ja" : "en") : (isEn ? "/" : "/en/");
  const items = [
    { label: "About", href: "#about" },
    { label: "サービス", href: "#services" },
    { label: "強み", href: "#strengths" },
    { label: "対応分野", href: "#practice" },
    { label: "メンバー", href: "#lawyers" },
    { label: "AI Agent", href: "#ai-agent" },
    { label: "コラム", href: "#column" },
    { label: "採用", href: "#careers" },
    { label: "FAQ", href: "#faq" },
  ];
  return (
    <nav className="nav">
      <a href="#top" className="nav__brand" aria-label="LegalAgent">
        <img src="/assets/logo-mark.png" alt="" className="nav__brand-logo" />
        <span className="nav__brand-name">LegalAgent</span>
      </a>
      <div className="nav__items">
        {items.map((it) => (
          <a key={it.href} href={it.href} className="nav__item hover-line">{it.label}</a>
        ))}
      </div>
      <div className="lp-nav__lang" aria-label={isEn ? "Language switcher" : "言語切り替え"}>
        {isEn ? (
          <React.Fragment>
            <a href={langHref} hrefLang="ja">JP</a>
            <span className="lp-nav__lang-sep">/</span>
            <span aria-current="true">EN</span>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span aria-current="true">JP</span>
            <span className="lp-nav__lang-sep">/</span>
            <a href={langHref} hrefLang="en">EN</a>
          </React.Fragment>
        )}
      </div>
      <div className="nav__cta">
        <a href="#contact" className="nav__cta-btn">
          お問い合わせ
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1"/></svg>
        </a>
      </div>
    </nav>
  );
}

window.Nav = Nav;