'use client';

import AppImage from '@/components/ui/AppImage';
import { useTranslation } from '@/hooks/useTranslation';
import { PAGE_IMAGES } from '@/infrastructure/images';

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

  const stats = [
    { value: t('aboutPreview.statHalal'), label: t('aboutPreview.statHalalLabel') },
    { value: t('aboutPreview.statDays'), label: t('aboutPreview.statDaysLabel') },
    { value: t('aboutPreview.statDelivery'), label: t('aboutPreview.statDeliveryLabel') },
    { value: t('aboutPreview.statFresh'), label: t('aboutPreview.statFreshLabel') },
  ];

  return (
    <section className="border-b border-cream-300/60 bg-white py-16 sm:py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16">
          <div>
            <span className="mb-2 inline-block text-sm font-semibold uppercase tracking-wider text-gold-600">
              {t('aboutPreview.label')}
            </span>
            <h2 className="section-heading mb-6">{t('aboutPreview.title')}</h2>
            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p1')}</p>
            <p className="mb-4 leading-relaxed text-gray-600">{t('aboutPreview.p2')}</p>
            <p className="mb-8 leading-relaxed text-gray-600">{t('aboutPreview.p3')}</p>

            <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
              {stats.map((stat) => (
                <div
                  key={stat.label}
                  className="rounded-xl border border-cream-300/80 bg-cream-50 p-4 text-center"
                >
                  <p className="font-display text-2xl font-bold text-brand-800">{stat.value}</p>
                  <p className="mt-1 text-xs font-medium text-gray-500">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="relative aspect-[4/5] overflow-hidden rounded-2xl shadow-premium-lg">
            <AppImage
              src={PAGE_IMAGES.aboutMeat}
              alt={t('aboutPreview.imageAlt')}
              fill
              className="object-cover"
              sizes="(max-width: 1024px) 100vw, 640px"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-brand-950/30 via-transparent to-transparent" />
          </div>
        </div>
      </div>
    </section>
  );
}