// Footer.jsx
function Footer({ onNav }) {
  return (
    <footer className="im-footer">
      <div className="im-footer-inner">
        <div className="im-footer-col im-footer-col-brand">
          <div className="im-footer-brand">
            <img src="assets/logo-im-mark.png" className="im-footer-mark" alt="" />
            <span className="im-footer-word">IsaMunoz</span>
          </div>
          <p className="im-footer-tag">
            Cuaderno personal de Isa Muñoz sobre IA, CRM y automatizaciones para PYMES.
          </p>
          <div className="im-footer-social">
            <a href="https://www.instagram.com/isamunozrepiso/" target="_blank" rel="noreferrer" aria-label="Instagram">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" />
              </svg>
            </a>
            <a href="https://www.linkedin.com/in/isabelmunozrepiso/" target="_blank" rel="noreferrer" aria-label="LinkedIn">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <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" />
              </svg>
            </a>
            <a href="https://www.youtube.com/@IsabelMunozRepiso" target="_blank" rel="noreferrer" aria-label="YouTube">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
                <path d="M22 8.5a2.5 2.5 0 0 0-1.8-1.8C18.5 6.2 12 6.2 12 6.2s-6.5 0-8.2.5A2.5 2.5 0 0 0 2 8.5C1.5 10.2 1.5 12 1.5 12s0 1.8.5 3.5a2.5 2.5 0 0 0 1.8 1.8c1.7.5 8.2.5 8.2.5s6.5 0 8.2-.5a2.5 2.5 0 0 0 1.8-1.8c.5-1.7.5-3.5.5-3.5s0-1.8-.5-3.5z" />
                <path d="m10 15 5-3-5-3z" fill="currentColor" />
              </svg>
            </a>
          </div>
        </div>

        <div className="im-footer-col">
          <h4 className="im-footer-h">Contenido</h4>
          <a className="im-footer-l" href="#" onClick={(e) => { e.preventDefault(); onNav('blog'); }}>Blog</a>
          <a className="im-footer-l" href="#" onClick={(e) => { e.preventDefault(); onNav('works'); }}>Trabajos</a>
          <a className="im-footer-l" href="#" onClick={(e) => { e.preventDefault(); onNav('about'); }}>Sobre mí</a>
        </div>

        <div className="im-footer-col">
          <h4 className="im-footer-h">Categorías</h4>
          <a className="im-footer-l" href="#" onClick={(e) => { e.preventDefault(); onNav('blog'); }}>IA</a>
          <a className="im-footer-l" href="#" onClick={(e) => { e.preventDefault(); onNav('blog'); }}>Casos de éxito</a>
        </div>

        <div className="im-footer-col">
          <h4 className="im-footer-h">Sígueme</h4>
          <a className="im-footer-l" href="https://www.linkedin.com/in/isabelmunozrepiso/" target="_blank" rel="noreferrer">LinkedIn</a>
          <a className="im-footer-l" href="https://www.instagram.com/isamunozrepiso/" target="_blank" rel="noreferrer">Instagram</a>
          <a className="im-footer-l" href="https://www.youtube.com/@IsabelMunozRepiso" target="_blank" rel="noreferrer">YouTube</a>
        </div>
      </div>
      <div className="im-footer-base">
        <span>© 2026 Isa Muñoz</span>
        <span className="im-footer-mono">Hecho con cariño y bastante café</span>
      </div>
    </footer>
  );
}

window.Footer = Footer;