import React from 'react'
import Link from 'gatsby-link'
import {
  Container,
  Flex,
  Box,
  Heading,
  Text,
  LargeButton
} from '@hackclub/design-system'
import Nav from 'components/Nav'
import Animator from 'components/Animator'

const Root = Box.withComponent('header').extend`
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: ${props => props.theme.colors.blue[8]} url('/map.svg') no-repeat;
  background-size: cover;
  background-position: center top;
  max-width: 100%;
  overflow: hidden;
  clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 95%);
  ${props => props.theme.mediaQueries.md} {
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0 90%);
  }

  p,
  h1,
  h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
  }
  p:first-child {
    line-height: 1.125;
  }
  h1 {
    line-height: 1;
  }
  h2 {
    line-height: 1.25;
  }

  @media screen and (max-width: 22em) {
    a span {
      display: none;
    }
  }
`

const Action = LargeButton.extend`
  transition: transform 0.125s ease-out;
  will-change: transform;
  transform: scale(1);
  &:hover,
  &:focus {
    transform: scale(1.06);
  }
  @media (prefers-reduced-motion: reduce) {
    transform: none !important;
  }
`

Action.link = Action.withComponent(Link)

export default () => (
  <Animator
    is={Root}
    data={{
      opacity: [1, 0.75],
      transform: [{ translateY: '0px' }, { translateY: '-96px' }]
    }}
    px={[0, 3]}
  >
    <Nav style={{ position: 'absolute', top: 0 }} />
    <Container maxWidth={48} color="white" my={[5, 6]}>
      <Text f={[3, 4]} px={2} mx="auto" my={0} caps>
        By the students, for the students.
      </Text>
      <Heading.h1 f={[6, 7]} mx="auto" mt={2} mb={3}>
        High school coding clubs.
      </Heading.h1>
      <Box w={0.75} mx="auto">
        <Text f={[3, 4]} mx="auto" m={0}>
          Hack Club is the world's largest nonprofit network of computer science
          clubs where members learn to code through tinkering and building
          projects.
        </Text>
      </Box>
      <Flex justify="center" align="center" mx={[-1, -2]} mt={[3, 4]}>
        <Action.link to="/donate" bg="accent" m={[1, 2]} f={[3, 4]}>
          Donate
        </Action.link>
        <Action href="https://finder.hackclub.com" inverted m={[1, 2]}>
          Find <span>Nearby</span>
        </Action>
        <Action.link to="/start" m={[1, 2]} f={[3, 4]}>
          Start a Club »
        </Action.link>
      </Flex>
    </Container>
  </Animator>
)

@@ -119,16 +119,24 @@
 geButton
+,%0A  Hide
 %0A%7D from 
@@ -2142,32 +2142,55 @@
 %5D%7D mt=%7B%5B3, 4%5D%7D%3E%0A
+        %3CHide xs sm%3E%0A  
         %3CAction.
@@ -2256,15 +2256,19 @@
     
+  
 Donate%0A
+  
     
@@ -2282,24 +2282,40 @@
 ction.link%3E%0A
+        %3C/Hide%3E%0A
         %3CAct
@@ -2527,24 +2527,24 @@
 ction.link%3E%0A
-
       %3C/Flex
@@ -2545,16 +2545,202 @@
 %3C/Flex%3E%0A
+      %3CHide md lg xl%3E%0A        %3CBox w=%7B1%7D%3E%0A          %3CAction.link to=%22/donate%22 bg=%22accent%22 m=%7B%5B1, 2%5D%7D f=%7B%5B3, 4%5D%7D%3E%0A            Donate%0A          %3C/Action.link%3E%0A        %3C/Box%3E%0A      %3C/Hide%3E%0A
     %3C/Co

Fix home page button sizes on mobile