/* mk-app-header.jsx — header + footer del marketplace, compartidos entre el
   home (index.html) y la página del restaurante (pages/restaurante.html).
   Header: solo DOS acciones — "Trabaja con nosotros" (landing B2B) e
   "Ingreso" (login del panel). Footer: el footer OFICIAL de Treego (mismo
   contenido y diseño de la landing /para-restaurantes). */

function MkHeader({ q, setQ, cartCount, onCartClick }) {
  return (
    <header className="mk-header">
      <div className="mk-wrap mk-header-inner">
        <a href="/" style={{ display: "flex" }} aria-label="Treego marketplace">
          <img className="mk-logo" src="/assets/streego-logo.png?v=2" alt="Treego" />
        </a>
        <div className="mk-loc"><Icon name="pin" /><span>Cajicá</span></div>
        {setQ ? (
          <div className="mk-search">
            <Icon name="search" />
            <input placeholder="Buscar restaurantes en Treego..." value={q}
              onChange={(e) => setQ(e.target.value)} aria-label="Buscar restaurantes" />
          </div>
        ) : <div style={{ flex: 1 }} />}
        <div className="mk-header-actions">
          <a href="/para-restaurantes" className="mk-ingreso"><Icon name="building" /><span>Trabaja con nosotros</span></a>
          <a href="/panel" className="mk-ingreso"><Icon name="user" /><span>Ingreso</span></a>
          {onCartClick && (
            <button className="mk-cartbtn" onClick={onCartClick} aria-label="Ver carrito">
              <MkIcon name="cart" />
              {cartCount > 0 && <span className="mk-cartbadge">{cartCount}</span>}
            </button>
          )}
        </div>
      </div>
    </header>
  );
}

/* Footer oficial de Treego — misma estructura, links y contenido del Footer
   de la landing (components/shared/parts3.jsx). Diferencias mínimas por
   contexto: "Panel del restaurante" y las anclas (#como, #planes…) apuntan
   a sus destinos absolutos porque aquí no estamos dentro de la landing. */
function MkFooter() {
  const cols = [
    ["Producto", [
      ["Cómo funciona", "/para-restaurantes#como"],
      ["Planes", "/para-restaurantes#planes"],
      ["Repartidores", "/para-restaurantes#repartidores"],
      ["Panel del restaurante", "/panel"],
    ]],
    ["Empresa", [
      ["Sobre Treego", "/pages/sobre.html"],
      ["Cobertura", "/pages/cobertura.html"],
      ["Trabaja con nosotros", "/pages/trabaja.html"],
      ["Blog", "/pages/blog.html"],
    ]],
    ["Recursos", [
      ["Centro de ayuda", "/pages/ayuda.html"],
      ["Contacto", "/pages/contacto.html"],
      ["Términos", "/pages/terminos.html"],
      ["Privacidad", "/pages/privacidad.html"],
      ["Política SGI", "/pages/politica-sgi"],
    ]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <img loading="lazy" className="ficon" src="/assets/streego-icon.png?v=2" alt="Treego" />
            <p>Domicilios premium para restaurantes. Para que la reputación de sus platos llegue intacta hasta el último kilómetro.</p>
          </div>
          {cols.map(([h, links]) => (
            <div className="footer-col" key={h}>
              <h5>{h}</h5>
              {links.map(([label, dest]) => <a href={dest} key={label}>{label}</a>)}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Treego · Sabana Centro, Colombia. Todos los derechos reservados.</span>
          <div className="footer-soc">
            <a href="https://instagram.com/TreegoS.A.S" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="camera" style={{ width: 17, height: 17 }} /></a>
            <a href="https://wa.me/573024523802" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><Icon name="phone" style={{ width: 17, height: 17 }} /></a>
            <a href="/pages/cobertura.html" aria-label="Cobertura"><Icon name="pin" style={{ width: 17, height: 17 }} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { MkHeader, MkFooter });