emaillion-group/script.js

(function() {
  'use strict';

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

  // Intersection Observer for reveal animations
  const revealElements = document.querySelectorAll('.reveal');
  
  if ('IntersectionObserver' in window && !prefersReducedMotion) {
    const revealObserver = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          revealObserver.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    });

    revealElements.forEach(el => revealObserver.observe(el));
  } else {
    revealElements.forEach(el => el.classList.add('visible'));
  }

  // 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 navigation toggle
  const navToggle = document.querySelector('.nav-toggle');
  const navLinks = document.querySelector('.nav-links');

  if (navToggle && navLinks) {
    navToggle.addEventListener('click', () => {
      const isOpen = navLinks.classList.toggle('open');
      navToggle.setAttribute('aria-expanded', isOpen);
      
      const spans = navToggle.querySelectorAll('span');
      if (isOpen) {
        spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
        spans[1].style.opacity = '0';
        spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
        document.body.style.overflow = 'hidden';
      } else {
        spans[0].style.transform = '';
        spans[1].style.opacity = '';
        spans[2].style.transform = '';
        document.body.style.overflow = '';
      }
    });

    navLinks.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        navLinks.classList.remove('open');
        navToggle.setAttribute('aria-expanded', 'false');
        document.body.style.overflow = '';
        const spans = navToggle.querySelectorAll('span');
        spans[0].style.transform = '';
        spans[1].style.opacity = '';
        spans[2].style.transform = '';
      });
    });

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && navLinks.classList.contains('open')) {
        navLinks.classList.remove('open');
        navToggle.setAttribute('aria-expanded', 'false');
        navToggle.focus();
        document.body.style.overflow = '';
        const spans = navToggle.querySelectorAll('span');
        spans[0].style.transform = '';
        spans[1].style.opacity = '';
        spans[2].style.transform = '';
      }
    });
  }

  // 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();
        const headerHeight = header.offsetHeight;
        const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;
        
        window.scrollTo({
          top: targetPosition,
          behavior: prefersReducedMotion ? 'auto' : 'smooth'
        });
      }
    });
  });

  // Form validation and submission
  const contactForm = document.querySelector('.contact-form');
  
  if (contactForm) {
    const formStatus = contactForm.querySelector('.form-status');
    const nameInput = contactForm.querySelector('#name');
    const phoneInput = contactForm.querySelector('#phone');
    const emailInput = contactForm.querySelector('#email');

    function validateField(input, errorId, validationFn, errorMessage) {
      const errorEl = document.getElementById(errorId);
      const isValid = validationFn(input.value.trim());
      
      if (!isValid && input.value.trim() !== '') {
        input.classList.add('invalid');
        errorEl.textContent = errorMessage;
        return false;
      } else {
        input.classList.remove('invalid');
        errorEl.textContent = '';
        return isValid || input.value.trim() === '';
      }
    }

    function validateName(value) {
      return value.length >= 2;
    }

    function validatePhone(value) {
      return /^[\d\-+() ]{9,15}$/.test(value);
    }

    function validateEmail(value) {
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    }

    nameInput.addEventListener('blur', () => {
      validateField(nameInput, 'name-error', validateName, 'נא להזין שם מלא');
    });

    phoneInput.addEventListener('blur', () => {
      validateField(phoneInput, 'phone-error', validatePhone, 'נא להזין מספר טלפון תקין');
    });

    emailInput.addEventListener('blur', () => {
      validateField(emailInput, 'email-error', validateEmail, 'נא להזין כתובת דוא"ל תקינה');
    });

    contactForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Clear previous status
      formStatus.className = 'form-status';
      formStatus.textContent = '';

      // Validate all fields
      const isNameValid = validateField(nameInput, 'name-error', validateName, 'נא להזין שם מלא');
      const isPhoneValid = validateField(phoneInput, 'phone-error', validatePhone, 'נא להזין מספר טלפון תקין');
      const isEmailValid = validateField(emailInput, 'email-error', validateEmail, 'נא להזין כתובת דוא"ל תקינה');

      if (!nameInput.value.trim() || !phoneInput.value.trim() || !emailInput.value.trim()) {
        if (!nameInput.value.trim()) {
          document.getElementById('name-error').textContent = 'שדה חובה';
          nameInput.classList.add('invalid');
        }
        if (!phoneInput.value.trim()) {
          document.getElementById('phone-error').textContent = 'שדה חובה';
          phoneInput.classList.add('invalid');
        }
        if (!emailInput.value.trim()) {
          document.getElementById('email-error').textContent = 'שדה חובה';
          emailInput.classList.add('invalid');
        }
        return;
      }

      if (!isNameValid || !isPhoneValid || !isEmailValid) {
        return;
      }

      const submitBtn = this.querySelector('button[type="submit"]');
      const originalText = submitBtn.textContent;
      
      submitBtn.textContent = 'שולח...';
      submitBtn.disabled = true;
      submitBtn.setAttribute('aria-busy', 'true');
      
      // Simulate form submission
      setTimeout(() => {
        formStatus.className = 'form-status success';
        formStatus.textContent = 'הפנייה נשלחה בהצלחה! נחזור אליכם בהקדם.';
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
        submitBtn.setAttribute('aria-busy', 'false');
        
        this.reset();
        
        // Clear error states
        [nameInput, phoneInput, emailInput].forEach(input => {
          input.classList.remove('invalid');
        });
        document.querySelectorAll('.field-error').forEach(el => el.textContent = '');

        // Hide success message after 5 seconds
        setTimeout(() => {
          formStatus.className = 'form-status';
          formStatus.textContent = '';
        }, 5000);
      }, 1500);
    });
  }

})();