import { MobileNavigation } from '@/components/layout/mobile-navigation';
import { ThemeToggle } from '@/components/layout/theme-toggle';
import { Brand } from '@/components/shared/brand';
import { Container } from '@/components/shared/container';
import { Button } from '@/components/ui/button';
import { navigationItems, siteConfig } from '@/lib/site';

export function SiteHeader() {
  return (
    <header className="sticky top-0 z-50 border-b border-border bg-background/70 backdrop-blur-xl">
      <Container className="flex h-16 items-center justify-between">
        <div className="flex items-center gap-8">
          <a href="#top" aria-label={`${siteConfig.name} home`}>
            <Brand />
          </a>
          <nav aria-label="Main navigation" className="hidden md:block">
            <ul className="flex items-center gap-6">
              {navigationItems.map(({ label, href }) => (
                <li key={label}>
                  <a
                    href={href}
                    className="text-sm text-foreground/60 transition-colors hover:text-foreground"
                  >
                    {label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
        </div>
        <div className="flex items-center gap-2">
          <ThemeToggle />
          <Button
            asChild
            size="lg"
            variant="ghost"
            className="hidden text-foreground/70 hover:bg-foreground/5 hover:text-foreground sm:inline-flex"
          >
            <a href={siteConfig.links.login}>Log In</a>
          </Button>
          <Button
            asChild
            size="lg"
            className="hidden rounded-full bg-foreground text-background hover:bg-foreground/90 sm:inline-flex"
          >
            <a href={siteConfig.links.signup}>Sign Up</a>
          </Button>
          <MobileNavigation items={navigationItems} />
        </div>
      </Container>
    </header>
  );
}