function Footer() {
  const colStyle = { display: 'flex', flexDirection: 'column', gap: 8 };
  const colTitle = { fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 6 };
  const link = { color: 'var(--wht)', textDecoration: 'none', fontSize: 13, cursor: 'pointer', opacity: 0.92 };
  return (
    <footer style={{ background: 'var(--blk)', color: 'var(--wht)', padding: '64px 48px 28px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1.3fr', gap: 40, marginBottom: 48 }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 44,
            textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.95,
          }}>BLK<br />SQRL<sup style={{ fontSize: 18, verticalAlign: 'super', fontFamily: 'var(--font-body)' }}>®</sup></div>
          <div style={{ marginTop: 16, fontSize: 13, opacity: 0.7, maxWidth: 240 }}>
            Independent clothing. Made in Washington, DC. The black squirrel says hello.
          </div>
        </div>
        <div style={colStyle}>
          <div style={colTitle}>Shop</div>
          <a style={link}>Tees</a>
          <a style={link}>Hoodies</a>
          <a style={link}>Gear</a>
          <a style={link}>Everything</a>
        </div>
        <div style={colStyle}>
          <div style={colTitle}>Brand</div>
          <a style={link}>About</a>
          <a style={link}>Lookbook</a>
          <a style={link}>Wholesale</a>
          <a style={link}>Stockists</a>
        </div>
        <div style={colStyle}>
          <div style={colTitle}>Help</div>
          <a style={link}>Shipping</a>
          <a style={link}>Returns</a>
          <a style={link}>Sizing</a>
          <a style={link}>Contact</a>
        </div>
        <div style={colStyle}>
          <div style={colTitle}>Newsletter</div>
          <div style={{ fontSize: 12, opacity: 0.7, marginBottom: 4 }}>One email when we drop. No spam.</div>
          <div style={{ display: 'flex', gap: 0 }}>
            <input placeholder="you@you.com" style={{
              flex: 1, padding: '10px 12px', border: '1.5px solid var(--wht)',
              borderRight: 'none', background: 'transparent', color: 'var(--wht)',
              fontFamily: 'var(--font-body)', fontSize: 13, outline: 'none', borderRadius: 0,
            }} />
            <button style={{
              padding: '10px 14px', background: 'var(--wht)', color: 'var(--blk)',
              border: '1.5px solid var(--wht)', cursor: 'pointer',
              fontWeight: 700, fontSize: 11, letterSpacing: '0.08em',
              textTransform: 'uppercase', fontFamily: 'var(--font-body)', borderRadius: 0,
            }}>Join</button>
          </div>
        </div>
      </div>
      <div style={{
        borderTop: '1px solid rgba(255,255,255,0.15)', paddingTop: 18,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, opacity: 0.55, letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        <span>© BLK SQRL® 2026 · Washington, DC</span>
        <div style={{ display: 'flex', gap: 16 }}>
          <a style={{ color: 'var(--wht)', opacity: 0.9, textDecoration: 'none' }}>Instagram</a>
          <a style={{ color: 'var(--wht)', opacity: 0.9, textDecoration: 'none' }}>Terms</a>
          <a style={{ color: 'var(--wht)', opacity: 0.9, textDecoration: 'none' }}>Privacy</a>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;