// Footer.jsx
const Footer = ({ onNavigate }) => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-brand">
        <img src="assets/logo-stacked.png" alt="Devnity Co" />
        <span className="grad-text">DEVNITY CO</span>
      </div>
      <p className="footer-tag">Software development &amp; innovation · Since 2024</p>
      <ul className="footer-links">
        <li><a href="#services" onClick={(e)=>{ e.preventDefault(); onNavigate && onNavigate('services'); }}>Services</a></li>
        <li><a href="#projects" onClick={(e)=>{ e.preventDefault(); onNavigate && onNavigate('projects'); }}>Work</a></li>
        <li><a href="#team"     onClick={(e)=>{ e.preventDefault(); onNavigate && onNavigate('team'); }}>Team</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="#contact"  onClick={(e)=>{ e.preventDefault(); onNavigate && onNavigate('contact'); }}>Contact</a></li>
      </ul>
      <ul className="footer-social">
        <li>
          <a href="https://www.linkedin.com/company/devnity-co/" target="_blank" rel="noreferrer" aria-label="LinkedIn">
            <Icon name="linkedin" size={16}/>
          </a>
        </li>
        <li>
          <a href="#" aria-label="GitHub"><Icon name="github" size={16}/></a>
        </li>
        <li>
          <a href="#" aria-label="Twitter"><Icon name="twitter" size={16}/></a>
        </li>
      </ul>
      <p className="copyright">© 2026 Devnity Co. All rights reserved.</p>
    </div>
  </footer>
);
window.Footer = Footer;