"use client";

import { motion } from "framer-motion";
import {
  Printer,
  QrCode,
  Fingerprint,
  Wifi,
  MapPin,
  Smartphone,
  Battery,
} from "lucide-react";

const features = [
  {
    icon: Printer,
    title: "Fast 80mm Thermal Printing",
    description: "Instant ticket printing with MH93-type thermal printer",
  },
  {
    icon: QrCode,
    title: "CNIC QR Scanning",
    description: "Quick identity verification via QR code scan",
  },
  {
    icon: Fingerprint,
    title: "Fingerprint Verification",
    description: "Biometric authentication for secure access",
  },
  {
    icon: Wifi,
    title: "4G Connectivity",
    description: "Always connected for real-time data sync",
  },
  {
    icon: MapPin,
    title: "GPS Tracking",
    description: "Vehicle and route tracking built-in",
  },
  {
    icon: Smartphone,
    title: "Android OS for Custom Apps",
    description: "Flexible platform for your ticketing software",
  },
  {
    icon: Battery,
    title: "Long Battery Life",
    description: "All-day operation on a single charge",
  },
];

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.08 },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 },
};

export default function ProductShowcase() {
  return (
    <section id="products" className="py-16 lg:py-24 bg-[#f8fafc] relative overflow-hidden">
      <div className="bg-dots-pattern absolute inset-0 opacity-50" />
      <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">
            Product
          </span>
          <h2 className="mt-3 text-3xl sm:text-4xl lg:text-5xl font-bold text-[#0f172a]">
            Android Handheld POS with 80mm Printer
          </h2>
          <p className="mt-4 text-lg text-[#64748b] max-w-2xl mx-auto">
            MH93-type device built for bus and van ticketing. Reliable, fast, and
            fully integrated with Sasium software.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="relative order-2 lg:order-1"
          >
            <div className="absolute -inset-4 bg-gradient-to-r from-[#2563eb]/10 to-[#3b82f6]/5 rounded-3xl blur-2xl" />
            <div className="relative bg-white rounded-2xl p-8 lg:p-12 shadow-xl shadow-slate-200/50 border border-slate-100">
              <div className="aspect-square max-w-md mx-auto rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center border border-slate-200">
                <div className="text-center p-8">
                  <div className="w-48 h-64 mx-auto rounded-2xl bg-gradient-to-b from-slate-700 to-slate-800 border-4 border-slate-600 shadow-2xl flex flex-col overflow-hidden">
                    <div className="h-8 bg-slate-600 flex items-center justify-center">
                      <span className="text-white text-xs font-bold">Sasium</span>
                    </div>
                    <div className="flex-1 bg-slate-800 flex items-center justify-center">
                      <div className="w-20 h-20 rounded-full border-2 border-[#2563eb] flex items-center justify-center">
                        <Printer className="text-[#2563eb]" size={32} />
                      </div>
                    </div>
                    <div className="h-6 bg-slate-700 flex items-center justify-center">
                      <span className="text-[10px] text-slate-300">80mm · MH93</span>
                    </div>
                  </div>
                  <p className="mt-4 text-sm font-medium text-[#64748b]">
                    3D-style product mockup · Sasium branding
                  </p>
                </div>
              </div>
            </div>
          </motion.div>

          <motion.div
            variants={container}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="grid sm:grid-cols-2 gap-4 order-1 lg:order-2"
          >
            {features.map((feature) => (
              <motion.div
                key={feature.title}
                variants={item}
                className="glass rounded-xl p-5 border border-slate-200/50 hover:border-[#2563eb]/30 hover:shadow-lg hover:shadow-[#2563eb]/5 transition-all group"
              >
                <div className="w-12 h-12 rounded-lg bg-[#2563eb]/10 flex items-center justify-center text-[#2563eb] group-hover:bg-[#2563eb]/20 transition-colors">
                  <feature.icon size={24} />
                </div>
                <h3 className="mt-3 font-semibold text-[#0f172a]">
                  {feature.title}
                </h3>
                <p className="mt-1 text-sm text-[#64748b]">{feature.description}</p>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
}
