"use client";

import { motion } from "framer-motion";
import { Printer, Smartphone } from "lucide-react";

const galleryItems = [
  { id: 1, label: "Handheld POS · Front", icon: Smartphone },
  { id: 2, label: "80mm Printer · MH93", icon: Printer },
  { id: 3, label: "Sasium Branded Unit", icon: Smartphone },
];

export default function ProductGallery() {
  return (
    <section className="py-12 bg-white border-t border-slate-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.p
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-center text-sm font-medium text-[#64748b] mb-8"
        >
          Product gallery
        </motion.p>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
          {galleryItems.map((item, index) => (
            <motion.div
              key={item.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1 }}
              className="group rounded-2xl bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200 p-8 flex flex-col items-center justify-center aspect-[4/3] hover:border-[#2563eb]/30 hover:shadow-lg hover:shadow-[#2563eb]/5 transition-all"
            >
              <div className="w-20 h-28 rounded-xl bg-gradient-to-b from-slate-700 to-slate-800 border-2 border-slate-600 flex flex-col items-center justify-center shadow-inner group-hover:scale-105 transition-transform">
                <item.icon className="text-[#60a5fa]" size={32} />
                <span className="text-[8px] text-slate-400 mt-1">Sasium</span>
              </div>
              <p className="mt-4 text-sm font-medium text-[#0f172a]">{item.label}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
