import React from 'react'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Button from '@mui/material/Button'
import { useNavigate } from 'react-router-dom'

import mainBanner from '../../../Assests/Images/banner1.jpg'
import homeVideos from '../../../Assests/Images/home-1/video.png'
import homeBrain from '../../../Assests/Images/home-1/brain.png'
import homeClock from '../../../Assests/Images/home-1/clock.png'

import banner2 from '../../../Assests/Images/banner2.jpeg'
import { getUserId } from '../../../Config/index'
import { Parallax } from 'react-parallax'

export default function HomePage() {
  const navigate = useNavigate()
  const handleStart = () => {
    if (getUserId()) {
      navigate('/select')
    } else {
      navigate('/login')
    }
  }

  return (
    <Box>
      <img
        src={mainBanner}
        alt='Description of your image'
        style={{ width: '100%', height: '100vh' }}
      />

      <Box
        sx={{
          marginTop: '-470px',
          display: 'flex',
          flexDirection: 'column',
          width: '100%',
          justifyContent: 'center',
          textAlign: 'center',
          justifyItems: 'center',
          position: 'absolute',
        }}
      >
        <Box>
          <Typography
            variant='h6'
            component='div'
            fontWeight={800}
            fontSize={40}
            letterSpacing={2}
            sx={{
              fontFamily: 'samim',
              textShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
              color: '#ffffff',
            }}
          >
            Learn Sinhala Sign Language
          </Typography>
        </Box>
        <Box mt={1.5}>
          <Button
            onClick={handleStart}
            sx={{
              backgroundColor: '#7950F1',
              color: '#ffffff',
              height: 46,
              fontWeight: 'bold',
              letterSpacing: 2,
              borderRadius: 1.5,
              width: 220,
              mt: 1.5,
              ':hover': {
                backgroundColor: '#5a2ce6',
              },
            }}
          >
            Get Start
          </Button>
        </Box>
      </Box>

      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          flexDirection: 'row',
          width: '100%',
          mt: 15,
          mb: 15,
        }}
      >
        <Box
          sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', width: '40%' }}
        >
          <Typography
            variant='h6'
            component='div'
            fontWeight={750}
            lineHeight={1}
            fontSize={35}
            color={'#555555'}
            mb={2}
            sx={{}}
          >
            SpeakEzy is a fun and free resource
          </Typography>
          <Typography
            variant='h6'
            component='div'
            lineHeight={1}
            fontWeight={500}
            fontSize={25}
            color={'#555555'}
            width={300}
            mb={2}
          >
            for learning SSL at your own pace.
          </Typography>
          <Button
            sx={{
              border: 1,
              borderBlockColor: '#7950F1',
              backgroundColor: '#ffffff',
              color: '#7950F1',
              width: 250,
              ':&hover': {
                backgroundColor: 'ActiveBorder',
              },
            }}
          >
            Play/Pause Video
          </Button>
          <Button
            sx={{
              backgroundColor: '#7950F1',
              color: '#ffffff',
              width: 250,
              mt: 2,
              ':hover': {
                backgroundColor: '#5a2ce6',
              },
            }}
          >
            Sign up for free
          </Button>
        </Box>
        <Box
          sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', width: '45%' }}
        >
          <img
            src={mainBanner}
            alt='Description of your image'
            style={{ width: '100%', height: '450px' }}
          />
        </Box>
      </Box>

      <Box
        sx={{
          display: 'flex',
          justifyContent: 'center',
          flexDirection: 'column',
          width: '100%',
          mb: 20,
        }}
      >
        <Box
          sx={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingLeft: '200px',
            paddingRight: '200px',
          }}
        >
          <Box
            sx={{ width: '40%', display: 'flex', justifyContent: 'center', justifyItems: 'center' }}
          >
            <img
              src={homeVideos}
              alt='Description of your image'
              style={{ width: '170px', height: '170px' }}
            />
          </Box>
          <Box
            sx={{
              width: '40%',
              justifyContent: 'center',
              textAlign: 'center',
              alignSelf: 'center',
            }}
          >
            <Typography variant='h6' component='div' fontWeight={750} fontSize={35} mb={2} sx={{}}>
              SSL in Motion
            </Typography>
            <Typography variant='h6' component='div' fontWeight={500} fontSize={25} sx={{}}>
              See SSL come alive with video-based learning material.
            </Typography>
          </Box>
        </Box>
        <Box
          sx={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingLeft: '200px',
            paddingRight: '200px',
            marginTop: '100px',
          }}
        >
          <Box
            sx={{
              width: '40%',
              justifyContent: 'center',
              textAlign: 'center',
              alignSelf: 'center',
            }}
          >
            <Typography variant='h6' component='div' fontWeight={750} fontSize={35} mb={2} sx={{}}>
              Interactive Learning
            </Typography>
            <Typography variant='h6' component='div' fontWeight={500} fontSize={25} sx={{}}>
              Engage in active learning with interactive exercises, quick lectures, and reviews.
            </Typography>
          </Box>
          <Box
            sx={{ width: '40%', display: 'flex', justifyContent: 'center', justifyItems: 'center' }}
          >
            <img
              src={homeBrain}
              alt='Description of your image'
              style={{ width: '150px', height: '150px' }}
            />
          </Box>
        </Box>
        <Box
          sx={{
            width: '100%',
            display: 'flex',
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingLeft: '200px',
            paddingRight: '200px',
            marginTop: '100px',
          }}
        >
          <Box
            sx={{ width: '40%', display: 'flex', justifyContent: 'center', justifyItems: 'center' }}
          >
            <img
              src={homeClock}
              alt='Description of your image'
              style={{ width: '170px', height: '170px' }}
            />
          </Box>
          <Box
            sx={{
              width: '40%',
              justifyContent: 'center',
              textAlign: 'center',
              alignSelf: 'center',
            }}
          >
            <Typography variant='h6' component='div' fontWeight={750} fontSize={35} mb={2} sx={{}}>
              Time Efficient
            </Typography>
            <Typography variant='h6' component='div' fontWeight={500} fontSize={25} sx={{}}>
              Focus on learning the ASL most relevant to you with a modular curriculum.
            </Typography>
          </Box>
        </Box>
      </Box>

      <Parallax bgImage={banner2} strength={500}>
        <div style={{ height: 500 }}>
          <Typography
            variant='h3'
            component='div'
            fontWeight={800}
            fontSize={48}
            letterSpacing={2}
            sx={{
              fontFamily: 'samim',
              textShadow: '2px 2px 4px rgba(0, 0, 0, 0.3)',
              color: '#ffffff',
              textAlign: 'center',
              paddingTop: '200px',
            }}
          >
            Let Us Dive to SSL
          </Typography>
        </div>
      </Parallax>
    </Box>
  )
}
