import * as React from "react"
import { Link as GatsbyLink, graphql } from "gatsby"

import Bio from "../components/bio"
import Layout from "../components/layout"
import Seo from "../components/seo"
import { Box, Button, Link, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"
import EastIcon from '@mui/icons-material/East'
import { H1Separator, H2Separator } from "../components/heading-separators"
import LeafIcon from "../components/leaf-icon"

const serviceMenu = [
  { label: "Support", path: "/" },
  { label: "Website development", path: "/" },
  { label: "Custom development", path: "/" },
  { label: "Training", path: "/" },
  { label: "Etc Whatever U Want", path: "/" },
]

const coreValues = [
  { label: "Sustainability", path: "/"},
  { label: "Privacy", path: "/"},
  { label: "Transparency", path: "/"},
]

const HomePage = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const posts = data.allMarkdownRemark.nodes

  if (posts.length === 0) {
    return (
      <Layout location={location} title={siteTitle}>
        <Bio />
        <p>
          No blog posts found. Add markdown posts to "content/blog" (or the
          directory you specified for the "gatsby-source-filesystem" plugin in
          gatsby-config.js).
        </p>
      </Layout>
    )
  }

  return (
    <Layout location={location} title={siteTitle} noHeader>
      <Box py={4}>
        <Typography
          variant="h1"
          sx={{ fontWeight: 400, fontSize: 44, lineHeight: "40px" }}
        >
          Autonomic is a co-operative that is owned and run by its workers{" "}
          <span>
            <LeafIcon />
          </span>
        </Typography>
      </Box>
      <H1Separator title="What we offer" component="h2" />
      <Box pl={8} py={1}>
        <List>
          {serviceMenu.map(({ label, path }) => (
            <ListItem key={label}>
              <ListItemIcon sx={{ minWidth: "inherit", pr: 1 }}>
                <EastIcon fontSize="small" color="primary" />
              </ListItemIcon>
              <ListItemText
                primary={label}
                sx={{ my: 0 }}
                primaryTypographyProps={{
                  textTransform: "capitalize",
                  fontSize: 28,
                  fontWeight: 700,
                  lineHeight: 1,
                }}
              />
            </ListItem>
          ))}
        </List>
      </Box>
      <H2Separator title1="Interested?" title2="Work with us" component="h3" />
      <Typography lineHeight={1.2} pb={3}>
        We build technologies and infrastructure to empower users to make a
        positive impact on the world. All of our services reflect our commitment
        to our core values:
      </Typography>
      <Stack direction={{ xs: "column", md: "row" }}>
        {coreValues.map(({ label, path }) => (
          <Button
            component={GatsbyLink}
            to={path}
            key={label}
            variant="outlined"
            fullWidth
            sx={{
              fontSize: 21,
              textTransform: "capitalize",
              fontWeight: 700,
              py: 1,
              lineHeight: 1,
            }}
          >
            {label}
          </Button>
        ))}
      </Stack>
      <Typography fontSize={12} pt={1} pb={4.5}>
        You can consult our expanded list of values{" "}
        <Link underline="always" component={GatsbyLink} to="/">
          here
        </Link>
        .
      </Typography>

      <Box display="flex" justifyContent="center">
        <Button
          variant="contained"
          color="secondary"
          sx={{ textTransform: "none", fontSize: 12, p: 1.5 }}
          disableElevation
        >
          Contact us at{" "}
          <Box component="b" pl={0.5}>
            hello@autonomic.zone
          </Box>
        </Button>
      </Box>
    </Layout>
  )
}

export default HomePage

/**
 * Head export to define metadata for the page
 *
 * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
 */
export const Head = () => <Seo title="Home" />

export const pageQuery = graphql`
  {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(sort: { frontmatter: { date: DESC } }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
  }
`