/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/WeeklyOffers.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 AppImage from '@/components/ui/AppImage';
// Lucide icons — lightweight SVG icon components
import { MessageCircle, ArrowRight } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { weeklyOffers } from '@/lib/offers';
// Import project module (@/ alias = src/ folder in tsconfig)
import { IMAGES } from '@/lib/images';
// Import project module (@/ alias = src/ folder in tsconfig)
import { whatsappOrderUrl } from '@/lib/constants';
// Import project module (@/ alias = src/ folder in tsconfig)
import { formatPrice, getFormatLocale } from '@/lib/utils';
// 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 WeeklyOffers() {
  // Custom hook — returns t() translator and current locale
  const { t, locale } = useTranslation();
  // Line 14: const fmt = (n: number) => formatPrice(n, getFormatLocale...
  const fmt = (n: number) => formatPrice(n, getFormatLocale(locale));
// (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-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="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          // 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 22: {t('offers.label')}
              {t('offers.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 mb-3">{t('offers.title')}</h2>
            // JSX element — HTML-like tag becomes React component in browser
            <p className="mb-8 text-gray-500">{t('offers.subtitle')}</p>
// (blank line — separates logical blocks for readability)
            // JSX element — HTML-like tag becomes React component in browser
            <div className="space-y-4">
              // Array.map — transform each item (often render a list of components)
              {weeklyOffers.map((offer) => (
                // JSX element — HTML-like tag becomes React component in browser
                <div
                  // Line 30: key={offer.id}
                  key={offer.id}
                  // Tailwind CSS utility classes — styling (colors, spacing, layout)
                  className="group flex gap-4 rounded-2xl border border-cream-300/80 bg-white p-4 shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg sm:p-5"
                // Line 32: >
                >
                  // JSX element — HTML-like tag becomes React component in browser
                  <Link
                    // Link target URL — internal route or external https://
                    href={`/product/${offer.productSlug}`}
                    // Tailwind CSS utility classes — styling (colors, spacing, layout)
                    className="relative h-20 w-20 shrink-0 overflow-hidden rounded-xl sm:h-24 sm:w-24"
                  // Line 36: >
                  >
                    // JSX element — HTML-like tag becomes React component in browser
                    <AppImage
                      // Line 38: src={offer.image}
                      src={offer.image}
                      // Line 39: alt={t(`${offer.nameKey}.name`)}
                      alt={t(`${offer.nameKey}.name`)}
                      // Line 40: fill
                      fill
                      // Tailwind CSS utility classes — styling (colors, spacing, layout)
                      className="object-cover transition-transform duration-500 group-hover:scale-105"
                      // Line 42: sizes="(max-width: 640px) 96px, 128px"
                      sizes="(max-width: 640px) 96px, 128px"
                    // Line 43: />
                    />
                  // JSX element — HTML-like tag becomes React component in browser
                  </Link>
// (blank line — separates logical blocks for readability)
                  // JSX element — HTML-like tag becomes React component in browser
                  <div className="min-w-0 flex-1">
                    // JSX element — HTML-like tag becomes React component in browser
                    <div className="mb-1 flex flex-wrap items-center gap-2">
                      // JSX element — HTML-like tag becomes React component in browser
                      <span
                        // Tailwind CSS utility classes — styling (colors, spacing, layout)
                        className={
                          // Line 50: offer.badgeKey === 'halal'
                          offer.badgeKey === 'halal'
                            // Line 51: ? 'rounded-full bg-brand-700 px-2.5 py-0.5 text-[10px] fo...
                            ? 'rounded-full bg-brand-700 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white'
                            // Line 52: : 'rounded-full bg-gold-500 px-2.5 py-0.5 text-[10px] fon...
                            : 'rounded-full bg-gold-500 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-white'
                        // Closing brace — end of block (function, if, object, JSX)
                        }
                      // Line 54: >
                      >
                        // Line 55: {t(`offers.badge.${offer.badgeKey}`)}
                        {t(`offers.badge.${offer.badgeKey}`)}
                      // JSX element — HTML-like tag becomes React component in browser
                      </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
                    <Link href={`/product/${offer.productSlug}`}>
                      // JSX element — HTML-like tag becomes React component in browser
                      <h3 className="mb-2 font-display text-lg font-bold text-brand-900 transition-colors hover:text-brand-700">
                        // Line 61: {t(`${offer.nameKey}.name`)}
                        {t(`${offer.nameKey}.name`)}
                      // JSX element — HTML-like tag becomes React component in browser
                      </h3>
                    // JSX element — HTML-like tag becomes React component in browser
                    </Link>
// (blank line — separates logical blocks for readability)
                    // JSX element — HTML-like tag becomes React component in browser
                    <div className="flex flex-wrap items-end justify-between gap-3">
                      // JSX element — HTML-like tag becomes React component in browser
                      <div>
                        // Line 67: {offer.originalPrice != null && (
                        {offer.originalPrice != null && (
                          // JSX element — HTML-like tag becomes React component in browser
                          <p className="text-sm text-gray-400 line-through">
                            // Line 69: {t('offers.was')}: {fmt(offer.originalPrice)}/
                            {t('offers.was')}: {fmt(offer.originalPrice)}/
                            // Line 70: {t(`priceUnit.${offer.priceUnitKey}`)}
                            {t(`priceUnit.${offer.priceUnitKey}`)}
                          // JSX element — HTML-like tag becomes React component in browser
                          </p>
                        // Line 72: )}
                        )}
                        // JSX element — HTML-like tag becomes React component in browser
                        <p className="font-display text-xl font-bold text-brand-800">
                          // Line 74: {offer.originalPrice != null && (
                          {offer.originalPrice != null && (
                            // JSX element — HTML-like tag becomes React component in browser
                            <span className="me-2 text-sm font-semibold uppercase text-gold-600">
                              // Line 76: {t('offers.now')}
                              {t('offers.now')}
                            // JSX element — HTML-like tag becomes React component in browser
                            </span>
                          // Line 78: )}
                          )}
                          // Line 79: {fmt(offer.price)}
                          {fmt(offer.price)}
                          // JSX element — HTML-like tag becomes React component in browser
                          <span className="text-sm font-normal text-gray-500">
                            // Line 81: /{t(`priceUnit.${offer.priceUnitKey}`)}
                            /{t(`priceUnit.${offer.priceUnitKey}`)}
                          // JSX element — HTML-like tag becomes React component in browser
                          </span>
                        // JSX element — HTML-like tag becomes React component in browser
                        </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="flex flex-wrap gap-2">
                        // JSX element — HTML-like tag becomes React component in browser
                        <Link
                          // Link target URL — internal route or external https://
                          href={`/product/${offer.productSlug}`}
                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
                          className="inline-flex items-center gap-1 rounded-lg border border-brand-200 px-3 py-2 text-xs font-semibold text-brand-700 transition-colors hover:bg-brand-50"
                        // Line 90: >
                        >
                          // Line 91: {t('offers.viewProduct')}
                          {t('offers.viewProduct')}
                          // JSX element — HTML-like tag becomes React component in browser
                          <ArrowRight className="h-3 w-3 rtl:rotate-180" />
                        // JSX element — HTML-like tag becomes React component in browser
                        </Link>
                        // JSX element — HTML-like tag becomes React component in browser
                        <a
                          // Link target URL — internal route or external https://
                          href={whatsappOrderUrl(offer.whatsappProduct)}
                          // Line 96: target="_blank"
                          target="_blank"
                          // Line 97: rel="noopener noreferrer"
                          rel="noopener noreferrer"
                          // Tailwind CSS utility classes — styling (colors, spacing, layout)
                          className="inline-flex items-center gap-1.5 rounded-lg bg-brand-700 px-4 py-2 text-xs font-semibold text-white transition-colors hover:bg-brand-800"
                        // Line 99: >
                        >
                          // JSX element — HTML-like tag becomes React component in browser
                          <MessageCircle className="h-3.5 w-3.5" />
                          // Line 101: {t('offers.order')}
                          {t('offers.order')}
                        // 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>
                  // JSX element — HTML-like tag becomes React component in browser
                  </div>
                // JSX element — HTML-like tag becomes React component in browser
                </div>
              // Line 107: ))}
              ))}
            // 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
            <p className="mt-6 text-xs text-gray-400">{t('offers.disclaimer')}</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
          <Link
            // Link target URL — internal route or external https://
            href="/shop"
            // Tailwind CSS utility classes — styling (colors, spacing, layout)
            className="relative hidden aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg lg:block"
          // Line 116: >
          >
            // JSX element — HTML-like tag becomes React component in browser
            <AppImage
              // Line 118: src={IMAGES.hero}
              src={IMAGES.hero}
              // Line 119: alt=""
              alt=""
              // Line 120: fill
              fill
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className="object-cover transition-transform duration-500 hover:scale-105"
              // Line 122: sizes="(max-width: 1024px) 0px, 640px"
              sizes="(max-width: 1024px) 0px, 640px"
            // Line 123: />
            />
            // JSX element — HTML-like tag becomes React component in browser
            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/50 via-transparent to-transparent" />
          // 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
    </section>
  // Line 129: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
