import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'
import { bool, string } from 'prop-types'

import { H1, H2, Label, Span } from '../Text'
import {
  Wrapper,
  TaglineContainer,
  LoaderWrapper,
  Content,
  Hero,
  FadeBottom,
} from './styles'
import translations from '../../data/strings'
import { colours } from '../../assets/theme'
import Loader from '../Loader'
import { useTimeout } from '../../hooks/timerHooks'
import { NdcLogo, RFLogo } from '../Logo'

const InfoLayout = ({ children, loading }) => (
  <Wrapper>
    <Content>
      {loading ? (
        <LoaderWrapper>
          <Loader />
        </LoaderWrapper>
      ) : (
        children
      )}
    </Content>
    <Hero>
      <div>
        <H1>The</H1>
        <H1>Para-</H1>
        <H1>Real</H1>
        <H1
          css={`
            max-width: 50%;
          `}
        >
          Finding the Future in Unexpected Places
        </H1>
      </div>
      <TaglineContainer>
        <a href="https://newdesigncongress.org/">
          <NdcLogo active colour={colours.offwhite} />
        </a>
        <Label size="24">{'//'}</Label>
        <a href="https://reclaimfutures.org/">
          <RFLogo active colour={colours.offwhite} />
        </a>
      </TaglineContainer>
      <FadeBottom />
    </Hero>
  </Wrapper>
)

InfoLayout.propTypes = {
  loading: bool,
}

export default InfoLayout
