import { Card } from '@/shared/ui/card';
import { useTranslations } from 'next-intl';
import Image from 'next/image';

export function AboutContent() {
  const t = useTranslations();
  const features = [
    {
      number: '1',
      title: 'Sifatli Kontent',
      description:
        "Jahon oshpazlik san'ati va zamonaviy gastronomiya tendentsiyalari haqida chuqur maqolalar va tahlillar",
    },
    {
      number: '2',
      title: 'Professional Jamoa',
      description:
        'Tajribali kulinariya mutaxassislari va oshpazlar tomonidan tayyorlangan kontent',
    },
    {
      number: '3',
      title: 'Yangiliklar',
      description:
        "Gastronomiya sohasidagi so'nggi yangiliklar va eng yangi trendlar haqida xabarlar",
    },
  ];

  const images = [
    {
      url: '/professional-chef-cooking-gourmet-food.jpg',
      alt: 'Professional Oshpaz',
    },
    {
      url: '/fine-dining-restaurant-plating.jpg',
      alt: 'Fine Dining',
    },
    {
      url: '/fresh-ingredients-culinary-market.jpg',
      alt: 'Fresh Ingredients',
    },
  ];

  return (
    <section className="py-20 px-4">
      <div className="max-w-7xl mx-auto">
        {/* Mission Section */}
        <div className="mb-20">
          <h2 className="text-4xl md:text-5xl font-bold text-center mb-16 text-balance">
            {t('Bizning maqsadimiz')}
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            {features.map((feature) => (
              <Card
                key={feature.number}
                className="p-8 hover:shadow-lg transition-shadow"
              >
                <div className="text-6xl font-bold text-primary mb-4">
                  {feature.number}
                </div>
                <h3 className="text-2xl font-semibold mb-4">
                  {t(feature.title)}
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  {t(feature.description)}
                </p>
              </Card>
            ))}
          </div>
        </div>

        {/* About Text */}
        <div className="mb-20 max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-8 text-balance">
            {t('Innovatsiya, sifat va professionallik')}
          </h2>
          <p className="text-lg text-muted-foreground leading-relaxed mb-6">
            {t(
              `Gastro Market – bu gastronomiya dunyosidagi eng so'nggi yangiliklarni`,
            )}
          </p>
          <p className="text-lg text-muted-foreground leading-relaxed">
            {t(`Bizning jamoamiz tajribali kulinariya mutaxassislari`)}
          </p>
        </div>

        {/* Image Gallery */}
        <div className="mb-20">
          <h3 className="text-3xl font-bold text-center mb-12 text-balance">
            {t('Bizning dunyo')}
          </h3>
          <div className="grid md:grid-cols-3 gap-6">
            {images.map((image, idx) => (
              <div
                key={idx}
                className="relative aspect-[4/3] overflow-hidden rounded-lg group"
              >
                <Image
                  width={500}
                  height={500}
                  src={image.url || '/placeholder.svg'}
                  alt={image.alt}
                  unoptimized
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
