// Footer.jsx — wide brutalist footer with column layout + giant wordmark
function Footer() {
  return (
    <footer style={{
      borderTop: '1px solid var(--fg)',
      background: 'var(--bg)',
      marginTop: 0,
    }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto', padding: '64px var(--gutter) 32px',
      }}>
        <div className="nn-footer-grid">
          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--fg)',
              letterSpacing: '-0.01em',
            }}>Now or Never.</div>
            <p style={{
              marginTop: 12, fontSize: 12, color: 'var(--fg-3)', lineHeight: 1.6,
              maxWidth: 320,
            }}>
              要麼現在做，要麼別做<br/>
              A studio of one. Small tools, built fast, shipped now.
            </p>
            <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
              <a href="https://github.com/therealechan" style={fIconLink} title="GitHub">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><use href="icons/sprite.svg#i-github"/></svg>
              </a>
              <a href="https://x.com/0xechan" style={fIconLink} title="X / Twitter">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><use href="icons/sprite.svg#i-x-twitter"/></svg>
              </a>
            </div>
          </div>

          {[
            { h: 'Catalog', items: [
              ['Markdown Now', 'https://md.nowornever.work'],
              ['Porter', 'https://porter.nowornever.work'],
              ['Form Snap', 'https://form-snap.nowornever.work'],
              ['LB Liquidator', 'https://liquidator.nowornever.work'],
              ['GEO Score', 'https://geo-score.nowornever.work'],
            ]},
            { h: 'Studio', items: [
              ['GitHub', 'https://github.com/therealechan'],
              ['X / Twitter', 'https://x.com/0xechan'],
              ['Email', 'mailto:hi@nowornever.work'],
            ]},
          ].map(col => (
            <div key={col.h}>
              <div className="overline" style={{ marginBottom: 16 }}>{col.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(([label, href]) => (
                  <li key={label}>
                    <a href={href} style={fLink}>{label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* wordmark */}
        <div style={{
          marginTop: 64, paddingTop: 24, borderTop: '1px solid var(--border)',
          fontFamily: 'var(--font-mono)',
          fontSize: 'clamp(56px, 14vw, 200px)',
          lineHeight: 0.9, letterSpacing: '-0.04em',
          color: 'var(--fg)', fontWeight: 400,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'clip',
        }}>
          NOW/NEVER.
        </div>

        <div style={{
          marginTop: 24, paddingTop: 24, borderTop: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
          letterSpacing: '0.04em', flexWrap: 'wrap', gap: 12,
        }}>
          <span>© 2026 echanxyz · nowornever.work · v2026.04.25</span>
        </div>
      </div>
    </footer>
  );
}

const fLink = {
  fontFamily: 'var(--font-mono)', fontSize: 13,
  color: 'var(--fg-2)', textDecoration: 'none',
  transition: 'color 120ms var(--ease-out)',
};
const fIconLink = {
  color: 'var(--fg-1)', textDecoration: 'none',
  padding: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  border: '1px solid var(--border)', gap: 8,
};
window.Footer = Footer;