"use client";

import { motion } from "framer-motion";
import { ArrowRight, HardDrive, FileText, Package, Database, ShieldAlert, Settings } from "lucide-react";

export default function ProductCategories({ dict }: { dict: any }) {
  const defaultCategories = [
    {
      id: "office",
      icon: <FileText className="w-10 h-10 mb-4 text-brand-accent" />,
      title: "Office Shredders",
      desc: "Secure document destruction for small to medium corporate environments.",
      bgImage: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "industrial",
      icon: <Settings className="w-10 h-10 mb-4 text-brand-accent" />,
      title: "Industrial Shredders",
      desc: "Heavy-duty machines for massive volume processing and continuous operation.",
      bgImage: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "hdd",
      icon: <HardDrive className="w-10 h-10 mb-4 text-brand-accent" />,
      title: "HDD Shredders",
      desc: "Physical destruction of Hard Disk Drives to ensure absolute data erasure.",
      bgImage: "https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "ssd",
      icon: <Database className="w-10 h-10 mb-4 text-brand-accent" />,
      title: "SSD Disintegrators",
      desc: "Micro-shredding for Solid State Drives, USBs, and microchips.",
      bgImage: "https://images.unsplash.com/photo-1597848212624-a19eb35e2651?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "cardboard",
      icon: <Package className="w-10 h-10 mb-4 text-brand-accent" />,
      title: "Cardboard Shredders",
      desc: "Convert waste cardboard boxes into excellent ecological packaging material.",
      bgImage: "https://images.unsplash.com/photo-1605600659873-d808a1d14b0b?q=80&w=800&auto=format&fit=crop"
    },
    {
      id: "high-security",
      icon: <ShieldAlert className="w-10 h-10 mb-4 text-brand-accent" />,
      title: "High Security",
      desc: "NSA approved cross-cut shredders for classified and top-secret documents.",
      bgImage: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=800&auto=format&fit=crop"
    }
  ];

  const categories = dict.categories?.items ? defaultCategories.map((c, i) => ({...c, title: dict.categories.items[i]?.title || c.title, desc: dict.categories.items[i]?.desc || c.desc})) : defaultCategories;

  return (
    <section id="products" className="py-24 bg-background">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
          <motion.div 
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            className="max-w-2xl"
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-1 bg-brand-accent"></div>
              <span className="text-sm font-bold tracking-widest text-brand-accent uppercase">
                {dict.categories?.title || 'Product Range'}
              </span>
            </div>
            <h2 className="text-4xl md:text-5xl font-black text-foreground">
              INDUSTRIAL SHREDDING <br/><span className="text-gray-500">SOLUTIONS</span>
            </h2>
          </motion.div>
          <motion.a 
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            href="#all-products"
            className="group flex items-center gap-2 text-sm font-bold text-brand-accent hover:text-brand-accent/80 transition-colors"
          >
            EXPLORE ALL SERIES
            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </motion.a>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {categories.map((cat, index) => (
            <motion.div
              key={cat.id}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="group relative h-80 rounded-xl overflow-hidden cursor-pointer"
            >
              {/* Background Image */}
              <div 
                className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
                style={{ backgroundImage: `url(${cat.bgImage})` }}
              ></div>
              
              {/* Gradient Overlay */}
              <div className="absolute inset-0 bg-gradient-to-t from-brand-black via-brand-black/80 to-brand-black/20 group-hover:from-brand-accent/90 group-hover:via-brand-black/90 transition-colors duration-500"></div>

              {/* Content */}
              <div className="absolute inset-0 p-8 flex flex-col justify-end">
                <div className="transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300">
                  {cat.icon}
                  <h3 className="text-2xl font-black text-white mb-2">{cat.title}</h3>
                  <p className="text-gray-300 text-sm mb-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">
                    {cat.desc}
                  </p>
                  <div className="flex items-center gap-2 text-white font-bold text-sm uppercase tracking-wider opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-200">
                    Learn More <ArrowRight className="w-4 h-4" />
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}
