function Footer({ onNavigate }) {
  const { IconButton } = window.ArnelBiscarraDesignSystem_2766cb;
  const socials = window.SITE_DATA.socials;
  const [showTop, setShowTop] = React.useState(false);

  // Real hrefs so these are crawlable/real links (not just onClick divs in
  // disguise) — preventDefault still routes through navigate() for the
  // existing smooth-scroll + active-section-highlight behavior.
  const go = (id) => (e) => { e.preventDefault(); onNavigate(id); };

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

  return (
    <React.Fragment>
      <footer className="site-footer">
        <div className="footer-inner">
          <div className="footer-col">
            <img src="assets/arnel-logo.png" alt="Arnel Biscarra logo" style={{ height: 56, width: 'auto', marginBottom: 8, alignSelf: 'flex-start' }} />
            <div className="footer-brand">Arnel Biscarra</div>
            <div className="footer-tagline">Web &amp; graphics design, built to perform.</div>
          </div>
          <div className="footer-col">
            <div className="footer-heading">Studio</div>
            {window.SITE_DATA.nav.map((l) => (
              <a key={l.id} className="footer-link" href={`#${l.id}`} onClick={go(l.id)}>{l.label}</a>
            ))}
          </div>
          <div className="footer-col">
            <div className="footer-heading">Services</div>
            {window.SITE_DATA.serviceCategories.map((s) => (
              <a key={s.title} className="footer-link" href="#services" onClick={go('services')}>{s.title}</a>
            ))}
          </div>
          <div className="footer-col">
            <div className="footer-heading">Elsewhere</div>
            <div className="footer-socials">
              {socials.map((s) => <IconButton key={s.key} ariaLabel={s.label} size={34} onClick={() => window.open(s.url, '_blank')}><window.SocialGlyph name={s.key} size={15} /></IconButton>)}
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>&copy; 2026 Arnel Biscarra</span>
          <span>Privacy &middot; Terms</span>
        </div>
      </footer>
      {showTop && (
        <div className="back-to-top">
          <IconButton ariaLabel="Back to top" onClick={() => onNavigate('top')}>&uarr;</IconButton>
        </div>
      )}
    </React.Fragment>
  );
}

window.Footer = Footer;