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

  <!-- Inicia el contenido específico de esta página -->
  <div class="slider-container">
    <div class="slider-wrapper" id="slider">
      <img src="IMG/slides/POA.png" alt="Imagen 1">
      <img src="IMG/slider2.jpg" alt="Imagen 2">
      <img src="IMG/slider3.jpg" alt="Imagen 3">
    </div>
    <div class="slider-nav">
      <button id="prev">&#10094;</button>
      <button id="next">&#10095;</button>
    </div>
    <div id="slider-indicators" style="display:none;"></div>
  </div>

  <div class="contenedor-info">
    <div class="titulo">DEPARTAMENTO DE SISTEMAS</div>
    <p>El Departamento de Sistemas de la Universidad Tecnológica del Sur del Estado de México es responsable del mantenimiento correctivo y preventivo, así como de las actualizaciones de software en los equipos de las distintas áreas. También administra sistemas de información locales y páginas institucionales.</p>
    <div class="buttons">
      <a href="form_mantenimiento.php" class="btn-pildora">Solicitud de Mantenimiento Correctivo</a>
    </div>
  </div>
  <!-- Termina el contenido específico -->

  <!-- Lógica específica del slider de la página Home -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const sliderWrapper = document.getElementById("slider");
      if (!sliderWrapper) return; 
      
      const slides = sliderWrapper.querySelectorAll("img");
      const totalSlides = slides.length;
      const indicatorsContainer = document.getElementById("slider-indicators");
      let currentIndex = 0;
      let interval;

      slides.forEach((_, index) => {
        const dot = document.createElement("button");
        if (index === 0) dot.classList.add("active");
        dot.addEventListener("click", () => {
          currentIndex = index;
          showSlide(currentIndex);
          resetInterval();
        });
        if(indicatorsContainer) indicatorsContainer.appendChild(dot);
      });

      function updateIndicators(index) {
        if(!indicatorsContainer) return;
        const indicators = indicatorsContainer.querySelectorAll("button");
        indicators.forEach((dot, i) => {
          dot.classList.toggle("active", i === index);
        });
      }

      function showSlide(index) {
        const offset = -index * 100;
        sliderWrapper.style.transform = `translateX(${offset}%)`;
        updateIndicators(index);
      }

      function nextSlide() {
        currentIndex = (currentIndex + 1) % totalSlides;
        showSlide(currentIndex);
      }

      function prevSlide() {
        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
        showSlide(currentIndex);
      }

      document.getElementById("next").addEventListener("click", () => {
        nextSlide();
        resetInterval();
      });

      document.getElementById("prev").addEventListener("click", () => {
        prevSlide();
        resetInterval();
      });

      function startInterval() {
        interval = setInterval(nextSlide, 10000);
      }

      function resetInterval() {
        clearInterval(interval);
        startInterval();
      }

      startInterval();
    });
  </script>

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