/* 13 — Footer (always dark). */
function Footer({ t, lang, setLang, theme, setTheme }) {
  const f = t.footer;
  const P = window.PAGES;
  const cols = [
    { h: t.nav.services, links: [
      { l:t.services.items[0].t, href:P.services }, { l:t.services.items[2].t, href:P.services },
      { l:t.services.items[1].t, href:P.services }, { l:t.services.items[3].t, href:P.services },
      { l:t.services.items[6].t, href:P.services } ] },
    { h: f.cols[1].h, links: [
      { l:t.nav.how, href:P.how }, { l:t.nav.why, href:P.why },
      { l:t.nav.cases, href:P.cases }, { l:t.nav.about, href:P.about } ] },
    { h: f.cols[2].h, links: [
      { l:'LinkedIn', href:'#' }, { l:'Instagram', href:'#' }, { l:t.nav.cta, href:P.contact } ] },
  ];
  return (
    <footer style={{ background:'var(--footer-bg)', color:'#fff' }}>
      <Container style={{ paddingTop:72, paddingBottom:40 }}>
        <div className="bne-footer-top" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr', gap:40 }}>
          <div>
            <a href={P.home} style={{ display:'flex', alignItems:'center', gap:10, textDecoration:'none', color:'#fff' }}>
              <Mark size={30} variant="paper" />
              <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:19, letterSpacing:'-.02em' }}>Brand New Edge</span>
            </a>
            <p className="t-body" style={{ color:'rgba(255,255,255,.62)', marginTop:18, maxWidth:280 }}>{f.tagline}</p>
            <div style={{ display:'flex', alignItems:'center', gap:14, marginTop:24,
              '--text-1':'#fff', '--text-2':'rgba(255,255,255,.76)', '--text-3':'rgba(255,255,255,.55)',
              '--border-1':'rgba(255,255,255,.18)', '--border-2':'rgba(255,255,255,.28)' }}>
              <LangDropdown lang={lang} setLang={setLang} up={true} align="left" />
              <ThemeToggle theme={theme} setTheme={setTheme} />
            </div>
          </div>
          {cols.map((col, i) => (
            <div key={i}>
              <div className="t-caption" style={{ fontFamily:'var(--font-mono)', letterSpacing:'.1em', textTransform:'uppercase', color:'rgba(255,255,255,.5)', marginBottom:16 }}>{col.h}</div>
              <ul style={{ listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:11 }}>
                {col.links.map((l,j) => (
                  <li key={j}><a href={l.href} style={{ color:'rgba(255,255,255,.74)', textDecoration:'none', fontFamily:'var(--font-body)', fontSize:15, transition:'color var(--dur)' }}
                    onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.74)'}>{l.l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display:'flex', flexWrap:'wrap', alignItems:'center', justifyContent:'space-between', gap:14,
          marginTop:56, paddingTop:26, borderTop:'1px solid rgba(255,255,255,.12)' }}>
          <span className="t-caption" style={{ color:'rgba(255,255,255,.5)' }}>{f.rights}</span>
          <a href={P.expand} style={{ display:'inline-flex', alignItems:'center', gap:6, color:'rgba(255,255,255,.6)', textDecoration:'none', fontFamily:'var(--font-mono)', fontSize:12.5, letterSpacing:'.03em' }}
            onMouseEnter={e=>e.currentTarget.style.color='#fff'} onMouseLeave={e=>e.currentTarget.style.color='rgba(255,255,255,.6)'}>{f.expandLink} →</a>
          <span className="t-caption" style={{ color:'rgba(255,255,255,.5)', fontFamily:'var(--font-mono)', letterSpacing:'.04em' }}>{f.zone}</span>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Footer });