/** @jsx jsx */
import { jsx } from 'theme-ui'
import facebook from '../../images/facebook.png'
import insta from '../../images/insta.png'

import { Link } from 'gatsby'

// import logo from '../../images/nest/logo-mic-2.png'
// import facebook from '../../images/nest/facebook.png'
// import insta from '../../images/nest/insta.png'
// import whatsapp from '../../images/nest/whatsapp.png'

import { Container, Grid, Text } from 'gatsby-theme-landmarks-core'

const Footer = () => (
  <div
    sx={{
      background: '#2e3948',
      color: '#6C6C6C'
    }}
  >
    <Container
      sx={{
        position: 'relative',
        pt: 2,
        pl: 4,
        pr: 4
      }}
    >
      <Grid gap={4} columns={[1, null, 3]}>
        <div
          sx={{
            height: '100%',
            p: 4
          }}
        >
          <div
            sx={{
              pb:5,
              pt:2,
              alignContent:'center'
            }}
          >
            <ul sx={{
              display:'inline-flex',
              listStyle:'none',
              alignContent:'center'
            }}>

            <li sx={{
              pr:'40px'
            }}>
                <a href="https://www.facebook.com/thenestcluj/"
                  target="_blank">
              <img
                src={facebook}
                alt="The Nest Facebook"
                sx={{
                  filter: 'grayscale(100%)',
                  background: 'none',
                  height: '40px',
                  width: '40px',
                  position: 'absolute',
                }}
              />
            </a>
              </li>

              <li sx={{
                pl: '40px'
              }}>
                <a href="https://www.instagram.com/thenestcluj/"
                  target="_blank">
              <img
                src={insta}
                alt="The Nest Instagram"
                sx={{
                  filter: 'grayscale(100%)',
                  background: 'none',
                  height: '40px',
                  width: '40px',
                  position: 'absolute',
                }}
              />
            </a>
              </li>
            </ul>
          </div>
          <Text variant="small">
            Proiect dezvoltat de SC Bina Real Estate SRL, CUI: 23712270,
            J40/6650/2008, STR. SCORŢARILOR NR.12, Cluj Napoca
          </Text>
        </div>
        <div></div>
        <div sx={{
          pt:4
        }}>
          <p>
            <Link sx={{ color: 'rgba(255, 255, 255, .5)' }} to="/apartamente-noi">
              Apartamente
            </Link>
          </p>
          <p>
            <Link sx={{ color: 'rgba(255, 255, 255, .5)' }} to="/politica-confidentialitate-gdpr">
              Protecţia Datelor cu Caracter Personal
            </Link>
          </p>
          <p>
            <a
              href="https://anpc.ro/"
              target="_blank"
              rel="noopener noreferrer"
              sx={{ color: 'rgba(255, 255, 255, .5)' }}
            >
              ANPC
            </a>
          </p>
        </div>
      </Grid>
    </Container>
  </div>
)

export default Footer