import Link from "next/link";
import { EVENT } from "@/lib/event";

export function SiteHeader({ solid = false }: { solid?: boolean }) {
  return (
    <header
      className={`no-print sticky top-0 z-40 ${
        solid
          ? "border-b border-[var(--line)] bg-[rgba(255,255,255,0.92)] backdrop-blur-md"
          : "bg-gradient-to-b from-[rgba(18,24,36,0.55)] to-transparent"
      }`}
    >
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-5 py-4">
        <Link
          href="/"
          className={`font-display text-xl font-semibold tracking-tight md:text-2xl ${
            solid ? "text-[var(--ink)]" : "text-white"
          }`}
        >
          <span className={solid ? "text-[var(--gold)]" : "text-white"} aria-hidden>
            ॐ
          </span>{" "}
          Simhastha{" "}
          <span className={solid ? "text-[var(--gold)]" : "text-white"}>
            {EVENT.year}
          </span>
          <span
            className={`ml-2 hidden text-sm font-normal sm:inline ${
              solid ? "text-[var(--muted)]" : "text-white/85"
            }`}
          >
            Ujjain · Shipra
          </span>
        </Link>
        <nav
          className={`flex flex-wrap items-center justify-end gap-x-4 gap-y-2 text-sm ${
            solid ? "text-[var(--muted)]" : "text-white/90"
          }`}
        >
          <Link
            href="/ujjain"
            className={solid ? "hover:text-[var(--ink)]" : "hover:text-white"}
          >
            Explore Ujjain
          </Link>
          <Link
            href="/privacy"
            className={solid ? "hover:text-[var(--ink)]" : "hover:text-white"}
          >
            Privacy
          </Link>
          <Link href="/register" className="btn btn-primary !py-2 !px-4 !text-sm">
            Register
          </Link>
        </nav>
      </div>
    </header>
  );
}