// ─────────────────────────────────────────────────────────────────────────────
// import
// ─────────────────────────────────────────────────────────────────────────────

import React from 'react';
import {
  Main, Section, Subheading, Text,
} from '../components';
import {
  HeroContainer,
  WorksContainer,
  AvailabilityContainer,
  // BlogContainer, // TODO add blog pages
  SEOContainer,
} from '../containers';

// ─────────────────────────────────────────────────────────────────────────────
// component
// ─────────────────────────────────────────────────────────────────────────────

export default function HomePage({
  data: {
    pagesJson: {
      meta: seo,
      body: { hero, location, availability },
    },
    allWorkJson: { edges: works },
  },
}) {
  return (
    <Main
      gridTemplate={{
        xs: "'hero' 'based' 'availability' 'work' 'blog'",
        md: "'hero hero' 'based availability' 'work blog' / 1fr 1fr",
      }}
      gridGap="10vh 4rem"
    >
      <SEOContainer {...{ seo }} />
      <HeroContainer hero={hero} />
      <Section gridArea="based">
        <Subheading>{location.title}</Subheading>
        <Text fontSize="3rem" fontWeight="700">
          {location.text}
        </Text>
      </Section>
      <Section gridArea="availability">
        <Subheading>{availability.title}</Subheading>
        <AvailabilityContainer availability={availability} />
      </Section>
      <Section gridArea="work" id="work">
        <Subheading>latest client work</Subheading>
        <WorksContainer
          works={works.map(({ node: { meta, body } }) => ({
            ...meta,
            ...body,
          }))}
        />
      </Section>
      {/* <Section gridArea="blog" id="blog">
        <Subheading>latest blog articles</Subheading>
        <BlogContainer posts={posts} />
      </Section> */}
    </Main>
  );
}

export const query = graphql`
  query HomePage {
    pagesJson(meta: { permalink: { eq: "/" } }) {
      meta {
        title
        description
      }
      body {
        hero {
          title
        }
        location {
          title
          text
        }
        availability {
          title
          text
        }
      }
    }
    allWorkJson(sort: { fields: [meta___date], order: DESC }) {
      edges {
        node {
          meta {
            permalink
          }
          body {
            title
            tagline
          }
        }
      }
    }
  }
`;

@@ -335,16 +335,21 @@
 r,%0A 
- //
  Blog
+Previews
 Cont
@@ -358,31 +358,8 @@
 ner,
- // TODO add blog pages
 %0A  S
@@ -739,16 +739,57 @@
 orks %7D,%0A
+    allMarkdownRemark: %7B edges: posts %7D,%0A
   %7D,%0A%7D) 
@@ -1710,12 +1710,8 @@
     
- %7B/*
  %3CSe
@@ -1810,16 +1810,24 @@
    %3CBlog
+Previews
 Containe
@@ -1827,16 +1827,26 @@
 ontainer
+%0A         
  posts=%7B
@@ -1850,17 +1850,104 @@
 s=%7Bposts
-%7D
+.map((%7B node: %7B frontmatter: post %7D %7D) =%3E (%7B%0A            ...post,%0A          %7D))%7D%0A       
  /%3E%0A    
@@ -1962,12 +1962,8 @@
 ion%3E
- */%7D
 %0A   
@@ -2496,32 +2496,32 @@
           title%0A
-
             tagl
@@ -2560,15 +2560,304 @@
 %7D%0A    %7D%0A
+    allMarkdownRemark(%0A      filter: %7B fileAbsolutePath: %7B regex: %22/blog/%22 %7D %7D%0A      sort: %7B fields: %5Bfrontmatter___date%5D, order: DESC %7D%0A      limit: 5%0A    ) %7B%0A      edges %7B%0A        node %7B%0A          frontmatter %7B%0A            permalink%0A            title%0A          %7D%0A        %7D%0A      %7D%0A    %7D%0A
   %7D%0A%60;%0A

add blog snippets