// 1. LOADER INTRO
window.addEventListener('load', () => {
  setTimeout(() => {
    document.getElementById('site-loader').classList.add('hide');
    initAnimations(); // Lancement GSAP post-loader
  }, 1500);
});

// 2. NAVBAR SCROLL GLASSMORPHISM
const navbar = document.getElementById('navbar');

// Pages with dark hero (inner pages) get a marker class for white-text transparent navbar
if (document.querySelector('.page-hero')) {
  navbar.classList.add('dark-hero-page');
}

// Mark dropdown toggle as active-page when current page is in the dropdown
const currentPage = window.location.pathname.split('/').pop() || 'index.html';
document.querySelectorAll('.nav-dropdown').forEach(dropdown => {
  dropdown.querySelectorAll('.nav-dropdown-menu a').forEach(link => {
    if (link.getAttribute('href') === currentPage) {
      link.classList.add('active');
      dropdown.querySelector('.nav-dropdown-toggle').classList.add('active-page');
    }
  });
});

window.addEventListener('scroll', () => {
  if (window.scrollY > 80) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

// 3. INITIALISATION PARTICLES.JS (index.html seulement)
if (!document.getElementById('particles-js')) { /* skip sur les pages internes */ }
else particlesJS("particles-js", {
  particles: {
    number: { value: 60, density: { enable: true, value_area: 800 } },
    color: { value: "#158b29" },
    shape: { type: "circle" },
    opacity: { value: 0.3, random: true, anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false } },
    size: { value: 4, random: true, anim: { enable: false } },
    line_linked: { enable: true, distance: 150, color: "#1a3b8c", opacity: 0.1, width: 1 },
    move: { enable: true, speed: 0.8, direction: "none", random: true, straight: false, out_mode: "out", bounce: false }
  },
  interactivity: {
    detect_on: "canvas",
    events: { onhover: { enable: true, mode: "grab" }, onclick: { enable: false }, resize: true },
    modes: { grab: { distance: 140, line_linked: { opacity: 0.3 } } }
  },
  retina_detect: true
});

// 4. ANIMATIONS GSAP HERO (Post-loader)
function initAnimations() {
  const heroTimeline = gsap.timeline({ defaults: { ease: 'power3.out', duration: 0.8 } });

  heroTimeline
    .from('.hero-overline',    { y: 20, opacity: 0, duration: 0.5 })
    .from('.hero-h1-line-1',   { y: 40, opacity: 0, duration: 0.8 }, '-=0.2')
    .from('.hero-h1-line-2',   { y: 40, opacity: 0, duration: 0.8 }, '-=0.6')
    .from('.hero-h1-brand',    { scale: 0.9, opacity: 0, duration: 0.8 }, '-=0.6')
    .from('.hero-subtitle',    { y: 20, opacity: 0, duration: 0.7 }, '-=0.4')
    .from('.hero-description', { y: 20, opacity: 0, duration: 0.6 }, '-=0.4')
    .from('.hero-cta-group',   { y: 20, opacity: 0, duration: 0.6 }, '-=0.4')
    .from('.hero-image-wrapper', { x: 50, opacity: 0, duration: 1.0 }, '-=0.8')
    .from('.hero-stat',        { y: 20, opacity: 0, duration: 0.5, stagger: 0.15 }, '-=0.5');
}

// 5. INITIALISATION AOS (Scroll animations)
AOS.init({
  duration: 700,
  easing: 'ease-out-cubic',
  once: true,
  offset: 60,
});

// 6. COMPTEURS ANIMÉS AU SCROLL
const counters = document.querySelectorAll('.counter-value');
const speed = 200; // Vitesse d'incrémentation

const animateCounters = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const counter = entry.target;
      const targetStr = counter.getAttribute('data-target');
      const isPlus = targetStr.includes('+');
      const target = +targetStr.replace('+', '');

      const updateCount = () => {
        const count = +counter.innerText.replace('+', '');
        const inc = target / speed;

        if (count < target) {
          counter.innerText = Math.ceil(count + inc) + (isPlus ? '+' : '');
          setTimeout(updateCount, 20);
        } else {
          counter.innerText = target + (isPlus ? '+' : '');
        }
      };
      updateCount();
      observer.unobserve(counter);
    }
  });
};

const counterObserver = new IntersectionObserver(animateCounters, {
  threshold: 0.5
});

counters.forEach(counter => {
  counterObserver.observe(counter);
});

// 7. DROPDOWN NAVIGATION
const dropdowns = document.querySelectorAll('.nav-dropdown');

dropdowns.forEach(dropdown => {
  const toggle = dropdown.querySelector('.nav-dropdown-toggle');

  toggle.addEventListener('click', (e) => {
    e.stopPropagation();
    const isOpen = dropdown.classList.contains('open');
    // Close all dropdowns
    dropdowns.forEach(d => {
      d.classList.remove('open');
      d.querySelector('.nav-dropdown-toggle').classList.remove('active');
    });
    // Toggle this one
    if (!isOpen) {
      dropdown.classList.add('open');
      toggle.classList.add('active');
    }
  });
});

// Close dropdowns on outside click
document.addEventListener('click', () => {
  dropdowns.forEach(d => {
    d.classList.remove('open');
    d.querySelector('.nav-dropdown-toggle').classList.remove('active');
  });
});

// 8. ACCORDÉON
document.querySelectorAll('.accordion-header').forEach(header => {
  header.addEventListener('click', () => {
    const item = header.closest('.accordion-item');
    const isOpen = item.classList.contains('open');
    // Close all items in the same accordion
    const siblings = item.closest('.accordion').querySelectorAll('.accordion-item');
    siblings.forEach(s => s.classList.remove('open'));
    // Toggle clicked item
    if (!isOpen) item.classList.add('open');
  });
});

// 9. MOBILE HAMBURGER MENU
const mobileToggle = document.querySelector('.nav-mobile-toggle');
const navLinks = document.querySelector('.nav-links');

if (mobileToggle && navLinks) {
  mobileToggle.addEventListener('click', (e) => {
    e.stopPropagation();
    navLinks.classList.toggle('open');
    const icon = mobileToggle.querySelector('i');
    if (navLinks.classList.contains('open')) {
      icon.className = 'ph ph-x';
    } else {
      icon.className = 'ph ph-list';
    }
  });

  document.addEventListener('click', (e) => {
    if (!navLinks.contains(e.target) && !mobileToggle.contains(e.target)) {
      navLinks.classList.remove('open');
      const icon = mobileToggle.querySelector('i');
      if (icon) icon.className = 'ph ph-list';
    }
  });
}
