import { styled } from 'styleh-components'

/**
 * Page Area
 */
const PageArea = styled.div `
  display: grid;
  grid-template-areas:
    'header'
    'adspotArea'
    'banner'
    'categorygrid'
    'promo'
    'tabpanel'
    'video'
    'video1'
    'newsletter'
    'footer';
`
/**
 * Header
 */
const HeaderArea = styled.div `
  grid-area: header;
  display: grid;
  grid-template-areas: 'headerTopArea' 'headerBottomArea';
`
const HeaderTopArea = styled.div `
  grid-area: headerTopArea;
  background-color: #273238;
  min-height: 44px;
`
const HeaderBottomArea = styled.div `
  grid-area: headerBottomArea;
  background-color: #36474f;
  min-height: 82px;
`
/**
 * Adspot
 */
const AdspotArea = styled.div `
  grid-area: adspotArea;
  background-color: #465a65;
  min-height: 40px;
`

/**
 * Content
 */
const PageContentArea = styled.div `
  grid-area: banner;
  background-color: #ccc;
  min-height: 410px;
  display: grid;
  grid-template-areas: 'heading' 'multibanner';
  background: url(//d16rliti0tklvn.cloudfront.net/2673/1520333247025.1838917399.jpg)
    0px 0px / 100% no-repeat;
`
const HeadingArea = styled.div `
  grid-area: heading;
  background: #546f7a;
  min-height: 244px;
`
const MultibannerArea = styled.div `
  grid-area: multibanner;
  background: #607d8b;
  min-height: 680px;
`

const CategoryGridArea = styled.div `
  grid-area: categorygrid;
  background: #78909c;
  min-height: 351px;
`
const PromoArea = styled.div `
  grid-area: promo;
  background: #90a4ad;
  min-height: 136px;
`

const TabPanelArea = styled.div `
  grid-area: tabpanel;
  background: #b0bfc6;
  min-height: 460px;
`
const VideoWrapArea = styled.div `
  grid-area: video;
  min-height: 550px;
  background: #d0d7dd;
`
const VideoWrap1Area = styled.withComponent(VideoWrapArea) `
  grid-area: video1;
  background: #ebeff2;
`
const NewsletterArea = styled.div `
  grid-area: newsletter;
  background: #42a5f6;
  min-height: 153px;
`
/**
 * Footer
 */
const FooterArea = styled.div `
  background-color: #8dcbfc;
  grid-area: footer;
  min-height: 297px;
`

export {
  PageArea,
  HeaderArea,
  HeaderTopArea,
  AdspotArea,
  HeaderBottomArea,
  PageContentArea,
  HeadingArea,
  MultibannerArea,
  FooterArea,
  CategoryGridArea,
  PromoArea,
  TabPanelArea,
  VideoWrapArea,
  VideoWrap1Area,
  NewsletterArea,
}