// Footer.jsx — Moonshot dark footer with big wordmark block and mission index.
function Footer() {
  return (
    <footer style={{ background: 'var(--void)', color: 'var(--fg)', padding: '80px 80px 40px', borderTop: '1px solid var(--line)' }}>
      {/* Nav columns */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 200px 200px 280px', gap: 40, marginBottom: 80 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
            <MoonshotGlyph size={22} color="var(--cream)" />
            <span className="eyebrow" style={{ color: 'var(--cream)', letterSpacing: '.18em' }}>
              MOON<span style={{ color: 'var(--electric-2)' }}>·</span>SHOT
            </span>
          </div>
          <p className="body" style={{ color: 'var(--fg-muted)', maxWidth: 360, fontSize: 14 }}>
            A studio for high-risk, high-reward projects.
            We build what shouldn't work, for people willing to find out.
          </p>
        </div>

        <FooterCol title="Index" items={['Ethos', 'Project X', 'Relay']} />
        <FooterCol title="Signal" items={['Field notes', 'Annual letter', 'Post-mortems', 'Press']} />
        <div>
          <div className="eyebrow" style={{ color: 'var(--fg-faint)', fontSize: 10, marginBottom: 14 }}>Ground station</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, color: 'var(--dust-200)' }}>
            <div>hello@moonshot.studio</div>
            <div style={{ color: 'var(--fg-muted)' }}>Mission proposals welcome, pitches gently refused.</div>
          </div>
        </div>
      </div>

      {/* Giant wordmark */}
      <div style={{ borderTop: '1px solid var(--line)', paddingTop: 40, marginBottom: 40, position: 'relative' }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(120px, 18vw, 280px)',
          lineHeight: 0.85, letterSpacing: '-0.035em',
          color: 'var(--regolith-2)',
          userSelect: 'none',
        }}>
          Moonshot<span style={{ color: 'var(--electric-3)' }}>.</span>
        </div>
      </div>

      {/* Bottom rule */}
      <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 20, borderTop: '1px solid var(--line)' }}>
        <span className="mono" style={{ color: 'var(--fg-faint)' }}>© 2026 Moonshot Studio · all frequencies reserved</span>
        <span className="mono" style={{ color: 'var(--fg-faint)' }}>
          <span style={{ color: 'var(--electric-2)' }}>●</span>&nbsp;&nbsp;uplink stable · 47 missions &amp; counting
        </span>
      </div>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div className="eyebrow" style={{ color: 'var(--fg-faint)', fontSize: 10, marginBottom: 14 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(it => (
          <a key={it} href="#" style={{ color: 'var(--dust-200)', textDecoration: 'none', fontSize: 14 }}>{it}</a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Footer });