// Modal de Cores globais
window.openColorModal = function() {
  const modal = document.getElementById('color-modal');
  if (modal) modal.classList.add('active');
};

window.selectedColor = 'Rosa';
window.selectedImage = 'assets/patinete-rosa.png';
window.selectedOfferQty = 1;

window.goToCart = function() {
  const qtyInput = document.getElementById('modal-qty-input');
  // Use the offer quantity if selected
  const qty = window.selectedOfferQty || (qtyInput ? qtyInput.value : 1);
  
  if (qty == 2) {
    window.location.href = "https://kodexpert.com.br";
  } else {
    window.location.href = "https://kodexpert.com.br";
  }
};

window.selectOffer = function(qty, price, oldPrice, el) {
  window.selectedOfferQty = qty;
  
  // Highlight selected card
  document.querySelectorAll('.offer-card').forEach(c => c.classList.remove('selected'));
  if(el) el.classList.add('selected');
  
  // Update header prices
  const modalPrice = document.querySelector('.modal-price');
  if(modalPrice) {
    modalPrice.innerHTML = `R$ ${price.toFixed(2).replace('.', ',')} <span class="old-price">R$ ${oldPrice.toFixed(2).replace('.', ',')}</span>`;
  }
};

window.selectModalColor = function(name, src, el) {
  window.selectedColor = name;
  window.selectedImage = src;
  
  // Highlight selected color card
  document.querySelectorAll('.color-list-card').forEach(c => c.classList.remove('selected'));
  if(el) el.classList.add('selected');
  
  // Update header and labels
  const mainModalImg = document.querySelector('.modal-main-img-wrap img');
  const colorNameSpan = document.querySelector('.modal-color-name span');
  const selectedColorName = document.getElementById('selected-color-name');
  
  if (mainModalImg) mainModalImg.src = src;
  if (colorNameSpan) colorNameSpan.textContent = name;
  if (selectedColorName) selectedColorName.textContent = name;
};

(function() {
  // Inicializar Ícones Lucide
  lucide.createIcons();

  // Contagem Regressiva (Timer Fictício para a Oferta Relâmpago)
  function startCountdown(durationInSeconds) {
    let timer = durationInSeconds;
    const displayElements = document.querySelectorAll('#countdown, .scarcity-timer');
    
    const interval = setInterval(() => {
      let hours = parseInt(timer / 3600, 10);
      let minutes = parseInt((timer % 3600) / 60, 10);
      let seconds = parseInt(timer % 60, 10);

      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      const timeString = `${hours}:${minutes}:${seconds}`;
      
      displayElements.forEach(el => {
        if(el.id === 'countdown') {
           el.textContent = timeString;
        } else {
           el.textContent = `⏰ ${timeString}`;
        }
      });

      if (--timer < 0) {
        clearInterval(interval);
        displayElements.forEach(el => {
           el.textContent = "00:00:00";
        });
      }
    }, 1000);
  }

  // 4 horas, 40 minutos em segundos (16800)
  startCountdown(16800);

  // Navegação por Abas Suave (Simples)
  const tabs = document.querySelectorAll('.tab');
  
  tabs.forEach(tab => {
    tab.addEventListener('click', (e) => {
      e.preventDefault();
      
      // Remover active de todas
      tabs.forEach(t => t.classList.remove('active'));
      // Adicionar active na clicada
      tab.classList.add('active');
      
      const targetId = tab.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      
      if (targetElement) {
        // Rolar suavemente até o elemento, considerando o offset do header fixo
        const headerOffset = 100;
        const elementPosition = targetElement.getBoundingClientRect().top;
        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
  
        window.scrollTo({
           top: offsetPosition,
           behavior: "smooth"
        });
      }
    });
  });

  // Highlight de Seção nas Abas durante o Scroll (Opcional, mas melhora UX)
  window.addEventListener('scroll', () => {
    let current = '';
    const sections = document.querySelectorAll('section[id]');
    
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.clientHeight;
      if (pageYOffset >= (sectionTop - 150)) {
        current = section.getAttribute('id');
      }
    });

    tabs.forEach(tab => {
      tab.classList.remove('active');
      if (tab.getAttribute('href').includes(current)) {
        tab.classList.add('active');
      }
    });
  });

  // Lógica do Carrossel de Imagens
  const track = document.getElementById('main-carousel');
  const indicator = document.getElementById('carousel-indicator');
  const btnPrev = document.getElementById('btn-prev');
  const btnNext = document.getElementById('btn-next');
  
  if (track) {
    const slides = track.querySelectorAll('.carousel-slide');
    const totalSlides = slides.length;
    
    // Atualizar indicador de imagem (1/6)
    track.addEventListener('scroll', () => {
      const scrollPosition = track.scrollLeft;
      const slideWidth = track.clientWidth;
      // Adicionamos +1 pois o index começa do zero
      const currentIndex = Math.round(scrollPosition / slideWidth);
      if (indicator) {
        indicator.textContent = `${currentIndex + 1}/${totalSlides}`;
      }
    });

    if (btnNext) {
      btnNext.addEventListener('click', () => {
        track.scrollBy({ left: track.clientWidth, behavior: 'smooth' });
      });
    }

    if (btnPrev) {
      btnPrev.addEventListener('click', () => {
        track.scrollBy({ left: -track.clientWidth, behavior: 'smooth' });
      });
    }
  }

  // Logica do modal
  const closeModalBtn = document.getElementById('close-modal');
  const colorModal = document.getElementById('color-modal');
  if (closeModalBtn && colorModal) {
    closeModalBtn.addEventListener('click', () => {
      colorModal.classList.remove('active');
    });
  }
  
  // Seleção de Cores Antiga removida, agora é inline via selectModalColor

  // Quantidade no modal
  const modalBtnMinus = document.getElementById('modal-btn-minus');
  const modalBtnPlus = document.getElementById('modal-btn-plus');
  const modalQtyInput = document.getElementById('modal-qty-input');
  
  if (modalBtnMinus && modalBtnPlus && modalQtyInput) {
    modalBtnMinus.addEventListener('click', () => {
      let q = parseInt(modalQtyInput.value);
      if (q > 1) modalQtyInput.value = q - 1;
    });
    modalBtnPlus.addEventListener('click', () => {
      let q = parseInt(modalQtyInput.value);
      if (q < 99) modalQtyInput.value = q + 1;
    });
  }
})();