/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/layout/Footer.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';
// Lucide icons — lightweight SVG icon components
import { ShieldCheck, Leaf, Award, Phone, Mail, MapPin, Facebook, Instagram, MessageCircle } from 'lucide-react';
// 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 external package or local module
import {
  // Property or array item — trailing comma allowed in TypeScript
  SITE_PHONE_DISPLAY,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_ADDRESS,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_HOURS,
  // Property or array item — trailing comma allowed in TypeScript
  SITE_EMAIL,
  // Property or array item — trailing comma allowed in TypeScript
  FACEBOOK_URL,
  // Property or array item — trailing comma allowed in TypeScript
  INSTAGRAM_URL,
  // Property or array item — trailing comma allowed in TypeScript
  WHATSAPP_URL,
// Closing brace — end of block (function, if, object, JSX)
} from '@/lib/constants';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function Footer() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Line 20: const footerLinks = {
  const footerLinks = {
    // Line 21: shop: [
    shop: [
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.chicken'), href: '/shop?category=chicken' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.beef'), href: '/shop?category=beef' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.lamb'), href: '/shop?category=lamb' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.fish'), href: '/shop?category=fish' },
    // End of array literal
    ],
    // Line 27: company: [
    company: [
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.about'), href: '/about' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.halalCert'), href: '/about#halal' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.delivery'), href: '/about#delivery' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.contact'), href: '/about#contact' },
    // End of array literal
    ],
    // Line 33: account: [
    account: [
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.myAccount'), href: '/account' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.orderHistory'), href: '/account#orders' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.wishlist'), href: '/wishlist' },
      // Property or array item — trailing comma allowed in TypeScript
      { label: t('nav.cart'), href: '/cart' },
    // End of array literal
    ],
  // Closing brace — end of block (function, if, object, JSX)
  };
// (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
    <footer className="border-t border-gray-100 bg-brand-950 text-white">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <Link href="/" className="mb-4 flex items-center gap-3">
              // JSX element — HTML-like tag becomes React component in browser
              <Logo size="sm" className="ring-brand-700" />
              // JSX element — HTML-like tag becomes React component in browser
              <span className="font-display text-xl font-bold">{t('site.name')}</span>
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
            // JSX element — HTML-like tag becomes React component in browser
            <p className="mb-6 text-sm leading-relaxed text-brand-200">
              // Line 51: {t('footer.tagline')}
              {t('footer.tagline')}
            // JSX element — HTML-like tag becomes React component in browser
            </p>
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-6 flex flex-wrap gap-4">
              // JSX element — HTML-like tag becomes React component in browser
              <div className="flex items-center gap-1.5 text-xs text-gold-400">
                // JSX element — HTML-like tag becomes React component in browser
                <ShieldCheck className="h-4 w-4" />
                // Line 56: {t('trust.halal')}
                {t('trust.halal')}
              // JSX element — HTML-like tag becomes React component in browser
              </div>
              // JSX element — HTML-like tag becomes React component in browser
              <div className="flex items-center gap-1.5 text-xs text-gold-400">
                // JSX element — HTML-like tag becomes React component in browser
                <Leaf className="h-4 w-4" />
                // Line 60: {t('trust.fresh')}
                {t('trust.fresh')}
              // JSX element — HTML-like tag becomes React component in browser
              </div>
              // JSX element — HTML-like tag becomes React component in browser
              <div className="flex items-center gap-1.5 text-xs text-gold-400">
                // JSX element — HTML-like tag becomes React component in browser
                <Award className="h-4 w-4" />
                // Line 64: {t('trust.premium')}
                {t('trust.premium')}
              // 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 className="flex gap-3">
              // JSX element — HTML-like tag becomes React component in browser
              <a
                // Link target URL — internal route or external https://
                href={FACEBOOK_URL}
                // Line 70: target="_blank"
                target="_blank"
                // Line 71: rel="noopener noreferrer"
                rel="noopener noreferrer"
                // Accessibility attribute — screen readers and assistive tech
                aria-label={t('social.facebook')}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
              // Line 74: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <Facebook className="h-4 w-4" />
              // JSX element — HTML-like tag becomes React component in browser
              </a>
              // JSX element — HTML-like tag becomes React component in browser
              <a
                // Link target URL — internal route or external https://
                href={INSTAGRAM_URL}
                // Line 79: target="_blank"
                target="_blank"
                // Line 80: rel="noopener noreferrer"
                rel="noopener noreferrer"
                // Accessibility attribute — screen readers and assistive tech
                aria-label={t('social.instagram')}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
              // Line 83: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <Instagram className="h-4 w-4" />
              // JSX element — HTML-like tag becomes React component in browser
              </a>
              // JSX element — HTML-like tag becomes React component in browser
              <a
                // Link target URL — internal route or external https://
                href={WHATSAPP_URL}
                // Line 88: target="_blank"
                target="_blank"
                // Line 89: rel="noopener noreferrer"
                rel="noopener noreferrer"
                // Accessibility attribute — screen readers and assistive tech
                aria-label={t('social.whatsapp')}
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="rounded-lg bg-brand-800 p-2.5 text-brand-200 transition-colors hover:bg-brand-700 hover:text-white"
              // Line 92: >
              >
                // JSX element — HTML-like tag becomes React component in browser
                <MessageCircle className="h-4 w-4" />
              // JSX element — HTML-like tag becomes React component in browser
              </a>
            // 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)
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
              // Line 100: {t('footer.shop')}
              {t('footer.shop')}
            // JSX element — HTML-like tag becomes React component in browser
            </h3>
            // JSX element — HTML-like tag becomes React component in browser
            <ul className="space-y-2">
              // Array.map — transform each item (often render a list of components)
              {footerLinks.shop.map((link) => (
                // JSX element — HTML-like tag becomes React component in browser
                <li key={link.href}>
                  // JSX element — HTML-like tag becomes React component in browser
                  <Link
                    // Link target URL — internal route or external https://
                    href={link.href}
                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
                    className="text-sm text-brand-200 transition-colors hover:text-white"
                  // Line 108: >
                  >
                    // Line 109: {link.label}
                    {link.label}
                  // JSX element — HTML-like tag becomes React component in browser
                  </Link>
                // JSX element — HTML-like tag becomes React component in browser
                </li>
              // Line 112: ))}
              ))}
            // JSX element — HTML-like tag becomes React component in browser
            </ul>
          // 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>
            // JSX element — HTML-like tag becomes React component in browser
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
              // Line 118: {t('footer.company')}
              {t('footer.company')}
            // JSX element — HTML-like tag becomes React component in browser
            </h3>
            // JSX element — HTML-like tag becomes React component in browser
            <ul className="space-y-2">
              // Array.map — transform each item (often render a list of components)
              {footerLinks.company.map((link) => (
                // JSX element — HTML-like tag becomes React component in browser
                <li key={link.href}>
                  // JSX element — HTML-like tag becomes React component in browser
                  <Link
                    // Link target URL — internal route or external https://
                    href={link.href}
                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
                    className="text-sm text-brand-200 transition-colors hover:text-white"
                  // Line 126: >
                  >
                    // Line 127: {link.label}
                    {link.label}
                  // JSX element — HTML-like tag becomes React component in browser
                  </Link>
                // JSX element — HTML-like tag becomes React component in browser
                </li>
              // Line 130: ))}
              ))}
            // JSX element — HTML-like tag becomes React component in browser
            </ul>
          // 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>
            // JSX element — HTML-like tag becomes React component in browser
            <h3 className="mb-4 text-sm font-semibold uppercase tracking-wider text-gold-400">
              // Line 136: {t('footer.contact')}
              {t('footer.contact')}
            // JSX element — HTML-like tag becomes React component in browser
            </h3>
            // JSX element — HTML-like tag becomes React component in browser
            <ul className="space-y-3">
              // JSX element — HTML-like tag becomes React component in browser
              <li className="flex items-center gap-2 text-sm text-brand-200">
                // JSX element — HTML-like tag becomes React component in browser
                <Phone className="h-4 w-4 text-gold-400" />
                // JSX element — HTML-like tag becomes React component in browser
                <a href={`tel:${SITE_PHONE_DISPLAY.replace(/\s/g, '')}`} className="hover:text-white">
                  // Line 142: {SITE_PHONE_DISPLAY}
                  {SITE_PHONE_DISPLAY}
                // JSX element — HTML-like tag becomes React component in browser
                </a>
              // JSX element — HTML-like tag becomes React component in browser
              </li>
              // JSX element — HTML-like tag becomes React component in browser
              <li className="flex items-center gap-2 text-sm text-brand-200">
                // JSX element — HTML-like tag becomes React component in browser
                <Mail className="h-4 w-4 text-gold-400" />
                // JSX element — HTML-like tag becomes React component in browser
                <a href={`mailto:${SITE_EMAIL}`} className="hover:text-white">
                  // Line 148: {SITE_EMAIL}
                  {SITE_EMAIL}
                // JSX element — HTML-like tag becomes React component in browser
                </a>
              // JSX element — HTML-like tag becomes React component in browser
              </li>
              // JSX element — HTML-like tag becomes React component in browser
              <li className="flex items-start gap-2 text-sm text-brand-200">
                // JSX element — HTML-like tag becomes React component in browser
                <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-gold-400" />
                // JSX element — HTML-like tag becomes React component in browser
                <span>
                  // Line 154: {SITE_ADDRESS}
                  {SITE_ADDRESS}
                  // JSX element — HTML-like tag becomes React component in browser
                  <br />
                  // Line 156: {t('footer.hours', { hours: SITE_HOURS })}
                  {t('footer.hours', { hours: SITE_HOURS })}
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // JSX element — HTML-like tag becomes React component in browser
              </li>
            // JSX element — HTML-like tag becomes React component in browser
            </ul>
          // 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)
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-brand-800 pt-8 sm:flex-row">
          // JSX element — HTML-like tag becomes React component in browser
          <p className="text-xs text-brand-300">
            // Line 165: &copy; {new Date().getFullYear()} {t('site.name')}. {t('f...
            &copy; {new Date().getFullYear()} {t('site.name')}. {t('footer.rights')}
          // JSX element — HTML-like tag becomes React component in browser
          </p>
          // JSX element — HTML-like tag becomes React component in browser
          <div className="flex gap-6 text-xs text-brand-300">
            // JSX element — HTML-like tag becomes React component in browser
            <Link href="/about#privacy" className="hover:text-white">
              // Line 169: {t('nav.privacy')}
              {t('nav.privacy')}
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
            // JSX element — HTML-like tag becomes React component in browser
            <Link href="/about#terms" className="hover:text-white">
              // Line 172: {t('nav.terms')}
              {t('nav.terms')}
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
          // 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>
    // JSX element — HTML-like tag becomes React component in browser
    </footer>
  // Line 178: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
