/* Site footer — shared across all main pages.

   Props:
     isMobile  — boolean from useWindowWidth(); switches grid/padding for narrow screens.
     basePath  — prepended to internal hrefs so /overig/* pages resolve via '../'.

   Depends on: IdealLogo, VisaLogo, MastercardLogo (components/PaymentLogos.jsx). */
function Footer({ isMobile = false, basePath = '' }) {
  const linkFor = (label) => {
    switch (label) {
      case 'Algemene voorwaarden': return basePath + 'overig/algemene-voorwaarden';
      case 'Cookie beleid':        return basePath + 'overig/cookie-beleid';
      case 'Privacy beleid':       return basePath + 'overig/privacy-policy';
      case 'Klantenservice':       return basePath + 'contact';
      case 'Code Inwisselen':      return basePath + 'code-inwisselen';
      case 'Kentekencheck':        return basePath || '/';
      case 'RDW Check':            return basePath + 'check/rdw/';
      case 'Kilometer Check':      return basePath + 'check/kilometer/';
      case 'NAP Check':            return basePath + 'check/nap/';
      case 'Schade Check':         return basePath + 'check/schade/';
      case 'Import Check':         return basePath + 'check/import/';
      case 'Marktplaats Check':    return basePath + 'check/marktplaats/';
      case 'Motor Check':          return basePath + 'check/motoren/';
      case 'Camper Check':         return basePath + 'check/campers/';
      case 'Bedrijfswagen Check':  return basePath + 'check/bedrijfswagens/';
      case 'Elektrische Auto':     return basePath + 'check/elektrische-auto/';
      case 'Vrachtwagen Check':    return basePath + 'check/vrachtwagens/';
      default:                     return '#';
    }
  };

  const col = (links) => links.map(l => (
    <a key={l} href={linkFor(l)} style={{
      color: 'rgba(255,255,255,0.45)', fontSize: 13, textDecoration: 'none',
      display: 'block', marginBottom: 10, transition: 'color .15s',
    }}
       onMouseEnter={e => e.currentTarget.style.color = 'white'}
       onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.45)'}>
      {l}
    </a>
  ));

  return (
    <footer style={{ background: '#0a1640', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        padding: isMobile ? '40px 20px 32px' : '56px 24px 40px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr 1fr',
        gap: isMobile ? 28 : 40,
      }}>
        {/* Brand */}
        <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <BrandBadge size={30} basePath={basePath} variant="white"/>
            <span style={{ fontWeight: 800, color: 'white', fontSize: 16 }}>Onlinekentekencheck.nl</span>
          </div>
          <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13, lineHeight: 1.7, maxWidth: 280 }}>
            De complete digitale oplossing voor het moderniseren en inzichtelijk maken van elk detail van jouw voertuig.
          </p>
        </div>

        {/* Checks */}
        <div>
          <div style={{ fontWeight: 700, color: 'white', fontSize: 13, marginBottom: 16, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Checks</div>
          {col(['Kentekencheck', 'RDW Check', 'NAP Check', 'Kilometer Check', 'Schade Check', 'Import Check', 'Marktplaats Check', 'Code Inwisselen'])}
        </div>

        {/* Voertuigtypen */}
        <div>
          <div style={{ fontWeight: 700, color: 'white', fontSize: 13, marginBottom: 16, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Voertuigtypen</div>
          {col(['Motor Check', 'Camper Check', 'Bedrijfswagen Check', 'Elektrische Auto', 'Vrachtwagen Check'])}
        </div>

        {/* Contact */}
        <div>
          <div style={{ fontWeight: 700, color: 'white', fontSize: 13, marginBottom: 16, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Contact</div>
          {col(['Klantenservice'])}
          <a href="tel:+31854019836" style={{
            color: 'rgba(255,255,255,0.45)', fontSize: 13, textDecoration: 'none',
            display: 'block', marginBottom: 6, transition: 'color .15s',
          }}
             onMouseEnter={e => e.currentTarget.style.color = 'white'}
             onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.45)'}>
            +31854019836
          </a>
          <a href="mailto:info@onlinekentekencheck.nl" style={{
            color: 'rgba(255,255,255,0.45)', fontSize: 12, textDecoration: 'none',
            display: 'block', marginBottom: 10, transition: 'color .15s', wordBreak: 'break-all',
          }}
             onMouseEnter={e => e.currentTarget.style.color = 'white'}
             onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.45)'}>
            info@onlinekentekencheck.nl
          </a>
        </div>

        {/* Overig */}
        <div>
          <div style={{ fontWeight: 700, color: 'white', fontSize: 13, marginBottom: 16, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Overig</div>
          {col(['Algemene voorwaarden', 'Privacy beleid', 'Cookie beleid'])}
        </div>
      </div>

      <div style={{
        maxWidth: 1100, margin: '0 auto', padding: '20px 24px',
        borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 12,
      }}>
        <span style={{ color: 'rgba(255,255,255,0.2)', fontSize: 12 }}>
          © 2026 onlinekentekencheck.nl — Alle rechten voorbehouden
        </span>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <IdealLogo/>
          <VisaLogo/>
          <MastercardLogo/>
        </div>
      </div>
    </footer>
  );
}