import React from 'react'
import styled from 'styled-components'
import { Flex, Text, Sheet } from '@hackclub/design-system'
import { theme } from './style'
import { ColoredTitle, Lead } from 'components/Content'
import Slide from 'react-reveal/Slide'

const Screen = styled(Flex).attrs({
  flexDirection: 'column',
  justify: 'center',
  bg: 'dark',
  py: [3, 4],
  px: 2,
  width: 1
})`
  background: url('/camp/landing.jpg');
  background-position: center;
  background-size: cover;
  max-width: 100vw;
  height: 100vh;
  position: relative;
  p {
    line-height: 1.125;
  }
`

const Content = styled(Sheet).attrs({
  align: 'center',
  maxWidth: 36,
  p: [3, 4, 5]
})`
  background-color: rgba(0, 0, 0, 0.75);
  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    background-color: rgba(32, 34, 36, 0.875);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
  }
`

export default () => (
  <Screen>
    <Slide top>
      <Content>
        <ColoredTitle
          colors={[
            theme.colors.primary,
            theme.colors.yellow,
            theme.colors.green
          ]}
          mb={0}
        >
          Hack Camp
        </ColoredTitle>
        <Lead
          color="white"
          fontSize={[3, 4, 5]}
          maxWidth={32}
          mt={[-1, -2]}
          mb={4}
          mx="auto"
        >
          A 1-week summer camp to get started coding & engineering.
        </Lead>
        <Text color="smoke" fontSize={2}>
          July 2019 – Grades 8–12 – San Francisco, CA
        </Text>
      </Content>
    </Slide>
  </Screen>
)

@@ -1312,17 +1312,17 @@
     mb=%7B
-4
+3
 %7D%0A      
@@ -1433,50 +1433,8 @@
 ad%3E%0A
-        %3CText color=%22smoke%22 fontSize=%7B2%7D%3E%0A
     
@@ -1483,16 +1483,183 @@
 sco, CA%0A
+        %3CText color=%22smoke%22 fontSize=%7B2%7D mb=%7B3%7D%3E%0A        %3C/Text%3E%0A        %3CText color=%22primary%22 fontSize=%7B%5B3, 4%5D%7D bold=%7Btrue%7D%3E%0A          Apply by May 26th for $75 off!%0A
         

Add a discount deadline to camp landing