import React from 'react';
import ServiceCard from './ServiceCard';
import AnimatedSection from './AnimatedSection';
import { Shield, Wifi, Cloud, Radio, Monitor, Zap } from 'lucide-react';

const Services: React.FC = () => {
  const services = [
    {
      icon: Shield,
      title: 'Instalasi CCTV',
      description: 'Sistem keamanan dengan kamera pengawas untuk melindungi aset dan properti Anda dengan teknologi terkini.'
    },
    {
      icon: Wifi,
      title: 'Instalasi Jaringan Internet',
      description: 'Layanan pemasangan dan konfigurasi jaringan internet yang stabil dan handal untuk kebutuhan bisnis Anda.'
    },
    {
      icon: Zap,
      title: 'Instalasi Penangkal Petir',
      description: 'Sistem proteksi yang efektif untuk melindungi bangunan dan peralatan elektronik dari bahaya sambaran petir.'
    },
    {
      icon: Radio,
      title: 'Instalasi Pemancar HT',
      description: 'Solusi komunikasi radio untuk area luas dengan pemasangan pemancar handy talky yang profesional.'
    },
    {
      icon: Monitor,
      title: 'Development Software',
      description: 'Pengembangan aplikasi dan sistem informasi sesuai kebutuhan bisnis dengan teknologi terkini.'
    },
    {
      icon: Cloud,
      title: 'Security System',
      description: 'Sistem keamanan komprehensif untuk melindungi aset fisik dan digital perusahaan Anda.'
    }
  ];

  return (
    <section id="layanan" className="section-padding bg-slate-50">
      <div className="max-w-7xl mx-auto">
        <AnimatedSection className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Layanan Kami</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            PT. Java Tekno Plus menyediakan berbagai layanan teknologi informasi untuk 
            mendukung operasional bisnis dan keamanan dengan solusi yang terpercaya.
          </p>
        </AnimatedSection>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => (
            <AnimatedSection key={index} delay={100 * index}>
              <ServiceCard
                icon={service.icon}
                title={service.title}
                description={service.description}
              />
            </AnimatedSection>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Services;