"use client";

import Link from "next/link";
import { ChevronDown, Menu } from "lucide-react";
import { BrandLogo } from "@/components/brand/BrandLogo";
import { NavTicketsCta } from "@/components/layout/NavTicketsCta";
import { programDays } from "@/content/program";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { cn } from "@/lib/utils";

const navPills = [
  { href: "/speakers", label: "Lineup" },
  { href: "/pitch-competition", label: "Pitch", badge: "Grants" },
  { href: "/partners", label: "Partners" },
  { href: "/exhibit", label: "Exhibit" },
];

const pillClass =
  "inline-flex items-center gap-1.5 rounded-full bg-[#1a5c38]/10 px-4 py-2 text-sm font-medium text-[#0d3d26] transition-colors hover:bg-[#1a5c38]/15";

export function SiteHeader() {
  return (
    <header className="fixed inset-x-0 top-0 z-50 px-3 pt-3 md:px-6 md:pt-4">
      <div
        className={cn(
          "mx-auto flex max-w-6xl items-center gap-2 rounded-full",
          "border border-[#1a5c38]/10 bg-white/95 px-2 py-2",
          "shadow-lg shadow-[#1a5c38]/10 backdrop-blur-md"
        )}
      >
        <BrandLogo className="min-w-0 shrink pl-0.5" compact />

        <nav className="hidden flex-1 items-center justify-center gap-1.5 lg:flex">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button type="button" className={cn(pillClass, "gap-1")}>
                Program
                <ChevronDown className="size-3.5 opacity-60" />
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-72 rounded-2xl p-2">
              {programDays.map((day) => (
                <DropdownMenuItem key={day.id} asChild>
                  <Link href="/program" className="cursor-pointer rounded-xl p-3">
                    <p className="text-xs font-medium uppercase text-muted-foreground">
                      {day.date}
                    </p>
                    <p className="font-semibold">{day.title}</p>
                  </Link>
                </DropdownMenuItem>
              ))}
              <DropdownMenuItem asChild>
                <Link
                  href="/pitch-competition"
                  className="mt-1 cursor-pointer rounded-xl bg-[#1a5c38] p-3 text-white"
                >
                  Pitch Competition
                </Link>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>

          {navPills.map((link) => (
            <Link key={link.href} href={link.href} className={pillClass}>
              {link.label}
              {link.badge && (
                <span className="rounded bg-[#1a5c38] px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-white">
                  {link.badge}
                </span>
              )}
            </Link>
          ))}
        </nav>

        <div className="ml-auto flex items-center gap-2 pr-1">
          <NavTicketsCta className="hidden sm:inline-flex" />

          <Sheet>
            <SheetTrigger asChild className="lg:hidden">
              <Button
                variant="ghost"
                size="icon"
                className="rounded-full text-[#0f0404] hover:bg-[#1f3d7e]/10"
                aria-label="Open menu"
              >
                <Menu className="size-5" />
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-[300px]">
              <SheetHeader>
                <SheetTitle>Menu</SheetTitle>
              </SheetHeader>
              <nav className="mt-6 flex flex-col gap-2">
                <Link href="/program" className="rounded-lg px-3 py-2 hover:bg-muted">
                  Program
                </Link>
                {navPills.map((link) => (
                  <Link
                    key={link.href}
                    href={link.href}
                    className="rounded-lg px-3 py-2 hover:bg-muted"
                  >
                    {link.label}
                  </Link>
                ))}
                <NavTicketsCta className="mt-4" fullWidth />
              </nav>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  );
}