'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';

const items = [
  { 
    title: 'Emergency Repair', 
    desc: 'Outages, hot outlets, breakers tripping.', 
    href: '/corpus-christi/emergency-electrician',
    icon: '🚨',
    image: '/images/emergency_repair.png',
    bgColor: 'bg-gradient-to-br from-red-500 to-red-600',
    textColor: 'text-red-600',
    hoverColor: 'hover:from-red-600 hover:to-red-700'
  },
  { 
    title: 'Panel Upgrades', 
    desc: '100A→200A, AFCI/GFCI, permits & inspections.', 
    href: '/corpus-christi/panel-upgrades',
    icon: '⚡',
    image: '/images/panel_upgrade.png',
    bgColor: 'bg-gradient-to-br from-blue-500 to-blue-600',
    textColor: 'text-blue-600',
    hoverColor: 'hover:from-blue-600 hover:to-blue-700'
  },
  { 
    title: 'Residential Services', 
    desc: 'Complete home electrical solutions.', 
    href: '/corpus-christi/residential',
    icon: '🏠',
    image: '/images/residential.png',
    bgColor: 'bg-gradient-to-br from-yellow-500 to-orange-500',
    textColor: 'text-orange-600',
    hoverColor: 'hover:from-yellow-600 hover:to-orange-600'
  },
  { 
    title: 'EV-Ready Circuits', 
    desc: 'Dedicated 240V outlet, load calc.', 
    href: '/corpus-christi/ev-charger-install',
    icon: '🔋',
    image: '/images/ev_ready.png',
    bgColor: 'bg-gradient-to-br from-green-500 to-green-600',
    textColor: 'text-green-600',
    hoverColor: 'hover:from-green-600 hover:to-green-700'
  },
  { 
    title: 'Commercial Build-Outs', 
    desc: 'Data, emergency lighting, distribution.', 
    href: '/commercial',
    icon: '🏢',
    image: '/images/comnercial_buildout.png',
    bgColor: 'bg-gradient-to-br from-purple-500 to-purple-600',
    textColor: 'text-purple-600',
    hoverColor: 'hover:from-purple-600 hover:to-purple-700'
  },
  { 
    title: 'Commercial Services', 
    desc: 'Professional commercial electrical solutions.', 
    href: '/commercial',
    icon: '🏢',
    image: '/images/commercial.png',
    bgColor: 'bg-gradient-to-br from-indigo-500 to-indigo-600',
    textColor: 'text-indigo-600',
    hoverColor: 'hover:from-indigo-600 hover:to-indigo-700'
  },
  { 
    title: 'Electrical Diagnostics', 
    desc: 'Advanced troubleshooting and system analysis.', 
    href: '/corpus-christi/diagnostics',
    icon: '🔍',
    image: '/images/diagnostics.png',
    bgColor: 'bg-gradient-to-br from-teal-500 to-teal-600',
    textColor: 'text-teal-600',
    hoverColor: 'hover:from-teal-600 hover:to-teal-700'
  }
];

export default function ServiceCards() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  return (
    <section className="py-32 bg-gradient-to-br from-gray-50 to-white">
      <div className="container-custom">
        <div className="text-center mb-16">
          <h2 className="font-heading font-bold text-4xl md:text-5xl mb-6 text-gradient">
            Services We Offer
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Professional electrical solutions for residential and commercial properties in Corpus Christi
          </p>
        </div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {!mounted
            ? Array.from({ length: 6 }).map((_, i) => (
                <div key={i} className="card-elevated overflow-hidden animate-pulse">
                  <div className="h-48 bg-gray-200" />
                  <div className="p-6 space-y-3">
                    <div className="h-6 bg-gray-200 w-1/2 rounded" />
                    <div className="h-4 bg-gray-200 w-3/4 rounded" />
                    <div className="h-4 bg-gray-200 w-2/3 rounded" />
                  </div>
                </div>
              ))
            : items.map((it, index) => (
                <Link 
                  key={it.title} 
                  href={it.href} 
                  className="group card-elevated animate-fade-in overflow-hidden"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  {/* Service Image */}
                  <div className="relative h-48 overflow-hidden rounded-t-2xl">
                    <Image 
                      src={it.image}
                      alt={`${it.title} services in Corpus Christi`}
                      fill
                      className="object-cover group-hover:scale-110 transition-transform duration-500"
                      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    <div className={`absolute top-4 left-4 w-12 h-12 ${it.bgColor} rounded-xl flex items-center justify-center shadow-lg`}>
                      <span className="text-xl">{it.icon}</span>
                    </div>
                  </div>
                  
                  {/* Service Content */}
                  <div className="p-6">
                    <h3 className="font-heading font-bold text-xl mb-3 group-hover:text-gradient transition-all duration-300">
                      {it.title}
                    </h3>
                    <p className="text-gray-600 text-base mb-4 leading-relaxed">{it.desc}</p>
                    <span className={`inline-flex items-center gap-2 ${it.textColor} font-semibold text-sm group-hover:gap-3 transition-all duration-300`}>
                      Learn more 
                      <svg className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </span>
                  </div>
                </Link>
              ))}
        </div>
      </div>
    </section>
  );
}