content: import React from 'react'
  import { Link, graphql } from 'gatsby'
  import {
    mapEdgesToNodes,
    filterOutDocsWithoutSlugs,
    filterOutDocsPublishedInTheFuture,
  } from '../lib/helpers'
  import GraphQLErrorList from '../components/graphql-error-list'
  import SEO from '../components/seo'
  import Layout from '../containers/layout'
  import Img from 'gatsby-image'
  import tw, { theme, css } from 'twin.macro'
  import Tilt from 'react-parallax-tilt'
  
  export const query = graphql`
    query IndexPageQuery {
      site: sanitySiteSettings(_id: { regex: "/(drafts.|)siteSettings/" }) {
        title
        description
        keywords
      }
      file(relativePath: { eq: "ajmal.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1024, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      posts: allSanityPost(
        limit: 6
        sort: { fields: [publishedAt], order: DESC }
        filter: { slug: { current: { ne: null } }, publishedAt: { ne: null } }
      ) {
        edges {
          node {
            id
            publishedAt
            mainImage {
              ...ImageWithPreview
              caption
              alt
            }
            title
            _rawExcerpt
            slug {
              current
            }
          }
        }
      }
    }
  `
  
  const IndexPage = (props) => {
    const { data, errors } = props
  
    if (errors) {
      return (
        <Layout>
          <GraphQLErrorList errors={errors} />
        </Layout>
      )
    }
  
    const site = (data || {}).site
    const postNodes = (data || {}).posts
      ? mapEdgesToNodes(data.posts)
          .filter(filterOutDocsWithoutSlugs)
          .filter(filterOutDocsPublishedInTheFuture)
      : []
  
    if (!site) {
      throw new Error(
        'Missing "Site settings". Open the studio at http://localhost:3333 and add some content to "Site settings" and restart the development server.'
      )
    }
  
    return (
      <Layout>
        <SEO title={site.title} description={site.description} />
        <div
          tw="grid h-screen"
          css={{
            gridTemplateColumns: '1fr min(80ch, calc(100% - 48px)) 1fr',
            gridRowGap: 8,
            '& > *': {
              gridColumn: 2,
            },
          }}
        >
          <div tw="mt-10 md:mt-0 align-middle md:place-self-center justify-between w-full">
            <div tw="flex flex-col-reverse md:flex-row md:items-center">
              <div tw="md:w-2/3 font-serif mt-8 md:mt-0 md:pr-8">
                <h1 tw="text-3xl lg:text-4xl xl:text-5xl font-semibold lg:font-semibold">
                  Hi, I’m Ajmal 👋🏼
                </h1>
                <p tw="mt-2 prose lg:prose-lg xl:prose-xl">
                  Always gearing myself to be in the flow state & play mode. Currently exploring
                  living with meaningful productivity.
                </p>
                <div tw="mt-4 flex flex-col sm:flex-row text-center space-y-4 sm:space-y-0 sm:space-x-4">
                  <Link to="/projects/">
                    <div
                      tw="rounded py-2 px-6 font-medium font-sans"
                      css={{
                        backgroundColor: `${theme`colors.accent`}`,
                        color: `var(--text-cta)`,
                        boxShadow:
                          '0 0 0 1px var(--color-primary), 0 1px 1px 1px var(--color-accent)',
                        '&:hover, &:focus': {
                          backgroundColor: `${theme`colors.primary`}`,
                        },
                      }}
                    >
                      View Projects
                    </div>
                  </Link>
                  <Link to="/notes/">
                    <div
                      tw="rounded py-2 px-6 font-medium font-sans"
                      css={{
                        backgroundColor: 'transparent',
                        color: `var(--text-stronger)`,
                        boxShadow: '0 0 0 1px var(--color-border), 0 1px 1px 1px var(--color-border)',
                        '&:hover, &:focus': {
                          backgroundColor: 'var(--bg-secondary)',
                        },
                        '&:focus': {
                          backgroundColor: 'var(--bg-secondary)',
                          borderRadius: 4,
                        },
                      }}
                    >
                      Read Notes
                    </div>
                  </Link>
                </div>
              </div>
              <div tw="md:w-1/3 md:self-stretch">
                <Tilt
                  tiltReverse={true}
                  tiltMaxAngleX="5.0"
                  tiltMaxAngleY="5.0"
                  gyroscope={true}
                  glareMaxOpacity="0.2"
                  glareReverse={true}
                  glareEnable={true}
                >
                  <Img
                    tw="rounded-md max-w-xs mx-auto md:ml-auto"
                    fluid={data.file.childImageSharp.fluid}
                    alt="Ajmal Afif"
                  />
                </Tilt>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    )
  }
  
  export default IndexPage
  