import styled from 'styled-components'
import React from 'react'
import {
  Container,
  Heading,
  Icon,
  LargeButton as Button,
  Link as A,
  Section,
  Text
} from '@hackclub/design-system'
import Layout from 'components/Layout'
import Helmet from 'react-helmet'
import { Link } from 'gatsby'
import Nav from 'components/Nav'
import Footer from 'components/Footer'

// These 2 colors are from the gradient used on the original Hack Camp website
const campTheme = ['rgb(255, 75, 85)', 'rgb(212, 78, 116)']

const Header = styled(Section)`
  background-color: ${campTheme[0]};
  background-image: linear-gradient(
    45deg,
    ${campTheme[0]} 0%,
    ${campTheme[1]} 100%
  );
`

Button.link = Button.withComponent(Link)

export default () => (
  <Layout>
    <Helmet title="Hack Camp – Hack Club" />
    <Nav />
    <Header align="center">
      <Container maxWidth={32} pt={[5, 6]} pb={4} px={3} color="white">
        <Icon glyph="history" size={64} />
        <Heading.h1 fontSize={[5, 6]} mb={2}>
          Hack Camp has been discontinued.
        </Heading.h1>
        <Heading fontSize={[3, 4]}>
          We’ve replaced camps in favor of clubs!
        </Heading>
      </Container>
    </Header>
    <Container maxWidth={36} py={[5, 6]} px={3} color="black" align="center">
      <Text fontSize={3}>
        Apply to our clubs program and we’ll help you launch and lead a coding
        club at your school. It’s like summer camp, except that it runs all year
        long!
      </Text>
      <Button.link
        bg={campTheme[0]}
        color="white"
        to="/"
        my={4}
        scale
        chevronRight
      >
        Learn More + Apply
      </Button.link>
      <Text color="slate">
        Looking for the{' '}
        <A
          color={campTheme[0]}
          href="https://hackclub-archive.github.io/camp"
          target="_blank"
          rel="noopener"
          children="old Hack Camp website"
        />
        ?
      </Text>
      <Text color="slate">
        Still interested in a camp? Try{' '}
        <A
          color={campTheme[0]}
          href="https://camp.masonhackclub.com/"
          target="_blank"
          rel="noopener"
          children="🚀 Mason Hack Camp"
        />
        .
      </Text>
    </Container>
    <Footer />
  </Layout>
)

@@ -84,19 +84,8 @@
 er,%0A
-  Heading,%0A
   Ic
@@ -139,20 +139,21 @@
 tion,%0A  
-Text
+theme
 %0A%7D from 
@@ -281,16 +281,68 @@
 gatsby'%0A
+import %7B Headline, Lead %7D from 'components/Content'%0A
 import N
@@ -639,15 +639,16 @@
 ge: 
-linear-
+$%7Btheme.
 grad
@@ -656,72 +656,56 @@
 ent(
-%0A    45deg,%0A    $%7BcampTheme%5B0%5D%7D 0%25,%0A    $%7BcampTheme%5B1%5D%7D 100%25%0A  )
+campTheme%5B0%5D, campTheme%5B1%5D)%7D;%0A  min-height: 80vh
 ;%0A%60%0A
@@ -963,15 +963,18 @@
 ph=%22
-history
+clubs-fill
 %22 si
@@ -997,22 +997,20 @@
    %3CHead
+l
 in
-g.h1
+e
  fontSiz
@@ -1017,20 +1017,23 @@
 e=%7B%5B
-5, 6
+6, 7, 8
 %5D%7D m
-b=%7B2
+y=%7B3
 %7D%3E%0A 
@@ -1055,138 +1055,28 @@
 amp 
-has been discontinued.%0A        %3C/Heading.h1%3E%0A        %3CHeading fontSize=%7B%5B3, 4%5D%7D%3E%0A          We%E2%80%99ve replaced camps in favor of clubs!
+is coming&nbsp;soon.
 %0A   
@@ -1090,1111 +1090,93 @@
 Head
+l
 in
-g
+e
 %3E%0A    
-  %3C/Container%3E%0A
     %3C
-/Header%3E%0A    %3CContainer maxWidth=%7B36%7D py=%7B%5B5, 6%5D%7D px=%7B3%7D color=%22black%22 align=%22center%22%3E%0A      %3CText fontSize=%7B3%7D%3E%0A        Apply to our clubs program and we%E2%80%99ll help you launch and lead a coding%0A        club at your school. It%E2%80%99s like summer camp, except that it runs all year%0A        long!%0A      %3C/Text%3E%0A      %3CButton.link%0A        bg=%7BcampTheme%5B0%5D%7D%0A        color=%22white%22%0A        to=%22/%22%0A        my=%7B4%7D%0A        scale%0A        chevronRight%0A      %3E%0A        Learn More + Apply%0A      %3C/Button.link%3E%0A      %3CText color=%22slate%22%3E%0A        Looking for the%7B' '%7D%0A        %3CA%0A          color=%7BcampTheme%5B0%5D%7D%0A          href=%22https://hackclub-archive.github.io/camp%22%0A          target=%22_blank%22%0A          rel=%22noopener%22%0A          children=%22old Hack Camp website%22%0A        /%3E%0A        ?%0A      %3C/Text%3E%0A      %3CText color=%22slate%22%3E%0A        Still interested in a camp? Try%7B' '%7D%0A        %3CA%0A          color=%7BcampTheme%5B0%5D%7D%0A          href=%22https://camp.masonhackclub.com/%22%0A          target=%22_blank%22%0A          rel=%22noopener%22%0A          children=%22%F0%9F%9A%80 Mason Hack Camp%22%0A        /%3E%0A        .%0A      %3C/Text%3E%0A    %3C/Contain
+Lead%3ECheck back soon for details.%3C/Lead%3E%0A      %3C/Container%3E%0A    %3C/Head
 er%3E%0A

Update camp.js