/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/CategoryGrid.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)
// Import project module (@/ alias = src/ folder in tsconfig)
import AppImage from '@/components/ui/AppImage';
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Lucide icons — lightweight SVG icon components
import { ArrowRight } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { CATEGORY_IDS, CATEGORY_IMAGES } from '@/lib/constants';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Default export — main component/page Next.js or other files import
export default function CategoryGrid() {
  // 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
    <section className="bg-cream-50 py-20">
      // 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="mb-12 text-center">
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="section-heading mb-3">{t('categories.title')}</h2>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="mx-auto max-w-2xl text-gray-500">{t('categories.subtitle')}</p>
        // 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="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          // Array.map — transform each item (often render a list of components)
          {CATEGORY_IDS.map((id) => (
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Line 22: key={id}
              key={id}
              // Link target URL — internal route or external https://
              href={`/shop?category=${id}`}
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="group relative overflow-hidden rounded-2xl shadow-premium transition-all duration-300 hover:shadow-premium-lg"
            // Line 25: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <div className="relative aspect-[3/4]">
                // JSX element — HTML-like tag becomes React component in browser
                <AppImage
                  // Line 28: src={CATEGORY_IMAGES[id]}
                  src={CATEGORY_IMAGES[id]}
                  // Line 29: alt={t(`categories.${id}.name`)}
                  alt={t(`categories.${id}.name`)}
                  // Line 30: fill
                  fill
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                  // Line 32: sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw...
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
                // Line 33: />
                />
                // JSX element — HTML-like tag becomes React component in browser
                <div className="absolute inset-0 bg-gradient-to-t from-brand-950/92 via-brand-800/50 to-brand-700/10" />
              // JSX element — HTML-like tag becomes React component in browser
              </div>
              // JSX element — HTML-like tag becomes React component in browser
              <div className="absolute bottom-0 left-0 right-0 p-6">
                // JSX element — HTML-like tag becomes React component in browser
                <h3 className="mb-1 font-display text-2xl font-bold text-white">
                  // Line 38: {t(`categories.${id}.name`)}
                  {t(`categories.${id}.name`)}
                // JSX element — HTML-like tag becomes React component in browser
                </h3>
                // JSX element — HTML-like tag becomes React component in browser
                <p className="mb-3 text-sm text-brand-200">
                  // Line 41: {t(`categories.${id}.description`)}
                  {t(`categories.${id}.description`)}
                // JSX element — HTML-like tag becomes React component in browser
                </p>
                // JSX element — HTML-like tag becomes React component in browser
                <span className="inline-flex items-center gap-1 text-sm font-semibold text-gold-400 transition-colors group-hover:text-gold-300">
                  // Line 44: {t('categories.shop', { name: t(`categories.${id}.name`) })}
                  {t('categories.shop', { name: t(`categories.${id}.name`) })}
                  // JSX element — HTML-like tag becomes React component in browser
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1" />
                // JSX element — HTML-like tag becomes React component in browser
                </span>
              // JSX element — HTML-like tag becomes React component in browser
              </div>
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
          // Line 49: ))}
          ))}
        // 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
    </section>
  // Line 53: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
