/* Shared navigation with mega-menu — used on all pages */
const { useState: useStateN, useEffect: useEffectN, useRef: useRefN } = React;

/* Catálogo compartido de iconos UI — estilo outline consistente. */
const MARTZ_ICONS = {
  arrowRight: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
  check: <path d="m5 12 4 4L19 6"/>,
  close: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
  info: <><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></>,
  warning: <><path d="M10.3 3.7 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"/><path d="M12 9v4M12 17h.01"/></>,
  alert: <><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 17h.01"/></>,
  mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></>,
  phone: <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.7A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z"/>,
  location: <><path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></>,
  clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
  shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></>,
};
const MartzIcon = ({ name, size = 18, className = '', strokeWidth = 1.8, label }) => (
  <svg className={`martz-icon ${className}`} width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" aria-hidden={label ? undefined : 'true'} role={label ? 'img' : undefined} aria-label={label}>{MARTZ_ICONS[name] || MARTZ_ICONS.info}</svg>
);
window.MartzIcon = MartzIcon;

const CONSENT_KEY = 'martz_cookie_consent';
const consentVersion = () => (window.MartzLegalConfig || {}).consentVersion || '1.0';
window.getCookieConsent = () => { try { const c=JSON.parse(localStorage.getItem(CONSENT_KEY)); return c&&c.version===consentVersion()?c:null; } catch(e){ return null; } };
window.saveCookieConsent = (choices) => { const c={necessary:true,preferences:!!choices.preferences,analytics:!!choices.analytics,marketing:!!choices.marketing,version:consentVersion(),consentedAt:new Date().toISOString()}; localStorage.setItem(CONSENT_KEY,JSON.stringify(c)); window.dispatchEvent(new CustomEvent('martz-consent-change',{detail:c})); return c; };
window.hasCookieConsent = category => category==='necessary' || !!(window.getCookieConsent()||{})[category];
window.resetCookieConsent = () => { localStorage.removeItem(CONSENT_KEY); window.dispatchEvent(new Event('martz-consent-reset')); };
window.openCookieSettings = () => window.dispatchEvent(new Event('martz-open-cookie-settings'));
window.ConsentGate = ({ category, children }) => window.hasCookieConsent(category) ? children : null;

const CookieConsent = () => {
  const existing=window.getCookieConsent();
  const [show,setShow]=useStateN(!existing), [modal,setModal]=useStateN(false);
  const [prefs,setPrefs]=useStateN(existing||{necessary:true,preferences:false,analytics:false,marketing:false});
  const dialogRef=useRefN(null), openerRef=useRefN(null);
  const decide=p=>{window.saveCookieConsent(p);setShow(false);setModal(false)};
  const open=()=>{openerRef.current=document.activeElement;const c=window.getCookieConsent();setPrefs(c||{necessary:true,preferences:false,analytics:false,marketing:false});setModal(true)};
  const close=()=>{setModal(false);setTimeout(()=>openerRef.current&&openerRef.current.focus(),0)};
  useEffectN(()=>{const fn=()=>open();window.addEventListener('martz-open-cookie-settings',fn);return()=>window.removeEventListener('martz-open-cookie-settings',fn)},[]);
  useEffectN(()=>{const fn=()=>{setModal(false);setPrefs({necessary:true,preferences:false,analytics:false,marketing:false});setShow(true)};window.addEventListener('martz-consent-reset',fn);return()=>window.removeEventListener('martz-consent-reset',fn)},[]);
  useEffectN(()=>{if(!modal)return;document.body.style.overflow='hidden';const d=dialogRef.current;const focusables=()=>[...d.querySelectorAll('button,input,a[href]')].filter(x=>!x.disabled);focusables()[0]?.focus();const key=e=>{if(e.key==='Escape')close();if(e.key==='Tab'){const f=focusables(),a=f[0],z=f[f.length-1];if(e.shiftKey&&document.activeElement===a){e.preventDefault();z.focus()}else if(!e.shiftKey&&document.activeElement===z){e.preventDefault();a.focus()}}};window.addEventListener('keydown',key);return()=>{document.body.style.overflow='';window.removeEventListener('keydown',key)}},[modal]);
  const categories=[['necessary','Necesarias','Permiten funciones básicas y guardar tus preferencias.'],['preferences','Preferencias','Recuerdan opciones voluntarias para mejorar la experiencia.'],['analytics','Analíticas','Ayudarían a entender el uso del sitio. Actualmente no hay analítica instalada.'],['marketing','Marketing','Se usarían para publicidad. Actualmente no hay servicios publicitarios instalados.']];
  return <>
    {show&&<section className="cookie-banner" aria-label="Consentimiento de cookies" aria-live="polite"><div><strong>Tu privacidad importa</strong><p>Utilizamos almacenamiento necesario para el funcionamiento del sitio. Con tu permiso, también podemos utilizar tecnologías opcionales para analizar el uso y mejorar la experiencia.</p><a href={`${MB}cookies/`}>Ver política de cookies</a></div><div className="cookie-actions"><button className="btn btn-secondary" onClick={()=>decide({})}>Rechazar opcionales</button><button className="btn btn-secondary" onClick={open}>Configurar</button><button className="btn btn-primary" onClick={()=>decide({preferences:true,analytics:true,marketing:true})}>Aceptar todas</button></div></section>}
    {modal&&<div className="cookie-modal-backdrop" onMouseDown={e=>e.target===e.currentTarget&&close()}><section ref={dialogRef} className="cookie-modal" role="dialog" aria-modal="true" aria-labelledby="cookie-title" aria-describedby="cookie-desc"><header><div><h2 id="cookie-title">Preferencias de privacidad</h2><p id="cookie-desc">Elige qué tecnologías opcionales autorizas.</p></div><button className="cookie-close" onClick={close} aria-label="Cerrar"><MartzIcon name="close" size={22}/></button></header><div className="cookie-categories">{categories.map(([id,name,desc])=><label key={id} className="cookie-category"><span><strong>{name}</strong><small>{desc}</small></span><input type="checkbox" checked={id==='necessary'||!!prefs[id]} disabled={id==='necessary'} onChange={e=>setPrefs({...prefs,[id]:e.target.checked})}/><i aria-hidden="true"/></label>)}</div><footer className="cookie-actions"><button className="btn btn-secondary" onClick={()=>decide({})}>Rechazar opcionales</button><button className="btn btn-secondary" onClick={()=>decide(prefs)}>Guardar preferencias</button><button className="btn btn-primary" onClick={()=>decide({preferences:true,analytics:true,marketing:true})}>Aceptar todas</button></footer></section></div>}
  </>;
};

const LanguageSwitcher = ({ mobile = false }) => {
  const [language,setLanguage]=useStateN(window.MartzI18n ? window.MartzI18n.getLanguage() : 'es');
  useEffectN(()=>{const fn=e=>setLanguage(e.detail.language);window.addEventListener('martz-language-change',fn);return()=>window.removeEventListener('martz-language-change',fn)},[]);
  const choose=l=>{setLanguage(l);window.MartzI18n&&window.MartzI18n.setLanguage(l)};
  return <div className={`language-switcher ${mobile?'mobile-language-switcher':''}`} role="group" aria-label="Idioma / Language"><button type="button" className={language==='es'?'active':''} aria-pressed={language==='es'} onClick={()=>choose('es')}>ES</button><span aria-hidden="true">/</span><button type="button" className={language==='en'?'active':''} aria-pressed={language==='en'} onClick={()=>choose('en')}>EN</button></div>;
};

/* Base path: pages at /pages/ use '../' (default); pages nested deeper
   (e.g. /pages/productos/) set window.MARTZ_BASE = '../../' before this script.
   Existing pages keep the exact same links since MB falls back to '../'. */
const MB = (typeof window !== 'undefined' && window.MARTZ_BASE) ? window.MARTZ_BASE : '../';

const SiteNav = ({ current = 'home' }) => {
  const [scrolled, setScrolled] = useStateN(false);
  const [openMenu, setOpenMenu] = useStateN(null);
  const [mobileOpen, setMobileOpen] = useStateN(false);
  const navRef = useRefN(null);
  const mobileRef = useRefN(null);

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


  useEffectN(() => {
    const onClick = (e) => {
      if (navRef.current && !navRef.current.contains(e.target)) {
        setOpenMenu(null);
        setMobileOpen(false);
      }
    };
    window.addEventListener('click', onClick);
    return () => window.removeEventListener('click', onClick);
  }, []);

  // Close mobile menu on escape key
  useEffectN(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') setMobileOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Lock body scroll when mobile menu is open
  useEffectN(() => {
    if (mobileOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const Chev = () => (
    <svg className="chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
  );

  const solutionsItems = [
    { href: `${MB}pages/soluciones.html#web`, t: 'Desarrollo Web', d: 'Sitios y landing pages de alto impacto', i: <><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></> },
    { href: `${MB}pages/soluciones.html#custom`, t: 'Software a medida', d: 'Plataformas SaaS y sistemas empresariales', i: <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/></> },
    { href: `${MB}pages/soluciones.html#auto`, t: 'Automatización', d: 'Workflows que liberan a tu equipo', i: <><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></> },
    { href: `${MB}pages/soluciones.html#ai`, t: 'IA aplicada', d: 'Asistentes y predicción para tu negocio', i: <><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/></> },
    { href: `${MB}pages/soluciones.html#integ`, t: 'Integraciones', d: 'Conecta CRM, ERP, e-commerce', i: <><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M8.5 7.5l3 7M15.5 7.5l-3 7"/></> },
    { href: `${MB}pages/soluciones.html#mant`, t: 'Mantenimiento IT', d: 'Soporte y evolución continua', i: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></> },
  ];

  const productsItems = [
    { href: `${MB}pages/productos/martz-pos.html`, t: 'Martz POS', d: 'POS e inventario · desde $24.99/mes', i: <><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></> },
    { href: `${MB}pages/productos/martz-hospitality.html`, t: 'Martz Hospitality', d: 'Reservas y hotelería · próximamente', i: <><path d="M2 22V12a10 10 0 0 1 20 0v10"/><path d="M2 14h20M7 14v8M17 14v8"/></> },
    { href: `${MB}pages/productos/martz-health.html`, t: 'Martz Health', d: 'Clínicas y expedientes · próximamente', i: <><path d="M19 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2zM12 7v4M10 9h4"/></> },
  ];

  const industriesItems = [
    { href: `${MB}pages/industrias.html#clinicas`, t: 'Clínicas y salud', d: 'Agenda, historiales, no-show', i: <><path d="M19 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2zM12 7v4M10 9h4"/></> },
    { href: `${MB}pages/industrias.html#restaurantes`, t: 'Restaurantes', d: 'Inventario, ventas, demanda', i: <><path d="M2 22V12a10 10 0 0 1 20 0v10"/></> },
    { href: `${MB}pages/industrias.html#empresas`, t: 'Empresas', d: 'ERP, integraciones, dashboards', i: <><path d="M3 3v18h18"/><rect x="7" y="11" width="3" height="7"/><rect x="12" y="7" width="3" height="11"/></> },
    { href: `${MB}pages/industrias.html#retail`, t: 'Retail & E-commerce', d: 'Multi-canal, stock, pricing', i: <><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></> },
  ];

  const casosItems = [
    { href: `${MB}pages/casos.html#clinicas`, t: 'Clínica con sucursales', d: 'Agenda, expedientes e integraciones', i: <><path d="M19 14H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2zM12 7v4M10 9h4"/></> },
    { href: `${MB}pages/casos.html#restaurantes`, t: 'Cadena de restaurantes', d: 'Inventario, compras y automatización', i: <><path d="M2 22V12a10 10 0 0 1 20 0v10"/></> },
    { href: `${MB}pages/casos.html#empresas`, t: 'Sistemas desconectados', d: 'APIs, flujos y dashboard unificado', i: <><path d="M3 3v18h18"/><rect x="7" y="11" width="3" height="7"/><rect x="12" y="7" width="3" height="11"/></> },
    { href: `${MB}pages/casos.html#retail`, t: 'Comercio omnicanal', d: 'Canales, inventario y precios', i: <><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18M16 10a4 4 0 0 1-8 0"/></> },
  ];

  return (
    <nav ref={navRef} className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href={`${MB}index.html`} style={{ display: 'flex', alignItems: 'center' }}>
          <img src={`${MB}assets/logo-martzlab.png`} alt="martz forge" className="nav-logo" />
        </a>
        <div className="nav-links">
          <a href={`${MB}index.html`} className={`nav-link ${current === 'home' ? 'active' : ''}`}>Inicio</a>

          <span style={{ position: 'relative' }}>
            <span
              className={`nav-link ${current === 'sol' ? 'active' : ''}`}
              aria-expanded={openMenu === 'sol'}
              onClick={(e) => { e.stopPropagation(); setOpenMenu(openMenu === 'sol' ? null : 'sol'); }}
            >
              Soluciones <Chev />
            </span>
            <div className={`megamenu ${openMenu === 'sol' ? 'open' : ''}`} onClick={(e) => e.stopPropagation()}>
              {solutionsItems.map(it => (
                <a key={it.t} className="mega-item" href={it.href} onClick={() => setOpenMenu(null)}>
                  <span className="ic">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{it.i}</svg>
                  </span>
                  <div>
                    <p className="t">{it.t}</p>
                    <p className="d">{it.d}</p>
                  </div>
                </a>
              ))}
              <div className="mega-foot">
                <span>¿No estás seguro qué necesitas?</span>
                <a href={`${MB}pages/contacto.html`}>Habla con nosotros →</a>
              </div>
            </div>
          </span>

          <span style={{ position: 'relative' }}>
            <span
              className={`nav-link ${current === 'productos' ? 'active' : ''}`}
              aria-expanded={openMenu === 'productos'}
              onClick={(e) => { e.stopPropagation(); setOpenMenu(openMenu === 'productos' ? null : 'productos'); }}
            >
              Productos SaaS <Chev />
            </span>
            <div className={`megamenu ${openMenu === 'productos' ? 'open' : ''}`} onClick={(e) => e.stopPropagation()}>
              {productsItems.map(it => (
                <a key={it.t} className="mega-item" href={it.href} onClick={() => setOpenMenu(null)}>
                  <span className="ic">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{it.i}</svg>
                  </span>
                  <div>
                    <p className="t">{it.t}</p>
                    <p className="d">{it.d}</p>
                  </div>
                </a>
              ))}
              <div className="mega-foot">
                <span>Software propio por suscripción</span>
                <a href={`${MB}pages/productos.html`}>Ver todos los productos →</a>
              </div>
            </div>
          </span>

          <a href={`${MB}pages/proceso.html`} className={`nav-link ${current === 'proceso' ? 'active' : ''}`}>Proceso</a>

          <span style={{ position: 'relative' }}>
            <span
              className={`nav-link ${current === 'industrias' ? 'active' : ''}`}
              aria-expanded={openMenu === 'industrias'}
              onClick={(e) => { e.stopPropagation(); setOpenMenu(openMenu === 'industrias' ? null : 'industrias'); }}
            >
              Industrias <Chev />
            </span>
            <div className={`megamenu ${openMenu === 'industrias' ? 'open' : ''}`} style={{ width: 550 }} onClick={(e) => e.stopPropagation()}>
              {industriesItems.map(it => (
                <a key={it.t} className="mega-item" href={it.href} onClick={() => setOpenMenu(null)}>
                  <span className="ic">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{it.i}</svg>
                  </span>
                  <div>
                    <p className="t">{it.t}</p>
                    <p className="d">{it.d}</p>
                  </div>
                </a>
              ))}
              <div className="mega-foot">
                <span>Ver todas las industrias</span>
                <a href={`${MB}pages/industrias.html`}>Industrias completas →</a>
              </div>
            </div>
          </span>

          <span style={{ position: 'relative' }}>
            <span
              className={`nav-link ${current === 'casos' ? 'active' : ''}`}
              aria-expanded={openMenu === 'casos'}
              onClick={(e) => { e.stopPropagation(); setOpenMenu(openMenu === 'casos' ? null : 'casos'); }}
            >
              Casos <Chev />
            </span>
            <div className={`megamenu ${openMenu === 'casos' ? 'open' : ''}`} style={{ width: 560, gridTemplateColumns: '1fr 1fr' }} onClick={(e) => e.stopPropagation()}>
              {casosItems.map(it => (
                <a key={it.t} className="mega-item" href={it.href} onClick={() => setOpenMenu(null)}>
                  <span className="ic">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{it.i}</svg>
                  </span>
                  <div>
                    <p className="t">{it.t}</p>
                    <p className="d">{it.d}</p>
                  </div>
                </a>
              ))}
              <div className="mega-foot">
                <span>Ejemplos de software personalizado</span>
                <a href={`${MB}pages/casos.html`}>Ver escenarios →</a>
              </div>
            </div>
          </span>

          <a href={`${MB}pages/nosotros.html`} className={`nav-link ${current === 'nosotros' ? 'active' : ''}`}>Nosotros</a>
          <a href={`${MB}pages/contacto.html`} className={`nav-link ${current === 'contacto' ? 'active' : ''}`}>Contacto</a>
        </div>
        <div className="nav-cta">
          <LanguageSwitcher />
          <a href={`${MB}pages/contacto.html`} className="btn btn-primary btn-sm desktop-only">Agendar demo
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
          <button
            className="mobile-menu-btn"
            onClick={() => setMobileOpen(true)}
            aria-label="Abrir menú"
            type="button"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="3" y1="6" x2="21" y2="6"/>
              <line x1="3" y1="12" x2="21" y2="12"/>
              <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile Menu Overlay */}
      <div ref={mobileRef} className={`mobile-menu ${mobileOpen ? 'open' : ''}`}>
        <div className="mobile-menu-header">
          <a href={`${MB}index.html`} onClick={() => setMobileOpen(false)}>
            <img src={`${MB}assets/logo-martzlab.png`} alt="martz forge" className="mobile-menu-logo" />
          </a>
          <button className="mobile-menu-close" onClick={() => setMobileOpen(false)} aria-label="Cerrar menú">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"/>
              <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>
        <div className="mobile-menu-inner">
          <a href={`${MB}index.html`} className={`mobile-link ${current === 'home' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Inicio</a>
          <a href={`${MB}pages/soluciones.html`} className={`mobile-link ${current === 'sol' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Soluciones</a>
          <a href={`${MB}pages/productos.html`} className={`mobile-link ${current === 'productos' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Productos SaaS</a>
          <a href={`${MB}pages/proceso.html`} className={`mobile-link ${current === 'proceso' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Proceso</a>
          <a href={`${MB}pages/industrias.html`} className={`mobile-link ${current === 'industrias' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Industrias</a>
          <a href={`${MB}pages/casos.html`} className={`mobile-link ${current === 'casos' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Casos</a>
          <a href={`${MB}pages/nosotros.html`} className={`mobile-link ${current === 'nosotros' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Nosotros</a>
          <a href={`${MB}pages/contacto.html`} className={`mobile-link ${current === 'contacto' ? 'active' : ''}`} onClick={() => setMobileOpen(false)}>Contacto</a>
          <LanguageSwitcher mobile />
          <div className="mobile-cta">
            <a href={`${MB}pages/contacto.html`} className="btn btn-primary" onClick={() => setMobileOpen(false)}>Agendar demo <MartzIcon name="arrowRight" size={15} strokeWidth={2.2} /></a>
          </div>
        </div>
      </div>
    </nav>
  );
};

/* ─── Redes sociales del footer ────────────────────────────────
   Cuando crees cada cuenta, reemplaza el `url: '#'` por tu perfil real
   (ej. url: 'https://www.instagram.com/martzlab'). Los que queden en
   '#' siguen mostrando el icono pero sin enlazar a ningún lado. */
const SOCIALS = [
  { name: 'LinkedIn',  url: 'http://linkedin.com/company/martz-forge', icon: <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></> },
  { name: 'Instagram', url: 'https://www.instagram.com/martz_forge_/', icon: <><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></> },
  { name: 'Facebook',  url: 'https://www.facebook.com/martzforgetech/', icon: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/> },
  { name: 'WhatsApp',  url: '#', icon: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/> },
];

const SiteFooter = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <img src={`${MB}assets/logo-martzlab.png`} alt="martz forge" className="footer-logo" />
          <p className="footer-tag">Software a medida que crece con tu negocio. Equipo independiente con base en LATAM.</p>
          <div className="footer-socials">
            {SOCIALS.map(s => {
              const external = s.url && s.url !== '#';
              return (
                <a key={s.name} href={s.url} className="footer-social" aria-label={s.name}
                  {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">{s.icon}</svg>
                </a>
              );
            })}
          </div>
        </div>
        <div className="footer-col">
          <h5>Soluciones</h5>
          <ul>
            <li><a href={`${MB}pages/soluciones.html#web`}>Desarrollo Web</a></li>
            <li><a href={`${MB}pages/soluciones.html#custom`}>Software a medida</a></li>
            <li><a href={`${MB}pages/soluciones.html#auto`}>Automatización</a></li>
            <li><a href={`${MB}pages/soluciones.html#ai`}>IA aplicada</a></li>
            <li><a href={`${MB}pages/productos.html`}>Productos SaaS</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Recursos</h5>
          <ul>
            <li><a href={`${MB}pages/proceso.html`}>Nuestro proceso</a></li>
            <li><a href={`${MB}pages/casos.html`}>Escenarios de implementación</a></li>
            <li><a href={`${MB}pages/contacto.html`}>Cuéntanos tu proyecto</a></li>
            <li><a href={`${MB}pages/nosotros.html`}>Nosotros</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Contacto</h5>
          <ul>
            <li><a href="mailto:martzlab@outlook.com">martzlab@outlook.com</a></li>
            <li><a href={`${MB}pages/contacto.html`}>Agendar llamada</a></li>
            <li><a href="tel:+50375539015">+503 7553 9015</a></li>
            <li><a href="#">San Salvador, El Salvador · Remoto</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 martz forge. Todos los derechos reservados.</span>
        <div style={{ display: 'flex', gap: 20 }}>
          <a href={`${MB}privacidad/`}>Privacidad</a>
          <a href={`${MB}terminos/`}>Términos</a>
          <a href={`${MB}cookies/`}>Cookies</a>
          <button type="button" className="footer-cookie-settings" onClick={()=>window.openCookieSettings()}>Configurar cookies</button>
        </div>
      </div>
    </div>
    <CookieConsent />
  </footer>
);

window.SiteNav = SiteNav;
window.SiteFooter = SiteFooter;