"use client";

import { motion } from "framer-motion";
import { Landmark, ShieldAlert, HeartPulse, Building2, Server, GraduationCap, Building, Recycle } from "lucide-react";

export default function Industries({ dict }: { dict: any }) {
  const defaultIndustries = [
    { icon: <Landmark className="w-8 h-8" />, title: "Government" },
    { icon: <ShieldAlert className="w-8 h-8" />, title: "Military & Defense" },
    { icon: <Building2 className="w-8 h-8" />, title: "Banking & Finance" },
    { icon: <Server className="w-8 h-8" />, title: "Data Centers" },
    { icon: <HeartPulse className="w-8 h-8" />, title: "Healthcare" },
    { icon: <Building className="w-8 h-8" />, title: "Corporate" },
    { icon: <GraduationCap className="w-8 h-8" />, title: "Education" },
    { icon: <Recycle className="w-8 h-8" />, title: "Recycling Facilities" }
  ];

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

  return (
    <section id="industries" className="py-24 bg-brand-black text-white overflow-hidden relative">
      {/* Background styling */}
      <div className="absolute inset-0 z-0 bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-brand-accent/20 via-brand-black to-brand-black opacity-80" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="text-center mb-16">
          <motion.div 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="flex items-center justify-center gap-2 mb-4"
          >
            <div className="w-8 h-1 bg-brand-accent"></div>
            <span className="text-sm font-bold tracking-widest text-gray-400 uppercase">
              {dict.industries?.title || 'Specialized Solutions'}
            </span>
            <div className="w-8 h-1 bg-brand-accent"></div>
          </motion.div>
          <motion.h2 
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl md:text-5xl font-black text-white"
          >
            INDUSTRIES <span className="text-brand-accent">SERVED</span>
          </motion.h2>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 lg:gap-8">
          {industries.map((ind, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.05, duration: 0.4 }}
              className="group bg-white/5 hover:bg-brand-accent/10 border border-white/10 hover:border-brand-accent/50 p-8 rounded-xl flex flex-col items-center justify-center text-center transition-all cursor-pointer"
            >
              <div className="text-gray-400 group-hover:text-brand-accent group-hover:scale-110 transition-all duration-300 mb-4">
                {ind.icon}
              </div>
              <h3 className="font-bold text-sm lg:text-base text-gray-200 group-hover:text-white transition-colors">
                {ind.title}
              </h3>
            </motion.div>
          ))}
        </div>

      </div>
    </section>
  );
}
