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

function Nav({ onContact }) {
  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: "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="nav__cta">
        <span className="nav__lang">JP / <span style={{opacity:0.4}}>EN</span></span>
        <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;