/* ============================================================
   PELOTARIS ADVISORY — main.js
   ============================================================ */

(function () {
  'use strict';

  // ── Navbar: cambio de estilo al hacer scroll ──────────────
  const navbar = document.getElementById('navbar');

  function handleNavbarScroll() {
    navbar.classList.toggle('scrolled', window.scrollY > 60);
  }

  window.addEventListener('scroll', handleNavbarScroll, { passive: true });
  handleNavbarScroll(); // run once on load


  // ── Mobile nav toggle ─────────────────────────────────────
  const navToggle = document.getElementById('navToggle');
  const navMenu   = document.getElementById('navMenu');

  function openNav() {
    navMenu.classList.add('open');
    navToggle.classList.add('open');
    navToggle.setAttribute('aria-expanded', 'true');
    document.body.style.overflow = 'hidden';
  }

  function closeNav() {
    navMenu.classList.remove('open');
    navToggle.classList.remove('open');
    navToggle.setAttribute('aria-expanded', 'false');
    document.body.style.overflow = '';
  }

  navToggle.addEventListener('click', () => {
    navMenu.classList.contains('open') ? closeNav() : openNav();
  });

  // Cerrar al hacer click en un enlace
  navMenu.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', closeNav);
  });

  // Cerrar al hacer click fuera del menú
  document.addEventListener('click', (e) => {
    if (navMenu.classList.contains('open') &&
        !navMenu.contains(e.target) &&
        !navToggle.contains(e.target)) {
      closeNav();
    }
  });

  // Cerrar con Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeNav();
  });


  // ── Active nav link según sección visible ─────────────────
  const sections = document.querySelectorAll('section[id]');
  const navLinks  = document.querySelectorAll('.nav-link');

  function updateActiveLink() {
    let current = '';
    sections.forEach(sec => {
      if (window.scrollY >= sec.offsetTop - 120) {
        current = sec.getAttribute('id');
      }
    });
    navLinks.forEach(link => {
      link.classList.toggle(
        'active',
        link.getAttribute('href') === `#${current}`
      );
    });
  }

  window.addEventListener('scroll', updateActiveLink, { passive: true });
  updateActiveLink();


  // ── Scroll-triggered fade-in animations ───────────────────
  const fadeEls = document.querySelectorAll('.fade-in');

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

    fadeEls.forEach(el => observer.observe(el));
  } else {
    // Fallback: mostrar todo sin animación
    fadeEls.forEach(el => el.classList.add('visible'));
  }


  // ── Formulario de contacto ────────────────────────────────
  //
  //  Para envío real, conectá una de estas opciones:
  //    1. Formspree:  cambiá action del <form> por
  //                   "https://formspree.io/f/TU_ID"
  //                   y remové el e.preventDefault().
  //    2. EmailJS:    inicializá emailjs.init() y usá
  //                   emailjs.sendForm() en el handler.
  //    3. Backend:    enviá un fetch/POST a tu propio endpoint.
  //
  const form      = document.getElementById('contactForm');
  const submitBtn = document.getElementById('submitBtn');
  const formAlert = document.getElementById('formAlert');

  if (form) {
    form.addEventListener('submit', (e) => {
      e.preventDefault();

      // Validación mínima
      const nombre  = form.nombre.value.trim();
      const email   = form.email.value.trim();
      const mensaje = form.mensaje.value.trim();

      if (!nombre || !email || !mensaje) {
        showAlert('Por favor completá los campos obligatorios (*).', 'error');
        return;
      }
      if (!isValidEmail(email)) {
        showAlert('Ingresá un email válido.', 'error');
        return;
      }

      // Estado de carga
      submitBtn.disabled = true;
      submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Enviando…';

      // ─── Aquí va tu lógica de envío real ───────────────────
      //  Por ahora simula un envío exitoso después de 1.5s
      setTimeout(() => {
        submitBtn.innerHTML = '<i class="fa-solid fa-check"></i> ¡Mensaje enviado!';
        submitBtn.style.background = '#38A169';
        showAlert('¡Gracias! Tu mensaje fue enviado. Te contactaremos a la brevedad.', 'success');
        form.reset();

        setTimeout(() => {
          submitBtn.innerHTML = '<i class="fa-solid fa-paper-plane"></i> Enviar mensaje';
          submitBtn.style.background = '';
          submitBtn.disabled = false;
          hideAlert();
        }, 5000);
      }, 1500);
      // ───────────────────────────────────────────────────────
    });
  }

  function showAlert(message, type) {
    formAlert.textContent = message;
    formAlert.className   = `form-alert ${type}`;
    formAlert.hidden = false;
    formAlert.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }

  function hideAlert() {
    formAlert.hidden = true;
    formAlert.className = 'form-alert';
  }

  function isValidEmail(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

})();