/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/layout/Header.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Import React — core UI library (components, hooks, JSX)
import { useState } from 'react';
// Lucide icons — lightweight SVG icon components
import { ShoppingCart, Heart, User, Menu, X, Search } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useCartStore } from '@/store/cart';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useWishlistStore } from '@/store/wishlist';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useAuthStore } from '@/store/auth';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import Logo from '@/components/ui/Logo';
// Import project module (@/ alias = src/ folder in tsconfig)
import { SITE_LOCATION } from '@/lib/constants';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function Header() {
  // React useState — local component state that triggers re-render on change
  const [mobileOpen, setMobileOpen] = useState(false);
  // Zustand selector — subscribe to slice of global store
  const cartCount = useCartStore((s) => s.getItemCount());
  // Zustand selector — subscribe to slice of global store
  const wishlistCount = useWishlistStore((s) => s.items.length);
  // Zustand selector — subscribe to slice of global store
  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Line 20: const navLinks = [
  const navLinks = [
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/shop', label: t('nav.shop') },
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/shop?category=chicken', label: t('nav.chicken') },
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/shop?category=beef', label: t('nav.beef') },
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/shop?category=lamb', label: t('nav.lamb') },
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/shop?category=fish', label: t('nav.fish') },
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/about', label: t('nav.about') },
    // Property or array item — trailing comma allowed in TypeScript
    { href: '/about#contact', label: t('nav.contact') },
  // End of array literal
  ];
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <header className="border-b border-cream-300/80 bg-cream-50/95 backdrop-blur-md">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="flex h-16 items-center justify-between lg:h-20">
          // JSX element — HTML-like tag becomes React component in browser
          <Link href="/" className="flex items-center gap-3">
            // JSX element — HTML-like tag becomes React component in browser
            <Logo size="sm" />
            // JSX element — HTML-like tag becomes React component in browser
            <div className="hidden sm:block">
              // JSX element — HTML-like tag becomes React component in browser
              <span className="font-display text-xl font-bold text-brand-800">
                // Line 38: {t('site.name')}
                {t('site.name')}
              // JSX element — HTML-like tag becomes React component in browser
              </span>
              // JSX element — HTML-like tag becomes React component in browser
              <p className="text-[10px] font-medium uppercase tracking-widest text-brand-600">
                // Line 41: {SITE_LOCATION}
                {SITE_LOCATION}
              // JSX element — HTML-like tag becomes React component in browser
              </p>
            // JSX element — HTML-like tag becomes React component in browser
            </div>
          // JSX element — HTML-like tag becomes React component in browser
          </Link>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <nav className="hidden items-center gap-8 lg:flex">
            // Array.map — transform each item (often render a list of components)
            {navLinks.map((link) => (
              // JSX element — HTML-like tag becomes React component in browser
              <Link
                // Line 49: key={link.href}
                key={link.href}
                // Link target URL — internal route or external https://
                href={link.href}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="text-sm font-medium text-gray-600 transition-colors hover:text-brand-700"
              // Line 52: >
              >
                // Line 53: {link.label}
                {link.label}
              // JSX element — HTML-like tag becomes React component in browser
              </Link>
            // Line 55: ))}
            ))}
          // JSX element — HTML-like tag becomes React component in browser
          </nav>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="flex items-center gap-1 sm:gap-2">
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Link target URL — internal route or external https://
              href="/shop?q="
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="hidden rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700 sm:block"
              // Accessibility attribute — screen readers and assistive tech
              aria-label={t('nav.searchProducts')}
            // Line 63: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <Search className="h-5 w-5" />
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Link target URL — internal route or external https://
              href="/wishlist"
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
              // Accessibility attribute — screen readers and assistive tech
              aria-label={t('nav.wishlist')}
            // Line 71: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <Heart className="h-5 w-5" />
              // Line 73: {wishlistCount > 0 && (
              {wishlistCount > 0 && (
                // JSX element — HTML-like tag becomes React component in browser
                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-gold-500 text-[10px] font-bold text-white">
                  // Line 75: {wishlistCount}
                  {wishlistCount}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // Line 77: )}
              )}
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Link target URL — internal route or external https://
              href="/cart"
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="relative rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
              // Accessibility attribute — screen readers and assistive tech
              aria-label={t('nav.cart')}
            // Line 84: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <ShoppingCart className="h-5 w-5" />
              // Line 86: {cartCount > 0 && (
              {cartCount > 0 && (
                // JSX element — HTML-like tag becomes React component in browser
                <span className="absolute -end-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-brand-700 text-[10px] font-bold text-white">
                  // Line 88: {cartCount}
                  {cartCount}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // Line 90: )}
              )}
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Link target URL — internal route or external https://
              href={isAuthenticated ? '/account' : '/login'}
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-brand-700"
              // Accessibility attribute — screen readers and assistive tech
              aria-label={t('nav.account')}
            // Line 97: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <User className="h-5 w-5" />
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <button
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 lg:hidden"
              // Click handler — runs when user clicks (must be client component)
              onClick={() => setMobileOpen(!mobileOpen)}
              // Accessibility attribute — screen readers and assistive tech
              aria-label={t('nav.toggleMenu')}
            // Line 105: >
            >
              // Line 106: {mobileOpen ? <X className="h-5 w-5" /> : <Menu className...
              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            // JSX element — HTML-like tag becomes React component in browser
            </button>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
// (blank line — separates logical blocks for readability)
      // Line 112: {mobileOpen && (
      {mobileOpen && (
        // JSX element — HTML-like tag becomes React component in browser
        <div className="border-t border-gray-100 bg-white lg:hidden">
          // JSX element — HTML-like tag becomes React component in browser
          <nav className="flex flex-col px-4 py-4">
            // Array.map — transform each item (often render a list of components)
            {navLinks.map((link) => (
              // JSX element — HTML-like tag becomes React component in browser
              <Link
                // Line 117: key={link.href}
                key={link.href}
                // Link target URL — internal route or external https://
                href={link.href}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="rounded-lg px-4 py-3 text-sm font-medium text-gray-600 transition-colors hover:bg-brand-50 hover:text-brand-700"
                // Click handler — runs when user clicks (must be client component)
                onClick={() => setMobileOpen(false)}
              // Line 121: >
              >
                // Line 122: {link.label}
                {link.label}
              // JSX element — HTML-like tag becomes React component in browser
              </Link>
            // Line 124: ))}
            ))}
          // JSX element — HTML-like tag becomes React component in browser
          </nav>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // Line 127: )}
      )}
    // JSX element — HTML-like tag becomes React component in browser
    </header>
  // Line 129: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
