import React from 'react';
import { ServiceItem } from '../types';

const SERVICES: ServiceItem[] = [
  {
    id: 'dcs',
    title: 'Distributed Control (DCS)',
    description: 'Advanced, redundant control architectures designed for continuous process industries including power generation and chemicals.',
    icon: 'fa-network-wired',
    image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800'
  },
  {
    id: 'scada',
    title: 'SCADA Solutions',
    description: 'High-performance monitoring platforms with cutting-edge HMI, real-time analytics, and secure remote access protocols.',
    icon: 'fa-chart-line',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800'
  },
  {
    id: 'database',
    title: 'Industrial Historians',
    description: 'Mission-critical database servers and SQL infrastructure optimized for heavy manufacturing data and regulatory compliance.',
    icon: 'fa-database',
    image: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=800'
  },
  {
    id: 'instruments',
    title: 'Control Instruments',
    description: 'Precision field instruments including flow, pressure, and temperature transmitters and smart control valves.',
    icon: 'fa-gauge-high',
    image: 'https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&q=80&w=800'
  }
];

const Services: React.FC = () => {
  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-20">
          <h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Capabilities</h2>
          <h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-6">World-Class Automation</h3>
          <p className="text-slate-600 text-lg leading-relaxed">
            We bridge the gap between heavy physical operations and digital intelligence through robust networking and control systems.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {SERVICES.map((service) => (
            <div key={service.id} className="group flex flex-col h-full bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden hover:border-blue-200 transition-all hover:shadow-2xl hover:-translate-y-2">
              <div className="h-48 overflow-hidden">
                <img 
                  src={service.image} 
                  alt={service.title} 
                  className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-700 group-hover:scale-110" 
                />
              </div>
              <div className="p-8 flex-grow flex flex-col">
                <div className="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center mb-6 group-hover:bg-blue-600 transition-colors">
                  <i className={`fas ${service.icon} text-blue-600 group-hover:text-white text-xl`}></i>
                </div>
                <h4 className="text-xl font-bold text-slate-900 mb-4">{service.title}</h4>
                <p className="text-slate-600 text-sm leading-relaxed mb-8 flex-grow">
                  {service.description}
                </p>
                <a href="#" className="text-blue-600 font-bold text-sm inline-flex items-center gap-2 group-hover:gap-4 transition-all">
                  Technical Specs <i className="fas fa-arrow-right"></i>
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;