script.js

document.addEventListener('DOMContentLoaded', function() {
  // Smooth scrolling for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
e.preventDefault();
      const targetId = this.getAttribute('href');
      if(targetId === '#') return;
      
      const targetElement = document.querySelector(targetId);
      if(targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 100,
          behavior: 'smooth'
        });
      }
    });
  });
  
  // Handle initial hash in URL
  if(window.location.hash) {
    const target = document.querySelector(window.location.hash);
    if(target) {
      setTimeout(() => {
        window.scrollTo({
          top: target.offsetTop - 100,
          behavior: 'smooth'
        });
      }, 100);
    }
  }
  
  // Free delivery popup
  const hoveredElement = document.querySelector('.hovered-element');
  const freeDeliveryPopup = document.getElementById('freeDeliveryPopup');
  
  if (hoveredElement && freeDeliveryPopup) {
    hoveredElement.addEventListener('click', function() {
      // Hide the original element
      this.style.display = 'none';
      
      // Show the popup
      freeDeliveryPopup.classList.remove('hidden');
      
      // Hide the popup after 4 seconds
      setTimeout(() => {
        freeDeliveryPopup.classList.add('hidden');
        this.style.display = 'block';
      }, 4000);
    });
  }
  
  // Slider functionality
  const slider = document.getElementById('slider');
const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const dotsContainer = document.getElementById('dots');

  let currentIndex = 0;
  let photos = [
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/IMG_20211129_100823-scaled.jpg', caption: 'Pranie tapicerki' },
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/IMG_20211129_133710-scaled.jpg', caption: 'Profesjonalne czyszczenie' },
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/IMG_20220530_102405-1-scaled.jpg', caption: 'Czyszczenie mebli' },
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/IMG_20220604_173045-1-scaled.jpg', caption: 'Efekty przed i po' },
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/inbound5315846421320199128.jpg', caption: 'Głębokie czyszczenie' },
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/inbound4582808579900059862.jpg', caption: 'Odświeżanie mebli' },
    { url: 'https://doczyscimy.pl/wp-content/uploads/2024/02/IMG_20220506_120325.jpg', caption: 'Profesjonalna usługa' }
  ];

  function renderSlider() {
    slider.innerHTML = '';
    
    photos.forEach((photo, index) => {
      const slide = document.createElement('div');
      slide.className = `absolute inset-0 transition-opacity duration-500 ${index === currentIndex ? 'opacity-100' : 'opacity-0'}`;
      
      const img = document.createElement('img');
      img.src = photo.url;
      img.alt = photo.caption || 'Slide image';
      img.className = 'w-full h-full object-cover';
      
      if (photo.caption) {
        const caption = document.createElement('div');
        caption.className = 'absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4 text-center';
        caption.textContent = photo.caption;
        slide.appendChild(caption);
      }
      
      slide.appendChild(img);
      slider.appendChild(slide);
    });

    updateDots();
    feather.replace();
  }

  function updateDots() {
    dotsContainer.innerHTML = '';
    photos.forEach((_, index) => {
      const dot = document.createElement('div');
      dot.className = `w-3 h-3 rounded-full cursor-pointer ${index === currentIndex ? 'bg-gray-800' : 'bg-gray-300'}`;
      dot.addEventListener('click', () => {
        currentIndex = index;
        renderSlider();
      });
      dotsContainer.appendChild(dot);
    });
  }

  function nextSlide() {
    currentIndex = (currentIndex + 1) % photos.length;
    renderSlider();
  }

  function prevSlide() {
    currentIndex = (currentIndex - 1 + photos.length) % photos.length;
    renderSlider();
  }

  // Event listeners
  nextBtn.addEventListener('click', nextSlide);
  prevBtn.addEventListener('click', prevSlide);

  // Keyboard navigation
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') nextSlide();
    if (e.key === 'ArrowLeft') prevSlide();
  });

  // Auto-advance slides every 6 seconds
  const slideInterval = setInterval(nextSlide, 6000);

  // Initial render
  renderSlider();
  
  // FAQ accordion
  const faqButtons = document.querySelectorAll('.bg-white button');
  faqButtons.forEach(button => {
    button.addEventListener('click', function() {
      const content = this.nextElementSibling;
      const icon = this.querySelector('i');
      
      if (content.classList.contains('hidden')) {
        content.classList.remove('hidden');
        icon.setAttribute('data-feather', 'chevron-up');
      } else {
        content.classList.add('hidden');
        icon.setAttribute('data-feather', 'chevron-down');
      }
      feather.replace();
    });
  });
  
  // Contact form handling
  const form = document.getElementById('contactForm');
  const submitText = document.getElementById('submitText');
  const spinner = document.getElementById('spinner');
  const statusEl = document.getElementById('formStatus');
  const endpoint = '/wp-json/custom/v1/contact';
  
  async function handleSubmit(e) {
    e.preventDefault();
    
    // Show loading state
    submitText.classList.add('hidden');
    spinner.classList.remove('hidden');
    statusEl.textContent = '';
    statusEl.className = 'contact-form__status';

    // Get selected service and date
    const serviceSelect = document.getElementById('service');
    const serviceText = serviceSelect.options[serviceSelect.selectedIndex].text;
    const serviceDate = document.getElementById('service-date').value;
    
    const formData = new FormData(form);
    
    // Add service and date info to message
    const originalMessage = formData.get('message') || '';
    const phoneNumber = formData.get('phone') || '';
    formData.set('message', `Usługa: ${serviceText}\nPreferowana data: ${serviceDate}\nTelefon: ${phoneNumber}\n\n${originalMessage}`);
    
    // Validate files
    const files = form.querySelector('input[name="attachment"]').files;
    if (files.length > 3) {
      showError('Możesz dodać maksymalnie 3 zdjęcia');
      resetForm();
      return;
    }

    for (let file of files) {
      if (file.size > 5 * 1024 * 1024) {
        showError(`Plik "${file.name}" jest za duży (max 5MB)`);
        resetForm();
        return;
      }
    }
    
    try {
      const response = await fetch(endpoint, {
        method: 'POST',
        body: formData
      });

      const data = await response.json();

      if (response.ok && data.success) {
        showSuccess('Dziękujemy! Twoja wiadomość została wysłana. Skontaktujemy się z Tobą w ciągu 24 godzin.');
        form.reset();
      } else {
        showError(data.message || 'Wystąpił błąd podczas wysyłania formularza. Spróbuj ponownie.');
      }
    } catch (error) {
      showError('Błąd połączenia. Sprawdź swoje połączenie internetowe i spróbuj ponownie.');
    } finally {
      resetForm();
    }
  }

  function showSuccess(message) {
    statusEl.textContent = message;
    statusEl.classList.add('contact-form__status--success');
  }

  function showError(message) {
    statusEl.textContent = message;
    statusEl.classList.add('contact-form__status--error');
  }

  function resetForm() {
    submitText.classList.remove('hidden');
    spinner.classList.add('hidden');
  }

  form.addEventListener('submit', handleSubmit);
  
  // Initialize calendar icon
  feather.replace();

  // Dynamic file input label
  const fileInput = document.getElementById('attachment');
  fileInput.addEventListener('change', function() {
    const label = this.nextElementSibling;
    if (this.files.length > 0) {
      const fileNames = Array.from(this.files).map(file => file.name).join(', ');
      label.textContent = `Wybrano ${this.files.length} plików: ${fileNames}`;
    } else {
      label.textContent = 'Możesz dodać maksymalnie 3 zdjęcia (do 5MB każde)';
    }
  });
});