import { useTranslations } from 'next-intl';
import Image from 'next/image';

export function AboutHero() {
  const t = useTranslations();
  return (
    <section className="relative h-[60vh] min-h-[500px] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image
          width={500}
          height={500}
          unoptimized
          src="/gourmet-food-culinary-magazine-hero-image.jpg"
          alt="Gastro Market"
          className="w-full h-full object-cover brightness-50"
        />
      </div>
      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
        <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 text-balance">
          Gastro Market
        </h1>
        <p className="text-xl md:text-2xl text-white/90 font-light leading-relaxed text-balance">
          {t(
            "Gastronomiya va kulinariya san'ati haqidagi yetakchi onlayn magazin",
          )}
        </p>
      </div>
    </section>
  );
}