const Nav = ({ homeHref = "" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const prefix = homeHref || "";
  const links = [
    { en: "Services", ja: "事業内容", href: prefix + "#services" },
    { en: "Approach", ja: "提供価値", href: prefix + "#approach" },
    { en: "Vision", ja: "ビジョン", href: prefix + "#vision" },
    { en: "Works", ja: "実績", href: "works.html" },
    { en: "Process", ja: "ご相談の流れ", href: prefix + "#process" },
    { en: "About", ja: "会社概要", href: prefix + "#about" },
    { en: "Profile", ja: "代表紹介", href: prefix + "#profile" },
    { en: "Beans", ja: "コーヒー", href: prefix + "#beans" },
  ];

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href={homeHref || "#top"} aria-label="FUJISAWA PLANNING">
          <Logo />
        </a>
        <div className="nav-links">
          {links.map((l) => (
            <a key={l.en} href={l.href} className="nav-link">
              {l.en}
              <span className="jp">{l.ja}</span>
            </a>
          ))}
          <a href={prefix + "#contact"} className="nav-link nav-cta">CONTACT</a>
        </div>
      </div>
    </nav>
  );
};

window.Nav = Nav;