"use client";

import { motion } from "framer-motion";
import {
  Building2,
  IdCard,
  FileBarChart,
  Camera,
} from "lucide-react";

const integrations = [
  {
    icon: Building2,
    title: "Transport Department",
    description: "Direct integration with transport authorities for compliance and reporting.",
  },
  {
    icon: IdCard,
    title: "Identity Verification",
    description: "CNIC and biometric verification linked to government databases.",
  },
  {
    icon: FileBarChart,
    title: "Tax Reporting",
    description: "Automated tax and revenue reporting for transparent accounting.",
  },
  {
    icon: Camera,
    title: "Safe City Monitoring",
    description: "Compatible with safe city and surveillance systems where required.",
  },
];

export default function GovernmentIntegration() {
  return (
    <section id="government" className="py-16 lg:py-24 bg-white relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-10"
        >
          <span className="text-[#2563eb] font-semibold text-sm uppercase tracking-wider">
            Integration
          </span>
          <h2 className="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0f172a]">
            Government Integration
          </h2>
          <p className="mt-4 text-lg text-[#64748b] max-w-2xl mx-auto">
            Built to work with existing government systems and requirements.
          </p>
        </motion.div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {integrations.map((item, index) => (
            <motion.div
              key={item.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="group rounded-2xl p-6 bg-[#f8fafc] border border-slate-200 hover:border-[#2563eb]/30 hover:shadow-xl hover:shadow-[#2563eb]/5 transition-all"
            >
              <div className="w-14 h-14 rounded-xl bg-[#2563eb]/10 flex items-center justify-center text-[#2563eb] group-hover:bg-[#2563eb]/20 transition-colors">
                <item.icon size={28} />
              </div>
              <h3 className="mt-4 font-semibold text-[#0f172a] text-lg">
                {item.title}
              </h3>
              <p className="mt-2 text-[#64748b] text-sm leading-relaxed">
                {item.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
