// ================================================
// LOGINS.PT – MAIN JAVASCRIPT
// ================================================

document.addEventListener('DOMContentLoaded', function () {

  // ---- Topbar hide on scroll ----
  const topbar = document.querySelector('.topbar');
  const header = document.querySelector('.header');
  let lastScroll = 0;

  window.addEventListener('scroll', () => {
    const currentScroll = window.scrollY;

    if (currentScroll > 80) {
      if (header) header.classList.add('scrolled');
      if (topbar) topbar.style.display = 'none';
      if (header) header.style.top = '0';
    } else {
      if (header) header.classList.remove('scrolled');
      if (topbar) topbar.style.display = '';
      if (header) header.style.top = topbar ? topbar.offsetHeight + 'px' : '37px';
    }
    lastScroll = currentScroll;

    // Back to top
    const backBtn = document.getElementById('back-to-top');
    if (backBtn) {
      backBtn.classList.toggle('show', currentScroll > 400);
    }
  });

  // ---- Product Slider (Homepage - 3 Slides with People) ----
  const slides = document.querySelectorAll('.hero-slide');
  const dots = document.querySelectorAll('.slider-dot');
  const prevBtn = document.querySelector('.slider-arrow.prev');
  const nextBtn = document.querySelector('.slider-arrow.next');
  let currentSlide = 0;
  let slideInterval;

  function showSlide(index) {
    if (slides.length === 0) return;
    
    // Cycle checking
    if (index >= slides.length) currentSlide = 0;
    else if (index < 0) currentSlide = slides.length - 1;
    else currentSlide = index;

    // Remove active classes
    slides.forEach(slide => slide.classList.remove('active'));
    dots.forEach(dot => dot.classList.remove('active'));

    // Set active
    slides[currentSlide].classList.add('active');
    if (dots[currentSlide]) dots[currentSlide].classList.add('active');
  }

  function startAutoplay() {
    if (slides.length === 0) return;
    clearInterval(slideInterval);
    slideInterval = setInterval(() => {
      showSlide(currentSlide + 1);
    }, 7000); // 7 seconds per slide
  }

  // Bind dots
  dots.forEach((dot, idx) => {
    dot.addEventListener('click', () => {
      showSlide(idx);
      startAutoplay();
    });
  });

  // Bind arrows
  if (prevBtn) {
    prevBtn.addEventListener('click', () => {
      showSlide(currentSlide - 1);
      startAutoplay();
    });
  }
  if (nextBtn) {
    nextBtn.addEventListener('click', () => {
      showSlide(currentSlide + 1);
      startAutoplay();
    });
  }

  // Initialize Slider
  showSlide(0);
  startAutoplay();

  // ---- Dynamic Promotion Countdown Timer ----
  const countdownEl = document.getElementById('countdown');
  if (countdownEl) {
    // Set deadline to 9 days, 14 hours, 23 minutes, 36 seconds from now
    const targetDate = new Date();
    targetDate.setDate(targetDate.getDate() + 9);
    targetDate.setHours(targetDate.getHours() + 14);
    targetDate.setMinutes(targetDate.getMinutes() + 23);
    targetDate.setSeconds(targetDate.getSeconds() + 36);

    function updateCountdown() {
      const now = new Date().getTime();
      const difference = targetDate.getTime() - now;

      if (difference < 0) {
        countdownEl.innerHTML = "Promoção Terminada!";
        return;
      }

      // Calculate time components
      const days = Math.floor(difference / (1000 * 60 * 60 * 24));
      const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((difference % (1000 * 60)) / 1000);

      // Pad numbers
      const dStr = days < 10 ? '0' + days : days;
      const hStr = hours < 10 ? '0' + hours : hours;
      const mStr = minutes < 10 ? '0' + minutes : minutes;
      const sStr = seconds < 10 ? '0' + seconds : seconds;

      countdownEl.innerHTML = `<span>${dStr}</span> dias <span>${hStr}</span>h <span>${mStr}</span>m <span>${sStr}</span>s`;
    }

    // Run immediately and every second
    updateCountdown();
    setInterval(updateCountdown, 1000);
  }


  // ---- Back to top ----
  const backBtn = document.getElementById('back-to-top');
  if (backBtn) {
    backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
  }

  // ---- Hamburger ----
  // Need to account for dynamic header injected by components.js
  setTimeout(() => {
    const hamburger = document.getElementById('hamburger');
    const navDesktop = document.getElementById('nav-desktop');
    if (hamburger && navDesktop) {
      hamburger.addEventListener('click', () => {
        hamburger.classList.toggle('active');
        navDesktop.classList.toggle('mobile-open');
      });
    }
  }, 300);


  // ---- Particles ----
  const particleContainer = document.getElementById('particles');
  if (particleContainer) {
    createParticles(particleContainer);
  }

  function createParticles(container) {
    const colors = ['rgba(16, 185, 129,0.5)', 'rgba(0,212,255,0.4)', 'rgba(124,58,237,0.4)'];
    for (let i = 0; i < 20; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      const size = Math.random() * 4 + 2;
      p.style.cssText = `
        width: ${size}px;
        height: ${size}px;
        left: ${Math.random() * 100}%;
        background: ${colors[Math.floor(Math.random() * colors.length)]};
        animation-duration: ${Math.random() * 10 + 8}s;
        animation-delay: ${Math.random() * 10}s;
        border-radius: 50%;
      `;
      container.appendChild(p);
    }
  }

  // ---- Domain Search ----
  const domainInput = document.getElementById('domain-input');
  const extSelect = document.getElementById('ext-select');
  const btnSearch = document.getElementById('btn-search');

  if (btnSearch && domainInput) {
    btnSearch.addEventListener('click', () => {
      const domain = domainInput.value.trim();
      const ext = extSelect ? extSelect.value : '.pt';
      if (!domain) {
        domainInput.focus();
        domainInput.style.boxShadow = '0 0 0 2px rgba(239,68,68,0.5)';
        setTimeout(() => { domainInput.style.boxShadow = ''; }, 1000);
        return;
      }
      // Redirect or show results
      showSearchResults(domain, ext);
    });

    domainInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') btnSearch.click();
    });
  }

  function showSearchResults(domain, ext) {
    // Simulate domain check animation
    btnSearch.textContent = 'A verificar...';
    btnSearch.style.opacity = '0.7';
    setTimeout(() => {
      btnSearch.textContent = 'Registar';
      btnSearch.style.opacity = '1';
      alert(`✅ ${domain}${ext} está disponível!\n\nSerá redirecionado para o processo de registo.`);
    }, 1500);
  }

  // ---- Fill domain suggestion ----
  window.fillDomain = function (value) {
    if (domainInput) {
      domainInput.value = value;
      domainInput.focus();
    }
  };

  // ---- FAQ Toggle ----
  window.toggleFaq = function (id) {
    const item = document.getElementById('faq-' + id);
    const answer = document.getElementById('faq-answer-' + id);
    const icon = document.getElementById('faq-icon-' + id);
    if (!item || !answer) return;

    const isActive = item.classList.contains('active');

    // Close all
    document.querySelectorAll('.faq-item').forEach(el => {
      el.classList.remove('active');
    });
    document.querySelectorAll('.faq-answer').forEach(el => {
      el.style.maxHeight = '0';
    });

    if (!isActive) {
      item.classList.add('active');
      answer.style.maxHeight = answer.scrollHeight + 40 + 'px';
    }
  };

  // ---- Pricing Toggle ----
  const billingToggle = document.getElementById('billing-toggle');
  if (billingToggle) {
    billingToggle.addEventListener('change', () => {
      const isAnnual = billingToggle.checked;
      document.querySelectorAll('.price-amount').forEach(el => {
        const monthly = parseFloat(el.dataset.monthly);
        const annual = parseFloat(el.dataset.annual);
        el.textContent = '€' + (isAnnual ? annual : monthly).toFixed(2);
      });

      const labelMonthly = document.getElementById('label-monthly');
      const labelAnnual = document.getElementById('label-annual');
      if (labelMonthly) labelMonthly.style.color = isAnnual ? 'var(--text-muted)' : 'white';
      if (labelAnnual) labelAnnual.style.color = isAnnual ? 'white' : 'var(--text-muted)';
    });
  }

  // ---- Cookie Banner ----
  const cookieBanner = document.getElementById('cookie-banner');
  const btnAccept = document.getElementById('btn-cookie-accept');

  if (cookieBanner) {
    if (!localStorage.getItem('cookies-accepted')) {
      setTimeout(() => cookieBanner.classList.add('show'), 2000);
    }
    if (btnAccept) {
      btnAccept.addEventListener('click', () => {
        localStorage.setItem('cookies-accepted', '1');
        cookieBanner.classList.remove('show');
      });
    }
  }

  // ---- Scroll Reveal ----
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

  document.querySelectorAll('.service-card, .ext-card, .plan-card, .testimonial-card, .why-point, .feature-card').forEach(el => {
    el.classList.add('reveal');
    observer.observe(el);
  });

  // ---- Staggered animations for cards ----
  document.querySelectorAll('.services-grid .service-card').forEach((card, i) => {
    card.style.transitionDelay = (i * 0.05) + 's';
  });
  document.querySelectorAll('.extensions-grid .ext-card').forEach((card, i) => {
    card.style.transitionDelay = (i * 0.03) + 's';
  });

  // ---- Counter animation for stats ----
  function animateCounter(el, target, suffix = '') {
    let start = 0;
    const duration = 2000;
    const step = target / (duration / 16);
    const timer = setInterval(() => {
      start += step;
      if (start >= target) {
        start = target;
        clearInterval(timer);
      }
      el.textContent = Math.floor(start).toLocaleString('pt-PT') + suffix;
    }, 16);
  }

  // Observe stat numbers
  const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const el = entry.target;
        const text = el.textContent;
        if (text.includes('150k')) animateCounter(el, 150, 'k+');
        else if (text.includes('80k')) animateCounter(el, 80, 'k+');
        statsObserver.unobserve(el);
      }
    });
  }, { threshold: 0.5 });

  document.querySelectorAll('.stat-number, .stat-val').forEach(el => statsObserver.observe(el));

  // ---- Active nav highlight ----
  const currentPage = window.location.pathname.split('/').pop();
  document.querySelectorAll('.nav-link').forEach(link => {
    if (link.getAttribute('href') === currentPage) {
      link.style.color = 'white';
    }
  });

  // ---- Smooth anchor scroll ----
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        e.preventDefault();
        const offset = 130;
        const top = target.getBoundingClientRect().top + window.scrollY - offset;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  });

  // ---- Page transition links ----
  document.querySelectorAll('a[href$=".html"]').forEach(link => {
    link.addEventListener('click', function (e) {
      // Allow default navigation
    });
  });

  console.log('🚀 Logins.pt – Site carregado com sucesso!');
});