import { motion } from 'framer-motion';
import {
  MessageCircle,
  ShieldCheck,
  Sparkles,
  Target,
  type LucideIcon,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';

import { SectionHeader } from './Services';

type Key = 'senior' | 'delivery' | 'communication' | 'quality';

const PILLARS: { key: Key; Icon: LucideIcon }[] = [
  { key: 'senior', Icon: Sparkles },
  { key: 'delivery', Icon: Target },
  { key: 'communication', Icon: MessageCircle },
  { key: 'quality', Icon: ShieldCheck },
];

export function WhyUs() {
  const { t } = useTranslation();

  return (
    <section id="whyus" className="section">
      <div className="container-rl">
        <SectionHeader
          eyebrow={t('whyus.eyebrow')}
          title={t('whyus.title')}
        />

        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {PILLARS.map(({ key, Icon }, index) => (
            <motion.div
              key={key}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-80px' }}
              transition={{
                duration: 0.5,
                delay: index * 0.07,
                ease: [0.4, 0, 0.2, 1],
              }}
              className="group relative rounded-xl border border-border bg-bg p-6 transition-all duration-300 hover:-translate-y-1 hover:border-primary/50 hover:shadow-md"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-fg transition-transform group-hover:scale-110">
                <Icon className="h-5 w-5" aria-hidden="true" />
              </div>
              <h3 className="heading mt-5 text-lg">
                {t(`whyus.items.${key}.title`)}
              </h3>
              <p className="mt-2 text-sm text-fg-muted leading-relaxed">
                {t(`whyus.items.${key}.description`)}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}