import React from 'react';
import { Monitor, Server, Code, Database, Globe, Shield } from 'lucide-react';
import { ServiceItem } from '../types';
import { useTranslations } from 'next-intl';

const Services: React.FC = () => {
  const t = useTranslations('Services');

  const services: ServiceItem[] = [
    {
      title: t('items.customDev.title'),
      description: t('items.customDev.desc'),
      icon: Code,
    },
    {
      title: t('items.digitalTrans.title'),
      description: t('items.digitalTrans.desc'),
      icon: Monitor,
    },
    {
      title: t('items.systemIntegration.title'),
      description: t('items.systemIntegration.desc'),
      icon: Server,
    },
    {
      title: t('items.bigData.title'),
      description: t('items.bigData.desc'),
      icon: Database,
    },
    {
      title: t('items.cloudService.title'),
      description: t('items.cloudService.desc'),
      icon: Globe,
    },
    {
      title: t('items.security.title'),
      description: t('items.security.desc'),
      icon: Shield,
    },
  ];

  return (
    <section id="services" className="py-24 bg-white">
      <div className="container mx-auto px-6">
        <div className="text-center max-w-3xl mx-auto mb-16">
          <h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-3">{t('title')} • {t('subtitle')}</h2>
          <h3 className="text-3xl md:text-4xl font-serif text-feie-dark mb-6">
            {t('heading')}
          </h3>
          <div className="w-16 h-1 bg-feie-dark mx-auto"></div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <div 
              key={index} 
              className="group p-8 border border-gray-100 bg-feie-cream/30 hover:bg-feie-dark hover:border-feie-dark transition-all duration-500 rounded-sm relative overflow-hidden"
            >
              <div className="absolute top-0 right-0 w-24 h-24 bg-feie-gold/10 rounded-bl-full -mr-4 -mt-4 transition-all duration-500 group-hover:bg-feie-gold/20"></div>
              
              <service.icon 
                className="w-10 h-10 text-feie-gold mb-6 group-hover:text-feie-gold transition-colors duration-300" 
                strokeWidth={1.5}
              />
              
              <h4 className="text-xl font-serif font-bold text-feie-dark mb-4 group-hover:text-feie-white transition-colors duration-300">
                {service.title}
              </h4>
              
              <p className="text-gray-600 font-light leading-relaxed group-hover:text-gray-300 transition-colors duration-300">
                {service.description}
              </p>

              <div className="mt-6 w-8 h-px bg-feie-gold group-hover:w-full transition-all duration-500"></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;