/* Shared Header */

const NAV_ITEMS = [
  { label: "Repair",   href: "/en/repair/" },
  { label: "Install",  href: "/en/install/" },
  { label: "Build",    href: "/en/build/" },
  { label: "Clean",    href: "/en/clean/" },
  { label: "Organize", href: "/en/organize/" },
  { label: "Decorate", href: "/en/decorate/" },
  { label: "Trades",   href: "/en/trades/" },
];

const Header = ({ logo, active }) => {
  const Logo = logo === "stamp" ? window.LogoStamp : logo === "mono" ? window.LogoMonogram : window.LogoOriginal;
  return (
    <header className="site-header">
      <Logo />
      <nav className="main-nav">
        {NAV_ITEMS.map(n => (
          <a
            key={n.label}
            href={n.href}
            className={active === n.label ? "nav-active" : ""}
            aria-current={active === n.label ? "page" : undefined}
          >
            {n.label}
          </a>
        ))}
      </nav>
      <div className="header-right">
        <span className="lang">🌐 <span>EN</span></span>
        <a href="/profile/" className="profile-btn">Profile</a>
      </div>
    </header>
  );
};

window.Header = Header;