// Footer — links + reassurance.
function Footer({ setRoute }) {
  const linkStyle = {
    color: 'var(--charcoal-300)',
    textDecoration: 'none',
    fontSize: 14,
    padding: '4px 0',
    display: 'block',
  };
  return (
    <footer style={{ background: 'var(--charcoal-900)', color: '#fff', paddingBlock: 64, borderTop: '1px solid rgba(255,255,255,0.06)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))', gap: 40 }}>
          <div>
            <Logo onDark height={30} />
            <p style={{ marginTop: 16, color: 'var(--charcoal-300)', fontSize: 14, maxWidth: '28ch' }}>
              Service en cours de développement — accès par liste d'attente.
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 16, flexWrap: 'wrap' }}>
              <span style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 12, fontWeight: 700 }}>
                Société française
              </span>
              <span style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 12, fontWeight: 700 }}>
                RGPD
              </span>
              <span style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.06)', color: '#fff', fontSize: 12, fontWeight: 700 }}>
                Hébergement visé en UE
              </span>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--amber-300)', marginBottom: 14 }}>
              Produit
            </div>
            <a href="#home" style={linkStyle} onClick={(e) => { e.preventDefault(); setRoute('home'); window.scrollTo({top:0}); }}>Accueil</a>
            <a href="#how"  style={linkStyle} onClick={(e) => { e.preventDefault(); setRoute('how'); window.scrollTo({top:0}); }}>Comment ça marche</a>
            <a href="#who"  style={linkStyle}>Protéger un proche</a>
            <a href="#tarifs" style={linkStyle}>Tarifs</a>
            <a href="#faq"  style={linkStyle}>FAQ</a>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--amber-300)', marginBottom: 14 }}>
              Ressources
            </div>
            <a href="#scams" style={linkStyle}>Arnaques fréquentes</a>
            <a href="#trust" style={linkStyle}>Confiance & confidentialité</a>
            <a href="#contact" style={linkStyle}>Contact</a>
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--amber-300)', marginBottom: 14 }}>
              Légal
            </div>
            <a href="#legal" style={linkStyle}>Mentions légales</a>
            <a href="#privacy" style={linkStyle}>Politique de confidentialité</a>
            <a href="#cgu" style={linkStyle}>CGU</a>
            <a href="#cookies" style={linkStyle}>Cookies</a>
          </div>
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.06)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
          <p style={{ color: 'var(--charcoal-500)', fontSize: 13 }}>© 2026 Kin-Guard. Tous droits réservés.</p>
          <p style={{ color: 'var(--charcoal-500)', fontSize: 13 }}>contact@kin-guard.fr</p>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;