// Footer COMPARTIDO — fuente única de verdad para las 5 páginas.
(function () {
  const BX = window.BX;
  const NAVY = BX.navy, ORANGE = BX.orange;
  const body = '"Inter", system-ui, sans-serif';
  const head = '"Poppins", system-ui, sans-serif';

  // ── Inject responsive CSS once ─────────────────────────────────
  if (!document.getElementById('bx-footer-css')) {
    const s = document.createElement('style');
    s.id = 'bx-footer-css';
    s.textContent = `
      .bxf-wrap{background:#0D1B2A;padding:60px 64px 34px;box-sizing:border-box;width:100%}
      .bxf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
        padding-bottom:40px;border-bottom:1px solid rgba(248,244,238,.1)}
      .bxf-bottom{padding-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px}
      .bxf-legal{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
      .bxf-legal a{text-decoration:none;font-size:13px;color:rgba(248,244,238,.45);transition:color .18s}
      .bxf-legal a:hover{color:rgba(248,244,238,.8)}
      .bxf-copy{font-size:13px;color:rgba(248,244,238,.35);text-align:center}
      @media(max-width:900px){
        .bxf-wrap{padding:48px 40px 28px}
        .bxf-grid{grid-template-columns:1fr;gap:28px}
      }
      @media(max-width:600px){
        .bxf-wrap{padding:40px 20px 24px}
        .bxf-grid{gap:24px}
        .bxf-legal{gap:14px}
      }
    `;
    document.head.appendChild(s);
  }

  function useLang() {
    const [, rerender] = React.useState(0);
    React.useEffect(() => {
      const h = () => rerender(n => n + 1);
      window.addEventListener('langchange', h);
      return () => window.removeEventListener('langchange', h);
    }, []);
  }

  function BXFooter() {
    useLang();
    const T = window.t || (k => k);

    const ColHead = ({ label }) => (
      <div style={{ fontFamily: body, fontSize: 12, fontWeight: 700, letterSpacing: 1.5,
        textTransform: 'uppercase', color: 'rgba(248,244,238,.5)', marginBottom: 16 }}>{label}</div>
    );
    const L = ({ href, children }) => (
      <a href={href || '#'} style={{ textDecoration: 'none', fontFamily: body, fontSize: 14,
        color: 'rgba(248,244,238,.75)', display: 'block', marginBottom: 9,
        transition: 'color .18s' }}
        onMouseEnter={e => e.target.style.color='#fff'}
        onMouseLeave={e => e.target.style.color='rgba(248,244,238,.75)'}>{children}</a>
    );

    const legalLinks = [
      [T('footer.privacy'), 'privacidad.html'],
      [T('footer.cookies'), 'cookies.html'],
      [T('footer.legal'),   'aviso-legal.html'],
    ];

    return (
      <div className="bxf-wrap">
        <div className="bxf-grid">
          {/* Brand */}
          <div>
            <a href="index.html" style={{ display: 'block', marginBottom: 14 }}>
              <img src={window.BRITXIA_LOGO || 'assets/britxia-wordmark.png'} alt="BRITXIA"
                style={{ height: 42, width: 'auto', display: 'block' }} />
            </a>
            <div style={{ fontFamily: head, fontWeight: 500, fontSize: 14, color: 'rgba(248,244,238,.65)' }}>
              {T('footer.tagline')}
            </div>
          </div>
          {/* Nav */}
          <div>
            <ColHead label={T('footer.nav_col')} />
            <L href="index.html">{T('footer.nav_home')}</L>
            <L href="index.html#quienes-somos">{T('footer.nav_about')}</L>
          </div>
          {/* Products */}
          <div>
            <ColHead label={T('footer.prod_col')} />
            <L href="kleo.html">KLEO</L>
            {['INGRID', 'BoXtore', 'ZUBEHÖRE'].map(name => (
              <div key={name} style={{ marginBottom: 9 }}>
                <div style={{ fontFamily: body, fontSize: 14, color: 'rgba(248,244,238,.5)' }}>{name}</div>
                <div style={{ fontFamily: body, fontSize: 11, color: 'rgba(248,244,238,.3)', marginTop: 1 }}>{T('footer.prod_soon')}</div>
              </div>
            ))}
          </div>
          {/* Contact */}
          <div>
            <ColHead label={T('footer.contact_col')} />
            <a href={`mailto:${BX.brand.email}`}
              style={{ textDecoration: 'none', fontFamily: body, fontSize: 14, fontWeight: 600,
                color: 'rgba(248,244,238,.75)', display: 'block',
                transition: 'color .18s' }}
              onMouseEnter={e => e.target.style.color='#fff'}
              onMouseLeave={e => e.target.style.color='rgba(248,244,238,.75)'}>
              {BX.brand.email}
            </a>
          </div>
        </div>
        <div className="bxf-bottom">
          <div className="bxf-legal">
            {legalLinks.map(([label, href]) => (
              <a key={href} href={href}>{label}</a>
            ))}
          </div>
          <span className="bxf-copy">{T('footer.copy')}</span>
        </div>
      </div>
    );
  }

  window.BXFooter = BXFooter;
})();