edr-platform/apps/edr-freight-web/portal/src/components/PublicNavbar.tsx

import { ArrowRight, Menu, TrainFront } from "lucide-react";
import { Link } from "react-router-dom";

/**
 * Top-level navigation for the public marketing pages. Entries beginning with
 * `#` scroll within the landing page; entries beginning with `/` are real
 * routes and need router navigation.
 */
export const navLinks = [
  { label: "Features", href: "#features" },
  { label: "Live ops", href: "#showcase" },
  { label: "Corridors", href: "#corridors" },
  { label: "How it works", href: "#how" },
  { label: "Publications", href: "/publications" },
  { label: "Contact", href: "#contact" },
];

/**
 * The dark navbar shared by every public page that is not behind the app
 * shell — the landing page and /publications. Extracted from the landing page
 * so the two cannot drift: a link added here shows up on both.
 *
 * The anchor entries only resolve on the landing page itself, so away from it
 * they are rendered as links back to the homepage's section instead of as
 * same-page anchors that would go nowhere.
 */
export function PublicNavbar({ onLanding = false }: { onLanding?: boolean }) {
  return (
    <header className="sticky top-0 z-50 border-b border-white/10 bg-edr-ink/90 backdrop-blur-xl">
      <div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6">
        <Link to="/" className="flex items-center gap-3">
          <span className="flex size-10 items-center justify-center rounded-xl bg-edr-primary text-white shadow-lg shadow-emerald-500/25">
            <TrainFront className="size-5" />
          </span>

          <span className="leading-tight">
            <span className="block text-lg font-bold text-white">EDR Freight</span>
            <span className="block text-[11px] tracking-wide text-slate-400">
              Rail Logistics Platform
            </span>
          </span>
        </Link>

        <nav className="hidden items-center gap-9 lg:flex">
          {navLinks.map((link) => {
            const className =
              "text-sm font-medium text-slate-300 transition hover:text-white";

            // A route always navigates. An anchor only works on the landing
            // page; elsewhere it has to go home first, or clicking it does
            // nothing at all.
            if (link.href.startsWith("/")) {
              return (
                <Link key={link.href} to={link.href} className={className}>
                  {link.label}
                </Link>
              );
            }

            return onLanding ? (
              <a key={link.href} href={link.href} className={className}>
                {link.label}
              </a>
            ) : (
              <Link key={link.href} to={`/${link.href}`} className={className}>
                {link.label}
              </Link>
            );
          })}
        </nav>

        <div className="flex items-center gap-3">
          <Link
            to="/login"
            className="hidden rounded-lg border border-white/20 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-white/10 md:block"
          >
            Log in
          </Link>

          <Link
            to="/signup"
            className="hidden items-center gap-2 rounded-lg bg-edr-primary px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-emerald-500/25 transition hover:-translate-y-0.5 hover:bg-edr-primary-dark md:flex"
          >
            Get started
            <ArrowRight className="size-4" />
          </Link>

          <button
            type="button"
            aria-label="Open menu"
            className="rounded-lg border border-white/20 p-2 text-white lg:hidden"
          >
            <Menu className="size-5" />
          </button>
        </div>
      </div>
    </header>
  );
}

export default PublicNavbar;