<?php
include "db.php";
$cats = $pdo->query("SELECT * FROM categories ORDER BY id DESC")->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Organic Grocery</title>

<!-- LORA FONT -->
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Lora', serif;
}

/* ================= SLIDER ================= */
.banner-slider{
  width:100%;
  overflow:hidden;
  position:relative;
}

.banner-slides{
  display:flex;
  transition:transform 0.6s ease-in-out;
}

.banner-slide{
  min-width:100%;
}

.banner-slide img{
  width:100%;
  height:auto;
  display:block;
}

.banner-dots{
  position:absolute;
  bottom:15px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
}

.banner-dots span{
  width:10px;
  height:10px;
  background:#ddd;
  border-radius:50%;
  cursor:pointer;
}

.banner-dots .active{
  background:#F2C94C;
}

/* ================= CATEGORIES ================= */
.categories{
  padding:40px 20px;
  background:#EAF5E3;
}

.categories-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:22px;
}

/* CARD */
.category-card{
  background:#FFFFFF;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transition:.3s ease;
  overflow:hidden;
}

.category-card:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 30px rgba(0,0,0,0.18);
}

/* IMAGE BOX – FIXED SIZE */
.category-img{
  padding:18px;
  height:200px;                     /* SAME HEIGHT FOR ALL */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.category-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;               /* NO CUT, NO STRETCH */
  display:block;
}

/* TITLE */
.category-title{
  text-align:center;
  padding:14px 12px 20px;
  font-size:16px;
  font-weight:600;
  color:#2F6B2F;
}

/* MOBILE */
@media(max-width:768px){
  .banner-dots{
    bottom:8px;
  }
}
</style>
</head>

<body>

<!-- ===== SLIDER ===== -->
<div class="banner-slider">
  <div class="banner-slides" id="slides">
    <div class="banner-slide">
      <img src="https://grocery.quickbizsolutions.in/media/saiorganics.png">
    </div>
    <div class="banner-slide">
      <img src="https://grocery.quickbizsolutions.in/media/saiorganics.png">
    </div>
    <div class="banner-slide">
      <img src="https://grocery.quickbizsolutions.in/media/saiorganics.png">
    </div>
  </div>

  <div class="banner-dots" id="dots">
    <span class="active"></span>
    <span></span>
    <span></span>
  </div>
</div>

<!-- ===== CATEGORIES FROM DB ===== -->
<section class="categories">
  <div class="categories-grid">

    <?php foreach($cats as $c){ ?>
      <a href="products.php?cat=<?= $c['id'] ?>" class="category-card">
        <div class="category-img">
          <img src="assets/images/categories/<?= htmlspecialchars($c['image']) ?>"
               alt="<?= htmlspecialchars($c['category_name']) ?>">
        </div>
        <div class="category-title">
          <?= htmlspecialchars($c['category_name']) ?>
        </div>
      </a>
    <?php } ?>

  </div>
</section>

<script>
let index = 0;
const slides = document.getElementById("slides");
const dots = document.querySelectorAll(".banner-dots span");

function showSlide(i){
  index = i;
  slides.style.transform = `translateX(-${i * 100}%)`;
  dots.forEach(d => d.classList.remove("active"));
  dots[i].classList.add("active");
}

setInterval(()=>{
  index = (index + 1) % dots.length;
  showSlide(index);
},4000);

dots.forEach((dot,i)=>{
  dot.addEventListener("click", ()=>showSlide(i));
});
</script>

</body>
</html>
