<?php
require_once("layouts/home/header.php");

$services = [
  ['icon'=>'fa-mobile-screen','title'=>'Mobile Recharge','desc'=>'Instant prepaid & postpaid recharge for all operators.','color'=>'linear-gradient(135deg,#4facfe,#00f2fe)'],
  ['icon'=>'fa-tv','title'=>'DTH Recharge','desc'=>'Recharge any DTH provider in seconds.','color'=>'linear-gradient(135deg,#667eea,#764ba2)'],
  ['icon'=>'fa-bolt','title'=>'Electricity Bill','desc'=>'Pay electricity bills from any state instantly.','color'=>'linear-gradient(135deg,#43e97b,#38f9d7)'],
  ['icon'=>'fa-gas-pump','title'=>'Gas Bill','desc'=>'Pay PNG & LPG gas bills securely.','color'=>'linear-gradient(135deg,#f7971e,#ffd200)'],
  ['icon'=>'fa-shield-heart','title'=>'Insurance','desc'=>'Renew your health or vehicle insurance online.','color'=>'linear-gradient(135deg,#8E2DE2,#4A00E0)'],
  ['icon'=>'fa-road','title'=>'FASTag','desc'=>'Recharge FASTag for any bank instantly.','color'=>'linear-gradient(135deg,#00c6ff,#0072ff)'],
  ['icon'=>'fa-fingerprint','title'=>'AEPS / Micro ATM','desc'=>'Cash withdrawal, mini statement & balance check.','color'=>'linear-gradient(135deg,#00d2ff,#3a47d5)'],
  ['icon'=>'fa-hand-holding-dollar','title'=>'Loan / EMI','desc'=>'Pay EMI, broadband or postpaid bills easily.','color'=>'linear-gradient(135deg,#ff758c,#ff7eb3)'],
];
?>

<!-- Services Section -->
<section class="py-5" id="services" aria-label="Services">
  <div class="container text-center">
    <h3 class="mb-4">Our Services</h3>
    <p class="text-muted mb-5">
      <?=$site_data['brand']?> offers a complete suite of digital and financial services to empower your business.
    </p>
    <div class="row">
      <?php foreach ($services as $s): ?>
        <div class="col-md-3 col-sm-6 mb-4">
          <div class="card h-100 shadow-lg border-0 text-white"
               style="background: <?=$s['color']?>; border-radius: 15px;">
            <div class="card-body d-flex flex-column align-items-center justify-content-center p-4">
              <i class="fa-solid <?=$s['icon']?> fa-3x mb-3"></i>
              <h5 class="fw-bold mb-2"><?=$s['title']?></h5>
              <p class="small mb-0"><?=$s['desc']?></p>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</section>

<!-- Divider -->
<section class="position-relative">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="192" viewBox="0 0 1440 240" preserveAspectRatio="none">
    <path class="fill-light" fill-rule="evenodd" d="M0 240V0c19.985 5.919 41.14 11.008 63.964 14.89 40.293 6.855 82.585 9.106 125.566 9.106 74.151 0 150.382-6.697 222.166-8.012 13.766-.252 27.51-.39 41.21-.39 99.76 0 197.087 7.326 282.907 31.263C827.843 72.527 860.3 117.25 906.926 157.2c43.505 37.277 115.38 51.186 208.485 53.076 7.584.153 15.156.224 22.714.224 40.887 0 81.402-2.062 121.914-4.125 40.512-2.062 81.027-4.125 121.902-4.125 1.01 0 2.019.002 3.03.004 16.208.042 34.959.792 55.029 2.234V240H0z"/>
  </svg>
</section>

<?php
require_once("layouts/home/footer.php");
?>
