startwsieci.eu/script.js

// ==========================================================================
// Konfiguracja EmailJS
// ==========================================================================
const EMAILJS_PUBLIC_KEY = "TxpnuzLYOz70x6lLo";
const EMAILJS_SERVICE_ID = "service_ynkmge1";
const EMAILJS_TEMPLATE_ID = "template_vkqg8ch";

document.addEventListener('DOMContentLoaded', () => {
  // Inicjalizacja EmailJS SDK jeśli podano klucz
  if (typeof emailjs !== 'undefined' && EMAILJS_PUBLIC_KEY !== "TWOJ_PUBLIC_KEY") {
    emailjs.init(EMAILJS_PUBLIC_KEY);
  }

  const header = document.getElementById('header');
  const mobileToggle = document.getElementById('mobile-toggle');
  const navMenu = document.getElementById('nav-menu');
  const contactForm = document.getElementById('contact-form');
  const formSuccess = document.getElementById('form-success');
  const formSubmitBtn = document.getElementById('form-submit-btn');

  // 1. Efekt przyklejonego header-a przy przewijaniu
  window.addEventListener('scroll', () => {
    if (window.scrollY > 30) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  });

  // 2. Obsługa nawigacji mobilnej
  if (mobileToggle && navMenu) {
    mobileToggle.addEventListener('click', () => {
      navMenu.classList.toggle('active');
      const isExpanded = navMenu.classList.contains('active');
      mobileToggle.setAttribute('aria-expanded', isExpanded);
    });

    document.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => {
        navMenu.classList.remove('active');
      });
    });
  }

  // 3. Wysyłka formularza kontaktowego przez EmailJS
  if (contactForm) {
    contactForm.addEventListener('submit', (e) => {
      e.preventDefault();

      const name = document.getElementById('name').value.trim();
      const email = document.getElementById('email').value.trim();
      const phone = document.getElementById('phone') ? document.getElementById('phone').value.trim() : '';
      const message = document.getElementById('message').value.trim();
      const rodo = document.getElementById('rodo');

      if (!name || !email || !phone || !message) {
        alert('Proszę wypełnić wszystkie wymagane pola.');
        return;
      }

      if (rodo && !rodo.checked) {
        alert('Wymagana jest akceptacja zgody na przetwarzanie danych osobowych (RODO).');
        return;
      }

      formSubmitBtn.disabled = true;
      formSubmitBtn.innerText = 'Wysyłanie...';

      // Jeśli klucze są ustawione, wysyłamy przez EmailJS
      if (typeof emailjs !== 'undefined' && EMAILJS_PUBLIC_KEY !== "TWOJ_PUBLIC_KEY") {
        emailjs.sendForm(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, contactForm)
          .then(() => {
            formSubmitBtn.style.display = 'none';
            formSuccess.style.display = 'block';
            contactForm.reset();
          })
          .catch((error) => {
            console.error('Błąd wysyłania EmailJS:', error);
            alert('Wystąpił błąd podczas wysyłania wiadomości. Spróbuj ponownie.');
            formSubmitBtn.disabled = false;
            formSubmitBtn.innerText = 'Wyślij zapytanie o bezpłatną wycenę';
          });
      } else {
        // Tryb demonstracyjny (gdy klucze nie są jeszcze podmienione)
        setTimeout(() => {
          formSubmitBtn.style.display = 'none';
          formSuccess.style.display = 'block';
          contactForm.reset();
        }, 1000);
      }
    });
  }

  // 4. Subtelne animacje pojawiania się przy skrolowaniu
  const observerOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.15
  };

  const observer = new IntersectionObserver((entries, obs) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
        obs.unobserve(entry.target);
      }
    });
  }, observerOptions);

  const animatedElements = document.querySelectorAll('.service-card, .why-card, .stat-card');
  animatedElements.forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(20px)';
    el.style.transition = 'all 0.5s ease-out';
    observer.observe(el);
  });
});