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

const Contact = () => (
  <main>
    <Section style={{ padding: '120px 32px 160px', textAlign: 'center' }}>
      <Eyebrow>HELLO</Eyebrow>
      <h1 style={{
        fontFamily: 'var(--font-display)', fontWeight: 800,
        fontSize: 'clamp(48px, 8vw, 112px)', lineHeight: 0.95, letterSpacing: '-0.04em',
        margin: '20px 0 24px',
      }}>FIND US IN THE DISCORD.</h1>
      <p style={{ fontSize: 19, color: 'var(--pond-mist)', maxWidth: 540, margin: '0 auto 40px', lineHeight: 1.55 }}>
        That's where we hang out, post devlogs, and answer everything.
      </p>
      <Button variant="pop"
        href="https://discord.gg/2Ne68KwUeQ" target="_blank" rel="noopener">
        JOIN THE DISCORD →
      </Button>
    </Section>
  </main>
);

window.Contact = Contact;