const DASHBOARD_URL = "https://dashboard.core.dev";

export default function Header() {
  const navItems = [
    { href: "https://docs.core.dev", label: "Docs" },
    { href: "https://status.core.dev", label: "Status" },
    { href: "https://api.core.dev", label: "API" },
  ];

  return (
    <header class="backdrop-blur sticky top-0 z-20 border-b border-white/5 bg-surface/80">
      <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
        <div class="flex items-center gap-3">
          <span class="h-10 w-10 rounded-lg border border-accent/30 bg-accent/10 text-accent shadow-inner shadow-accent/20 grid place-items-center font-semibold">
            CF
          </span>
          <div class="leading-tight">
            <p class="text-sm uppercase tracking-[0.18em] text-foreground/70">
              Core Landing
            </p>
            <p class="text-lg font-semibold text-foreground">
              Cloud Ops Console
            </p>
          </div>
        </div>
        <nav class="hidden items-center gap-8 text-sm font-medium text-foreground/80 md:flex">
          {navItems.map((item) => (
            <a
              key={item.href}
              class="transition hover:text-foreground"
              href={item.href}
              target="_blank"
              rel="noreferrer"
            >
              {item.label}
            </a>
          ))}
          <a
            class="rounded-md border border-accent/50 bg-accent/10 px-4 py-2 text-accent shadow-[0_0_0_1px_rgba(34,211,238,0.2)] transition hover:-translate-y-0.5 hover:shadow-accent/40"
            href={DASHBOARD_URL}
          >
            Login
          </a>
        </nav>
      </div>
    </header>
  );
}