<?php
require_once 'includes/helpers.php';
require_once 'includes/header.php';
require_once 'includes/footer.php';

renderHeader('Amenities');

$services = db()->query(
  'SELECT s.*, a.available_slots
   FROM service_types s
   JOIN availability a ON a.service_type_id = s.id
   ORDER BY s.id'
)->fetchAll();
?>

<!-- Page Hero -->
<div class="page-hero">
  <div class="container">
    <span class="section-label">Our Facilities</span>
    <h1 class="section-title">World-Class Amenities<br/>Built For Drivers</h1>
    <p class="section-sub" style="margin:0 auto;text-align:center">
      Everything under one roof — because when you're on the road, every minute of quality rest counts.
    </p>
  </div>
</div>

<!-- ── Amenity Detail Cards ── -->
<section class="section">
  <div class="container">
    <?php foreach ($services as $i => $svc):
      $pct = $svc['total_slots'] > 0 ? round(($svc['available_slots'] / $svc['total_slots']) * 100) : 0;
      $fillClass = $pct > 50 ? 'fill-green' : ($pct > 20 ? 'fill-amber' : 'fill-red');
      $badgeClass = $pct > 50 ? 'badge-green' : ($pct > 20 ? 'badge-amber' : 'badge-red');
      $badgeText = $pct > 50 ? 'AVAILABLE' : ($pct > 0 ? 'LIMITED' : 'FULL');
      $reverse = $i % 2 !== 0;
    ?>
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:80px;<?= $reverse ? 'direction:rtl' : '' ?>">
      <!-- Visual -->
      <div style="<?= $reverse ? 'direction:ltr' : '' ?>">
        <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:48px;text-align:center;position:relative;overflow:hidden">
          <div style="position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(245,166,35,0.06),transparent);pointer-events:none"></div>
          <div style="width:96px;height:96px;background:rgba(245,166,35,0.12);border:1px solid rgba(245,166,35,0.25);border-radius:24px;display:grid;place-items:center;margin:0 auto 24px;font-size:2.4rem;color:var(--amber)">
            <i class="fa fa-<?= h($svc['icon']) ?>"></i>
          </div>
          <h3 style="font-family:var(--font-head);font-size:2rem;margin-bottom:8px"><?= h($svc['label']) ?></h3>
          <div style="display:flex;justify-content:center;gap:24px;margin-top:24px">
            <div style="text-align:center">
              <div style="font-family:var(--font-head);font-size:2rem;color:var(--amber)"><?= $svc['total_slots'] ?></div>
              <div style="font-family:var(--font-cond);font-size:0.78rem;letter-spacing:2px;color:var(--text-muted)">TOTAL SLOTS</div>
            </div>
            <div style="width:1px;background:var(--border)"></div>
            <div style="text-align:center">
              <div style="font-family:var(--font-head);font-size:2rem;color:var(--teal)"><?= $svc['available_slots'] ?></div>
              <div style="font-family:var(--font-cond);font-size:0.78rem;letter-spacing:2px;color:var(--text-muted)">AVAILABLE NOW</div>
            </div>
            <div style="width:1px;background:var(--border)"></div>
            <div style="text-align:center">
              <div style="font-family:var(--font-head);font-size:2rem;color:var(--amber)">
                <?= $svc['price_per_hour'] > 0 ? '₹' . number_format($svc['price_per_hour'], 0) : 'FREE' ?>
              </div>
              <div style="font-family:var(--font-cond);font-size:0.78rem;letter-spacing:2px;color:var(--text-muted)">
                <?= $svc['price_per_hour'] > 0 ? 'PER HOUR' : 'ENTRY' ?>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Copy -->
      <div style="<?= $reverse ? 'direction:ltr' : '' ?>">
        <span class="section-label">Service #<?= str_pad($i+1, 2, '0', STR_PAD_LEFT) ?></span>
        <h2 style="font-family:var(--font-head);font-size:2.4rem;margin-bottom:16px"><?= h($svc['label']) ?></h2>
        <p style="color:var(--text-muted);font-size:1.05rem;line-height:1.75;margin-bottom:24px">
          <?= h($svc['description']) ?>
        </p>

        <!-- Availability bar -->
        <div style="margin-bottom:24px">
          <div style="display:flex;justify-content:space-between;font-family:var(--font-cond);font-size:0.82rem;color:var(--text-muted);margin-bottom:8px">
            <span>Current Availability</span>
            <span><?= $svc['available_slots'] ?> / <?= $svc['total_slots'] ?> slots</span>
          </div>
          <div class="avail-bar" style="height:10px">
            <div class="avail-fill <?= $fillClass ?>" style="width:<?= $pct ?>%" data-width="<?= $pct ?>%"></div>
          </div>
          <div style="margin-top:10px">
            <span class="avail-badge <?= $badgeClass ?>"><?= $badgeText ?></span>
          </div>
        </div>

        <a href="booking.php?service=<?= urlencode($svc['code']) ?>" class="btn btn-amber">
          <i class="fa fa-calendar-check"></i> Book This Service
        </a>
      </div>
    </div>
    <?php if ($i < count($services) - 1): ?>
    <hr style="border:none;border-top:1px solid var(--border);margin-bottom:80px">
    <?php endif; endforeach; ?>
  </div>
</section>

<?php renderFooter(); ?>
