// import { FacebookIcon, InstagramIcon, LinkedinIcon } from '@loft/react-icons';
// import {
//  Accordion,
//  Container,
//  Divider,
//  Flex,
//  Grid,
//  GridItem,
//  Image,
//  Link,
//  mediaQueries,
//  Typography,
//  UISpacer,
//} from '@loft/react-loft';
// import { appDownload, color, logo } from '@loft/tokens-loft';

() => {
  const centralizeMobileClass = css({
    justifyContent: 'center',
    width: '100%',
    [mediaQueries.sm.up]: {
      justifyContent: 'flex-start',
      width: 'auto',
    },
  })().className;

  const hideOnMobile = css({
    display: 'none', 
    [mediaQueries.md.up]: { display: 'flex' },
  })().className;

  const hideOnTabletUp = css({
    display: 'flex', 
    [mediaQueries.md.up]: { display: 'none' },
  })().className;

  const TalkToUs = (
    <>
      <Typography textStyle="overline" mb="innerBase">
        Telefone
      </Typography>
      <Typography textStyle="paragraph-sm-bold" mb="layoutBase03">
        (11) 4020-2208
        <br />
        (11) 0800-591-2208
      </Typography>

      <Typography textStyle="overline" mb="innerBase">
        Whatsapp
      </Typography>
      <Typography textStyle="paragraph-sm-bold" mb="innerBase">
        (11) 4950-5762
      </Typography>
      <Typography textStyle="caption" mb="layoutBase03">
        Segunda a sexta das 8h às 21h, aos sábados das 8h às 16h.
      </Typography>

      <Typography textStyle="paragraph-sm-bold" mb="innerBase">
        meajuda@loft.com.br
      </Typography>
      <Typography textStyle="caption" mb="layoutBase03">
        Atendimento a clientes e dúvidas gerais. Respostas em até um dia útil.
      </Typography>

      <Typography textStyle="paragraph-sm-bold" mb="innerBase">
        alocorretor@loft.com.br
      </Typography>
      <Typography textStyle="caption" mb="layoutBase03">
        Atendimento exclusivo a corretores. Respostas em até um dia útil.
      </Typography>

      <Typography textStyle="paragraph-sm-bold" mb="innerBase">
        imprensa@loft.com.br
      </Typography>
      <Typography textStyle="caption">
        Atendimento exclusivo à imprensa.
      </Typography>
    </>
  );

  const AboutLoft = (
    <Flex gap="base02" flexDirection="column">
      <Link variant="secondary" quiet textStyle="paragraph-sm">Central de Ajuda</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Sobre nós</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Como vender</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Como comprar</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Quero ser fornecedor</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Loft Mexico</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Carreiras</Link>
    </Flex>
  );

  const Explore = (
    <Flex gap="base02" flexDirection="column">
      <Link variant="secondary" quiet textStyle="paragraph-sm">Blog da Loft</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Financiamento</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Simulador de compra</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Loft Transforma</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Indica Loft</Link>
      <Link variant="secondary" quiet textStyle="paragraph-sm">Mapa do site</Link>
    </Flex>
  );
  
  return (
    <Container maxWidth="xxl">
      <Grid gap={{ md: { vertical: 'base07', horizontal: 'base04' }, lg: 'base04' }}>
        <GridItem xs={12} md={6} lg={4}>
          <Image src={logo.primary.key.svg} />

          <Typography mt="layoutBase03" mb="layoutBase04">
            A Loft é especialista no processo de compra e venda de imóveis no Brasil e no México, utilizando tecnologia e dados para tornar essa experiência mais simples, segura e menos burocrática.
          </Typography>

          <Typography textStyle="overline" mb="innerBase">
            Endereço
          </Typography>
          <Typography>
            Rua Tabapuã, 743 - Itaim Bibi, São Paulo - SP, 04533-012
          </Typography>
          <UISpacer md="base03" />

          <Typography textStyle="paragraph-lg-bold" mb="innerBase02" className={hideOnMobile}>
            Baixe nosso app
          </Typography>

          <Flex gap="base02" flexWrap="nowrap" className={hideOnMobile}>
            <Image src={appDownload.appStore.svg} width="130" />
            <Image src={appDownload.playStore.svg} width="140" />
          </Flex>
        </GridItem>
        <GridItem xs={0} md={0} lg={1} />

        <GridItem xs={0} sm={0} md={6} lg={2}>
          <Typography textStyle="subtitle" mb="layoutBase02">
            Como falar com a gente
          </Typography>

          {TalkToUs}
        </GridItem>

        <GridItem xs={12} md={0} lg={0} xl={0} xxl={0}>
          <Accordion title="Como falar com a gente" divider={false}>
            {TalkToUs}
          </Accordion>
        </GridItem>

        <GridItem xs={0} sm={0} md={6} lg={2}>
          <Typography textStyle="subtitle" mb="layoutBase02">
            Sobre a Loft
          </Typography>

          {AboutLoft}
        </GridItem>

        <GridItem xs={12} md={0} lg={0} xl={0} xxl={0}>
          <Accordion title="Sobre a Loft" divider={false}>
            {AboutLoft}
          </Accordion>
        </GridItem>

        <GridItem xs={0} sm={0} md={6} lg={2}>
          <Typography textStyle="subtitle" mb="layoutBase02">
            Explore
          </Typography>

          {Explore}
        </GridItem>

        <GridItem xs={12} md={0} lg={0} xl={0} xxl={0}>
          <Accordion title="Explore" divider={false}>
            {Explore}
          </Accordion>

          <Typography textStyle="paragraph-lg-bold" mb="innerBase02" mt="layoutBase02" className={hideOnTabletUp}>
            Baixe nosso app
          </Typography>

          <Flex gap="base02" className={hideOnTabletUp}>
            <Image src={appDownload.appStore.svg} width="130" />
            <Image src={appDownload.playStore.svg} width="140" />
          </Flex>
        </GridItem>

        <GridItem xs={12}>
          <Divider />

          <Flex gap={{ horizontal: 'base03', vertical: 'base02' }}>
            <Link variant="secondary" quiet textStyle="paragraph-sm">Alô Compliance</Link>
            <Link variant="secondary" quiet textStyle="paragraph-sm">Políticas de Privacidade</Link>
            <Link variant="secondary" quiet textStyle="paragraph-sm">Termos e Condições de Uso</Link>
            <Link variant="secondary" quiet textStyle="paragraph-sm">Guia de Conduta e Ética</Link>
          </Flex>
        </GridItem>

        <GridItem xs={12}>
          <Flex justifyContent="space-between">
            <Typography textStyle="caption" mb="layoutBase03">
              @ 2022 Loft. Todos os direitos reservados.
            </Typography>

            <Flex gap="base03" className={centralizeMobileClass}>
              <InstagramIcon />
              <LinkedinIcon />
              <FacebookIcon />
            </Flex>
          </Flex>
        </GridItem>
      </Grid>
    </Container>
  );
}