/* global React, Section, Eyebrow, Button, Hairline */

const Game = ({ onNav, onWishlist }) => (
  <main>
    <Section style={{ padding: '80px 32px 40px' }}>
      <Eyebrow>CURRENTLY ON TAP · COMING 2026</Eyebrow>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontWeight: 800,
        fontSize: 'clamp(48px, 9vw, 128px)', lineHeight: 0.92, letterSpacing: '-0.04em',
        margin: '20px 0 0',
      }}>POURING PINTS</h1>
      <p style={{ fontSize: 20, color: 'var(--pond-mist)', maxWidth: 620, marginTop: 24, lineHeight: 1.55 }}>
        Run a pub. Pull the pints. Keep the regulars happy and the chaos
        just on the right side of fun.
      </p>
    </Section>

    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px 24px' }}>
      <div style={{
        aspectRatio: '16/10', background: 'var(--pond-ink)',
        border: '1px solid var(--pond-stone)', overflow: 'hidden',
      }}>
        <img src="assets/pouring-pints-hero.png" alt="Pouring Pints — screenshot"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
    </div>

    <Hairline />
    <Section style={{ padding: '80px 32px 120px', textAlign: 'center' }}>
      <Eyebrow>JOIN THE PUB</Eyebrow>
      <h2 style={{
        fontFamily: 'var(--font-display)', fontWeight: 800,
        fontSize: 'clamp(40px, 6vw, 80px)', lineHeight: 1, letterSpacing: '-0.03em', margin: '14px 0 24px',
      }}>FIRST ROUND'S ON US.</h2>
      <p style={{ color: 'var(--pond-mist)', maxWidth: 480, margin: '0 auto 32px', fontSize: 16 }}>
        We post devlogs, share clips, and sometimes ask for playtesters.
      </p>
      <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
        <Button variant="primary" onClick={onWishlist}>WISHLIST →</Button>
        <Button variant="ghost"
          href="https://discord.gg/2Ne68KwUeQ" target="_blank" rel="noopener">JOIN DISCORD →</Button>
      </div>
    </Section>
  </main>
);

window.Game = Game;