LoperBoys/main.js

// LoperBoys - Main JS

document.addEventListener('DOMContentLoaded', function() {

  // --- Navbar scroll effect ---
  const navbar = document.getElementById('navbar');
  window.addEventListener('scroll', function() {
    navbar.classList.toggle('scrolled', window.scrollY > 50);
  });

  // --- Mobile nav toggle ---
  const navToggle = document.getElementById('navToggle');
  const navLinks = document.getElementById('navLinks');
  navToggle.addEventListener('click', function() {
    navToggle.classList.toggle('active');
    navLinks.classList.toggle('active');
  });

  // Close mobile nav on link click
  navLinks.querySelectorAll('a').forEach(function(link) {
    link.addEventListener('click', function() {
      navToggle.classList.remove('active');
      navLinks.classList.remove('active');
    });
  });

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

  // --- Floating CTA visibility ---
  const floatingCta = document.getElementById('floatingCta');
  window.addEventListener('scroll', function() {
    floatingCta.style.opacity = window.scrollY > 400 ? '1' : '0';
    floatingCta.style.pointerEvents = window.scrollY > 400 ? 'auto' : 'none';
  });
  floatingCta.style.opacity = '0';
  floatingCta.style.transition = 'opacity 0.3s ease';

  // --- Phone number formatting ---
  const phoneInput = document.getElementById('phone');
  if (phoneInput) {
    phoneInput.addEventListener('input', function(e) {
      let value = e.target.value.replace(/\D/g, '');
      if (value.length >= 6) {
        value = '(' + value.slice(0,3) + ') ' + value.slice(3,6) + '-' + value.slice(6,10);
      } else if (value.length >= 3) {
        value = '(' + value.slice(0,3) + ') ' + value.slice(3,6);
      }
      e.target.value = value;
    });
  }

  // --- Contact form handling ---
  const contactForm = document.getElementById('contactForm');
  if (contactForm) {
    contactForm.addEventListener('submit', function(e) {
      e.preventDefault();

      const formData = new FormData(contactForm);
      const data = {};
      formData.forEach(function(value, key) {
        data[key] = value;
      });

      // Send via fetch to PHP endpoint (SMTP relay via hMailserver)
      fetch('send-contact.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      })
      .then(function(response) {
        contactForm.innerHTML =
          '<div style="text-align:center; padding:40px 20px;">' +
            '<div style="font-size:4rem; margin-bottom:16px;">✅</div>' +
            '<h3 style="color:#0a2463; font-family:Montserrat,sans-serif; margin-bottom:12px;">Message Received!</h3>' +
            '<p style="color:#3d4f63; font-size:1.05rem;">Thanks for reaching out! We\'ll be in touch soon.</p>' +
            '<p style="color:#3d4f63; margin-top:8px;">For urgent inquiries, please call <a href="tel:2202004022" style="color:#4dc8f5; font-weight:bold;">220-200-4022</a></p>' +
          '</div>';
        contactForm.style.pointerEvents = 'none';
      })
      .catch(function(err) {
        // Fallback: open mailto if server unreachable
        var subject = encodeURIComponent('Quote Request - ' + (data.service || 'General'));
        var body = encodeURIComponent(
          'Name: ' + data.name + '\n' +
          'Phone: ' + data.phone + '\n' +
          'Email: ' + (data.email || 'Not provided') + '\n' +
          'Service: ' + (data.service || 'Not specified') + '\n\n' +
          'Message:\n' + (data.message || 'No message provided.')
        );
        window.location.href = 'mailto:contact@loperboys.com?subject=' + subject + '&body=' + body;
        contactForm.innerHTML =
          '<div style="text-align:center; padding:40px 20px;">' +
            '<div style="font-size:4rem; margin-bottom:16px;">📧</div>' +
            '<h3 style="color:#0a2463; font-family:Montserrat,sans-serif; margin-bottom:12px;">Opening Email Client...</h3>' +
            '<p style="color:#3d4f63;">If your email didn\'t open, just call <a href="tel:2202004022" style="color:#4dc8f5; font-weight:bold;">220-200-4022</a></p>' +
          '</div>';
        contactForm.style.pointerEvents = 'none';
      });
    });
  }

  // --- Dynamic year ---
  document.getElementById('year').textContent = new Date().getFullYear();

  // --- Intersection Observer for animations ---
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.service-card, .why-item, .stat').forEach(function(el) {
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(el);
  });
});