// FOLGORE — Shared Nav + Footer + reveal helpers

const { useEffect, useState } = React;

function useReveal(){
  useEffect(() => {
    const els = document.querySelectorAll('[data-reveal]');
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting){
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}
window.useReveal = useReveal;

function Nav({ active = 'home', onNavigate }){
  const [open, setOpen] = useState(false);
  const handle = (e, page) => {
    e.preventDefault();
    setOpen(false);
    if (onNavigate) onNavigate(page);
  };
  // Lock body scroll when menu open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  // Close on ESC
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  const items = [
    { id: 'home', label: 'Inicio', n: '01' },
    { id: 'historia', label: 'Historia', n: '02' },
    { id: 'catalogo', label: 'Catálogo', n: '03' },
    { id: 'innovacion', label: 'Innovación', n: '04' },
    { id: 'contacto', label: 'Contacto', n: '05' },
  ];

  return (
    <React.Fragment>
      <nav className="nav">
        <a href="#" className="brand" onClick={(e) => handle(e, 'home')} data-magnetic>
          <img src="assets/folgore-logo.webp" alt="FOLGORE" style={{ height: 46, width: 'auto', display: 'block' }} />
        </a>
        <div className="links">
          {items.map(it => (
            <a key={it.id} href="#" className={active === it.id ? 'active' : ''} onClick={(e) => handle(e, it.id)}>{it.label}</a>
          ))}
        </div>
        <div className="meta">
          <span className="pulse"></span>
          <span>IT · MX</span>
          <span style={{ opacity: .55 }}>EST. 1985</span>
        </div>
        <button
          className={`nav-burger ${open ? 'is-open' : ''}`}
          onClick={() => setOpen(o => !o)}
          aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
          aria-expanded={open}
        >
          <span className="nav-burger-label">{open ? 'CERRAR' : 'MENU'}</span>
          <span className="nav-burger-icon" aria-hidden="true">
            <span></span>
            <span></span>
          </span>
        </button>
      </nav>

      <div className={`mobile-menu ${open ? 'is-open' : ''}`} aria-hidden={!open}>
        <div className="mobile-menu-inner">
          <ul className="mobile-menu-list">
            {items.map((it, i) => (
              <li key={it.id} style={{ '--i': i }}>
                <a href="#" className={active === it.id ? 'active' : ''} onClick={(e) => handle(e, it.id)}>
                  <span className="mm-num">{it.n}</span>
                  <span className="mm-label">{it.label}</span>
                  <span className="mm-arrow">→</span>
                </a>
              </li>
            ))}
          </ul>
          <div className="mobile-menu-foot">
            <span><span className="pulse"></span> IT · MX</span>
            <span style={{ opacity: .55 }}>EST. 1985</span>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

function Footer({ onNavigate }){
  const go = (e, p) => { e.preventDefault(); onNavigate && onNavigate(p); };
  return (
    <footer className="footer">
      <div className="shell">
        <div className="giant" data-reveal>
          <img src="assets/folgore-logo.webp" alt="FOLGORE" style={{ width: '100%', height: 'auto', display: 'block', maxHeight: '40vh', objectFit: 'contain' }} />
        </div>

        <div className="cols">
          <div>
            <p className="pitch">Eccellenza meccanica italiana — desde Sassuolo, Emilia-Romagna, hacia el mundo. Ingeniería pensada para durar décadas.</p>
            <a href="#" className="btn" data-magnetic data-cursor-label="Escribir" onClick={(e) => go(e,'contacto')} style={{ marginTop: 32 }}>
              <span>Iniciar Conversación</span>
              <span className="arrow">↗</span>
            </a>
          </div>
          <div>
            <h4>Explorar</h4>
            <ul>
              <li><a href="#" onClick={(e) => go(e,'historia')}>Historia</a></li>
              <li><a href="#" onClick={(e) => go(e,'catalogo')}>Catálogo</a></li>
              <li><a href="#" onClick={(e) => go(e,'innovacion')}>Innovación</a></li>
              <li><a href="#" onClick={(e) => go(e,'contacto')}>Contacto</a></li>
            </ul>
          </div>
          <div>
            <h4>Líneas</h4>
            <ul>
              <li><a href="#">Cardio</a></li>
              <li><a href="#">Forza</a></li>
              <li><a href="#">Funzionale</a></li>
              <li><a href="#">Studio Privato</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li>Sede · Sassuolo, IT</li>
              <li>Operaciones MX · GDL</li>
              <li><a href="mailto:hola@folgore.mx">hola@folgore.mx</a></li>
              <li><a href="#">+52 33 0000 0000</a></li>
            </ul>
          </div>
        </div>

        <div className="legal">
          <span>© 2026 FOLGORE Srl. — Tutti i diritti riservati</span>
          <span>Diseño por <a href="https://pixelab.mx" data-cursor-label="Visitar" target="_blank" rel="noopener">Pixelab</a></span>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav;
window.Footer = Footer;