import React from 'react';
import { AiFillCheckCircle } from "react-icons/ai";
import { useStaticQuery, graphql } from "gatsby"
import { StaticImage} from 'gatsby-plugin-image';
import { TypeAnimation } from 'react-type-animation';
import { motion } from "framer-motion"
import { SlArrowDown } from "react-icons/sl";
import { Link as AnchorLink } from "react-scroll";

const Hero = ({...props}) => {
    const images = useStaticQuery(graphql`
    query {
        hero1: file(relativePath: {eq: "hero1.jpg"}) {
            childImageSharp {
                fluid(maxWidth: 2500, toFormat: WEBP) {
                    ...GatsbyImageSharpFluid,
                }
            }
        },
        hero2: file(relativePath: {eq: "hero2.jpg"}) {
            childImageSharp {
                fluid(maxWidth: 2500, toFormat: WEBP) {
                    ...GatsbyImageSharpFluid,
                }
            }
        },
    }`);

    return (
        <>
            <section {...props} className='pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9 min-h-[650px]'>
                <div className="container max-sm:px-3 mx-auto items-center flex justify-center relative ">
                    <div className="flex flex-col items-center max-w-5xl pb-28">
                        <StaticImage src="../images/logo.svg" alt="logo" placeholder="none" className="w-40 max-md:w-28 mb-5"/>
                        <TypeAnimation
                            sequence={[
                                'Мы помогаем создавать команды',
                                2000,
                                'Лидер рынка по разработке корпоративных мероприятий и бизнес-геймификаций',
                                2000,
                            ]}
                            wrapper="h1"
                            cursor={true}
                            className='text-5xl max-sm:text-2xl max-lg:text-4xl leading-snug font-semibold mb-6 text-white text-center uppercase'
                        />
                        <p className='text-xl max-sm:text-base max-lg:text-lg mb-6 text-white text-center'>Мы специализируемся на разработке и проведении деловых игр, тренингов, бизнес-симуляций, корпоративных мероприятий направленных на:</p>
                        <ul className='flex max-sm:flex-col'>
                            <li className="flex items-center text-lg max-md:text-base text-white sm:mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>оценку</li>
                            <li className="flex items-center text-lg max-md:text-base text-white sm:mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>обучение</li>
                            <li className="flex items-center text-lg max-md:text-base text-white"><AiFillCheckCircle className='mr-2 text-green-500'/>развитие</li>
                        </ul>
                    </div>
                </div>
                <AnchorLink to="advantages" smooth={true} className="cursor-pointer absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 max-sm:w-12 max-sm:h-12 border-white border-2 rounded-full flex items-center justify-center">
                    <motion.div animate={{y: [0, 5, 0],}} transition={{ ease: "linear", duration: 2, repeat: Infinity }}><SlArrowDown className='text-white text-xl max-sm:text-base'></SlArrowDown></motion.div>
                </AnchorLink>
                <motion.div animate={{ opacity: 0 }} transition={{ delay: 5.5 }} style={{'--image-url': `url(${images.hero1.childImageSharp.fluid.src})`}} className="-z-10 bg-fixed absolute w-full h-full top-0 bg-no-repeat bg-cover max-sm:bg-center left-0 bg-[linear-gradient(to_bottom,rgba(14,8,8,0.52),rgba(14,8,8,1)),var(--image-url)]"></motion.div>
                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 5.6 }} style={{'--image-url': `url(${images.hero2.childImageSharp.fluid.src})`}} className="-z-10 bg-fixed bg-no-repeat bg-cover max-sm:bg-center absolute w-full h-full top-0 left-0 bg-[linear-gradient(to_bottom,rgba(14,8,8,0.52),rgba(14,8,8,1)),var(--image-url)]"></motion.div>
            </section>
        </>
    );
}

export default Hero;