/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/TrustBadges.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 } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function TrustBadges() {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Line 10: const badges = [
  const badges = [
    // Line 11: {
    {
      // Property or array item — trailing comma allowed in TypeScript
      icon: ShieldCheck,
      // Property or array item — trailing comma allowed in TypeScript
      title: t('trust.halal'),
      // Property or array item — trailing comma allowed in TypeScript
      description: t('trust.halalDesc'),
      // Property or array item — trailing comma allowed in TypeScript
      href: '/about#halal',
    // Closing brace — end of block (function, if, object, JSX)
    },
    // Line 17: {
    {
      // Property or array item — trailing comma allowed in TypeScript
      icon: Leaf,
      // Property or array item — trailing comma allowed in TypeScript
      title: t('trust.fresh'),
      // Property or array item — trailing comma allowed in TypeScript
      description: t('trust.freshDesc'),
      // Property or array item — trailing comma allowed in TypeScript
      href: '/about#delivery',
    // Closing brace — end of block (function, if, object, JSX)
    },
    // Line 23: {
    {
      // Property or array item — trailing comma allowed in TypeScript
      icon: Award,
      // Property or array item — trailing comma allowed in TypeScript
      title: t('trust.premium'),
      // Property or array item — trailing comma allowed in TypeScript
      description: t('trust.premiumDesc'),
      // Property or array item — trailing comma allowed in TypeScript
      href: '/about',
    // Closing brace — end of block (function, if, object, JSX)
    },
  // 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
    <section className="bg-cream-100 py-16">
      // 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="grid gap-8 md:grid-cols-3">
          // Array.map — transform each item (often render a list of components)
          {badges.map((badge) => (
            // JSX element — HTML-like tag becomes React component in browser
            <Link
              // Line 37: key={badge.title}
              key={badge.title}
              // Link target URL — internal route or external https://
              href={badge.href}
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="group rounded-2xl border border-cream-300/80 bg-white p-8 text-center shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg"
            // Line 40: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-50 transition-colors group-hover:bg-gold-50">
                // JSX element — HTML-like tag becomes React component in browser
                <badge.icon className="h-7 w-7 text-brand-700 transition-colors group-hover:text-gold-600" />
              // JSX element — HTML-like tag becomes React component in browser
              </div>
              // JSX element — HTML-like tag becomes React component in browser
              <h3 className="mb-2 font-display text-xl font-bold text-brand-900">
                // Line 45: {badge.title}
                {badge.title}
              // JSX element — HTML-like tag becomes React component in browser
              </h3>
              // JSX element — HTML-like tag becomes React component in browser
              <p className="text-sm leading-relaxed text-gray-500">{badge.description}</p>
            // 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)
}
