const navigation = [
  { href: '/', label: 'Inicio' },
  { href: '/productos', label: 'Productos' },
  { href: '/categoria/ecologico', label: 'Categorías' },
  { href: '/marca', label: 'Marcas' },
];

import { CartButton } from './cart-button';

export function SiteHeader() {
  return (
    <header className="border-b border-emerald-900/10 bg-white/85 backdrop-blur">
      <nav
        className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4"
        aria-label="Principal"
      >
        <a href="/" className="text-xl font-bold tracking-tight text-emerald-950">
          mercadodevida
        </a>
        <ul className="hidden items-center gap-6 text-sm font-medium text-stone-700 md:flex">
          {navigation.map((item) => (
            <li key={item.href}>
              <a className="transition hover:text-emerald-800" href={item.href}>
                {item.label}
              </a>
            </li>
          ))}
        </ul>
        <CartButton />
      </nav>
    </header>
  );
}
