'use client'

import * as motion from 'framer-motion/m'
import { useTranslations } from 'next-intl'

const features = [
  { key: 'freeDelivery', icon: '🚚' },
  { key: 'fastDelivery', icon: '⏱️' },
  { key: 'freshQuality', icon: '✅' },
  { key: 'weeklyOffers', icon: '🎁' },
] as const

export default function FeaturesSection() {
  const t = useTranslations('FeaturesSection')

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 my-16">
      {features.map((feature, index) => (
        <motion.div
          key={feature.key}
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: index * 0.1 }}
          whileHover={{ y: -8 }}
          className="bg-white p-6 rounded-2xl text-center shadow-md hover:shadow-xl transition-all duration-300"
        >
          <div className="text-5xl mb-4">{feature.icon}</div>
          <h3 className="font-bold text-lg mb-2">{t(`${feature.key}.title`)}</h3>
          <p className="text-gray-500 text-sm">{t(`${feature.key}.desc`)}</p>
        </motion.div>
      ))}
    </div>
  )
}