import Image from "next/image";
import Link from "next/link";

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-20 border-b border-[#f8c27a] bg-white/95 shadow-sm backdrop-blur">
      <div className="mx-auto flex w-full max-w-5xl items-center justify-between px-6 py-3">
        <Link href="/" className="flex items-center" aria-label="Open Security home">
          <Image src="/logo-full.png" alt="Open Security" width={150} height={40} priority />
        </Link>

        <nav className="flex items-center gap-5 text-sm font-semibold text-[#004E78]">
          <Link href="/" className="hover:text-[#F89C27]">
            Home
          </Link>
          <Link href="/labs" className="hover:text-[#F89C27]">
            Labs
          </Link>
          <Link href="/apps" className="hover:text-[#F89C27]">
            Tools
          </Link>
          <Link
            href="https://discord.gg/Ma9UZNBxvh"
            className="rounded-md border border-[#F89C27] px-3 py-1.5 text-[#004E78] hover:bg-[#F89C27] hover:text-white"
          >
            Discord
          </Link>
        </nav>
      </div>
    </header>
  );
}