// Footer.jsx

const footerStyles = {
  outer: {
    background: 'var(--ink-900)',
    color: 'var(--paper)',
    padding: '64px 0 32px',
    borderTop: '1px solid rgba(246,244,238,.10)',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '2fr 1fr 1fr 1fr',
    gap: 48,
    marginBottom: 56,
  },
  brand: { display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 360 },
  // alignSelf:'flex-start' évite l'étirement horizontal imposé par le
  // stretch par défaut du flex-column parent, qui déformait le logo.
  brandLogo: { height: 36, width: 'auto', display: 'block', alignSelf: 'flex-start' },
  brandTag: {
    fontSize: 14,
    lineHeight: 1.55,
    color: 'var(--mist-200)',
  },
  colHead: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--mist-500)',
    margin: '0 0 16px',
  },
  links: {
    display: 'flex', flexDirection: 'column', gap: 10,
    fontSize: 14, color: 'var(--paper)',
  },
  bottom: {
    paddingTop: 24,
    borderTop: '1px solid rgba(246,244,238,.10)',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11,
    letterSpacing: '0.08em',
    textTransform: 'uppercase',
    color: 'var(--mist-500)',
    flexWrap: 'wrap',
    gap: 12,
  },
};

// `root` : préfixe relatif pour atteindre 09_site-web/ depuis la page
// courante — voir Nav.jsx pour la même convention.
const Footer = ({ root = '' }) => (
  <footer style={footerStyles.outer}>
    <div className="b2a-container">
      <div style={footerStyles.grid} className="b2a-grid-4">
        <div style={footerStyles.brand}>
          <img
            src={`${root}08_assets-marque/design-system/assets/logo-mono-light.png`}
            alt="TheB2ATeK"
            style={footerStyles.brandLogo}
          />
          <p style={footerStyles.brandTag}>
            Agence IA pour dirigeants qui veulent que la technologie fasse le travail,
            pas du bruit. <span lang="en">AI that works while you lead.</span>
          </p>
        </div>
        <div>
          <h5 style={footerStyles.colHead}>Offres</h5>
          <div style={footerStyles.links}>
            <a className="b2a-link" href={`${root}offres/generateur.html`}>Générateur de propositions</a>
            <a className="b2a-link" href={`${root}offres/support.html`}>Agent support 24/7</a>
            <a className="b2a-link" href={`${root}offres/automatisation.html`}>Automatisation back-office</a>
          </div>
        </div>
        <div>
          <h5 style={footerStyles.colHead}>Entreprise</h5>
          <div style={footerStyles.links}>
            <a className="b2a-link" href={root ? `${root}index.html#offres` : '#offres'}>Le catalogue</a>
            <a className="b2a-link" href={root ? `${root}index.html#preuves` : '#preuves'}>Résultats</a>
            <a className="b2a-link" href={root ? `${root}index.html#methode` : '#methode'}>Méthode</a>
            <a className="b2a-link" href={root ? `${root}index.html#studio-digital` : '#studio-digital'}>Studio Digital</a>
            <a className="b2a-link" href={root ? `${root}index.html#faq` : '#faq'}>FAQ</a>
          </div>
        </div>
        <div>
          <h5 style={footerStyles.colHead}>Contact</h5>
          <div style={footerStyles.links}>
            <a className="b2a-link" href="mailto:hello@theb2atek.com">hello@theb2atek.com</a>
            <a className="b2a-link" href="https://theb2atek.com">theb2atek.com</a>
            <span style={{ color: 'var(--mist-200)' }}>Montréal (QC), Canada</span>
          </div>
        </div>
      </div>
      <div style={footerStyles.bottom}>
        <span>© 2026 · TheB2ATeK · Montréal (QC) Canada</span>
        <span lang="en">AI that works while you lead</span>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;