'use client'

import { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import categoryImg1 from '../../public/assets/categories/cable-categories.webp'
import categoryImg2 from '../../public/assets/categories/superennameld.webp'
import categoryImg3 from '../../public/assets/categories/busbar.webp'
import categoryImg4 from '../../public/assets/categories/ledLight.webp'
import categoryImg5 from '../../public/assets/categories/accessories.webp'
import categoryImg6 from '../../public/assets/categories/fan.webp'
import categoryImg7 from '../../public/assets/categories/meter.webp'
import categoryImg8 from '../../public/assets/categories/transformer.webp'
import categoryImg9 from '../../public/assets/categories/switchgear.webp'
import categoryImg10 from '../../public/assets/categories/substation.webp'
import Link from 'next/link';
import { ArrowRight, ChevronDown, ChevronUp } from 'lucide-react';

const GRADIENT_COLORS = [
  'from-violet-500 via-purple-500 to-pink-500',
  'from-cyan-500 via-blue-500 to-indigo-500',
  'from-emerald-500 via-teal-500 to-cyan-500',
  'from-orange-500 via-amber-500 to-yellow-500',
  'from-rose-500 via-red-500 to-pink-500',
  'from-fuchsia-500 via-pink-500 to-rose-500',
  'from-indigo-500 via-blue-500 to-cyan-500',
  'from-green-500 via-emerald-500 to-teal-500',
  'from-yellow-500 via-orange-500 to-red-500',
  'from-purple-500 via-violet-500 to-indigo-500',
];

const CATEGORIES_DATA = [
  { id: 1, name: "Cables", subTitle: "Reliable power and communication cables", image: categoryImg1 },
  { id: 2, name: "Super Enamelled", subTitle: "High-quality enamelled copper winding wires", image: categoryImg2 },
  { id: 3, name: "Busbar", subTitle: "Efficient electrical power distribution solutions", image: categoryImg3 },
  { id: 4, name: "LED Light", subTitle: "Energy-efficient lighting for every space", image: categoryImg4 },
  { id: 5, name: "Accessories", subTitle: "Essential electrical fittings and accessories", image: categoryImg5 },
  { id: 6, name: "Fan", subTitle: "High-performance ceiling and exhaust fans", image: categoryImg6 },
  { id: 7, name: "Meter", subTitle: "Accurate electrical measurement and monitoring", image: categoryImg7 },
  { id: 8, name: "Transformer", subTitle: "Reliable voltage conversion and power control", image: categoryImg8 },
  { id: 9, name: "Switchgear", subTitle: "Safe switching and electrical engineering systems", image: categoryImg9 },
  { id: 10, name: "Sub Stations", subTitle: "Complete substation equipment and solutions", image: categoryImg10 },
];

export default function Categories() {
  const [showAll, setShowAll] = useState(false);
  const displayedCategories = showAll ? CATEGORIES_DATA : CATEGORIES_DATA.slice(0, 8);

  return (
    <section className="px-4 py-16 bg-gradient-to-br from-gray-50 via-white to-gray-100">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          viewport={{ once: true }}
          className="text-center mb-14"
        >
         
          <h2 className="text-4xl lg:text-5xl font-bold text-gray-800 mb-4 tracking-tight">
            Explore <span className="bg-orange-500 bg-clip-text text-transparent">Categories</span>
          </h2>
        </motion.div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
          <AnimatePresence>
            {displayedCategories.map((category, index) => (
              <motion.div
                key={category.id}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.9 }}
                transition={{ duration: 0.3, delay: index * 0.05 }}
              >
                <Link href={'/price'}>
                  <div className="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden">
                    <div className={`absolute inset-0 bg-gradient-to-tr ${GRADIENT_COLORS[index % GRADIENT_COLORS.length]} opacity-0 group-hover:opacity-90 transition-opacity duration-500`} />
                    
                    <div className="relative p-6 z-10">
                      <div className="w-36 h-36 mx-auto mb-4 bg-gray-50 rounded-2xl p-3 group-hover:bg-white/20 transition-colors duration-500">
                        <img src={category.image.src} alt={category.name} className="w-full h-full object-contain" />
                      </div>
                      
                      <h3 className="text-xl font-bold text-gray-800 text-center group-hover:text-white transition-colors duration-500">
                        {category.name}
                      </h3>
                      
                      <p className="text-sm text-gray-500 text-center mt-2 group-hover:text-white/90 transition-colors duration-500">
                        {category.subTitle}
                      </p>
                      
                      <div className="flex items-center justify-center mt-4 opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-500">
                        <span className="text-white text-sm font-medium flex items-center gap-1">
                          Explore <ArrowRight className="w-4 h-4" />
                        </span>
                      </div>
                    </div>
                  </div>
                </Link>
              </motion.div>
            ))}
          </AnimatePresence>
        </div>

        <div className="text-center">
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={() => setShowAll(!showAll)}
            className="group inline-flex items-center gap-2 bg-btnPrimary text-white lg:px-10 px-4 lg:py-4 py-2 rounded-full font-semibold hover:shadow-xl transition-all duration-300 cursor-pointer"
          >
            {showAll ? 'Show Less' : 'View All Categories'}
            {showAll ? <ChevronUp className="w-5 h-5" /> : <ChevronDown className="w-5 h-5" />}
          </motion.button>
        </div>
      </div>
    </section>
  );
}