import { motion } from 'framer-motion';
import {
    BarChart3,
    BookOpen,
    CreditCard,
    Globe,
    PiggyBank,
    Shield,
    TrendingUp,
    UserCheck,
    Users,
} from 'lucide-react';
import FadeUp, { ease } from './FadeUp';

const modules = [
    {
        icon: CreditCard,
        label: 'Loan Management',
        desc: 'Full lifecycle, top-ups, restructuring, write-offs',
    },
    {
        icon: PiggyBank,
        label: 'Savings',
        desc: 'Voluntary, compulsory, fixed deposits, group savings',
    },
    {
        icon: Users,
        label: 'Client & KYC',
        desc: 'AML screening, credit scoring, NIDA verification',
    },
    {
        icon: BookOpen,
        label: 'Accounting',
        desc: 'Double-entry GL seeded by country, IFRS-compliant',
    },
    {
        icon: UserCheck,
        label: 'HR & Payroll',
        desc: 'PAYE, NSSF, NHIF, SDL across TZ, KE, UG, RW',
    },
    {
        icon: TrendingUp,
        label: 'Collections',
        desc: 'PAR 1/30/60/90, field visits, demand letters',
    },
    {
        icon: BarChart3,
        label: 'Analytics',
        desc: 'Role dashboards, 40+ reports, custom builder',
    },
    {
        icon: Shield,
        label: 'Compliance',
        desc: 'Regulatory filings, AML rules, audit logs',
    },
    {
        icon: Globe,
        label: 'Client Portal',
        desc: 'Self-service repayments, account statements, e-KYC',
    },
];

export default function ModulesSection() {
    return (
        <section className="pf-section">
            <div className="pf-container">
                <FadeUp className="mb-14 text-center">
                    <h2 className="pf-display text-foreground text-4xl font-bold md:text-5xl">
                        One platform, every workflow
                    </h2>
                    <p className="text-muted-foreground mx-auto mt-4 max-w-xl">
                        Activate only what you need. Each module can be toggled
                        independently by your plan.
                    </p>
                </FadeUp>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {modules.map((mod, i) => (
                        <FadeUp key={mod.label} delay={i * 0.05}>
                            <motion.div
                                whileHover={{ y: -4 }}
                                transition={{ duration: 0.2, ease }}
                                className="pf-card group hover:shadow-foreground/5 flex gap-4 p-5 transition-shadow hover:shadow-md"
                            >
                                <div className="pf-icon-box mt-0.5 shrink-0">
                                    <mod.icon className="h-5 w-5" />
                                </div>
                                <div>
                                    <p className="text-foreground group-hover:text-primary mb-1 font-semibold transition-colors">
                                        {mod.label}
                                    </p>
                                    <p className="text-muted-foreground text-sm leading-relaxed">
                                        {mod.desc}
                                    </p>
                                </div>
                            </motion.div>
                        </FadeUp>
                    ))}
                </div>
            </div>
        </section>
    );
}