<?php
include_once __DIR__ . '/admin/config/db.php';
?>
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Slider</title>

<style>
/* RESET */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* HERO */
#hero {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  background: #000;
}

/* SLIDER */
.hero-slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

.hero-slide {
  flex: 0 0 100%;
  height: 100%;
}

/* IMAGE */
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* desktop */
  object-position: center;
  display: block;
}

/* OVERLAY */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 2;
}

/* CONTENT */
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 20px;
}

.hero-content h2 {
  font-size: 42px;
  font-weight: 900;
  background: linear-gradient(90deg,#ff9933,#ff6a00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content p {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0;
}

.hero-content a {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(90deg,#ff6a00,#ff9933);
  color: #fff;
  font-weight: 700;
  border-radius: 30px;
  text-decoration: none;
}

/* MOBILE – SHOW FULL IMAGE */
@media (max-width: 768px) {
  .hero-slide img {
    object-fit: contain;     /* FULL IMAGE */
    background: #000;
  }

  .hero-content h2 { font-size: 26px; }
  .hero-content p { font-size: 14px; }
}
</style>
</head>

<body>

<section id="hero">

  <div class="hero-slider" id="heroSlider">
    <?php
    $q = mysqli_query($conn, "SELECT image FROM slider ORDER BY id DESC");
    while ($r = mysqli_fetch_assoc($q)):
    ?>
      <div class="hero-slide">
        <img src="admin/uploads/slider/<?= htmlspecialchars($r['image']) ?>" alt="Hero">
      </div>
    <?php endwhile; ?>
  </div>

  <div class="hero-content">
    <div>
      <h2>श्री अमित प्रताप सिंह (प्रधान)</h2>
      <p>भारतीय जनता पार्टी – गोवर्धन विधानसभा</p>
      <a href="index.php">होम पर जाएं</a>
    </div>
  </div>

</section>

<script>
const slider = document.getElementById("heroSlider");
const slides = slider.children.length;
let index = 0;

setInterval(() => {
  index = (index + 1) % slides;
  slider.style.transform = `translateX(-${index * 100}%)`;
}, 5000);
</script>

</body>
</html>
