<?php
// responsive_home.php
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi CPU | Home</title>
  <link rel="icon" type="image/png" href="IMG/imgutsem/micpusinfondo.png"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
  <!-- Aquí enlazamos tu nuevo y único archivo CSS -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <nav>
      <div class="logo">
        <img src="IMG/imgutsem/logo_micpu.png" alt="Logo Mi CPU">
      </div>
      <div class="menu-toggle" onclick="toggleMenu()">☰</div>
      <ul class="menu" id="menu">
        <li><a href="status.php">Estatus de Solicitud</a></li>
        <li><a href="pdf/Programa_anual_2026.pdf" target="_blank">Programa Anual</a></li>
        <li><a href="pdf/manual_usuario3.pdf" target="_blank">Ayuda</a></li>
        <li><a href="iniciosesi.php">Iniciar Sesión</a></li>
      </ul>
    </nav>
  </header>

  <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> <!-- Contenedor para los puntos requerido por el JS -->
  </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">
      <!-- Botón convertido a estilo píldora -->
      <a href="form_mantenimiento.php" class="btn-pildora">Solicitud de Mantenimiento Correctivo</a>
    </div>
  </div>

  <footer class="pie-pagina">
    <div class="grupo-1">
      <div class="box">
        <figure>
          <a href="#"><img src="IMG/imgutsem/logo_utsem.png" alt="Logo UTSEM" style="height: 100px;"></a>
        </figure>
      </div>
      <div class="box">
        <h2>CONTACTO:</h2>
        <p>Teléfono: (724) 2394016 al 22 ext. 127</p>
        <p>Correo: sistemas@utsem.edu.mx</p>
        <p>Dirección: Carretera Tejupilco - Amatepec SN Km. 12 C.P. 51426 San Miguel, Ixtapan, Tejupilco, Estado de México.</p>
      </div>
      <div class="box">
        <h2>SÍGUENOS:</h2>
        <div class="social-icons">
          <a href="https://www.facebook.com/UTsemTejupilco" target="_blank" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
          <a href="https://www.instagram.com/utsemtejupilco" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
          <a href="https://www.tiktok.com/@utsemtejupilco" target="_blank" aria-label="TikTok"><i class="fab fa-tiktok"></i></a>
        </div>
      </div>
    </div>
    <div class="grupo-2">
      <small>&copy; 2026 <b>Mi CPU</b> - Todos los Derechos Reservados.</small>
    </div>
  </footer>

  <script>
    function toggleMenu() {
      document.getElementById('menu').classList.toggle('active');
    }

    document.addEventListener("DOMContentLoaded", function () {
      const sliderWrapper = document.getElementById("slider");
      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>
</body>
</html>