<?php
$services = [
    [
      'icon' => 'fa-solid fa-handshake',
      'title' => 'Business Matching',
      'subtitle' => 'Menjembatani Peluang',
      'description' => 'Layanan business matching kami bukan sekadar memperkenalkan Anda kepada calon mitra; ini adalah tentang membangun hubungan yang bermakna dan berdampak nyata.',
      'features' => [
        "Mencocokkan dengan mitra strategis yang tepat",
        "Membantu startup mencari investor",
        "Menghubungkan bisnis dengan klien potensial",
        "Membuka peluang pasar baru"
      ],
      'image' => "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1484&auto=format&fit=crop"
    ],
    [
      'icon' => 'fa-solid fa-calendar-alt',
      'title' => 'Event Organizing',
      'subtitle' => 'Menciptakan Pengalaman yang Berdampak',
      'description' => 'Kami merancang dan mengelola acara yang selaras dengan tujuan Anda, dari konferensi korporat hingga lokakarya pelatihan.',
      'features' => [
        "Perencanaan dan pengembangan konsep",
        "Pelaksanaan acara yang profesional",
        "Konferensi korporat dan seminar bisnis",
        "Lokakarya pelatihan dan workshop"
      ],
      'image' => "https://images.unsplash.com/photo-1505373877841-8d25f7d46678?q=80&w=1412&auto=format&fit=crop"
    ]
];
?>

<section id="services" class="py-20 bg-gray-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
        Layanan Kami
      </h2>
      <p class="text-lg text-gray-600 max-w-3xl mx-auto">
        BrightEd menyediakan solusi komprehensif untuk membantu bisnis Anda tumbuh dan berkembang melalui dua layanan utama yang telah terbukti efektif.
      </p>
    </div>

    <div class="space-y-16">
      <?php foreach ($services as $index => $service): ?>
        <div class="overflow-hidden hover:shadow-xl transition-all duration-300 rounded-lg border">
          <div class="grid lg:grid-cols-2 items-center">
            
            <div class="<?php echo ($index % 2 === 1) ? 'lg:order-last' : ''; ?>">
              <img src="<?php echo $service['image']; ?>" alt="<?php echo $service['title']; ?>" class="w-full h-full object-cover">
            </div>

            <div>
                <div class="p-8">
                  <div class="flex items-center space-x-4 mb-4">
                    <div class="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center">
                      <i class="<?php echo $service['icon']; ?> text-white text-2xl"></i>
                    </div>
                    <div>
                      <h3 class="text-2xl font-bold text-gray-900"><?php echo $service['title']; ?></h3>
                      <p class="text-blue-600 font-medium"><?php echo $service['subtitle']; ?></p>
                    </div>
                  </div>
              
                  <p class="text-gray-600 mb-6 leading-relaxed"><?php echo $service['description']; ?></p>
                  
                  <ul class="space-y-3">
                    <?php foreach ($service['features'] as $feature): ?>
                      <li class="flex items-center">
                        <i class="fas fa-check-circle text-green-500 mr-3"></i>
                        <span class="text-gray-700"><?php echo $feature; ?></span>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                </div>
            </div>

          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>