import { ChevronDown, ChevronRight } from "lucide-react"

import { ThemeToggle } from "@/components/layout/theme-toggle"
import { Brand } from "@/components/shared/brand"

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/86 backdrop-blur-xl supports-[backdrop-filter]:bg-background/74">
      <div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between px-5 sm:px-8">
        <a href="#top" aria-label="Vertex home">
          <Brand />
        </a>
        <nav aria-label="Main navigation" className="hidden items-center gap-8 md:flex lg:gap-10">
          {[
            ["Products", "#features"],
            ["Models", "#models"],
            ["Features", "#features"],
            ["Pricing", "#pricing"],
            ["Docs", "#developers"],
          ].map(([label, href]) => (
            <a
              key={label}
              href={href}
              className="inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              {label}
              {label === "Products" && <ChevronDown className="size-3" />}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <a
            href="#pricing"
            className="hidden h-9 items-center gap-1.5 rounded-sm bg-blue-600 px-4 text-xs font-medium text-white shadow-[0_6px_24px_rgba(23,61,166,.28)] transition hover:bg-blue-500 sm:inline-flex"
          >
            Get started <ChevronRight className="size-3.5" />
          </a>
        </div>
      </div>
    </header>
  )
}