/* global React */
const Footer = ({ onNav }) => (
  <footer style={{ borderTop: '1px solid var(--pond-stone)', marginTop: 48 }}>
    <div style={{
      maxWidth: 1200, margin: '0 auto', padding: '48px 32px 36px',
      display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 32,
    }} className="footer-grid">
      <div>
        <div style={{
          fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em',
        }}>FROGGY STUDIOS</div>
        <div style={{ color: 'var(--pond-fog)', fontSize: 13, marginTop: 8, maxWidth: 320, lineHeight: 1.55 }}>
          A two-person indie studio. Currently pouring pints.
        </div>
      </div>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--pond-fog)', marginBottom: 12 }}>STUDIO</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <a href="#home" onClick={(e) => { e.preventDefault(); onNav('home'); }} style={{ color: 'var(--pond-mist)', fontSize: 14 }}>Home</a>
          <a href="#contact" onClick={(e) => { e.preventDefault(); onNav('contact'); }} style={{ color: 'var(--pond-mist)', fontSize: 14 }}>Contact</a>
        </div>
      </div>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--pond-fog)', marginBottom: 12 }}>GAMES</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <a href="#game" onClick={(e) => { e.preventDefault(); onNav('game'); }} style={{ color: 'var(--pond-mist)', fontSize: 14 }}>Pouring Pints</a>
          <span style={{ color: 'var(--pond-fog)', fontSize: 14 }}>More soon</span>
        </div>
      </div>
      <div>
        <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--pond-fog)', marginBottom: 12 }}>FOLLOW</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <a href="https://discord.gg/2Ne68KwUeQ" target="_blank" rel="noopener" style={{ color: 'var(--pond-mist)', fontSize: 14 }}>Discord ↗</a>
          <a href="#" style={{ color: 'var(--pond-mist)', fontSize: 14 }}>Steam ↗</a>
        </div>
      </div>
    </div>
    <div style={{
      borderTop: '1px solid var(--pond-stone)',
      maxWidth: 1200, margin: '0 auto', padding: '20px 32px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
      color: 'var(--pond-fog)', fontSize: 12,
    }}>
      <span>© 2026 Froggy Studios</span>
      <span>Built somewhere quiet — released to the world.</span>
    </div>
  </footer>
);
window.Footer = Footer;