'use client';

import Link from 'next/link';
import { ShieldCheck, Leaf, Award } from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

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

  const badges = [
    {
      icon: ShieldCheck,
      title: t('trust.halal'),
      description: t('trust.halalDesc'),
      href: '/about#halal',
    },
    {
      icon: Leaf,
      title: t('trust.fresh'),
      description: t('trust.freshDesc'),
      href: '/about#delivery',
    },
    {
      icon: Award,
      title: t('trust.premium'),
      description: t('trust.premiumDesc'),
      href: '/about',
    },
  ];

  return (
    <section className="bg-cream-100 py-16">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid gap-8 md:grid-cols-3">
          {badges.map((badge) => (
            <Link
              key={badge.title}
              href={badge.href}
              className="group rounded-2xl border border-cream-300/80 bg-white p-8 text-center shadow-premium transition-all duration-300 hover:border-brand-200 hover:shadow-premium-lg"
            >
              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-brand-50 transition-colors group-hover:bg-gold-50">
                <badge.icon className="h-7 w-7 text-brand-700 transition-colors group-hover:text-gold-600" />
              </div>
              <h3 className="mb-2 font-display text-xl font-bold text-brand-900">
                {badge.title}
              </h3>
              <p className="text-sm leading-relaxed text-gray-500">{badge.description}</p>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}