"use client";

import { motion } from "framer-motion";
import {
  Shield,
  UserCheck,
  BarChart3,
  Zap,
  Building2,
} from "lucide-react";

const benefits = [
  {
    icon: Shield,
    title: "Prevent revenue leakage",
    description: "Every ticket and fare is recorded and synced in real time.",
  },
  {
    icon: UserCheck,
    title: "Secure passenger verification",
    description: "CNIC and biometric verification for safe, accountable travel.",
  },
  {
    icon: BarChart3,
    title: "Smart transport analytics",
    description: "Insights on routes, demand, and revenue for better planning.",
  },
  {
    icon: Zap,
    title: "Fast ticketing process",
    description: "Scan, select, print—in seconds. Less queue, more journeys.",
  },
  {
    icon: Building2,
    title: "Digital government infrastructure",
    description: "Align with digital and smart city initiatives.",
  },
];

export default function Benefits() {
  return (
    <section className="py-16 lg:py-24 bg-gradient-to-br from-[#0f172a] to-[#1e293b] relative overflow-hidden">
      <div className="absolute inset-0 bg-grid-pattern opacity-20" />
      <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-[#2563eb]/10 rounded-full blur-3xl" />
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center mb-10"
        >
          <span className="text-[#60a5fa] font-semibold text-sm uppercase tracking-wider">
            Why Sasium
          </span>
          <h2 className="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-white">
            Benefits
          </h2>
          <p className="mt-4 text-lg text-slate-300 max-w-2xl mx-auto">
            More revenue, better security, and a modern experience for operators
            and passengers.
          </p>
        </motion.div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {benefits.map((benefit, index) => (
            <motion.div
              key={benefit.title}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.08 }}
              className="glass-dark rounded-2xl p-6 border border-white/10 hover:border-[#2563eb]/40 transition-all group"
            >
              <div className="w-12 h-12 rounded-xl bg-[#2563eb]/20 flex items-center justify-center text-[#60a5fa] group-hover:bg-[#2563eb]/30 transition-colors">
                <benefit.icon size={24} />
              </div>
              <h3 className="mt-4 font-semibold text-white text-lg">
                {benefit.title}
              </h3>
              <p className="mt-2 text-slate-400 text-sm leading-relaxed">
                {benefit.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
