/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/FeaturedProducts.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 project module (@/ alias = src/ folder in tsconfig)
import ProductCard from '@/components/product/ProductCard';
// Import project module (@/ alias = src/ folder in tsconfig)
import { getFeaturedProducts } from '@/lib/products';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Lucide icons — lightweight SVG icon components
import { ArrowRight } 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 { localizeProduct } from '@/lib/product-i18n';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function FeaturedProducts() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
  // Line 13: const featured = getFeaturedProducts()
  const featured = getFeaturedProducts()
    // Line 14: .slice(0, 4)
    .slice(0, 4)
    // Array.map — transform each item (often render a list of components)
    .map((p) => localizeProduct(p, t));
// (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="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 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end">
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
              // Line 23: {t('featured.label')}
              {t('featured.label')}
            // JSX element — HTML-like tag becomes React component in browser
            </span>
            // JSX element — HTML-like tag becomes React component in browser
            <h2 className="section-heading">{t('featured.title')}</h2>
            // JSX element — HTML-like tag becomes React component in browser
            <p className="mt-2 max-w-lg text-gray-500">{t('featured.subtitle')}</p>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
          // JSX element — HTML-like tag becomes React component in browser
          <Link href="/shop">
            // JSX element — HTML-like tag becomes React component in browser
            <Button variant="secondary">
              // Line 30: {t('featured.viewAll')}
              {t('featured.viewAll')}
              // JSX element — HTML-like tag becomes React component in browser
              <ArrowRight className="h-4 w-4 rtl:rotate-180" />
            // JSX element — HTML-like tag becomes React component in browser
            </Button>
          // JSX element — HTML-like tag becomes React component in browser
          </Link>
        // 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)
          {featured.map((product) => (
            // JSX element — HTML-like tag becomes React component in browser
            <ProductCard key={product.id} product={product} />
          // Line 39: ))}
          ))}
        // 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 43: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
