"use client";

import { motion } from "framer-motion";
import { ScanLine, ShieldCheck, MapPin, Ticket, Cloud } from "lucide-react";

const steps = [
  {
    icon: ScanLine,
    title: "Passenger scans CNIC",
    label: "QR or barcode scan",
  },
  {
    icon: ShieldCheck,
    title: "Device verifies identity",
    label: "Instant verification",
  },
  {
    icon: MapPin,
    title: "Select destination",
    label: "Route selection",
  },
  {
    icon: Ticket,
    title: "Ticket printed",
    label: "80mm thermal print",
  },
  {
    icon: Cloud,
    title: "Data sent to transport server",
    label: "Real-time sync",
  },
];

export default function HowItWorks() {
  return (
    <section id="how-it-works" 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">
            Process
          </span>
          <h2 className="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0f172a]">
            How It Works
          </h2>
          <p className="mt-4 text-lg text-[#64748b] max-w-2xl mx-auto">
            From scan to ticket in seconds. A simple flow for conductors and
            passengers.
          </p>
        </motion.div>

        <div className="relative">
          <div className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-[#2563eb]/30 to-transparent -translate-y-1/2" />
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-4">
            {steps.map((step, index) => (
              <motion.div
                key={step.title}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                className="relative flex flex-col items-center text-center group"
              >
                <div className="relative z-10 w-16 h-16 rounded-2xl bg-white border-2 border-[#2563eb]/20 flex items-center justify-center text-[#2563eb] shadow-lg shadow-slate-200/50 group-hover:border-[#2563eb] group-hover:shadow-[#2563eb]/20 transition-all">
                  <step.icon size={28} />
                </div>
                <h3 className="mt-4 font-semibold text-[#0f172a]">
                  {step.title}
                </h3>
                <p className="mt-1 text-sm text-[#64748b]">{step.label}</p>
                {index < steps.length - 1 && (
                  <div className="hidden lg:block absolute top-8 left-[60%] w-[80%] h-0.5 bg-[#e2e8f0]" />
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
