// Footer — large social bar shown at bottom of every long-scroll page.

const FooterBar = () => {
  const T = window.TOKENS;
  const [meta, setMeta] = React.useState(null);

  React.useEffect(() => {
    fetch('/content/meta.json', { cache: 'no-cache' })
      .then(r => r.ok ? r.json() : null)
      .then(setMeta)
      .catch(() => setMeta(null));
  }, []);

  const buildLine = meta && meta.buildDate
    ? `BUILD ${meta.buildDate}${meta.gitSha ? ` · ${(meta.branch || 'main').toUpperCase()}@${meta.gitSha}` : ''}`
    : null;

  return (
    <footer style={{
      position: 'relative', zIndex: 1, padding: '80px 40px 60px',
      borderTop: `1px solid ${T.fgFaint}`, background: T.bgSunken,
      fontFamily: T.mono, color: T.fg, marginBottom: 48,
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 40,
          marginBottom: 56,
        }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.3em', color: T.accent, marginBottom: 12 }}>
              KAROL.ROSZAK
            </div>
            <div style={{ fontSize: 13, color: T.fgDim, lineHeight: 1.7, fontFamily: T.sans }}>
              Generative AI Engineer<br/>
              Poland · CET
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.3em', color: T.fgGhost, marginBottom: 12 }}>
              SITEMAP
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              {[['/','home'],['/blog','blog'],['/about','about'],['/uses','uses'],['/links','links'],['/connect','connect']].map(([p,l]) => (
                <span key={p} onClick={() => window.navigate(p)} style={{ cursor: 'pointer', color: T.fgMid }}>
                  /{l}
                </span>
              ))}
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.3em', color: T.fgGhost, marginBottom: 12 }}>
              PROFILES
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <span
                onClick={() => window.navigate('/links')}
                style={{ cursor: 'pointer', color: T.fgMid }}
              >
                → /links
              </span>
              <span style={{ color: T.fgGhost, fontSize: 11 }}>
                8 places to find me
              </span>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.3em', color: T.fgGhost, marginBottom: 12 }}>
              FEEDS
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <span style={{ color: T.fgMid }}>/feed.xml · rss</span>
              <span style={{ color: T.fgMid }}>/sitemap.xml</span>
            </div>
          </div>
        </div>
        <div style={{
          paddingTop: 24, borderTop: `1px solid ${T.fgFaint}`,
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontSize: 10, letterSpacing: '0.22em', color: T.fgGhost,
        }}>
          <span>© 2026 KAROL ROSZAK · BUILT WITH STUBBORNNESS</span>
          {buildLine && <span>{buildLine}</span>}
        </div>
      </div>
    </footer>
  );
};

window.FooterBar = FooterBar;