function Footer() {
  const scrollTo = (href) => {
    const id = href.replace('#', '');
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
  };

  const colStyle = { display: 'flex', flexDirection: 'column', gap: 10 };
  const linkStyle = { fontSize: 14, color: 'var(--text-tertiary)', cursor: 'pointer', background: 'none', border: 'none', textAlign: 'left', padding: 0, fontFamily: 'Inter, sans-serif', transition: 'color 0.12s', textDecoration: 'none' };
  const headStyle = { fontSize: 12, fontWeight: 600, color: 'var(--text-secondary)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 };

  return (
    <footer id="footer" style={{ background: 'var(--bg)', borderTop: '1px solid var(--border-subtle)' }}>
      <div className="container">
        {/* Main footer grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 48, padding: '56px 0 48px' }} className="footer-grid">

          {/* Col 1 — Brand */}
          <div style={colStyle}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              {/* Logo slot — replace this <div> with <img src="..."> when ready */}
              <div aria-label="TMI" style={{
                width: 36, height: 36, borderRadius: 6,
                background: 'var(--accent)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: '"Archivo Black", sans-serif',
                fontSize: 15, color: '#fff',
                letterSpacing: '-0.03em',
                flexShrink: 0,
              }}>TMI</div>
              <span style={{ width: 1, height: 18, background: 'rgba(255,255,255,0.18)' }} />
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--text-primary)', letterSpacing: '0.08em', textTransform: 'uppercase', lineHeight: 1.5 }}>TerraMine<br />Industrial Ltd.</span>
            </div>


          </div>


          {/* Col 4 — Contact */}
          <div className="footer-contact" style={{ ...colStyle, alignItems: 'flex-end', textAlign: 'right' }}>
            <div style={headStyle}>Contact</div>
            <div style={{ fontSize: 13, color: 'var(--text-tertiary)', lineHeight: 1.7 }}>
              Plot 14, Victoria Island<br />Lagos, Nigeria
            </div>
            <a href="tel:+2341234567890" style={{ ...linkStyle, fontSize: 13, fontFamily: 'JetBrains Mono, monospace' }}>+234 123 456 7890</a>
            <a href="tel:+97141234567" style={{ ...linkStyle, fontSize: 13, fontFamily: 'JetBrains Mono, monospace' }}>+971 4 123 4567</a>
            <a href="mailto:info@terramine.ng" style={{ ...linkStyle, color: 'var(--accent)', fontSize: 13 }}>info@terramine.ng</a>

          </div>
        </div>

        {/* Bottom bar */}
        <div style={{
          borderTop: '1px solid var(--border-subtle)',
          padding: '20px 0',
          display: 'flex', justifyContent: 'center', alignItems: 'center',
          textAlign: 'center', flexWrap: 'wrap', gap: 12,
        }}>
          <span style={{ fontSize: 13, color: 'var(--text-tertiary)' }}>© 2026 TerraMine Industrial Ltd. All rights reserved.</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } }
        @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr !important; } }
        a:hover { color: var(--text-primary) !important; }
      `}</style>
    </footer>
  );
}

function FooterLink({ children }) {
  const [hov, setHov] = React.useState(false);
  return (
    <span
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{ fontSize: 14, color: hov ? 'var(--text-primary)' : 'var(--text-tertiary)', cursor: 'pointer', transition: 'color 0.12s' }}>
      {children}
    </span>
  );
}

Object.assign(window, { Footer });