import React from "react"
import { Heading, Button, Text, List, ListItem } from "@chakra-ui/core"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import Section from "../components/section"

const headerStyling = {
  color: "white",
  fontSize: ["32px", "48px", "64px", "64px", "84px"],
  fontWeight: "bold",
  marginTop: [5, 5, 10],
  paddingBottom: [5, 5, 20],
}

const buttonStyling = {
  backgroundColor: "yellow",
  marginY: 10,
}

const textStyling = {
  fontSize: ["20px", "20px", "35px"],
  paddingY: 5,
  color: "white",
  fontWeight: "bold",
}

const TechVolunteers = () => {
  return (
    <Layout>
      <SEO title="Tech Volunteers" />

      <Section
        backgroundColor={"purple"}
        paddingY={[1,8]}
      >
        <Heading {...headerStyling}>Hello and welcome,<br/> fellow Technologists!</Heading>
        <Text {...textStyling}>
          The number of people who are volunteering for this effort is fantastic, and we want to ensure this energy gets directed to the right place and optimised.
        </Text>
        <Text {...textStyling}>
          So tell us what skills you have and your realistic availability, and we'll add you to the Slack group to get you started!
        </Text>
      </Section>

      <Section
        fontSize={[16, 16, 24]}
        paddingY={[1,8]}
      >
        <Text paddingY={5}>
          So you’re a:
        </Text>
        <List>
          <ListItem>• Developer</ListItem>
          <ListItem>• Data Scientist</ListItem>
          <ListItem>• Designer</ListItem>
          <ListItem>• Product / Project Manager</ListItem>
          <ListItem>• Content Creator, Writer</ListItem>
          <ListItem>• Marketing / PR / Marketplace Specialist</ListItem>
        </List>
        <Text>etc!</Text>
        <Text paddingY={[5]}>...and you want to help in the Covid19 crisis?</Text>
        <Text>This is what you can find here:</Text>
        <List>
          <ListItem>• Offer your skills to existing projects by code4covid group</ListItem>
          <ListItem>• Ask for tech resources for your project to code4covid group</ListItem>
          <ListItem>• Check the Coronavirus Tech Handbook by TechForUK group</ListItem>
          <ListItem>• Explore List Of Existing Tech Communities</ListItem>
        </List>

        <Link to="/tech-volunteers-form/">
          <Button {...buttonStyling}>CLICK TO START!</Button>
        </Link>
      </Section>
    </Layout>
  )
};

export default TechVolunteers