<?php include 'includes/header.php'; ?>

<main class="container page-interna">

  <h1>Fotos de los premios</h1>

  <style>
    .galeria {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 12px;
    }

    .galeria img {
      width: 100%;
      max-width: 110px;
      border-radius: 6px;
      cursor: pointer;
    }

    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.9);
      align-items: center;
      justify-content: center;
    }

    .lightbox img {
      max-width: 90%;
      max-height: 85%;
      border-radius: 8px;
    }

    .lightbox .close,
    .lightbox .prev,
    .lightbox .next {
      position: absolute;
      color: #fff;
      font-size: 32px;
      cursor: pointer;
      user-select: none;
    }

    .lightbox .close {
      top: 20px;
      right: 30px;
      font-size: 40px;
    }

    .lightbox .prev {
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox .next {
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>

  <section class="galeria-premio">
    <h2>Suspensión FOX 38 170mm Kashima 29/27+</h2>
    <div class="galeria">
      <?php
        $suspension = [
          'sus1.jpg','sus2.jpg','sus3.jpg','sus4.jpg',
          'sus5.jpg','sus6.jpg','sus7.jpg','sus8.jpg'
        ];

        foreach ($suspension as $img) {
          echo '<img src="img/'.$img.'" class="lightbox-item" data-group="suspension">';
        }
      ?>
    </div>
  </section>

  <section class="galeria-premio">
    <h2>Maza HOPE PRO5 12x148 32h</h2>
    <div class="galeria">
      <?php
        $maza = ['maza1.jpg','maza2.jpg'];

        foreach ($maza as $img) {
          echo '<img src="img/'.$img.'" class="lightbox-item" data-group="maza">';
        }
      ?>
    </div>
  </section>

</main>

<!-- Lightbox HTML -->
<div class="lightbox" id="lightbox">
  <span class="close" onclick="closeLightbox()">×</span>
  <span class="prev" onclick="changeImage(-1)">❮</span>
  <img id="lightbox-img">
  <span class="next" onclick="changeImage(1)">❯</span>
</div>

<script>
  let images = [];
  let currentIndex = 0;

  document.querySelectorAll('.lightbox-item').forEach((img, index) => {
    img.addEventListener('click', () => {
      images = Array.from(document.querySelectorAll(
        `.lightbox-item[data-group="${img.dataset.group}"]`
      ));
      currentIndex = images.indexOf(img);
      openLightbox();
    });
  });

  function openLightbox() {
    document.getElementById('lightbox').style.display = 'flex';
    document.getElementById('lightbox-img').src = images[currentIndex].src;
  }

  function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
  }

  function changeImage(direction) {
    currentIndex += direction;
    if (currentIndex < 0) currentIndex = images.length - 1;
    if (currentIndex >= images.length) currentIndex = 0;
    document.getElementById('lightbox-img').src = images[currentIndex].src;
  }
</script>

<?php include 'includes/footer.php'; ?>
