"use client";

import { motion } from "framer-motion";
import { QrCode, User, MapPin, Ticket, Printer, BarChart3 } from "lucide-react";

const screens = [
  {
    id: 1,
    title: "Scan CNIC QR Code",
    titleUrdu: "شناختی کارڈ اسکین کریں",
    icon: QrCode,
    color: "from-[#2563eb] to-[#3b82f6]",
  },
  {
    id: 2,
    title: "Passenger Info Display",
    titleUrdu: "مسافر کی معلومات",
    icon: User,
    color: "from-emerald-500 to-teal-500",
  },
  {
    id: 3,
    title: "Select Route / Destination",
    titleUrdu: "منزل منتخب کریں",
    icon: MapPin,
    color: "from-violet-500 to-purple-600",
  },
  {
    id: 4,
    title: "Ticket Confirmation",
    titleUrdu: "ٹکٹ کی تصدیق",
    icon: Ticket,
    color: "from-amber-500 to-orange-500",
  },
  {
    id: 5,
    title: "Ticket Printed",
    titleUrdu: "ٹکٹ پرنٹ کریں",
    icon: Printer,
    color: "from-rose-500 to-pink-500",
  },
  {
    id: 6,
    title: "Daily Revenue Dashboard",
    titleUrdu: "روزانہ آمدنی ڈیش بورڈ",
    icon: BarChart3,
    color: "from-cyan-500 to-blue-500",
  },
];

export default function MobileAppScreens() {
  return (
    <section id="solutions" className="py-16 lg:py-24 bg-[#f8fafc] relative overflow-hidden">
      <div className="bg-grid-pattern absolute inset-0 opacity-30" />
      <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-[#2563eb] font-semibold text-sm uppercase tracking-wider">
            App Experience
          </span>
          <h2 className="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0f172a]">
            Mobile App UI Screens
          </h2>
          <p className="mt-4 text-lg text-[#64748b] max-w-2xl mx-auto">
            Simple, modern ticketing flow. Labels in English and Urdu.
          </p>
        </motion.div>

        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 sm:gap-6">
          {screens.map((screen, index) => (
            <motion.div
              key={screen.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.05 }}
              className="flex flex-col items-center"
            >
              <div className="w-full max-w-[160px] mx-auto">
                <div className="relative rounded-[2rem] bg-slate-800 p-2 shadow-xl border-4 border-slate-700">
                  <div className="rounded-[1.5rem] overflow-hidden bg-white aspect-[9/19] flex flex-col">
                    <div className={`h-12 bg-gradient-to-r ${screen.color} flex items-center justify-center`}>
                      <screen.icon className="text-white" size={24} />
                    </div>
                    <div className="flex-1 p-3 flex flex-col items-center justify-center text-center">
                      <p className="text-xs font-semibold text-[#0f172a] leading-tight">
                        {screen.title}
                      </p>
                      <p className="mt-2 text-[10px] text-[#64748b] leading-tight font-medium" dir="rtl">
                        {screen.titleUrdu}
                      </p>
                    </div>
                    <div className="h-8 bg-slate-100 flex items-center justify-center">
                      <span className="text-[9px] text-slate-500">Sasium</span>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
