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, ListItemButton, ListItemIcon, ListItemText, Stack, Typography } from "@mui/material"
import EastIcon from '@mui/icons-material/East'

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 BlogIndex = ({ 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}>
      <Typography
        variant="h1"
        sx={{ fontWeight: 400, fontSize: 44, lineHeight: "40px" }}
      >
        Autonomic is a co-operative that is owned and run by its workers
      </Typography>
      <Typography variant="h1" component="h2" sx={{textTransform: "uppercase"}}>What we offer</Typography>
      <List>
        {serviceMenu.map(({ label, path }) => (
          <ListItem key={label}>
            <ListItemButton component={GatsbyLink} to={path}>
              <ListItemIcon>
                <EastIcon />
              </ListItemIcon>
              <ListItemText
                primary={label}
                primaryTypographyProps={{ textTransform: "capitalize" }}
              />
            </ListItemButton>
          </ListItem>
        ))}
      </List>
      <Typography variant="h2" component="h3" textTransform={"uppercase"}>
        Interested? Work with us
      </Typography>
      <Typography>
        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="row">
        {coreValues.map(({ label, path }) => (
          <Button
            component={GatsbyLink}
            to={path}
            key={label}
            variant="outlined"
            fullWidth
          >
            {label}
          </Button>
        ))}
      </Stack>
      <Typography>
        You can consult our expanded list of values{" "}
        <Link component={GatsbyLink} to="/">
          here
        </Link>
        .
      </Typography>

      <Box display="flex" justifyContent="center">
        <Button variant="contained" color="secondary">
          Contact us at hello@autonomic.zone
        </Button>
      </Box>
      {/* <Bio /> */}
      {/* <ol style={{ listStyle: `none` }}>
        {posts.map(post => {
          const title = post.frontmatter.title || post.fields.slug

          return (
            <li key={post.fields.slug}>
              <article
                className="post-list-item"
                itemScope
                itemType="http://schema.org/Article"
              >
                <header>
                  <h2>
                    <Link to={post.fields.slug} itemProp="url">
                      <span itemProp="headline">{title}</span>
                    </Link>
                  </h2>
                  <small>{post.frontmatter.date}</small>
                </header>
                <section>
                  <p
                    dangerouslySetInnerHTML={{
                      __html: post.frontmatter.description || post.excerpt,
                    }}
                    itemProp="description"
                  />
                </section>
              </article>
            </li>
          )
        })}
      </ol> */}
    </Layout>
  )
}

export default BlogIndex

/**
 * 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
        }
      }
    }
  }
`