import { h } from 'preact'

import translations from '../../data/strings'
import { H1 } from '../../components/Text'
import {
  Wrapper,
  LoaderWrapper,
  Hero,
  PositionedLogo as Logo,
  TaglineContainer,
} from './styles'
import Loader from '../../components/Loader'

const LoaderLayout = () => (
  <Wrapper>
    <Logo active />
    <LoaderWrapper>
      <Loader />
    </LoaderWrapper>
    <Hero />
    <TaglineContainer>
      {translations &&
        translations.en.underscoreTagline.map(line => (
          <H1 key={line}>{line}</H1>
        ))}
    </TaglineContainer>
  </Wrapper>
)

export default LoaderLayout