/* Navbar + Footer — shared chrome */

const Navbar = ({ route, goto }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const nav = (r) => { goto(r); setMobileOpen(false); };

  const links = [
    { id: 'inicio', label: 'Inicio' },
    { id: 'servicios', label: 'Servicios' },
    { id: 'nosotros', label: 'Sobre Nosotros' },
    { id: 'contacto', label: 'Contáctenos' },
  ];

  return (
    <header className={`navbar ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <div className="logo" onClick={() => nav('inicio')}>
          <img src="assets/logo-mora-white.png" alt="Mora — Ingeniería y Montajes" className="logo-img" />
          <span className="logo-divider"></span>
          <span className="logo-sub">Desde 1981</span>
        </div>

        <nav className="nav-links">
          {links.map(l => (
            <span key={l.id}
                  className={`nav-link ${route === l.id ? 'active' : ''}`}
                  onClick={() => nav(l.id)}>
              {l.label}
            </span>
          ))}
          <button className="btn btn-primary nav-cta" onClick={() => nav('contacto')}>
            Solicitar Cotización
          </button>
        </nav>

        <button className={`hamburger ${mobileOpen ? 'open' : ''}`}
                onClick={() => setMobileOpen(o => !o)}
                aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className={`mobile-menu ${mobileOpen ? 'open' : ''}`}>
        {links.map(l => (
          <span key={l.id}
                className={`nav-link ${route === l.id ? 'active' : ''}`}
                onClick={() => nav(l.id)}>
            {l.label}
          </span>
        ))}
        <div className="mobile-cta-wrap">
          <button className="btn btn-primary" onClick={() => nav('contacto')}>
            Solicitar Cotización
          </button>
        </div>
      </div>
    </header>
  );
};

const Footer = ({ goto }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="logo">
            <img src="assets/logo-mora-white.png" alt="Mora — Ingeniería y Montajes" className="logo-img" />
          </div>
          <p className="footer-desc">
            Fabricación y montaje en acero inoxidable y carbono. Más de 40 años entregando precisión técnica y solidez a la industria chilena.
          </p>
          <div className="socials">
            <a className="social" href="#" aria-label="LinkedIn"><Icon name="linkedin" size={18} /></a>
            <a className="social" href="#" aria-label="Instagram"><Icon name="instagram" size={18} /></a>
          </div>
        </div>

        <div className="footer-col">
          <h4>Navegación</h4>
          <div className="footer-links">
            <a onClick={() => goto('inicio')}>Inicio</a>
            <a onClick={() => goto('servicios')}>Servicios</a>
            <a onClick={() => goto('nosotros')}>Sobre Nosotros</a>
            <a onClick={() => goto('contacto')}>Contacto</a>
          </div>
        </div>

        <div className="footer-col">
          <h4>Contacto</h4>
          <div className="footer-contact">
            <div className="fc-item">
              <Icon name="phone" size={16} />
              <div>
                <a href="tel:+56992278159">+56 9 9227 8159</a>
                <div className="muted">Juan Carlos Mora</div>
              </div>
            </div>
            <div className="fc-item">
              <Icon name="phone" size={16} />
              <div>
                <a href="tel:+56967316510">+56 9 6731 6510</a>
                <div className="muted">Claudio Mesina</div>
              </div>
            </div>
            <div className="fc-item">
              <Icon name="mail" size={16} />
              <div>
                <a href="mailto:contacto@moramontajes.cl">contacto@moramontajes.cl</a>
              </div>
            </div>
            <div className="fc-item">
              <Icon name="pin" size={16} />
              <div>
                El Trapiche S/N Parcela N°1
                <div className="muted">Región de Valparaíso, Chile</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="footer-bar container">
        <div>© 2025 Mora Montajes. Todos los derechos reservados.</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Navbar, Footer });