// Footer.jsx
function Footer() {
  return (
    <footer style={fStyles.wrap}>
      <div style={fStyles.inner}>
        <div style={fStyles.top}>
          <div style={fStyles.brandCol}>
            <div style={fStyles.logo}>EPB<span style={fStyles.dot}>.</span></div>
            <div style={fStyles.tag}>L'ÉCOLE DE L'ALTERNANCE</div>
            <p style={fStyles.addr}>
              79 rue Benoît Malon<br/>
              94250 Gentilly<br/>
              RER B · 15 min de Châtelet
            </p>
          </div>
          <div style={fStyles.navCol}>
            <div style={fStyles.colTitle}>FORMATIONS</div>
            <a style={fStyles.link} href="#">BTS</a>
            <a style={fStyles.link} href="#">Bachelor</a>
            <a style={fStyles.link} href="#">Mastère</a>
          </div>
          <div style={fStyles.navCol}>
            <div style={fStyles.colTitle}>L'ÉCOLE</div>
            <a style={fStyles.link} href="#">Notre pédagogie</a>
            <a style={fStyles.link} href="#">L'équipe</a>
            <a style={fStyles.link} href="#">Locaux</a>
          </div>
          <div style={fStyles.navCol}>
            <div style={fStyles.colTitle}>CANDIDATER</div>
            <a style={fStyles.link} href="#">Processus</a>
            <a style={fStyles.link} href="#">Journées portes ouvertes</a>
            <a style={fStyles.link} href="#">Contact</a>
          </div>
        </div>
        <div style={fStyles.bottom}>
          <span>© 2026 EPB — L'école de l'alternance</span>
          <span style={fStyles.legal}>
            <a style={fStyles.flink} href="#">Mentions légales</a>
            <a style={fStyles.flink} href="#">Confidentialité</a>
            <a style={fStyles.flink} href="#">Accessibilité</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

const fStyles = {
  wrap: { background: '#1B242A', color: '#fff' },
  inner: { maxWidth: 1240, margin: '0 auto', padding: '72px 32px 32px' },
  top: { display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, paddingBottom: 48, borderBottom: '1px solid rgba(255,255,255,0.12)' },
  brandCol: {},
  logo: { fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: 28, letterSpacing: '-0.02em', color: '#fff' },
  dot: { color: '#EA6927' },
  tag: { fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 10, letterSpacing: '0.18em', color: '#F8C5B1', textTransform: 'uppercase', marginTop: 6 },
  addr: { fontFamily: '"Open Sans", sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginTop: 20 },
  navCol: { display: 'flex', flexDirection: 'column', gap: 12 },
  colTitle: { fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 11, letterSpacing: '0.14em', color: '#fff', textTransform: 'uppercase', marginBottom: 4 },
  link: { fontFamily: '"Open Sans", sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.75)', textDecoration: 'none' },
  bottom: { paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: '"Open Sans", sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.55)', flexWrap: 'wrap', gap: 12 },
  legal: { display: 'flex', gap: 20 },
  flink: { color: 'rgba(255,255,255,0.55)', textDecoration: 'none' },
};

window.Footer = Footer;