export default function Services() {
  const services = [
    {
      title: "Submarine Design",
      description: "Custom submarine design and engineering solutions.",
      icon: "🚤"
    },
    {
      title: "Marine Research",
      description: "Advanced marine research and exploration services.",
      icon: "🔬"
    },
    {
      title: "Underwater Maintenance",
      description: "Professional underwater maintenance and repairs.",
      icon: "🔧"
    },
    {
      title: "Marine Consulting",
      description: "Expert consulting for marine operations.",
      icon: "💼"
    }
  ];

  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center text-marine-blue mb-12">Our Services</h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {services.map((service, index) => (
            <div key={index} className="bg-marine-light p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
              <div className="text-4xl mb-4">{service.icon}</div>
              <h3 className="text-xl font-bold text-marine-blue mb-2">{service.title}</h3>
              <p className="text-marine-blue">{service.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}