// Colophon footer.

const SiteFooter = () => {
  const swatches = [
    { hex: '#E7E9E4', name: 'paper' },
    { hex: '#14171F', name: 'ink' },
    { hex: '#1F3A5F', name: 'prussian' },
    { hex: '#9C6B1F', name: 'brass' },
    { hex: '#8E3A1F', name: 'clay' },
  ];

  return (
    <footer style={{ marginTop: 64, padding: '56px 0 64px', borderTop: '1px solid var(--rule)', position: 'relative', zIndex: 2 }}>
      <div className="container">
        {/* Wordmark line */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', borderBottom: '1px solid var(--rule)', paddingBottom: 28, marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontSize: 'clamp(36px, 6vw, 64px)', color: 'var(--ink)',
            letterSpacing: '-0.02em', lineHeight: 1,
          }}>
            Commonwork <span style={{ color: 'var(--accent)' }}>Lab</span>
          </div>
          <div className="meta" style={{ color: 'var(--ink-3)', textAlign: 'right' }}>
            EST. 2025 · v0.4 · LAST EDITED 2026-05-12
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40 }}>
          <div>
            <Eyebrow>Colophon</Eyebrow>
            <div style={{ marginTop: 12, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 320 }}>
              Set in <em style={{ fontFamily: 'var(--font-display)' }}>Newsreader</em>, IBM Plex Sans,
              and IBM Plex Mono. Hand-written, hand-edited, hosted simply. No analytics.
            </div>
          </div>

          <div>
            <Eyebrow>Sections</Eyebrow>
            <ul style={{ display: 'grid', gap: 6, marginTop: 12 }}>
              {window.CWL_DATA.NAV.map((n) => (
                <li key={n.id}>
                  <a href={`#${n.id}`} style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 14 }}>
                    {n.label}
                  </a>
                </li>
              ))}
              <li><a href="#contact" style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 14 }}>Subscribe</a></li>
            </ul>
          </div>

          <div>
            <Eyebrow>Palette</Eyebrow>
            <div style={{ display: 'flex', gap: 6, marginTop: 12 }}>
              {swatches.map((s) => (
                <div key={s.name} title={`${s.name} · ${s.hex}`}
                     style={{ width: 22, height: 22, background: s.hex, border: '1px solid var(--rule)', borderRadius: 2 }}/>
              ))}
            </div>
            <div className="meta" style={{ marginTop: 10 }}>paper · ink · prussian · brass · clay</div>
          </div>

          <div style={{ textAlign: 'right' }}>
            <Eyebrow>Reach</Eyebrow>
            <div className="meta" style={{ marginTop: 12 }}>commonworklab.com</div>
            <div className="meta" style={{ marginTop: 4 }}>hello@commonworklab.com</div>
            <div style={{ marginTop: 14 }}>
              <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 14 }}>RSS</a>
              <span style={{ margin: '0 8px', color: 'var(--ink-3)' }}>·</span>
              <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 14 }}>Newsletter</a>
              <span style={{ margin: '0 8px', color: 'var(--ink-3)' }}>·</span>
              <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 14 }}>Contact</a>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 48, paddingTop: 18, borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 12 }}>
          <span className="meta" style={{ color: 'var(--ink-3)' }}>
            © 2025–2026 Commonwork Lab · A working notebook. All edits are public.
          </span>
          <span className="meta" style={{ color: 'var(--ink-3)' }}>
            Made by hand · powered by paper, ink, and patience.
          </span>
        </div>
      </div>
    </footer>
  );
};

window.SiteFooter = SiteFooter;