script.js

document.addEventListener('DOMContentLoaded', () => {
  const carousel = document.getElementById('carousel');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const dots = document.querySelector('navigation-dots');
  
  let currentSlide = 0;
  const totalSlides = 5;
  
  // Create slides
  const slides = [
    {
      bg: 'gradient-bg',
      content: `
        <div class="slide-content text-center px-6">
          <h1 class="text-4xl md:text-6xl font-bold mb-6 text-shadow">LOREM MAGAZINE OFICIAL</h1>
          <h2 class="text-2xl md:text-4xl font-bold mb-12 text-shadow">LANÇAMENTO EXCLUSIVO</h2>
          <h3 class="text-3xl md:text-5xl font-black uppercase tracking-wide mb-8">CARMED & COCA-COLA</h3>
          <p class="text-xl md:text-2xl font-semibold">O NOVO SABOR</p>
          <img src="http://static.photos/people/640x360/1" class="w-64 h-64 mx-auto mt-12 rounded-full avatar-ring object-cover">
        </div>
      `
    },
    {
      bg: 'bg-carmed',
      content: `
        <div class="slide-content px-8">
          <h2 class="text-4xl md:text-5xl font-black uppercase mb-8">Carmed & Coca-Cola</h2>
          <p class="text-xl md:text-2xl mb-6 leading-relaxed">
            Descubra o novo sabor inovador que une o tradicional frescor da Coca-Cola com o toque especial do Carmed.
          </p>
          <p class="text-xl md:text-2xl leading-relaxed">
            Uma combinação que promete revolucionar o mercado de bebidas. Prepare-se para uma experiência única e refrescante, perfeita para qualquer ocasião.
          </p>
          <img src="http://static.photos/food/640x360/2" class="w-64 mx-auto mt-12 product-image">
        </div>
      `
    },
    {
      bg: 'bg-coca',
      content: `
        <div class="slide-content text-center px-6">
          <img src="http://static.photos/people/640x360/3" class="w-48 h-48 mx-auto mb-8 rounded-full avatar-ring object-cover">
          <h2 class="text-3xl md:text-4xl font-black uppercase mb-4">Fabiano Lima Vieira</h2>
          <h3 class="text-xl md:text-2xl font-semibold mb-8">Especialista em Marketing Digital e Estrategista de Sucesso</h3>
          <p class="text-lg md:text-xl leading-relaxed">
            Fabiano é reconhecido por transformar ideias em campanhas digitais impactantes com criatividade e eficiência. Atuando em São João de Meriti, conecta marcas ao público com precisão e inovação.
          </p>
        </div>
      `
    },
    {
      bg: 'bg-gradient-to-br from-carmed to-coca',
      content: `
        <div class="slide-content px-8">
          <h2 class="text-3xl md:text-4xl font-black uppercase mb-8">Expertise e Impacto</h2>
          <ul class="space-y-6 text-lg md:text-xl">
            <li class="flex items-start">
              <i data-feather="check-circle" class="mr-4 mt-1 text-white"></i>
              <span>Fabiano domina as tendências digitais, unindo dados e criatividade para gerar resultados expressivos.</span>
            </li>
            <li class="flex items-start">
              <i data-feather="check-circle" class="mr-4 mt-1 text-white"></i>
              <span>Ele lidera projetos que combinam planejamento estratégico, análise e execução.</span>
            </li>
            <li class="flex items-start">
              <i data-feather="check-circle" class="mr-4 mt-1 text-white"></i>
              <span>Sempre focado em objetivos reais para seus clientes.</span>
            </li>
          </ul>
          <div class="mt-12 flex justify-center">
            <img src="http://static.photos/technology/320x240/4" class="w-48 h-48 object-cover rounded-lg shadow-xl">
          </div>
        </div>
      `
    },
    {
      bg: 'bg-dark',
      content: `
        <div class="slide-content text-center px-6">
          <h2 class="text-3xl md:text-4xl font-black uppercase mb-8 text-coca">Convite à Ação</h2>
          <p class="text-xl md:text-2xl mb-12 leading-relaxed">
            Conheça o novo sabor Carmed & Coca-Cola e acompanhe as estratégias digitais que estão conquistando São João de Meriti!
          </p>
          <div class="space-y-6">
            <button class="bg-carmed hover:bg-opacity-90 text-white font-bold py-4 px-8 rounded-full text-lg transition">
              Experimente Agora
            </button>
            <p class="text-lg md:text-xl mt-8">
              Siga Fabiano Lima Vieira para novidades, dicas, e campanhas exclusivas!
            </p>
            <div class="flex justify-center space-x-6 mt-6">
              <a href="#" class="text-white hover:text-coca transition">
                <i data-feather="instagram"></i>
              </a>
              <a href="#" class="text-white hover:text-coca transition">
                <i data-feather="linkedin"></i>
              </a>
              <a href="#" class="text-white hover:text-coca transition">
                <i data-feather="twitter"></i>
              </a>
            </div>
          </div>
        </div>
      `
    }
  ];
  
  // Initialize carousel
  slides.forEach((slide, index) => {
    const slideElement = document.createElement('div');
    slideElement.className = `flex-shrink-0 w-full h-full flex items-center justify-center ${slide.bg} slide-transition`;
    slideElement.innerHTML = slide.content;
    carousel.appendChild(slideElement);
  });
  
  // Update carousel position
  function updateCarousel() {
    carousel.style.transform = `translateX(-${currentSlide * 100}%)`;
    dots.setAttribute('current', currentSlide);
    feather.replace();
  }
  
  // Event listeners
  prevBtn.addEventListener('click', () => {
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    updateCarousel();
  });
  
  nextBtn.addEventListener('click', () => {
    currentSlide = (currentSlide + 1) % totalSlides;
    updateCarousel();
  });
  
  // Keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowLeft') {
      prevBtn.click();
    } else if (e.key === 'ArrowRight') {
      nextBtn.click();
    }
  });
  
  // Initialize
  updateCarousel();
});