const header = document.getElementById('header');
const heroBg = document.getElementById('heroBg');
const mobileToggle = document.getElementById('mobileToggle');
const mobileMenu = document.getElementById('mobileMenu');
const contactForm = document.getElementById('contactForm');
const submitBtn = document.getElementById('submitBtn');
const revealElements = document.querySelectorAll('.reveal, .feature-box, .product-card, .about-card, .about-content, .contact-card, .contact-form, .map-card');

window.addEventListener('scroll', () => {
  header.classList.toggle('scrolled', window.scrollY > 30);
  heroBg.style.transform = `translateY(${window.scrollY * 0.15}px)`;
});

mobileToggle.addEventListener('click', () => {
  mobileToggle.classList.toggle('open');
  mobileMenu.classList.toggle('open');
});

document.querySelectorAll('.mobile-menu a, .desktop-nav a').forEach(link => {
  link.addEventListener('click', () => {
    mobileToggle.classList.remove('open');
    mobileMenu.classList.remove('open');
  });
});

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  },
  { threshold: 0.18 }
);

revealElements.forEach(el => observer.observe(el));

contactForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  const nameField = document.getElementById('name');
  const emailField = document.getElementById('email');
  const messageField = document.getElementById('message');

  const name = nameField ? nameField.value.trim() : '';
  const email = emailField ? emailField.value.trim() : '';
  const message = messageField ? messageField.value.trim() : '';

  submitBtn.classList.add('loading');
  submitBtn.disabled = true;

  try {
    const resp = await fetch('http://localhost:5000/send-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        name,
        email,
        // backend /send-email expects these keys
        phone: '',
        oiltype: '',
        address: message,
      }),
    });

    if (!resp.ok) {
      const err = await resp.json().catch(() => ({}));
      throw new Error(err.message || `Request failed with status ${resp.status}`);
    }

    submitBtn.textContent = 'Message Sent';
    contactForm.reset();
  } catch (e) {
    console.error(e);
    submitBtn.textContent = 'Send Failed';
    setTimeout(() => {
      submitBtn.textContent = 'Send Message';
    }, 2000);
  } finally {
    submitBtn.classList.remove('loading');
    submitBtn.disabled = false;
  }
});