"use client";

import { motion } from "framer-motion";
import { content } from "@/lib/content";
import { fadeUp, staggerContainer, staggerItem } from "@/lib/animations";
import {
  Wallet,
  Users,
  Calendar,
  CheckCircle,
  ShoppingCart,
  Building2,
  ArrowLeft,
} from "lucide-react";

const modulesContent = content.ar.modules;

const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
  Wallet,
  Users,
  Calendar,
  CheckCircle,
  ShoppingCart,
  Building: Building2,
};

function ModuleCard({
  icon,
  title,
  description,
}: {
  icon: string;
  title: string;
  description: string;
}) {
  const Icon = iconMap[icon] || Wallet;

  return (
    <motion.div
      variants={staggerItem}
      className="group relative rounded-2xl border border-slate-100 bg-white p-6 transition-all duration-300 hover:-translate-y-1 hover:border-sky-200 hover:shadow-lg"
    >
      <div className="mb-4 inline-flex rounded-xl bg-sky-50 p-3">
        <Icon className="h-6 w-6 text-sky-600" />
      </div>
      <h3 className="mb-2 text-lg font-bold text-slate-900">{title}</h3>
      <p className="text-sm leading-relaxed text-slate-500">{description}</p>
      <div className="mt-4 flex items-center gap-1 text-sm font-medium text-sky-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
        <span>اعرف أكثر</span>
        <ArrowLeft className="h-3.5 w-3.5" />
      </div>
    </motion.div>
  );
}

export default function ModuleShowcase() {
  return (
    <section className="bg-slate-50/50 py-20 lg:py-28">
      <div className="container mx-auto px-4">
        {/* Section header */}
        <motion.div
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="mb-14 text-center"
        >
          <h2 className="text-3xl font-bold text-slate-900 md:text-4xl">
            {modulesContent.sectionTitle}
          </h2>
          <p className="mx-auto mt-4 max-w-lg text-slate-500">
            {modulesContent.sectionSubtitle}
          </p>
        </motion.div>

        {/* Module cards grid */}
        <motion.div
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-50px" }}
          className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
        >
          {modulesContent.items.map((item, index) => (
            <ModuleCard
              key={index}
              icon={item.icon}
              title={item.title}
              description={item.description}
            />
          ))}
        </motion.div>

        {/* View all link */}
        <motion.div
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="mt-12 text-center"
        >
          <a
            href="#features"
            className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 transition-all hover:border-sky-200 hover:text-sky-600 hover:shadow-sm"
          >
            {modulesContent.viewAll}
            <ArrowLeft className="h-4 w-4" />
          </a>
        </motion.div>
      </div>
    </section>
  );
}
