import { styled } from 'styleh-components'

const PLPpageWrapperArea = styled.section`
  display: grid;
  grid-template-areas:
    'banner'
    'content'
    'footer';
  justify-items: stretch;

  h2 {
    color: white;
    text-shadow: 1px 3px 15px var(--color-black);
    font-weight: lighter;
    text-align: center;
  }
`

const PLPbannersectionArea = styled.div`
  grid-area: banner;
  background: #34495e;
  min-height: 150px;
`

const PLPcontentsectionArea = styled.div`
  grid-area: content;
  background: var(--color-light-grey);
  min-height: 150px;
`

const PLPfootersectionArea = styled.div`
  grid-area: footer;
  background: #232325;
  min-height: 150px;
`

const FilterSectionArea = styled.aside`
  grid-area: filter;
  background: #7f8c8d;
  grid-row: 1 / 3;
`

const HeaderSectionArea = styled.div`
  grid-area: header;
  background: #95a5a6;
  min-height: 80px;
  grid-column: 2 / -1;
`

const ProductItemStyle = styled.css`
  background: #bdc3c7;
  min-height: 250px;
`

const ProductItemSectionArea = styled.div`
  ${ProductItemStyle};
`

const ProductItemSection2xArea = styled.div`
  ${ProductItemStyle};
  grid-column: span 2 / auto;
`

const PLPinnercontentsectionArea = styled.div`
  display: grid;
  grid-template-areas:
    'filter header header header'
    'filter . . .';
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 8px;
  justify-items: stretch;
`

export {
  PLPpageWrapperArea,
  PLPbannersectionArea,
  PLPcontentsectionArea,
  PLPinnercontentsectionArea,
  PLPfootersectionArea,
  FilterSectionArea,
  HeaderSectionArea,
  ProductItemSectionArea,
  ProductItemSection2xArea,
}