script.js

const faders = document.querySelectorAll('.fade-in');

const appearOptions = {
  threshold: 0.3,
  rootMargin: "0px 0px -100px 0px"
};

const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;
    entry.target.classList.add('appear');
    appearOnScroll.unobserve(entry.target);
  });
}, appearOptions);

faders.forEach(fader => {
  appearOnScroll.observe(fader);
});


document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function(e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
});

const tabs = document.querySelectorAll('.tab');
  const panels = document.querySelectorAll('.tab-panel');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const target = tab.dataset.tab;

      tabs.forEach(t => t.classList.remove('active'));
      panels.forEach(p => p.classList.remove('active'));

      tab.classList.add('active');
      document.getElementById(target).classList.add('active');
    });
  });

// for CTA
const form = document.querySelector('form');
if (form) {
  form.addEventListener('submit', function(e) {
    e.preventDefault(); 

    const inputs = form.querySelectorAll('input[required], textarea[required]');
    let hasError = false;

    inputs.forEach(input => {
      if (!input.value.trim()) {
        input.style.borderColor = 'red';
        hasError = true;
      } else {
        input.style.borderColor = '#ccc';
      }
    });

    if (hasError) {
      alert('Please fill in all required fields.');
      return;
    }


    const confirmed = confirm("Are you sure you want to submit this quote request?");
    if (confirmed) {
      form.submit(); 
    }

  });
}



window.addEventListener('load', () => {
  document.querySelectorAll('.fade-in').forEach(el => {
    el.classList.add('appear');
  });


  const header = document.querySelector('header.hero-section');
  if (header) {
    header.style.background = '#002838';
  }
});

const carousel = document.getElementById("carousel");
const images = carousel.getElementsByTagName("img");
const total = images.length;
let angle = 0;

for (let i = 0; i < total; i++) {
  const theta = (360 / total) * i;
  images[i].style.transform = `rotateY(${theta}deg) translateZ(400px)`;
}

document.querySelector(".next").addEventListener("click", () => {
  angle -= 360 / total;
  carousel.style.transform = `rotateY(${angle}deg)`;
});

document.querySelector(".prev").addEventListener("click", () => {
  angle += 360 / total;
  carousel.style.transform = `rotateY(${angle}deg)`;
});