import { Logo } from '@/components/site/logo';
import { MobileNavigation } from '@/components/site/mobile-navigation';
import { Button } from '@/components/ui/button';

const navigationItems = [
  { label: 'Products', href: '#', description: 'Everything you need to ship' },
  { label: 'Solutions', href: '#', description: 'Built for teams of every size' },
  { label: 'Resources', href: '#', description: 'Guides, templates, and changelog' },
  { label: 'Docs', href: '#', description: 'Your first deploy starts here' },
  { label: 'Pricing', href: '#', description: 'Start free. Scale at your pace.' },
];

export function Navbar() {
  return (
    <header className="sticky top-0 z-50 border-b border-white/10 bg-black/70 backdrop-blur-xl">
      <nav className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
        <div className="flex items-center gap-8">
          <Logo />
          <ul className="hidden items-center gap-6 md:flex">
            {navigationItems.map(({ label, href }) => (
              <li key={label}>
                <a
                  href={href}
                  className="text-sm text-white/60 transition-colors hover:text-white"
                >
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </div>
        <div className="flex items-center gap-2">
          <Button
            asChild
            size="lg"
            variant="ghost"
            className="hidden text-white/70 hover:bg-white/5 hover:text-white sm:inline-flex"
          >
            <a href="#">Log In</a>
          </Button>
          <Button
            asChild
            size="lg"
            className="hidden rounded-full bg-white text-black hover:bg-white/90 sm:inline-flex"
          >
            <a href="#">Sign Up</a>
          </Button>
          <MobileNavigation items={navigationItems} />
        </div>
      </nav>
    </header>
  );
}