import { motion } from "motion/react";
import { ShieldCheck, Dumbbell, Map, CreditCard, Users, HeartPulse } from "lucide-react";

const preferences = [
  {
    icon: <Dumbbell className="w-8 h-8 text-blue-500" />,
    title: "Льготные абонементы",
    description: "Эксклюзивные скидки на посещение фитнес-клубов, бассейнов и спортивных комплексов в вашем регионе."
  },
  {
    icon: <Map className="w-8 h-8 text-blue-500" />,
    title: "Туризм и отдых",
    description: "Специальные условия на туристические путевки, путевки выходного дня и санаторно-курортное лечение."
  },
  {
    icon: <CreditCard className="w-8 h-8 text-blue-500" />,
    title: "Программы лояльности",
    description: "Доступ к закрытым предложениям от партнеров: скидки на экипировку, спортивное питание и услуги."
  },
  {
    icon: <Users className="w-8 h-8 text-blue-500" />,
    title: "Корпоративные турниры",
    description: "Организация и участие в спортивных мероприятиях регионального и федерального масштаба «под ключ»."
  },
  {
    icon: <ShieldCheck className="w-8 h-8 text-blue-500" />,
    title: "Страхование",
    description: "Льготные полисы спортивного страхования для участников соревнований и членов их семей."
  },
  {
    icon: <HeartPulse className="w-8 h-8 text-blue-500" />,
    title: "Программы здоровья",
    description: "Комплексные инициативы по поддержке здорового образа жизни на предприятиях."
  }
];

export function Preferences() {
  return (
    <section id="preferences" className="py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl mb-4"
          >
            Всё для членов профсоюза
          </motion.h2>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-xl text-gray-500 font-light"
          >
            Стартовый пакет преференций, доступный вашей организации сразу после присоединения к платформе.
          </motion.p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {preferences.map((pref, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="bg-gray-50 rounded-3xl p-8 hover:bg-gray-100 transition-colors border border-gray-100/50"
            >
              <div className="bg-white w-16 h-16 rounded-2xl flex items-center justify-center mb-6 shadow-sm">
                {pref.icon}
              </div>
              <h3 className="text-xl font-semibold text-gray-900 mb-3">{pref.title}</h3>
              <p className="text-gray-600 leading-relaxed">{pref.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
