import React from 'react';
import Link from 'next/link';
import BaseIcon from '../BaseIcon';
import ScrollReveal from './ScrollReveal';
import { bekaServices } from '../../data/bekaServices';

const Services = () => {
  return (
    <section id="hizmetler" className="py-24 bg-gray-50 relative overflow-hidden">
      {/* Background Decor */}
      <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-amber-500/5 blur-[120px] -z-10"></div>
      <div className="absolute bottom-0 left-0 w-1/3 h-1/3 bg-amber-600/5 blur-[120px] -z-10"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <ScrollReveal animation="fade-in-up">
          <div className="text-center mb-16">
            <h2 className="text-xs font-black text-amber-600 uppercase tracking-[0.2em] mb-4 font-sans">Uzmanlık Alanlarımız</h2>
            <h3 className="text-4xl md:text-5xl font-black text-gray-900 mb-6 leading-tight font-sans">Mekanlarınıza Hayat Veren <br />Uygulamalar</h3>
            <p className="text-xl text-gray-500 max-w-2xl mx-auto font-medium font-body">
              Beka Kaplama olarak en kaliteli malzemeleri uzman işçilikle birleştirerek yaşam alanlarınıza değer katıyoruz.
            </p>
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {bekaServices.map((service, index) => (
            <ScrollReveal 
              key={service.id} 
              animation="fade-in-up" 
              delay={index * 150}
              className="h-full"
            >
              <div className="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-2xl transition-all duration-500 group hover:-translate-y-3 border border-gray-100 flex flex-col h-full active:scale-95">
                <div className="relative h-56 overflow-hidden">
                  <img 
                    src={service.image} 
                    alt={service.title} 
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                  <div className="absolute top-4 left-4 p-4 bg-white/90 backdrop-blur rounded-2xl shadow-xl transform group-hover:rotate-12 transition-transform duration-500">
                    <BaseIcon path={service.icon} size={24} className="text-amber-600" />
                  </div>
                </div>
                <div className="p-8 flex-grow flex flex-col">
                  <h4 className="text-2xl font-black text-gray-900 mb-4 group-hover:text-amber-600 transition-colors font-sans">
                    {service.title}
                  </h4>
                  <p className="text-gray-500 leading-relaxed text-sm mb-6 flex-grow font-medium font-body">
                    {service.shortDescription}
                  </p>
                  <div className="mt-auto">
                    <Link href={`/hizmet/${service.slug}`} className="inline-flex items-center space-x-2 text-amber-600 font-black text-xs uppercase tracking-widest group/btn font-sans">
                      <span>Detayları İncele</span>
                      <div className="w-5 h-5 bg-amber-100 rounded-full flex items-center justify-center group-hover/btn:translate-x-1 transition-transform">
                        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M9 5l7 7-7 7" />
                        </svg>
                      </div>
                    </Link>
                  </div>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;