site-6d217/script.js

(function() {
  'use strict';

  // Reduced motion check
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  // Header scroll effect
  const header = document.querySelector('.site-header');

  function handleScroll() {
    const currentScroll = window.pageYOffset;
    
    if (currentScroll > 50) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  }

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

  // Mobile menu toggle
  const mobileToggle = document.querySelector('.mobile-toggle');
  const navLinks = document.querySelector('.nav-links');
  const navCta = document.querySelector('.nav-cta');

  if (mobileToggle && navLinks) {
    mobileToggle.addEventListener('click', function() {
      const isExpanded = this.getAttribute('aria-expanded') === 'true';
      this.setAttribute('aria-expanded', !isExpanded);
      navLinks.classList.toggle('active');
      if (navCta) {
        navCta.classList.toggle('active');
      }
    });

    // Close menu when clicking a link
    navLinks.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        mobileToggle.setAttribute('aria-expanded', 'false');
        navLinks.classList.remove('active');
        if (navCta) {
          navCta.classList.remove('active');
        }
      });
    });
  }

  // Intersection Observer for animations
  if (!prefersReducedMotion) {
    const observerOptions = {
      root: null,
      rootMargin: '0px 0px -80px 0px',
      threshold: 0.1
    };

    const animateOnScroll = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          
          // Stagger children if it's a grid
          if (entry.target.classList.contains('services-grid')) {
            const cards = entry.target.querySelectorAll('.service-card');
            cards.forEach((card, index) => {
              setTimeout(() => {
                card.classList.add('visible');
              }, index * 100);
            });
          }
        }
      });
    }, observerOptions);

    // Elements to animate
    document.querySelectorAll('.service-card, .areas-map, .contact-info, .contact-form').forEach(el => {
      animateOnScroll.observe(el);
    });

    // Services grid
    const servicesGrid = document.querySelector('.services-grid');
    if (servicesGrid) {
      animateOnScroll.observe(servicesGrid);
    }
  } else {
    // Show everything immediately if reduced motion is preferred
    document.querySelectorAll('.service-card, .areas-map, .contact-info, .contact-form').forEach(el => {
      el.classList.add('visible');
    });
  }

  // Counter animation for stats
  function animateCounter(element, target, duration = 2000) {
    if (prefersReducedMotion) {
      element.textContent = target.toLocaleString('he-IL');
      return;
    }

    const start = 0;
    const startTime = performance.now();

    function update(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const easeOut = 1 - Math.pow(1 - progress, 3);
      const current = Math.floor(start + (target - start) * easeOut);
      
      element.textContent = current.toLocaleString('he-IL');
      
      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  // Observe stats section
  const statsSection = document.querySelector('.stats');
  if (statsSection) {
    const statsObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const counters = entry.target.querySelectorAll('.stat-number[data-target]');
          counters.forEach(counter => {
            const target = parseInt(counter.dataset.target, 10);
            animateCounter(counter, target);
          });
          statsObserver.unobserve(entry.target);
        }
      });
    }, { threshold: 0.5 });

    statsObserver.observe(statsSection);
  }

  // Form handling
  const contactForm = document.getElementById('contactForm');
  if (contactForm) {
    contactForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Reset errors
      this.querySelectorAll('.form-group').forEach(group => {
        group.classList.remove('error');
      });

      // Validate
      let isValid = true;
      const name = this.querySelector('#name');
      const phone = this.querySelector('#phone');
      const service = this.querySelector('#service');

      if (!name.value.trim()) {
        name.closest('.form-group').classList.add('error');
        isValid = false;
      }

      if (!phone.value.trim() || !/^[0-9\-\+\s]{9,}$/.test(phone.value)) {
        phone.closest('.form-group').classList.add('error');
        isValid = false;
      }

      if (!service.value) {
        service.closest('.form-group').classList.add('error');
        isValid = false;
      }

      if (!isValid) {
        // Focus first error field
        const firstError = this.querySelector('.form-group.error input, .form-group.error select');
        if (firstError) {
          firstError.focus();
        }
        return;
      }

      // Submit animation
      const submitBtn = this.querySelector('.btn-submit');
      submitBtn.classList.add('loading');
      submitBtn.disabled = true;

      // Simulate submission (demo only)
      setTimeout(() => {
        submitBtn.classList.remove('loading');
        submitBtn.classList.add('success');
        
        // Reset form after delay
        setTimeout(() => {
          contactForm.reset();
          submitBtn.classList.remove('success');
          submitBtn.disabled = false;
        }, 2000);
      }, 1500);
    });

    // Remove error state on input
    contactForm.querySelectorAll('input, select, textarea').forEach(input => {
      input.addEventListener('input', function() {
        this.closest('.form-group').classList.remove('error');
      });
    });
  }

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;
      
      const target = document.querySelector(targetId);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({
          behavior: prefersReducedMotion ? 'auto' : 'smooth'
        });
      }
    });
  });

})();