import React from 'react'
import {
  ThemeProvider,
  Heading,
  Container,
  Flex,
  Box,
  Text,
  LargeButton,
  Icon,
  mediaQueries,
  cx
} from '@hackclub/design-system'
import { Head, Link } from 'react-static'
import Nav from '../components/Nav'
import Start from '../components/Start'
import Footer from '../components/Footer'

const Header = Box.extend`
  padding-top: 0 !important;
  background-color: ${props => props.theme.colors.teal[6]};
  background-image: linear-gradient(
    -32deg,
    ${props => props.theme.colors.lime[6]} 0%,
    ${props => props.theme.colors.teal[6]} 50%,
    ${props => props.theme.colors.teal[7]} 100%
  );

  h1 {
    line-height: 1.125;
    max-width: 48rem;
  }
  h2 {
    max-width: 36rem;
  }
`

const Module = Flex.extend.attrs({
  w: [1, 1 / 2],
  p: 4,
  pb: [0, 4],
  align: 'center'
})`
  max-width: 32rem;
  text-align: left;

  ${mediaQueries[1]} {
    &:nth-of-type(1), &:nth-of-type(3) {
      transform: translateY(4rem);
    }
  }

  /* this is terrible */
  @media screen and (max-width:32em) {
    &:nth-of-type(1), &:nth-of-type(2) {
      padding-right: 0;
    }
    &:nth-of-type(3), &:nth-of-type(4) {
      padding-left: 0;
    }
  }

  svg {
    width: 4rem !important;
    height: 4rem !important;
    flex-shrink: 0;
    &:first-child { margin-right: 2rem; }
    &:last-child { margin-left: 1rem; }
    ${mediaQueries[1]} {
      &:first-child { margin-right: 3rem; }
      &:last-child { margin-left: 2rem; }
    }
  }
`

const ModuleHeading = Heading.h3.extend.attrs({
  mt: 0,
  mb: 1,
  f: [3, 4],
  bold: true
})`
  color: ${props => props.theme.colors.black};
  position: relative;
  &:before {
    content: "";
    width: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5rem;
    background-color: ${props => cx(props.color)};
  }
`
const ModuleBody = Text.extend.attrs({ my: 0, f: 3, color: 'slate' })`
  line-height: 1.5;
`

const ModuleFigure = Box.withComponent('figure').extend.attrs({
  bg: 'fuschia.0',
  mr: [4, 5],
  ml: 3
})`
  width: 6rem;
  height: 6rem;
  border-radius: 2rem;
  flex-shrink: 0;
`

LargeButton.link = LargeButton.withComponent(Link)

export default () => (
  <ThemeProvider>
    <Head>
      <title>Meetings – Hack Club</title>
    </Head>
    <Header color="white" pb={4}>
      <Nav />
      <Heading.h1 align="center" f={[2, 4]} mx="auto" mt={4} mb={3}>
        At Hack Club meetings,<br />
        everyone is making.
      </Heading.h1>
      <Heading f={1} mx="auto" align="center" bold={false} regular>
        Clubs meet weekly at high schools,
        <br />
        all run by their student leaders.
      </Heading>
    </Header>
    <Flex
      wrap
      justify="space-around"
      p={2}
      pb={[5, 6]}
      mx="auto"
      style={{ position: 'relative', maxWidth: '64rem' }}
    >
      <Module>
        <Box>
          <ModuleHeading color="blue.5">Get hacking!</ModuleHeading>
          <ModuleBody>
            Unlike a traditional coding class, everyone works on their own
            project at their own pace.
          </ModuleBody>
        </Box>
        <Icon name="memory" color="blue.4" />
      </Module>
      <Module>
        <Box>
          <ModuleHeading color="yellow.5">
            You can feel the energy.
          </ModuleHeading>
          <ModuleBody>
            Meetings run like mini-hackathons: members are coming up with
            creative projects to showcase.
          </ModuleBody>
        </Box>
        <Icon name="flash_on" color="yellow.4" />
      </Module>
      <Module>
        <Icon name="gesture" color="teal.4" />
        <Box>
          <ModuleHeading color="teal.5">
            No experience required.
            <br />
            Maybe even encouraged.
          </ModuleHeading>
          <ModuleBody>
            You’re not behind if you’re new to coding—everyone is learning along
            the way.
          </ModuleBody>
        </Box>
      </Module>
      <Module>
        <Icon name="screen_share" color="violet.4" />
        <Box>
          <ModuleHeading color="violet.5">Demo time!</ModuleHeading>
          <ModuleBody>
            At the end of a meeting, everyone presents what they’ve made in
            front of the group.
          </ModuleBody>
        </Box>
      </Module>
    </Flex>
    <Start />
    <Footer />
  </ThemeProvider>
)

@@ -2348,12 +2348,12 @@
 f=%7B%5B
-2, 4
+5, 6
 %5D%7D m
@@ -2479,17 +2479,22 @@
 ding f=%7B
-1
+%5B3, 4%5D
 %7D mx=%22au

Fix Meetings headings sizing