/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/home/Hero.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';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// Import project module (@/ alias = src/ folder in tsconfig)
import Logo from '@/components/ui/Logo';
// Lucide icons — lightweight SVG icon components
import { ArrowRight, ShieldCheck, MapPin, Clock } 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 { IMAGES } from '@/lib/images';
// Import project module (@/ alias = src/ folder in tsconfig)
import { SITE_LOCATION, SITE_HOURS, SITE_ADDRESS, WHATSAPP_URL } from '@/lib/constants';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function Hero() {
  // 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="relative min-h-[85vh] overflow-hidden bg-brand-950">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="absolute inset-0">
        // JSX element — HTML-like tag becomes React component in browser
        <AppImage
          // Line 19: src={IMAGES.hero}
          src={IMAGES.hero}
          // Line 20: alt=""
          alt=""
          // Line 21: fill
          fill
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className="object-cover"
          // Line 23: priority
          priority
          // Line 24: sizes="100vw"
          sizes="100vw"
          // Line 25: placeholder="blur"
          placeholder="blur"
          // Line 26: blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAA...
          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUH/8QAIhAAAgEDBQAAAAAAAAAAAAAAAQIDAAQRBQYhIjFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEEA/ALextba0t0t7eJI4kHVEU4AqT/9k="
        // Line 27: />
        />
      // JSX element — HTML-like tag becomes React component in browser
      </div>
      // JSX element — HTML-like tag becomes React component in browser
      <div className="absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-900/85 to-brand-900/40" />
      // JSX element — HTML-like tag becomes React component in browser
      <div className="absolute inset-0 bg-gradient-to-t from-brand-950/60 via-transparent to-transparent" />
// (blank line — separates logical blocks for readability)
      // JSX element — HTML-like tag becomes React component in browser
      <div className="relative mx-auto flex min-h-[85vh] max-w-7xl flex-col justify-center px-4 py-20 sm:px-6 lg:px-8 lg:py-28">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="max-w-2xl animate-slide-up">
          // JSX element — HTML-like tag becomes React component in browser
          <div className="mb-8 flex items-center gap-4">
            // JSX element — HTML-like tag becomes React component in browser
            <Logo size="lg" className="ring-gold-400/40 shadow-premium-lg" />
            // JSX element — HTML-like tag becomes React component in browser
            <div>
              // JSX element — HTML-like tag becomes React component in browser
              <p className="text-sm font-medium text-gold-400">{SITE_LOCATION}</p>
              // JSX element — HTML-like tag becomes React component in browser
              <p className="text-xs text-brand-200">{t('hero.taglineShort')}</p>
            // 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="mb-6 inline-flex items-center gap-2 rounded-full border border-gold-500/30 bg-brand-800/50 px-4 py-1.5 backdrop-blur-sm">
            // JSX element — HTML-like tag becomes React component in browser
            <ShieldCheck className="h-4 w-4 text-gold-400" />
            // JSX element — HTML-like tag becomes React component in browser
            <span className="text-xs font-semibold uppercase tracking-wider text-gold-300">
              // Line 45: {t('hero.badge')}
              {t('hero.badge')}
            // 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
          <h1 className="mb-4 font-display text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
            // Line 50: {t('hero.title')}
            {t('hero.title')}
          // JSX element — HTML-like tag becomes React component in browser
          </h1>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <p className="mb-2 text-xl font-medium text-gold-300 sm:text-2xl">
            // Line 54: {t('hero.subtitleShort')}
            {t('hero.subtitleShort')}
          // JSX element — HTML-like tag becomes React component in browser
          </p>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <p className="mb-8 text-base leading-relaxed text-brand-100 sm:text-lg">
            // Line 58: {t('hero.subtitle')}
            {t('hero.subtitle')}
          // JSX element — HTML-like tag becomes React component in browser
          </p>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <div className="mb-8 flex flex-wrap gap-4 text-sm text-brand-200">
            // JSX element — HTML-like tag becomes React component in browser
            <span className="flex items-center gap-1.5">
              // JSX element — HTML-like tag becomes React component in browser
              <Clock className="h-4 w-4 text-gold-400" />
              // Line 64: {t('hero.hours', { hours: SITE_HOURS })}
              {t('hero.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
            <span className="flex items-center gap-1.5">
              // JSX element — HTML-like tag becomes React component in browser
              <MapPin className="h-4 w-4 text-gold-400" />
              // Line 68: {SITE_ADDRESS}
              {SITE_ADDRESS}
            // 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
          <div className="flex flex-col gap-4 sm:flex-row">
            // 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="gold" size="lg">
                // Line 75: {t('hero.shopNow')}
                {t('hero.shopNow')}
                // 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
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
              // JSX element — HTML-like tag becomes React component in browser
              <Button
                // Line 81: variant="secondary"
                variant="secondary"
                // Line 82: size="lg"
                size="lg"
                // Tailwind CSS utility classes — styling (colors, spacing, layout)
                className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
              // Line 84: >
              >
                // Line 85: {t('hero.whatsapp')}
                {t('hero.whatsapp')}
              // JSX element — HTML-like tag becomes React component in browser
              </Button>
            // 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>
// (blank line — separates logical blocks for readability)
      // JSX element — HTML-like tag becomes React component in browser
      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-cream-50 to-transparent" />
    // JSX element — HTML-like tag becomes React component in browser
    </section>
  // Line 94: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
