'use client';

import AppImage from '@/components/ui/AppImage';
import Button from '@/components/ui/Button';
import Logo from '@/components/ui/Logo';
import TrustBadges from '@/components/home/TrustBadges';
import { ArrowRight, ShieldCheck, MapPin, Clock } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';
import { PAGE_IMAGES } from '@/infrastructure/images';
import { SITE_LOCATION, SITE_HOURS, SITE_ADDRESS, WHATSAPP_URL } from '@/lib/constants';

export default function Hero() {
  const { t } = useTranslation();

  return (
    <section className="relative min-h-[85vh] overflow-hidden bg-brand-950">
      <div className="pointer-events-none absolute inset-0">
        <AppImage
          src={PAGE_IMAGES.hero}
          alt=""
          fill
          className="object-cover"
          priority
          sizes="100vw"
          placeholder="blur"
          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUH/8QAIhAAAgEDBQAAAAAAAAAAAAAAAQIDAAQRBQYhIjFB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAZEQACAwEAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEEA/ALextba0t0t7eJI4kHVEU4AqT/9k="
        />
      </div>
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-r from-brand-950/95 via-brand-900/85 to-brand-900/40" />
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-brand-950/60 via-transparent to-transparent" />

      <div className="relative z-10 mx-auto grid min-h-[85vh] max-w-7xl items-center gap-10 px-4 py-20 sm:px-6 lg:grid-cols-2 lg:gap-12 lg:px-8 lg:py-28">
        <div className="max-w-2xl">
          <div className="mb-8 flex items-center gap-4">
            <Logo size="lg" className="ring-gold-400/40 shadow-premium-lg" />
            <div>
              <p className="text-sm font-medium text-gold-400">{SITE_LOCATION}</p>
              <p className="text-xs text-brand-200">{t('hero.taglineShort')}</p>
            </div>
          </div>

          <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">
            <ShieldCheck className="h-4 w-4 text-gold-400" />
            <span className="text-xs font-semibold uppercase tracking-wider text-gold-300">
              {t('hero.badge')}
            </span>
          </div>

          <h1 className="mb-4 font-display text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
            {t('hero.title')}
          </h1>

          <p className="mb-2 text-xl font-medium text-gold-300 sm:text-2xl">
            {t('hero.subtitleShort')}
          </p>

          <p className="mb-8 text-base leading-relaxed text-brand-100 sm:text-lg">
            {t('hero.subtitle')}
          </p>

          <div className="mb-8 lg:hidden">
            <TrustBadges />
          </div>

          <div className="mb-8 flex flex-wrap gap-4 text-sm text-brand-200">
            <span className="flex items-center gap-1.5">
              <Clock className="h-4 w-4 text-gold-400" />
              {t('hero.hours', { hours: SITE_HOURS })}
            </span>
            <span className="flex items-center gap-1.5">
              <MapPin className="h-4 w-4 text-gold-400" />
              {SITE_ADDRESS}
            </span>
          </div>

          <div className="flex flex-col gap-4 sm:flex-row">
            <Button href="/shop" variant="gold" size="lg">
              {t('hero.shopNow')}
              <ArrowRight className="h-4 w-4 rtl:rotate-180" />
            </Button>
            <Button
              href={WHATSAPP_URL}
              external
              variant="secondary"
              size="lg"
              className="border-white/30 bg-white/10 text-white hover:border-gold-400/50 hover:bg-white/15"
            >
              {t('hero.whatsapp')}
            </Button>
          </div>
        </div>

        <div className="hidden lg:flex lg:items-center lg:justify-center">
          <TrustBadges />
        </div>
      </div>

      <div className="pointer-events-none absolute bottom-0 left-0 right-0 z-[1] h-20 bg-gradient-to-t from-cream-50 to-transparent" />
    </section>
  );
}