function Footer({ accent }) {
  return (
    <footer data-screen-label="Footer" style={{
      padding: '60px clamp(24px, 6vw, 80px) 32px',
      background: 'var(--bg-2)',
      borderTop: '1px solid var(--line)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 48,
          paddingBottom: 48,
          borderBottom: '1px solid var(--line)',
        }} className="footer-grid">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <img src="assets/assos-logo.png" alt="Assos" style={{ height: 28, width: 'auto', display: 'block' }} />
            </div>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--fg-dim)', maxWidth: 360 }}>
              Twee specialistische bedrijven onder één dak voor uw complete interieur — van keukens en badkamers tot maatwerk verbouwingen.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <h4 style={footerH}>Bedrijven</h4>
            <a href="https://assoskeukensbadkamers.nl" target="_blank" rel="noopener" style={footerLink}>
              Assos Keukens & Badkamers
            </a>
            <a href="https://assosmarmer.com" target="_blank" rel="noopener" style={footerLink}>
              Assos Marmer
            </a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <h4 style={footerH}>Navigatie</h4>
            <a href="#over" style={footerLink}>Over ons</a>
            <a href="#bedrijven" style={footerLink}>Onze bedrijven</a>
            <a href="#offerte" style={footerLink}>Offerte aanvragen</a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <h4 style={footerH}>Contact</h4>
            <span style={{ ...footerLink, cursor: 'default' }}>amersfoort@assosgroep.nl</span>
            <span style={{ ...footerLink, cursor: 'default' }}>(033) 207 8060</span>
            <span style={{ ...footerLink, cursor: 'default' }}>Nederland</span>
          </div>
        </div>

        <div style={{
          paddingTop: 32,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
        }}>
          <span style={{ fontSize: 12, color: 'var(--fg-mute)' }}>
            © 2026 Assos Groep. Alle rechten voorbehouden.
          </span>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="#" style={{ ...footerLink, fontSize: 12 }}>Privacy</a>
            <a href="#" style={{ ...footerLink, fontSize: 12 }}>Algemene voorwaarden</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </footer>
  );
}

const footerH = {
  fontSize: 11, letterSpacing: '0.25em', textTransform: 'uppercase',
  color: 'var(--fg)', fontWeight: 600,
};
const footerLink = {
  fontSize: 14, color: 'var(--fg-dim)', transition: 'color .3s ease',
};

// hover footer links via className would be cleaner, but keeping inline for simplicity

window.Footer = Footer;