"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Menu } from "lucide-react";
import { Logo } from "@/components/logo";
import { Button, buttonVariants } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { nav } from "@/lib/content";
import { cn } from "@/lib/utils";

export function SiteHeader() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);

  return (
    <header className="sticky top-0 z-40 border-b border-white/10 bg-background/40 backdrop-blur-2xl">
      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-5 sm:px-8">
        <Link href="/" aria-label="The Agentic Cloud home" className="min-w-0">
          <Logo className="max-[420px]:[&>span:last-child]:hidden" />
        </Link>
        <nav className="hidden items-center gap-6 lg:flex">
          {nav.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                "text-sm transition-colors hover:text-foreground",
                pathname === item.href || pathname.startsWith(`${item.href}/`)
                  ? "text-foreground"
                  : "text-muted-foreground"
              )}
            >
              {item.label}
            </Link>
          ))}
        </nav>
        <div className="hidden items-center gap-2 lg:flex">
          <Link
            href="/about"
            className={cn(
              buttonVariants({ variant: "ghost" }),
              "h-8 px-3 text-muted-foreground"
            )}
          >
            About
          </Link>
          <Link
            href="/request-access"
            className={cn(buttonVariants(), "h-8 px-3.5")}
          >
            Request access
          </Link>
        </div>
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger
            nativeButton={false}
            render={
              <Button
                variant="ghost"
                size="icon"
                className="lg:hidden"
                aria-label="Open menu"
              />
            }
          >
            <Menu className="size-5" />
          </SheetTrigger>
          <SheetContent side="right" className="bg-background">
            <SheetHeader>
              <SheetTitle className="font-sans text-left text-sm font-medium tracking-tight">
                The Agentic Cloud
              </SheetTitle>
            </SheetHeader>
            <nav className="flex flex-col gap-1 px-4">
              {nav.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setOpen(false)}
                  className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
                >
                  {item.label}
                </Link>
              ))}
              <Link
                href="/about"
                onClick={() => setOpen(false)}
                className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
              >
                About
              </Link>
              <Link
                href="/careers"
                onClick={() => setOpen(false)}
                className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
              >
                Careers
              </Link>
              <Link
                href="/trust"
                onClick={() => setOpen(false)}
                className="rounded-lg px-2 py-2.5 text-base text-foreground/90 hover:bg-muted"
              >
                Trust
              </Link>
              <Link
                href="/request-access"
                onClick={() => setOpen(false)}
                className={cn(
                  buttonVariants(),
                  "mt-4 h-10 justify-center px-4"
                )}
              >
                Request access
              </Link>
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
}