<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Slider de Banners</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    .banner-slider {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
    }

    .slide {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1s ease-in-out;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 30px;
      color: white;
      z-index: 0;
    }

    .slide.active {
      opacity: 1;
      z-index: 1;
    }

    .slide-content {
      max-width: 800px;
      background: transparent;
      padding: 20px 20px 20px 70px;
      border-radius: 6px;
    }

    .banner-titulo {
      font-size: 36px;
      margin-bottom: 10px;
      font-weight: bold;
      line-height: 1.0;
      color: white;
    }

    .banner-texto {
      font-size: 20px;
      margin-bottom: 35px;
      line-height: 1.4;
    }

    .botao-banner {
      background-color: #e4c227;
      color: white;
      padding: 20px 45px;
      border-radius: 20px;
      cursor: pointer;
      text-decoration: none;
      font-weight: bold;
      transition: all 0.3s ease;
    }

    .botao-banner:hover {
      background-color: rgb(196, 165, 26);
      color: #fff;
    }

    .nav-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.3);
      border: none;
      color: white;
      font-size: 30px;
      padding: 10px;
      cursor: pointer;
      z-index: 2;
    }

    .nav-button:hover {
      background: rgba(0, 0, 0, 0.5);
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }

    @media screen and (max-width: 768px) {
      .slide-content {
        max-width: 90%;
        padding: 15px;
      }

      .banner-titulo {
        font-size: 20px;
      }

      .banner-texto {
        font-size: 14px;
      }

      .botao-banner {
        padding: 8px 12px;
        font-size: 14px;
      }

      .nav-button {
        font-size: 24px;
        padding: 8px;
      }
    }
  </style>
</head>
<body>
  <div class="banner-slider">
    <div class="slide active" style="background-image: url('uploads/banner/banner-selflix-recrutar-nunca-foi-tao-facil-a.png');">
      <div class="slide-content"><br><br>
        <h2 class="banner-titulo">Encontre as melhores vagas</h2>
        <p class="banner-texto">Explore e veja as melhores opções de vagas do site.</p>
      </div>
    </div>
    <div class="slide" style="background-image: url('uploads/banner/banner-selflix-recrutar-nunca-foi-tao-facil-b.png');">
      <div class="slide-content">
        <h2 class="banner-titulo">Conectando talento e oportunidade</h2>
        <p class="banner-texto">Explore nosso painel de vagas de emprego. E seja visto por quem contrata de maneira única com nosso sistema de<b>Entrevistas prontas.</b></p>
        <a href="/cadastro_empresa.php" class="botao-banner">Anuncie uma vaga</a>
      </div>
    </div>
    <div class="slide" style="background-image: url('uploads/banner/banner-selflix-recrutar-nunca-foi-tao-facil-c.png');">
      <div class="slide-content">
        <h2 class="banner-titulo">Conecte sua vaga aos talentos certos</h2>
        <p class="banner-texto">Publique suas vagas, receba os currículos e conheça o candidato através do nosso sistema de <b>Entrevistas prontas.</b></p>
        <a href="/cadastro_empresa.php" class="botao-banner">Anuncie uma vaga</a>
      </div>
    </div>
    <div class="slide" style="background-image: url('uploads/banner/banner-selflix-recrutar-nunca-foi-tao-facil-d.png');">
      <div class="slide-content">
        <h2 class="banner-titulo">Recrutar nunca foi tão prático</h2>
        <p class="banner-texto">Publique suas vagas, receba os currículos e conheça o candidato através do nosso sistema de <b>Entrevistas prontas.</b></p>
        <a href="/cadastro_empresa.php" class="botao-banner">Anuncie uma vaga</a>
      </div>
    </div>

    <button class="nav-button prev" onclick="prevSlide()">❮</button>
    <button class="nav-button next" onclick="nextSlide()">❯</button>
  </div>

  <script>
    const slides = document.querySelectorAll('.slide');
    let currentSlide = 0;
    let slideInterval = setInterval(nextSlide, 5000);

    function showSlide(index) {
      slides.forEach(slide => slide.classList.remove('active'));
      slides[index].classList.add('active');
    }

    function nextSlide() {
      currentSlide = (currentSlide + 1) % slides.length;
      showSlide(currentSlide);
    }

    function prevSlide() {
      currentSlide = (currentSlide - 1 + slides.length) % slides.length;
      showSlide(currentSlide);
    }
  </script>
</body>
</html>
