/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/layout/LanguageBanner.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)
// Lucide icons — lightweight SVG icon components
import { Globe } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { LOCALES, Locale } from '@/i18n/types';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useLocaleStore } from '@/store/locale';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import { cn } from '@/lib/utils';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function LanguageBanner() {
  // Zustand selector — subscribe to slice of global store
  const { locale, setLocale } = useLocaleStore();
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (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
    <div
      // Tailwind CSS utility classes — styling (colors, spacing, layout)
      className="border-b border-brand-800 bg-brand-950 text-white"
      // Line 16: role="navigation"
      role="navigation"
      // Accessibility attribute — screen readers and assistive tech
      aria-label={t('nav.language')}
    // Line 18: >
    >
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto flex max-w-7xl flex-col items-center gap-2 px-4 py-2 sm:flex-row sm:justify-between sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="flex items-center gap-2 text-xs font-medium text-brand-200">
          // JSX element — HTML-like tag becomes React component in browser
          <Globe className="h-3.5 w-3.5 text-gold-400" aria-hidden />
          // JSX element — HTML-like tag becomes React component in browser
          <span>{t('languageBanner.choose')}</span>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <div
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className="flex w-full max-w-md items-center justify-center gap-1 rounded-full bg-brand-900 p-1 ring-1 ring-brand-800 sm:w-auto sm:max-w-none"
          // Line 27: role="group"
          role="group"
          // Accessibility attribute — screen readers and assistive tech
          aria-label={t('nav.language')}
        // Line 29: >
        >
          // Array.map — transform each item (often render a list of components)
          {LOCALES.map((lang) => {
            // Line 31: const active = locale === lang.code;
            const active = locale === lang.code;
            // Return JSX — describes UI tree React renders to the DOM
            return (
              // JSX element — HTML-like tag becomes React component in browser
              <button
                // Line 34: key={lang.code}
                key={lang.code}
                // Line 35: type="button"
                type="button"
                // Click handler — runs when user clicks (must be client component)
                onClick={() => setLocale(lang.code as Locale)}
                // Accessibility attribute — screen readers and assistive tech
                aria-pressed={active}
                // Accessibility attribute — screen readers and assistive tech
                aria-label={`${lang.label} (${lang.nativeLabel})`}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className={cn(
                  // Property or array item — trailing comma allowed in TypeScript
                  'flex min-w-0 flex-1 items-center justify-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold transition-all sm:flex-initial sm:px-4 sm:py-2 sm:text-sm',
                  // Line 41: active
                  active
                    // Line 42: ? 'bg-gold-500 text-brand-950 shadow-gold'
                    ? 'bg-gold-500 text-brand-950 shadow-gold'
                    // Line 43: : 'text-brand-200 hover:bg-brand-800 hover:text-white'
                    : 'text-brand-200 hover:bg-brand-800 hover:text-white'
                // Line 44: )}
                )}
              // Line 45: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <span className={lang.code === 'ur' ? 'font-[family-name:var(--font-urdu)]' : ''}>
                  // Line 47: {lang.nativeLabel}
                  {lang.nativeLabel}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
                // JSX element — HTML-like tag becomes React component in browser
                <span
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className={cn(
                    // Property or array item — trailing comma allowed in TypeScript
                    'hidden text-[10px] font-normal uppercase tracking-wide sm:inline',
                    // Line 52: active ? 'text-brand-900/70' : 'text-brand-400'
                    active ? 'text-brand-900/70' : 'text-brand-400'
                  // Line 53: )}
                  )}
                // Line 54: >
                >
                  // Line 55: {lang.label}
                  {lang.label}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // JSX element — HTML-like tag becomes React component in browser
              </button>
            // Line 58: );
            );
          // Closing brace — end of block (function, if, object, JSX)
          })}
        // 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>
  // Line 63: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
