@php


<nav x-data="{ userMenu: false, mobileMenu: false, showLoginModal: false } "
     class="bg-gray-800 text-white fixed top-0 left-0 w-full z-50 shadow">  

  <div class="container mx-auto px-8 py-4 flex items-center justify-between">
    <div class="flex items-center space-x-8">
      <div class="text-2xl font-bold">SececPlay</div>

      
      <div class="hidden md:flex space-x-4">
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=filmes"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            Filmes
          </a>
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=shows"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            Shows
          </a>
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=standup"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            Standup
          </a>
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=culturais"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            + Cultura
          </a>
              </div>
    </div>

    <div class="flex items-center space-x-4">
      <!-- <button 
        @click="showLoginModal = true"
        class="px-5 py-2 bg-cyan-700 rounded-lg hover:bg-cyan-900 transition"
      >
        Entrar
      </button> -->
    </div>
  </div>


  <!-- 
  <div x-cloak>
    <div 
      x-show="showLoginModal" 
      x-transition.opacity
      class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
      <div class="relative text-white bg-gray-800 rounded-lg shadow-lg w-full max-w-md p-6">
        <button 
          @click="showLoginModal = false" 
          class="absolute top-2 right-4 text-gray-300 hover:text-white text-xl"
        >
          &times;
        </button>

        <!-- <div class="w-full max-w-md mx-auto text-white rounded-lg p-6 space-y-6">
    <h2 class="text-2xl font-bold text-center">Entrar</h2>

    <form method="POST" action="http://www.favelacriativa.rj.gov.br/login" class="space-y-4">
        <input type="hidden" name="_token" value="1Wp0Rb4NdppJfndmgmGpVe952lw6HAzxni9BOZ8L" autocomplete="off">        <input type="hidden" name="source" value="login"/>
          <div>
            <label for="email" class="block text-sm font-semibold mb-1">Email</label>
            <input type="email" name="email" id="email" required
                class="w-full px-4 py-2 rounded bg-gray-900 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition" />
                            </div>
        <div>
            <label for="password" class="block text-sm font-semibold mb-1">Senha</label>
            <input type="password" name="password" id="password" required
                class="w-full px-4 py-2 rounded bg-gray-900 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition" />
                    </div>

        
       <div class="flex flex-col md:items-center md:justify-between gap-4  mt-6 w-full"> -->

            <!-- Botão Entrar -->
            <!-- <div class="w-full">
                <button type="submit"
                    class="w-full bg-cyan-700 hover:bg-cyan-900 text-white font-semibold py-3 px-6 rounded transition">
                    Entrar
                </button>
            </div> -->

            <!-- Lembre-se de mim e Esqueceu a senha -->
            <!-- <div class="flex flex-col items-center justify-between gap-2 md:gap-6 text-sm text-gray-400 w-full md:w-auto">

                <a href="{.{ route('password.request') }.}" class="text-cyan-400 hover:underline">
                    Esqueceu a senha?
                </a>
                
                <label class="items-center gap-2">
                    <input type="checkbox"
                        class="form-checkbox bg-gray-800 border-gray-600 text-cyan-600 focus:ring-cyan-500">
                    Lembre-se de mim
                </label>
            </div> -->

            <!-- Cadastro -->
            <!-- <div class="text-sm text-gray-400 text-center w-full md:w-auto">
                Novo por aqui?
                <a href="#email" @click="showLoginModal = false" class="text-cyan-400 hover:underline">
                    Cadastre-se agora.
                </a>
            </div>
        </div>
    </form>
</div> -->
      </div> 
    </div> 
  </div> 


   

  <div class="md:hidden absolute my-3 top-full left-0 w-full bg-transparent"> 
    <div class="mx-auto px-4 py-2 flex justify-center gap-x-2 sm:gap-x-4 md:gap-x-6 lg:gap-x-8 overflow-x-auto" >

            
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=filmes" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        Filmes
      </a>
          
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=shows" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        Shows
      </a>
          
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=standup" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        Standup
      </a>
          
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=culturais" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        + Cultura
      </a>
        </div>
  </div>
</nav>



<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>SececPlay</title>

        <!-- Fontes, Tailwind e Alpine via CDN -->
        <link rel="preconnect" href="https://fonts.bunny.net" />
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
        <script src="https://cdn.tailwindcss.com"></script>
        <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body class="bg-gray-900 text-white font-sans">

    
            <nav x-data="{ userMenu: false, mobileMenu: false, showLoginModal: false } "
     class="bg-gray-800 text-white fixed top-0 left-0 w-full z-50 shadow">  

  <div class="container mx-auto px-8 py-4 flex items-center justify-between">
    <div class="flex items-center space-x-8">
      <div class="text-2xl font-bold">SececPlay</div>

      
      <div class="hidden md:flex space-x-4">
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=filmes"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            Filmes
          </a>
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=shows"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            Shows
          </a>
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=standup"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            Standup
          </a>
                  <a 
            href="http://www.favelacriativa.rj.gov.br/productions?filter=culturais"
            class="px-4 py-2 rounded-lg transition hover:bg-sky-900 text-gray-200"
          >
            + Cultura
          </a>
              </div>
    </div>

    <div class="flex items-center space-x-4">
      <!-- <button 
        @click="showLoginModal = true"
        class="px-5 py-2 bg-cyan-700 rounded-lg hover:bg-cyan-900 transition"
      >
        Entrar
      </button> -->
    </div>
  </div>


  <!-- 
  <div x-cloak>
    <div 
      x-show="showLoginModal" 
      x-transition.opacity
      class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
      <div class="relative text-white bg-gray-800 rounded-lg shadow-lg w-full max-w-md p-6">
        <button 
          @click="showLoginModal = false" 
          class="absolute top-2 right-4 text-gray-300 hover:text-white text-xl"
        >
          &times;
        </button>

        <!-- <div class="w-full max-w-md mx-auto text-white rounded-lg p-6 space-y-6">
    <h2 class="text-2xl font-bold text-center">Entrar</h2>

    <form method="POST" action="http://www.favelacriativa.rj.gov.br/login" class="space-y-4">
        <input type="hidden" name="_token" value="1Wp0Rb4NdppJfndmgmGpVe952lw6HAzxni9BOZ8L" autocomplete="off">        <input type="hidden" name="source" value="login"/>
          <div>
            <label for="email" class="block text-sm font-semibold mb-1">Email</label>
            <input type="email" name="email" id="email" required
                class="w-full px-4 py-2 rounded bg-gray-900 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition" />
                            </div>
        <div>
            <label for="password" class="block text-sm font-semibold mb-1">Senha</label>
            <input type="password" name="password" id="password" required
                class="w-full px-4 py-2 rounded bg-gray-900 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition" />
                    </div>

        
       <div class="flex flex-col md:items-center md:justify-between gap-4  mt-6 w-full"> -->

            <!-- Botão Entrar -->
            <!-- <div class="w-full">
                <button type="submit"
                    class="w-full bg-cyan-700 hover:bg-cyan-900 text-white font-semibold py-3 px-6 rounded transition">
                    Entrar
                </button>
            </div> -->

            <!-- Lembre-se de mim e Esqueceu a senha -->
            <!-- <div class="flex flex-col items-center justify-between gap-2 md:gap-6 text-sm text-gray-400 w-full md:w-auto">

                <a href="{.{ route('password.request') }.}" class="text-cyan-400 hover:underline">
                    Esqueceu a senha?
                </a>
                
                <label class="items-center gap-2">
                    <input type="checkbox"
                        class="form-checkbox bg-gray-800 border-gray-600 text-cyan-600 focus:ring-cyan-500">
                    Lembre-se de mim
                </label>
            </div> -->

            <!-- Cadastro -->
            <!-- <div class="text-sm text-gray-400 text-center w-full md:w-auto">
                Novo por aqui?
                <a href="#email" @click="showLoginModal = false" class="text-cyan-400 hover:underline">
                    Cadastre-se agora.
                </a>
            </div>
        </div>
    </form>
</div> -->
      </div> 
    </div> 
  </div> 


   

  <div class="md:hidden absolute my-3 top-full left-0 w-full bg-transparent"> 
    <div class="mx-auto px-4 py-2 flex justify-center gap-x-2 sm:gap-x-4 md:gap-x-6 lg:gap-x-8 overflow-x-auto" >

            
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=filmes" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        Filmes
      </a>
          
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=shows" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        Shows
      </a>
          
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=standup" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        Standup
      </a>
          
      <a href="http://www.favelacriativa.rj.gov.br/productions?filter=culturais" class=" flex-shrink-0 rounded-xl px-3 py-1 
      transition bg-gray-600 text-gray-200 hover:bg-sky-900 
      text-xs sm:text-sm md:text-base lg:text-lg">
        + Cultura
      </a>
        </div>
  </div>
</nav>

    
    
    <main class="flex-1 pt-[100px] mt-[10%] md:mt-0">
        <main>
    <div class="">

        
                    <div class="carousel-container mb-8">
    <h2 class="text-white text-2xl font-bold mb-4 px-4">Novidades</h2>

    <div class="relative group">
        <!-- Botão Anterior -->
        <button
            type="button"
            class="carousel-btn carousel-btn-prev absolute left-2 top-1/2 transform -translate-y-1/2 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            aria-label="Anterior"
        >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
        </button>

        <!-- Carrossel -->
        <div class="carousel-wrapper overflow-hidden px-4">
            <div class="carousel-track flex transition-transform duration-500 ease-in-out" style="transform: translateX(0);">
                                                        <div class="carousel-item flex-none w-48 mr-2 cursor-pointer">
                        <a href="http://www.favelacriativa.rj.gov.br/productions/asdfyaerfg" class="group block rounded-lg overflow-hidden relative transition-transform duration-300 hover:scale-105">
                            <img
                                src="http://www.favelacriativa.rj.gov.br/media/productions/3/thumbnail/00AoWLblXTZ8wUuM2oVYM3DYuf8G161AWy1hnArX.png"
                                alt="asdfyaerfg"
                                class="w-full h-28 object-cover"
                                loading="lazy"
                            >

                            <!-- Overlay gradiente -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="absolute bottom-2 left-2 right-2">
                                    <h3 class="text-white text-sm font-semibold truncate">asdfyaerfg</h3>
                                                                            <p class="text-gray-300 text-xs">2h 15min</p>
                                                                    </div>
                            </div>

                            <!-- Botão Play -->
                            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="bg-white bg-opacity-90 rounded-full p-3 transform scale-75 group-hover:scale-100 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-black ml-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M8 5v14l11-7z" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </div>
                                                        <div class="carousel-item flex-none w-48 mr-2 cursor-pointer">
                        <a href="http://www.favelacriativa.rj.gov.br/productions/minha-mae-e-uma-peca-o-filme" class="group block rounded-lg overflow-hidden relative transition-transform duration-300 hover:scale-105">
                            <img
                                src="http://www.favelacriativa.rj.gov.br/media/productions/1/thumbnail/sGP1SjFrq6YnMf3cWCsbQ5QenauetA0sU5Dg0VrX.jpg"
                                alt="Minha Mãe é uma Peça: O Filme"
                                class="w-full h-28 object-cover"
                                loading="lazy"
                            >

                            <!-- Overlay gradiente -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="absolute bottom-2 left-2 right-2">
                                    <h3 class="text-white text-sm font-semibold truncate">Minha Mãe é uma Peça: O Filme</h3>
                                                                            <p class="text-gray-300 text-xs">2h 15min</p>
                                                                    </div>
                            </div>

                            <!-- Botão Play -->
                            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="bg-white bg-opacity-90 rounded-full p-3 transform scale-75 group-hover:scale-100 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-black ml-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M8 5v14l11-7z" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </div>
                            </div>
        </div>

        <!-- Botão Próximo -->
        <button
            type="button"
            class="carousel-btn carousel-btn-next absolute right-2 top-1/2 transform -translate-y-1/2 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            aria-label="Próximo"
        >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>
</div>

<style>
    .carousel-container {
        position: relative;
    }

    .carousel-item {
        min-width: 192px; /* w-48 */
    }

    @media (max-width: 768px) {
        .carousel-item {
            min-width: 160px;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const carousels = document.querySelectorAll('.carousel-container');

        carousels.forEach((container, index) => {
            const prevBtn = container.querySelector('.carousel-btn-prev');
            const nextBtn = container.querySelector('.carousel-btn-next');
            const track = container.querySelector('.carousel-track');
            const items = container.querySelectorAll('.carousel-item');

            let position = 0;
            const itemWidth = items[0]?.offsetWidth + parseInt(getComputedStyle(items[0]).marginRight) || 200;
            const visibleItems = Math.floor(container.offsetWidth / itemWidth);
            const maxPosition = Math.max(0, (items.length - visibleItems) * itemWidth);

            prevBtn.addEventListener('click', () => {
                position = Math.max(0, position - itemWidth * 3);
                track.style.transform = `translateX(-${position}px)`;
            });

            nextBtn.addEventListener('click', () => {
                position = Math.min(maxPosition, position + itemWidth * 3);
                track.style.transform = `translateX(-${position}px)`;
            });

            // Optional: handle resize for responsiveness
            window.addEventListener('resize', () => {
                const visibleNow = Math.floor(container.offsetWidth / itemWidth);
                const newMaxPos = Math.max(0, (items.length - visibleNow) * itemWidth);
                if (position > newMaxPos) {
                    position = newMaxPos;
                    track.style.transform = `translateX(-${position}px)`;
                }
            });
        });
    });
</script>
        
        
                    <div class="carousel-container mb-8">
    <h2 class="text-white text-2xl font-bold mb-4 px-4">Mais Assistidos</h2>

    <div class="relative group">
        <!-- Botão Anterior -->
        <button
            type="button"
            class="carousel-btn carousel-btn-prev absolute left-2 top-1/2 transform -translate-y-1/2 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            aria-label="Anterior"
        >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
        </button>

        <!-- Carrossel -->
        <div class="carousel-wrapper overflow-hidden px-4">
            <div class="carousel-track flex transition-transform duration-500 ease-in-out" style="transform: translateX(0);">
                                                        <div class="carousel-item flex-none w-48 mr-2 cursor-pointer">
                        <a href="http://www.favelacriativa.rj.gov.br/productions/minha-mae-e-uma-peca-o-filme" class="group block rounded-lg overflow-hidden relative transition-transform duration-300 hover:scale-105">
                            <img
                                src="http://www.favelacriativa.rj.gov.br/media/productions/1/thumbnail/sGP1SjFrq6YnMf3cWCsbQ5QenauetA0sU5Dg0VrX.jpg"
                                alt="Minha Mãe é uma Peça: O Filme"
                                class="w-full h-28 object-cover"
                                loading="lazy"
                            >

                            <!-- Overlay gradiente -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="absolute bottom-2 left-2 right-2">
                                    <h3 class="text-white text-sm font-semibold truncate">Minha Mãe é uma Peça: O Filme</h3>
                                                                            <p class="text-gray-300 text-xs">2h 15min</p>
                                                                    </div>
                            </div>

                            <!-- Botão Play -->
                            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="bg-white bg-opacity-90 rounded-full p-3 transform scale-75 group-hover:scale-100 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-black ml-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M8 5v14l11-7z" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </div>
                                                        <div class="carousel-item flex-none w-48 mr-2 cursor-pointer">
                        <a href="http://www.favelacriativa.rj.gov.br/productions/asdfyaerfg" class="group block rounded-lg overflow-hidden relative transition-transform duration-300 hover:scale-105">
                            <img
                                src="http://www.favelacriativa.rj.gov.br/media/productions/3/thumbnail/00AoWLblXTZ8wUuM2oVYM3DYuf8G161AWy1hnArX.png"
                                alt="asdfyaerfg"
                                class="w-full h-28 object-cover"
                                loading="lazy"
                            >

                            <!-- Overlay gradiente -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="absolute bottom-2 left-2 right-2">
                                    <h3 class="text-white text-sm font-semibold truncate">asdfyaerfg</h3>
                                                                            <p class="text-gray-300 text-xs">2h 15min</p>
                                                                    </div>
                            </div>

                            <!-- Botão Play -->
                            <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
                                <div class="bg-white bg-opacity-90 rounded-full p-3 transform scale-75 group-hover:scale-100 transition-transform duration-300">
                                    <svg class="w-6 h-6 text-black ml-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path d="M8 5v14l11-7z" />
                                    </svg>
                                </div>
                            </div>
                        </a>
                    </div>
                            </div>
        </div>

        <!-- Botão Próximo -->
        <button
            type="button"
            class="carousel-btn carousel-btn-next absolute right-2 top-1/2 transform -translate-y-1/2 z-10 bg-black bg-opacity-50 text-white p-2 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"
            aria-label="Próximo"
        >
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>
</div>

<style>
    .carousel-container {
        position: relative;
    }

    .carousel-item {
        min-width: 192px; /* w-48 */
    }

    @media (max-width: 768px) {
        .carousel-item {
            min-width: 160px;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const carousels = document.querySelectorAll('.carousel-container');

        carousels.forEach((container, index) => {
            const prevBtn = container.querySelector('.carousel-btn-prev');
            const nextBtn = container.querySelector('.carousel-btn-next');
            const track = container.querySelector('.carousel-track');
            const items = container.querySelectorAll('.carousel-item');

            let position = 0;
            const itemWidth = items[0]?.offsetWidth + parseInt(getComputedStyle(items[0]).marginRight) || 200;
            const visibleItems = Math.floor(container.offsetWidth / itemWidth);
            const maxPosition = Math.max(0, (items.length - visibleItems) * itemWidth);

            prevBtn.addEventListener('click', () => {
                position = Math.max(0, position - itemWidth * 3);
                track.style.transform = `translateX(-${position}px)`;
            });

            nextBtn.addEventListener('click', () => {
                position = Math.min(maxPosition, position + itemWidth * 3);
                track.style.transform = `translateX(-${position}px)`;
            });

            // Optional: handle resize for responsiveness
            window.addEventListener('resize', () => {
                const visibleNow = Math.floor(container.offsetWidth / itemWidth);
                const newMaxPos = Math.max(0, (items.length - visibleNow) * itemWidth);
                if (position > newMaxPos) {
                    position = newMaxPos;
                    track.style.transform = `translateX(-${position}px)`;
                }
            });
        });
    });
</script>
        
        
        <div x-data="carousel()" class="relative overflow-hidden">
  <!-- TRACK que desliza -->
  <div class="flex transition-transform duration-700 ease-in-out"
       :style="`transform: translateX(-${current * 100}%)`">
    <!-- SLIDES -->
    <template x-for="(banner, index) in banners" :key="index">
      <div class="min-w-full h-64 md:h-96 relative">
        <img :src="banner.image"
             :alt="banner.alt"
             class="object-cover w-full h-full"
             loading="lazy" />
        <div class="absolute bottom-5 left-5 bg-black/50 text-white p-3 rounded">
          <h2 class="text-lg md:text-2xl font-bold" x-text="banner.title"></h2>
          <p class="text-sm md:text-base" x-text="banner.subtitle"></p>
        </div>
      </div>
    </template>
  </div>

  <!-- Controles -->
  <button @click="prev()" class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded">‹</button>
  <button @click="next()" class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded">›</button>
</div>

<script>
function carousel() {
  return {
    current: 0,
    banners: [{"image":"http:\/\/www.favelacriativa.rj.gov.br\/banners\/banner1.jpg"},{"image":"http:\/\/www.favelacriativa.rj.gov.br\/banners\/banner2.jpg"},{"image":"http:\/\/www.favelacriativa.rj.gov.br\/banners\/banner3.jpg"}],
    interval: null,

    init() { this.startAuto(); },

    startAuto() {
      this.interval = setInterval(() => this.next(), 5000);
    },

    next() {
      this.current = (this.current + 1) % this.banners.length;
    },

    prev() {
      this.current = (this.current - 1 + this.banners.length) % this.banners.length;
    },

    stopAuto() { clearInterval(this.interval); }
  }
}
</script>

        

        
        
        
        
        
        
        
        
       
    </div>
</main>

<footer class="bottom-0 left-0 right-0 bg-gray-900 text-white p-1 text-center">
    <div class="flex flex-col py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center space-y-4 text-center">
         <div class="flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0">
            <a href="#" class="hover:text-gray-400 transition">Política de Privacidade</a>
            <a href="#" class="hover:text-gray-400 transition">Termos de Uso</a>
            <a href="#" class="hover:text-gray-400 transition">Contato</a>
        </div>
        <p class="text-sm">&copy; 2025 SececPlay - Secretaria de Estado de Cultura e Economia Criativa do Rio de Janeiro.</p>
    </div>
</div>
</footer>    </main>
    </body>
</html>