import { Fragment } from 'react';
import Navbar from '../../components/navbar/Navbar';
import { Box, Typography, Divider, IconButton } from '@mui/material';
import InstagramIcon from '@mui/icons-material/Instagram';
import { Link } from 'react-router-dom';
import './styles.css';
import { useState } from 'react';
import Modal from '../../components/ux/Modal';
const Home = () => {
  const [openModal, setOpenModal] = useState(false);
  return (
    <Fragment>
      <Navbar />
      <Box
        sx={{
          height: '100vh',
          width: '100%',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#fff',
          textAlign: 'center',
          px: 2,
          overflow: 'hidden',
          '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundImage: 'url(bg-0.jpg)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',

            zIndex: 1,
          },
          '&::after': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            zIndex: 2,
          },
        }}
      >
        <Box
          sx={{
            position: 'relative',
            zIndex: 3,
            maxWidth: 800,
            backgroundColor: 'rgba(0, 0, 0, 0.6)',
            padding: 4,
            borderRadius: 2,
          }}
        >
          <Typography
            variant='h2'
            component='h1'
            gutterBottom
            sx={{
              fontWeight: 'bold',
              textShadow: '2px 2px 4px rgba(0, 0, 0, 0.7)',
              fontSize: { xs: '2rem', md: '3rem' },
            }}
          >
            Electricistas Dana
          </Typography>
          <Divider sx={{ backgroundColor: '#fff', mb: 4 }} />
          <Typography
            variant='body1'
            component='p'
            gutterBottom
            sx={{
              textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
              mb: 4,
              fontSize: { xs: '1rem', md: '1.5rem' },
              fontWeight: { xs: 'bold', md: 'normal' },
            }}
          >
            Coordinamos voluntarios y averías de suministro eléctrico.
          </Typography>
          <Link
            to='https://docs.google.com/forms/d/e/1FAIpQLSc4AEd_omBLePop9-RBylFjTI-57kaBvYGiMx5nU6ggpTDYGA/viewform'
            className='formLink'
            target='_blank'
            rel='noopener noreferrer'
          >
            <img
              style={{ marginRight: 4 }}
              src='contact-form.png'
              alt='plus'
              width={25}
              height={25}
            />

            <Typography
              sx={{
                color: '#000',
                textDecoration: 'none',
                fontSize: { xs: '1rem', md: '1.5rem' },
                fontWeight: { xs: 'bold', md: 'normal' },
              }}
            >
              Registrar Incidencia
            </Typography>
          </Link>
          <Typography
            variant='body1'
            component='p'
            sx={{
              mt: 3,
              textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
              fontSize: { xs: '1rem', md: '1.5rem' },
              fontWeight: { xs: 'bold', md: 'normal' },
            }}
          >
            Ayudamos a restablecer el servicio mínimo en las viviendas
            afectadas, de forma totalmente gratuita.
          </Typography>

          <Typography
            variant='body1'
            component='p'
            sx={{
              mt: 2,
              textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
              fontSize: { xs: '1rem', md: '1.5rem' },
              fontWeight: { xs: 'bold', md: 'normal' },
            }}
          >
            Indique únicamente averías eléctricas.
          </Typography>
          <Typography
            variant='body1'
            component='p'
            sx={{
              mt: 1,
              textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
              fontSize: { xs: '1rem', md: '1.5rem' },
              fontWeight: { xs: 'bold', md: 'normal' },
            }}
          >
            No se atenderán avisos de otro tipo.
          </Typography>
          <Divider sx={{ backgroundColor: '#fff', mt: 4 }} />
          <Typography
            variant='button'
            component='p'
            onClick={() => {
              setOpenModal(true);
            }}
            sx={{
              mt: 3,
              textShadow: '1px 1px 3px rgba(0, 0, 0, 0.7)',
              fontSize: { xs: '1rem', md: '1.5rem' },
              fontWeight: { xs: 'bold', md: 'normal' },
              cursor: 'pointer',
              '&:hover': {
                textDecoration: 'underline',
              },
            }}
          >
            ¿Quienes somos?
          </Typography>
        </Box>

        <Modal open={openModal} handleClose={() => setOpenModal(false)}>
          <Box
            sx={{
              padding: { xs: 2, md: 4 },
              backgroundColor: '#fff',
              color: '#414141',
              borderRadius: 2,
              maxWidth: 800,
              margin: 'auto',
              textAlign: 'center',
            }}
          >
            <Typography
              variant='h1'
              component='h1'
              gutterBottom
              sx={{
                fontWeight: 'bold',

                fontSize: { xs: '2rem', md: '3rem' },
              }}
            >
              ¿Quiénes somos?
            </Typography>

            <Divider sx={{ backgroundColor: '#414141', mb: 4 }} />
            <Typography
              variant='body1'
              component='p'
              gutterBottom
              sx={{
                mb: 4,
              }}
            >
              Somos un grupo de voluntarios electricistas comprometidos en
              ofrecer apoyo eléctrico mínimo vital allí donde se necesita.
              Nuestro objetivo es restablecer un servicio básico en las
              viviendas afectadas para que puedan contar con luz y mantener en
              funcionamiento electrodomésticos esenciales como el frigorífico.
            </Typography>

            <Typography
              variant='body1'
              component='p'
              gutterBottom
              sx={{
                mb: 4,
              }}
            >
              Los usuarios pueden enviar un aviso a través de un formulario
              sencillo, y nuestros voluntarios atenderán las incidencias por
              zonas dentro de sus posibilidades. Damos prioridad a aquellos que
              están aislados y que aún no han recibido ayuda, así como a las
              personas electro-dependientes que necesitan tener máquinas en
              funcionamiento para su subsistencia.
            </Typography>
            <Divider sx={{ backgroundColor: '#414141', mb: 4 }} />
            <Typography
              variant='button'
              component='button'
              gutterBottom
              sx={{
                fontWeight: { xs: 'bold', md: 'normal' },
                backgroundColor: 'transparent',
                border: 'none',

                cursor: 'pointer',
                '&:hover': {
                  textDecoration: 'underline',
                },
              }}
              onClick={() => {
                setOpenModal(false);
              }}
            >
              cerrar
            </Typography>
          </Box>
        </Modal>

        <Box
          sx={{
            position: 'absolute',
            bottom: 20,
            width: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            zIndex: 3,
          }}
        >
          <IconButton
            href='https://www.instagram.com/p/DCCjwSPAkmb/?igsh=MTh5MXAwcHljeHk0OA%3D%3D'
            target='_blank'
            sx={{ color: '#fff' }}
            aria-label='Instagram'
          >
            <InstagramIcon />
          </IconButton>
          <Typography variant='body2' sx={{ mt: 1 }}>
            © ElectricistasDana.com
          </Typography>
        </Box>
      </Box>
    </Fragment>
  );
};

export default Home;
