app/frontend/src/components/TopNav.tsx

import type { NavLink } from "../content/types";

interface TopNavProps {
  links: NavLink[];
  secondaryLinks: NavLink[];
  demoMode: boolean;
}

export function TopNav({ links, secondaryLinks, demoMode }: TopNavProps) {
  return (
    <header className="topnav shell-block" id="top">
      <div className="brand-block">
        <div className="brand-mark" aria-hidden="true">
          <span />
          <span />
        </div>
        <div>
          <p className="brand-name">AetherOps</p>
          <p className="brand-subtitle">Aether Voice Studio</p>
        </div>
      </div>
      <nav className="primary-nav" aria-label="Primary">
        {links.map((link) => (
          <a key={link.label} href={link.href}>
            {link.label}
          </a>
        ))}
      </nav>
      <div className="nav-meta">
        <span className={`mode-chip ${demoMode ? "demo" : "live"}`}>
          {demoMode ? "DEMO_MODE" : "LIVE_MODE"}
        </span>
        {secondaryLinks.map((link) => (
          <a
            key={link.label}
            href={link.href}
            target={link.href.startsWith("http") ? "_blank" : undefined}
            rel={link.href.startsWith("http") ? "noreferrer" : undefined}
          >
            {link.label}
          </a>
        ))}
      </div>
    </header>
  );
}