import { getLocale, getTranslations } from 'next-intl/server'
import { ShoppingBag, Leaf, Clock, Tag } from 'lucide-react'
import Button from '@/components/frontend/Button'
import HeroCarousel from '@/components/frontend/home/HeroCarousel'
import { getHeroBanners } from '@/lib/db/queries/getHeroBanners'

// Server Component: hero images (banners + banner_images tables, filtered to
// is_hero_banner=1 AND is_active=1) and copy (messages/<locale>.json, "Hero"
// namespace) are both fetched/resolved here so the LCP image and text are in
// the initial server-rendered HTML. Only the carousel's interactive state
// (current slide, prev/next, dots) lives client-side — see HeroCarousel.tsx.
export default async function HeroSection() {
  const locale = await getLocale()
  const t = await getTranslations('Hero')
  const images = await getHeroBanners(locale)

  return (
    <section className="bg-linear-to-br from-orange-50 to-amber-50 rounded-3xl overflow-hidden my-8">
      <div className="grid md:grid-cols-2 gap-8 items-center p-8 md:p-12">
        <div>
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-5">
            {t('title.prefix')} <span className="text-primary">{t('title.highlight')}</span><br />
            {t('title.suffix')}
          </h1>
          <p className="text-gray-600 text-lg mb-8">
            {t('subtitle')}
          </p>

          <Button
            icon={<ShoppingBag size={18} />}
            variant="light"
            className="animate-slide-left"
            delay={0.2}
          >
            {t('cta')}
          </Button>

          <div className="flex flex-wrap gap-4 mt-8">
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-sm animate-fade-up delay-300">
              <Leaf size={16} className="text-secondary" /> {t('badges.fresh')}
            </div>
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-sm animate-fade-up delay-400">
              <Clock size={16} className="text-primary" /> {t('badges.delivery')}
            </div>
            <div className="flex items-center gap-2 bg-white px-4 py-2 rounded-full shadow-sm animate-fade-up delay-500">
              <Tag size={16} className="text-secondary" /> {t('badges.bestPrices')}
            </div>
          </div>
        </div>

        <HeroCarousel
          images={images}
          labels={{
            previous: t('carousel.previous'),
            next: t('carousel.next'),
            goTo: images.map((_, index) => t('carousel.goTo', { number: index + 1 })),
          }}
        />
      </div>
    </section>
  )
}