import React from 'react';
import { CATEGORIES } from '../constants';

interface CategoryGridProps {
  onSelectCategory: (id: string) => void;
  title?: string;
}

const CategoryGrid: React.FC<CategoryGridProps> = ({ onSelectCategory }) => {
  const threeCategories = CATEGORIES.filter(c => c.id !== 'CENTRE-ACTIVITY');
  const centreActivityCategory = CATEGORIES.find(c => c.id === 'CENTRE-ACTIVITY');

  return (
    <section className="py-12 px-6 md:px-12 lg:px-24 bg-white animate-in fade-in slide-in-from-bottom-4 duration-500">
      <h2 className="text-3xl md:text-4xl font-black text-center text-[#1A202C] mb-12 tracking-tight uppercase">
        Discover by <span className="text-[#f97316]">Category</span>
      </h2>
      
      {/* Three Standard Categories */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto mb-8">
        {threeCategories.map((cat) => (
          <div 
            key={cat.id}
            onClick={() => onSelectCategory(cat.id)}
            className="group relative h-[380px] md:h-[500px] rounded-[3rem] overflow-hidden cursor-pointer shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-700 hover:scale-[1.02] hover:shadow-[0_40px_80px_rgba(0,0,0,0.25)]"
          >
            {/* Background Image with Zoom Effect */}
            <img 
              src={cat.image} 
              alt={cat.name} 
              className="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-110"
            />
            
            {/* Premium Multi-layer Overlay */}
            <div className="absolute inset-0 bg-black/20 group-hover:bg-black/10 transition-colors duration-500"></div>
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent opacity-90 transition-opacity duration-500"></div>
            
            {/* Border Glow on Hover */}
            <div className="absolute inset-0 border-[3px] border-white/0 group-hover:border-white/20 rounded-[3rem] transition-all duration-500 scale-95 group-hover:scale-100"></div>
            
            {/* Rich Typography and Content */}
            <div className="absolute bottom-10 left-10 right-10 flex items-end justify-between">
              <div>
                <span className="inline-block px-4 py-1.5 bg-white/10 backdrop-blur-md rounded-full text-white/70 text-[10px] uppercase font-black tracking-[0.2em] mb-3 opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-4 group-hover:translate-y-0">
                  Explore Events
                </span>
                <h3 className="text-3xl md:text-4xl font-black text-white tracking-tighter leading-none mb-1 shadow-black/20">
                  {cat.name}
                </h3>
                <div className="h-1 w-12 bg-[#f97316] rounded-full transition-all duration-500 group-hover:w-24"></div>
              </div>
              
              <div className="w-14 h-14 bg-white/10 backdrop-blur-md rounded-2xl flex items-center justify-center text-white text-xl transform translate-x-12 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500 delay-100">
                <i className="fas fa-arrow-right"></i>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Centre Activity Wide Card */}
      {centreActivityCategory && (
        <div className="max-w-7xl mx-auto">
          <div 
            onClick={() => onSelectCategory(centreActivityCategory.id)}
            className="group relative h-[320px] md:h-[420px] rounded-[3.5rem] overflow-hidden cursor-pointer shadow-[0_20px_50px_rgba(0,0,0,0.15)] transition-all duration-700 hover:scale-[1.01] hover:shadow-[0_40px_80px_rgba(0,0,0,0.3)] border-[3px] border-transparent hover:border-white/20"
          >
            {/* Background Image with Zoom Effect */}
            <img 
              src={centreActivityCategory.image} 
              alt={centreActivityCategory.name} 
              className="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105"
            />
            
            {/* Overlays */}
            <div className="absolute inset-0 bg-black/45 group-hover:bg-black/35 transition-colors duration-500"></div>
            <div className="absolute inset-0 bg-gradient-to-r from-black/95 via-black/60 to-transparent"></div>
            
            {/* Rich Typography and Content */}
            <div className="absolute inset-0 flex items-center justify-between px-10 md:px-20">
              <div className="space-y-4 text-left">
                <span className="inline-block px-5 py-2 bg-white/10 backdrop-blur-md rounded-full text-white/95 text-[10px] uppercase font-black tracking-[0.25em] opacity-0 group-hover:opacity-100 transition-all duration-500 translate-y-2 group-hover:translate-y-0">
                  Special Hub Activities
                </span>
                <h3 className="text-4xl md:text-6xl font-black text-white tracking-tighter leading-none shadow-black/20 uppercase">
                  {centreActivityCategory.name}
                </h3>
                <p className="text-white/80 font-medium tracking-wide text-xs md:text-sm max-w-2xl leading-relaxed">
                  Engage in multidisciplinary innovation, advanced research hubs, incubation cells, and collaborative special projects driving academic excellence.
                </p>
                <div className="h-1.5 w-20 bg-[#f97316] rounded-full transition-all duration-500 group-hover:w-40"></div>
              </div>
              
              <div className="w-16 h-16 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-3xl flex items-center justify-center text-white text-2xl md:text-3xl transform translate-x-12 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-500 delay-100 mr-4 shrink-0">
                <i className="fas fa-arrow-right"></i>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

export default CategoryGrid;