script.js

/**
 * AETHERIA AI - LANDING PAGE INTERACTIVE SCRIPT
 */

document.addEventListener('DOMContentLoaded', () => {
  
  /* ------------------------------------------------------------------------
     1. STICKY NAVBAR SCROLL EFFECT
     ------------------------------------------------------------------------ */
  const navbar = document.getElementById('navbar');
  
  const handleScroll = () => {
    if (window.scrollY > 40) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  };

  window.addEventListener('scroll', handleScroll);
  handleScroll();

  /* ------------------------------------------------------------------------
     2. MOBILE MENU DRAWER TOGGLE
     ------------------------------------------------------------------------ */
  const mobileToggle = document.getElementById('mobileToggle');
  const navMenu = document.getElementById('navMenu');
  const toggleIcon = document.getElementById('toggleIcon');
  const navLinks = document.querySelectorAll('.nav-link');

  if (mobileToggle && navMenu) {
    mobileToggle.addEventListener('click', () => {
      navMenu.classList.toggle('open');
      if (navMenu.classList.contains('open')) {
        toggleIcon.classList.remove('fa-bars');
        toggleIcon.classList.add('fa-xmark');
      } else {
        toggleIcon.classList.remove('fa-xmark');
        toggleIcon.classList.add('fa-bars');
      }
    });

    // Close menu when clicking any navigation link
    navLinks.forEach(link => {
      link.addEventListener('click', () => {
        navMenu.classList.remove('open');
        toggleIcon.classList.remove('fa-xmark');
        toggleIcon.classList.add('fa-bars');
      });
    });
  }

  /* ------------------------------------------------------------------------
     3. INTERACTIVE SHOWCASE TABS
     ------------------------------------------------------------------------ */
  const tabBtns = document.querySelectorAll('.tab-btn');
  const tabPanes = document.querySelectorAll('.tab-pane');

  tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const targetTab = btn.getAttribute('data-tab');

      // Update Active Tab Button
      tabBtns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      // Update Active Tab Content Pane
      tabPanes.forEach(pane => {
        if (pane.id === targetTab) {
          pane.classList.add('active');
        } else {
          pane.classList.remove('active');
        }
      });
    });
  });

  /* ------------------------------------------------------------------------
     4. ANIMATED STATS COUNTER ON SCROLL
     ------------------------------------------------------------------------ */
  const statNumbers = document.querySelectorAll('.stat-number');
  let animated = false;

  const startCounters = () => {
    statNumbers.forEach(stat => {
      const targetStr = stat.getAttribute('data-target');
      const target = parseFloat(targetStr);
      const suffix = stat.innerText.replace(/[0-9.]/g, ''); // Extract %, +, K+, etc.
      let current = 0;
      const duration = 1500; // ms
      const stepTime = 30;
      const steps = duration / stepTime;
      const increment = target / steps;

      const timer = setInterval(() => {
        current += increment;
        if (current >= target) {
          current = target;
          clearInterval(timer);
        }
        stat.innerText = (Number.isInteger(target) ? Math.floor(current) : current.toFixed(1)) + suffix;
      }, stepTime);
    });
  };

  // Intersection Observer for triggering counters
  const statsSection = document.getElementById('stats');
  if (statsSection) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !animated) {
          animated = true;
          startCounters();
        }
      });
    }, { threshold: 0.3 });

    observer.observe(statsSection);
  }

});