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

const Home = ({ onNav, onWishlist }) => (
  <main>
    <Section style={{ padding: '120px 32px 80px' }}>
      <Eyebrow>EST. 2025 · TWO PEOPLE · ONE GAME</Eyebrow>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontWeight: 800,
        fontSize: 'clamp(56px, 11vw, 168px)', lineHeight: 0.9, letterSpacing: '-0.04em',
        margin: '24px 0 0', textWrap: 'balance',
      }}>WE'RE FROGGY<br/>STUDIOS. WE<br/>MAKE GAMES.</h1>
      <p style={{
        color: 'var(--pond-mist)', fontSize: 19, lineHeight: 1.55, maxWidth: 560, marginTop: 32,
      }}>
        A two-person team. One game in the oven, more to come.
        Hand-crafted, finished when it's finished.
      </p>
      <div style={{ display: 'flex', gap: 20, marginTop: 40, flexWrap: 'wrap' }}>
        <Button variant="pop" onClick={onWishlist}>WISHLIST POURING PINTS →</Button>
        <Button variant="ghost"
          href="https://discord.gg/2Ne68KwUeQ" target="_blank" rel="noopener">
          JOIN THE DISCORD
        </Button>
      </div>
    </Section>

    <Hairline />

    <Section style={{ padding: '80px 32px' }}>
      <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div>
          <Eyebrow>CURRENTLY ON TAP</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 'clamp(40px, 6vw, 80px)', lineHeight: 0.95, letterSpacing: '-0.03em',
            margin: '14px 0 18px',
          }}>POURING PINTS</h2>
          <p style={{ color: 'var(--pond-mist)', fontSize: 17, lineHeight: 1.6, marginBottom: 28 }}>
            A chaotic pub-management game. Pull pints, keep the regulars happy,
            and figure out who's been pinching the dartboard scores. Releasing 2026.
          </p>
          <Button variant="ghost" size="sm" onClick={() => onNav('game')}>READ MORE →</Button>
        </div>
        <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>
    </Section>

  </main>
);

window.Home = Home;