(() => {
  'use strict';

  const header = document.querySelector('.site-header');
  const backToTop = document.querySelector('.back-to-top');
  const menuToggle = document.querySelector('.menu-toggle');
  const mobilePanel = document.querySelector('.mobile-panel');
  const menuIcon = menuToggle?.querySelector('i');

  const onScroll = () => {
    const y = window.scrollY;
    header?.classList.toggle('scrolled', y > 24);
    backToTop?.classList.toggle('visible', y > 500);
  };

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  const setMenuState = (open) => {
    mobilePanel?.classList.toggle('open', open);
    document.body.classList.toggle('menu-open', open);
    menuToggle?.setAttribute('aria-expanded', String(open));
    if (menuIcon) {
      menuIcon.className = open ? 'bi bi-x-lg' : 'bi bi-list';
    }
  };

  menuToggle?.addEventListener('click', () => {
    setMenuState(!mobilePanel?.classList.contains('open'));
  });

  mobilePanel?.querySelectorAll('a').forEach((link) => {
    link.addEventListener('click', () => setMenuState(false));
  });

  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') setMenuState(false);
  });

  backToTop?.addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });

  // Add the active state to the current page.
  const currentFile = window.location.pathname.split('/').pop() || 'index.html';
  document.querySelectorAll('[data-nav]').forEach((link) => {
    const href = link.getAttribute('href') || '';
    if (href === currentFile || (currentFile.startsWith('project-') && href === 'projects.html')) {
      link.classList.add('active');
      link.setAttribute('aria-current', 'page');
    }
  });

  // Scroll reveal observer.
  const revealObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    });
  }, { threshold: 0.13, rootMargin: '0px 0px -40px 0px' });

  document.querySelectorAll('.reveal').forEach((element) => revealObserver.observe(element));

  // Animated counters.
  const animateCounter = (element) => {
    const target = Number(element.dataset.counter || 0);
    const suffix = element.dataset.suffix || '';
    const duration = 1300;
    const start = performance.now();

    const update = (now) => {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      element.textContent = `${Math.round(target * eased)}${suffix}`;
      if (progress < 1) requestAnimationFrame(update);
    };

    requestAnimationFrame(update);
  };

  const counterObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (!entry.isIntersecting) return;
      animateCounter(entry.target);
      observer.unobserve(entry.target);
    });
  }, { threshold: .6 });

  document.querySelectorAll('[data-counter]').forEach((counter) => counterObserver.observe(counter));

  // Process interaction.
  const steps = [...document.querySelectorAll('.process-step')];
  const panel = document.querySelector('.process-panel');
  const processContent = {
    discovery: {
      number: '01',
      title: 'Discovery',
      copy: 'Understanding the business, audience, objectives, content, requirements, success criteria, and practical constraints before design begins.'
    },
    design: {
      number: '02',
      title: 'Design',
      copy: 'Creating the content hierarchy, wireframes, responsive interface direction, visual system, and focused calls to action.'
    },
    development: {
      number: '03',
      title: 'Development',
      copy: 'Building clean, responsive, accessible, and maintainable interfaces with dependable front-end behaviour across devices.'
    },
    launch: {
      number: '04',
      title: 'Launch',
      copy: 'Testing, performance refinement, deployment, handover, and practical support so the website is ready for real use.'
    }
  };

  steps.forEach((step) => {
    step.addEventListener('click', () => {
      const key = step.dataset.process;
      const data = processContent[key];
      if (!data || !panel) return;
      steps.forEach((item) => item.classList.remove('active'));
      step.classList.add('active');
      panel.innerHTML = `
        <span class="section-label">${data.number} — ${data.title}</span>
        <h3 class="display-5 fw-bold mb-3">${data.title}</h3>
        <p class="lead-copy mb-0">${data.copy}</p>
      `;
    });
  });

  // Dynamic year.
  document.querySelectorAll('[data-year]').forEach((element) => {
    element.textContent = new Date().getFullYear();
  });
})();
