<?php
require_once __DIR__ . '/includes/functions.php';
$seo = getSeo('services');
$activeNav = 'services';
require __DIR__ . '/includes/header.php';
?>
<body data-page="services" class="antialiased text-gray-800">

<div id="service-detail-wrap">
  <section id="service-banner" class="py-20 text-white">
    <div class="max-w-7xl mx-auto px-5 lg:px-8">
      <p class="text-sm text-white/70 mb-3"><a href="index.php" class="hover:text-white">Home</a> <i class="bi bi-chevron-right text-xs mx-1"></i> <a href="services.php" class="hover:text-white">Services</a> <i class="bi bi-chevron-right text-xs mx-1"></i> <span id="service-banner-title-crumb">Detail</span></p>
      <h1 id="service-banner-title" class="font-heading text-4xl font-bold"></h1>
    </div>
  </section>

  <section class="py-20 max-w-7xl mx-auto px-5 lg:px-8 grid lg:grid-cols-3 gap-14">
    <div class="lg:col-span-2">
      <h2 class="font-heading text-2xl font-bold mb-4">Overview</h2>
      <p id="service-description" class="text-gray-600 leading-relaxed mb-10"></p>

      <h2 class="font-heading text-2xl font-bold mb-5">Key Features</h2>
      <ul id="service-features" class="space-y-3 mb-12"></ul>

      <h2 class="font-heading text-2xl font-bold mb-5">Frequently Asked Questions</h2>
      <div id="service-faq"></div>

      <h2 class="font-heading text-2xl font-bold mt-14 mb-6">Related Services</h2>
      <div id="related-services" class="grid sm:grid-cols-3 gap-5"></div>
    </div>

    <div>
      <div class="soft-card p-7 sticky top-28">
        <h3 id="service-inquiry-title" class="font-heading text-xl font-semibold mb-2">Inquire About This Service</h3>
        <p class="text-sm text-gray-500 mb-6">Fill the form and our team will get back within 24 hours.</p>
        <form action="contact.php" method="post" class="space-y-4">
          <input type="hidden" name="csrf_token" value="<?= e(csrfToken()) ?>" />
          <input type="text" name="name" required placeholder="Full Name" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-sm" />
          <input type="tel" name="phone" required placeholder="Phone Number" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-sm" />
          <input type="email" name="email" required placeholder="Email Address" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-sm" />
          <input type="text" name="company_website" class="hidden" tabindex="-1" autocomplete="off" />
          <textarea name="message" rows="4" placeholder="Tell us about your requirement" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary text-sm"></textarea>
          <button class="btn-primary-brand w-full py-3 rounded-lg font-semibold">Submit Inquiry</button>
        </form>
      </div>
    </div>
  </section>
</div>

<?php $bridgeSections = ['site', 'services']; require __DIR__ . '/includes/footer.php'; ?>
