// MRB Auto storefront — Footer
const Icon = (props) => { const C = window.MRBAutoDesignSystem_73c751 && window.MRBAutoDesignSystem_73c751.Icon; return C ? React.createElement(C, props) : null; };

function Footer() {
  const cols = [
    { title: 'Marques', links: ['Mercedes', 'BMW', 'Audi', 'Land Rover', 'Porsche', 'Volkswagen'] },
    { title: 'Catégories', links: ['Marche-pieds', 'Calandres', 'Pare-chocs & kits', "Extensions d'ailes", 'Éclairage LED', 'Jantes'] },
    { title: 'Aide & infos', links: ['Livraison & retours', 'Paiement sécurisé', 'Qui sommes-nous ?', 'Nos partenaires', 'Contact', 'CGV & mentions légales'] },
  ];
  return (
    <footer style={{ background: 'var(--ink-900)', color: 'var(--ink-300)' }}>
      <div className="kit-wrap foot-grid" style={{ padding: '48px 16px 36px' }}>
        <div className="foot-brand">
          <img src={(window.__resources && window.__resources.logo) || "assets/logo-mrbauto.webp"} alt="MRB Auto" style={{ height: 30, filter: 'brightness(0) invert(1)' }} />
          <p style={{ margin: '18px 0 0', maxWidth: 320, fontFamily: 'var(--font-sans)', fontSize: '13.5px', lineHeight: 1.6, color: 'var(--ink-400)' }}>
            Spécialiste de l'équipement et du relooking auto pour SUV, 4x4 et berlines premium. Pièces adaptables de qualité, expédiées de France.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
            {['message', 'heart', 'sparkle', 'user'].map((ic, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 38, height: 38, borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.08)', color: 'var(--white)', cursor: 'pointer' }}>
                <Icon name={ic} size={17} />
              </span>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 8, marginTop: 22, flexWrap: 'wrap' }}>
            {['VISA', 'MASTERCARD', 'CB 3x/4x', 'PAYPAL'].map((p) => (
              <span key={p} style={{ fontFamily: 'var(--font-mono)', fontSize: '10px', fontWeight: 700, letterSpacing: '0.04em', color: 'var(--ink-300)', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 'var(--radius-sm)', padding: '5px 9px' }}>{p}</span>
            ))}
          </div>
        </div>
        {cols.map((col) => (
          <div key={col.title}>
            <h4 style={{ margin: '0 0 16px', fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.04em', fontSize: '0.95rem', color: 'var(--white)' }}>{col.title}</h4>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              {col.links.map((l) => (
                <li key={l}><a href="#" style={{ fontFamily: 'var(--font-sans)', fontSize: '13.5px', color: 'var(--ink-400)' }}>{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)' }}>
        <div className="kit-wrap" style={{ padding: '20px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: '12px', color: 'var(--ink-500)' }}>© 2015–2026 MRB Auto — Tous droits réservés. Basé dans l'Essonne (France).</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: '12px', color: 'var(--ink-300)' }}>
            <Icon name="phone" size={14} color="var(--accent)" /> 07 61 07 91 55 · Conseil & SAV 7j/7
          </span>
        </div>
      </div>
    </footer>
  );
}

window.MRBFooter = Footer;