function Footer() {
  const [lang] = useLang();
  const C = window.FUSE_CONTENT.footer;

  return (
    <footer className="dark" style={{ paddingTop: 80, paddingBottom: 32, borderTop: '1px solid var(--border-on-dark)' }} data-screen-label="footer">
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48, paddingBottom: 56, borderBottom: '1px solid var(--border-on-dark)',
        }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'baseline' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '-0.02em' }}>Fuse</span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '-0.02em', color: 'var(--ochre)', fontStyle: 'italic' }}>Studio</span>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--ochre)', marginLeft: 8, alignSelf: 'center' }} />
            </div>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, opacity: 0.7, maxWidth: '36ch', marginTop: 16, color: 'var(--bone)' }}>
              {C.tagline[lang]}
            </p>
          </div>

          {C.cols[lang].map((col, i) => (
            <div key={i}>
              <div className="kicker kicker-on-dark" style={{ marginBottom: 16 }}>{col.title}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.links.map((l, j) => (
                  <li key={j}>
                    <a href="#" style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--bone)', textDecoration: 'none', opacity: 0.85 }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24, flexWrap: 'wrap' }}>
          <div className="kicker kicker-on-dark">{C.legal[lang]}</div>
          <div className="kicker kicker-on-dark">{C.version[lang]}</div>
        </div>

        {/* Giant wordmark — editorial footer presence */}
        <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--border-on-dark)', textAlign: 'center', overflow: 'hidden' }}>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(6rem, 20vw, 17rem)',
            lineHeight: 0.85,
            letterSpacing: '-0.04em',
            color: 'var(--bone)',
          }}>
            Fuse<em style={{ color: 'var(--ochre)' }}>Studio</em>
            <span style={{ display: 'inline-block', width: '0.18em', height: '0.18em', borderRadius: 999, background: 'var(--ochre)', marginLeft: '0.05em', verticalAlign: 'middle' }} />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          footer .container > div:first-child { grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          footer .container > div:first-child { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;