"use client";

import { motion } from "framer-motion";
import {
  Feather,
  Droplets,
  ShieldCheck,
  Wind,
  Heart,
  Sun,
  type LucideIcon,
} from "lucide-react";
import { useTranslation } from "@/lib/i18n/context";
import { SectionHeading } from "@/components/ui/section-heading";
import { FloatingShapes } from "@/components/ui/floating-bubbles";

const iconMap: Record<string, LucideIcon> = {
  Feather,
  Droplets,
  ShieldCheck,
  Wind,
  Heart,
  Sun,
};

const cardColors = [
  "from-soft-teal/10 to-baby-blue/10",
  "from-baby-blue/10 to-primary/5",
  "from-warm-coral/5 to-soft-cream",
  "from-primary/5 to-soft-teal/10",
  "from-soft-cream to-warm-coral/5",
  "from-baby-blue/10 to-soft-teal/10",
];

const iconColors = [
  "bg-soft-teal/20 text-primary",
  "bg-baby-blue/30 text-primary",
  "bg-warm-coral/10 text-warm-coral",
  "bg-primary/10 text-primary",
  "bg-warm-coral/10 text-warm-coral",
  "bg-soft-teal/20 text-primary",
];

export function WhyUnipam() {
  const { t, dir } = useTranslation();

  return (
    <section id="why-unipam" className="section-padding bg-section-teal relative overflow-hidden" dir={dir}>
      <FloatingShapes />

      <div className="relative z-10 max-w-7xl mx-auto">
        <SectionHeading
          tag={t.whyUnipam.sectionTag}
          title={t.whyUnipam.title}
          subtitle={t.whyUnipam.subtitle}
        />

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {t.whyUnipam.cards.map((card, index) => {
            const Icon = iconMap[card.icon] || Heart;

            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: "-30px" }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                whileHover={{ y: -8 }}
                className="group"
              >
                <div
                  className={`h-full p-8 rounded-3xl bg-gradient-to-br ${cardColors[index]} border border-white/60 shadow-sm hover:shadow-xl transition-all duration-300`}
                >
                  <motion.div
                    whileHover={{ scale: 1.1, rotate: 5 }}
                    transition={{ type: "spring", stiffness: 300 }}
                    className={`w-14 h-14 rounded-2xl ${iconColors[index]} flex items-center justify-center mb-5`}
                  >
                    <Icon size={26} />
                  </motion.div>

                  <h3 className="text-xl font-extrabold text-dark-text mb-3">
                    {card.title}
                  </h3>
                  <p className="text-sm text-dark-text/60 leading-relaxed">
                    {card.description}
                  </p>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
}