Initial AI-generated site

script.js

@@ -0,0 +1,221 @@
+(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'
+        });
+      }
+    });
+  });
+
+})();