import React from 'react';
import { ServiceCard } from '../common/ServiceCard';
//import { componentStyles } from '../../styles/designSystem';
import type { Service } from '../../types/service';

interface ServicesSectionProps {
  services: Service[];
  onServiceClick: (service: Service) => void;
  translations: {
    discoverFeatures: string;
  };
}

export const ServicesSection: React.FC<ServicesSectionProps> = ({ 
  services, 
  onServiceClick, 
  translations 
}) => (
  <section id="services" className="relative z-2 py-12 sm:py-16 md:py-20 w-full max-w-6xl mx-auto px-4 sm:px-6 md:px-8">
    <div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-6 sm:mb-8 rounded-full"></div>
    <h2 className="text-banquise-gray text-2xl sm:text-3xl md:text-4xl mb-4 sm:mb-6 text-center font-heading font-bold tracking-tight px-2" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
      Nos Services
    </h2>
    <p className="text-banquise-gray text-lg sm:text-xl opacity-90 mb-12 sm:mb-14 md:mb-16 max-w-4xl text-center mx-auto leading-relaxed px-2" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
      Cliquez sur un service pour découvrir toutes ses fonctionnalités
    </p>
    
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 sm:gap-8 w-full">
      {services.map((service) => (
        <ServiceCard
          key={service.name}
          service={service}
          onServiceClick={onServiceClick}
          discoverFeaturesText={translations.discoverFeatures}
        />
      ))}
    </div>
  </section>
);