<?php 
include('header.php'); 
include('config/koneksi.php'); 

$query = "SELECT * FROM membership_packages";
$result = mysqli_query($conn, $query);
?>
<section class="hero-section text-center text-white d-flex align-items-center justify-content-center" style="height: 100vh; background: linear-gradient(to right, #080808aa, #242124aa), url('img/bb.png') center/cover no-repeat;">
  <div class="container">
    <h1 class="display-5 fw-bold mb-4">GET HEALTHY BODY<br>WITH THE PERFECT EXERCISES</h1>
    <p class="lead mb-5">Kami di sini membantu Anda membentuk tubuh dan pikiran sehat melalui fitness.</p>
    <a href="membership.php" class="btn-homepage">
      <i class="fas fa-dumbbell"></i> Join Now
    </a>
  </div>
</section>


  </div>
</section>
<section class="py-5" style="background-color: #242124;">
  <div class="container text-center text-white">
    <h2 class="mb-4 fw-bold">Pilihan Program Terbaik Untukmu</h2>
    <div class="row g-4">
      <div class="col-md-3">
        <div class="card bg-dark text-white border-0 h-100 card-hover">
          <div class="card-body">
            <h5 class="card-title">Strength Training</h5>
            <p class="card-text">Tingkatkan kekuatan otot dengan latihan intensif.</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card bg-dark text-white border-0 h-100 card-hover">
          <div class="card-body">
            <h5 class="card-title">Basic Yoga</h5>
            <p class="card-text">Latihan fleksibilitas dan ketenangan untuk semua usia.</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card bg-dark text-white border-0 h-100 card-hover">
          <div class="card-body">
            <h5 class="card-title">Body Building</h5>
            <p class="card-text">Program pembentukan otot terbaik untuk hasil maksimal.</p>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="card bg-dark text-white border-0 h-100 card-hover">
          <div class="card-body">
            <h5 class="card-title">Weight Loss</h5>
            <p class="card-text">Bakar lemak dan bentuk tubuh ideal dengan aman.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<section id="membership" class="py-5 text-white" style="background-color: #080808;">
  <div class="container text-center">
    <h2 class="mb-5 fw-bold text-uppercase">Pilihan Membership</h2>
    <div class="row g-4 justify-content-center">
      <?php while($row = mysqli_fetch_assoc($result)): ?>
        <?php
          $priceFormatted = "Rp " . number_format($row['price'], 0, ',', '.') . " | " . $row['duration'];
        ?>
        <div class="col-md-4">
          <div class="card h-100 shadow rounded-4 border-0 text-dark">
            <!-- Header -->
            <div class="card-header text-white text-uppercase fw-semibold" style="background-color: #003A6B;">
              <?= htmlspecialchars($row['package_name']) ?>
            </div>

            <!-- Body -->
            <div class="card-body bg-dark d-flex flex-column">
              <p class="fs-5 fw-bold text-center text-white mb-4"><?= $priceFormatted ?></p>
              <p class="text-white" style="font-size: 0.95rem;">
                <?= nl2br(htmlspecialchars($row['description'])) ?>
              </p>
              <div class="mt-auto text-center">
                <a href="#" class="btn btn-primary rounded-pill px-4 mt-3">Pilih Paket</a>
              </div>
            </div>
          </div>
        </div>
      <?php endwhile; ?>
    </div>
  </div>
</section>



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<section class="py-5" style="background-color: #242124;">
  <div class="container text-white">
    <div class="row align-items-center">
      
      <div class="col-md-6 mb-4 mb-md-0 text-center animate__animated animate__fadeInLeft">
        <img src="img/kk.png" class="img-fluid rounded-4 shadow-lg" alt="Kenapa Join" style="max-height: 400px;">
      </div>

      <div class="col-md-6 animate__animated animate__fadeInRight">
        <h2 class="fw-bold mb-4">Mengapa Memilih <span class="text-primary">Leon Gym?</span></h2>
        <ul class="list-unstyled fs-5 lh-lg">
          <li>✅ <strong>Personal Trainer Berpengalaman</strong></li>
          <li>✅ <strong>Jadwal Fleksibel Sesuai Kebutuhan</strong></li>
          <li>✅ <strong>Program yang Terbukti Efektif</strong></li>
          <li>✅ <strong>Fasilitas Modern dan Nyaman</strong></li>
        </ul>
        <a href="membership.php" class="btn btn-primary mt-4 px-4 py-2 rounded-pill shadow-sm animate__animated animate__pulse animate__infinite">
          Daftar Sekarang
        </a>
      </div>

    </div>
  </div>
</section>

<?php include('footer.php'); ?>