import React from 'react';
import { AiFillCheckCircle } from "react-icons/ai";
import Button from './UI/Button';
import { useStaticQuery, graphql } from "gatsby"
import { getImage } from 'gatsby-plugin-image';
import { TypeAnimation } from 'react-type-animation';
import { motion } from "framer-motion"
import { SlArrowDown } from "react-icons/sl";


const Hero = () => {
    const images = useStaticQuery(graphql`
    query {
        hero1: file(relativePath: {eq: "hero1.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
        hero2: file(relativePath: {eq: "hero2.jpg"}) {
            childImageSharp {
                gatsbyImageData(formats: WEBP, quality: 90)
            }
        },
    }`);
    return (
        <>
            <section className='pt-28 flex h-[calc(100vh-36px)] pb-16 relative mt-9'>
                <div className="container px-8 mx-auto items-center flex justify-center relative ">
                    <div className="flex flex-col items-center max-w-5xl pb-16">
                        <TypeAnimation
                            sequence={[
                                'Мы помогаем создавать команды.',
                                2000,
                                'Лидер рынка по разработке корпоративных мероприятий и бизнес-геймификаций.',
                                2000,
                            ]}
                            wrapper="h1"
                            cursor={true}
                            className='text-5xl leading-snug font-semibold mb-6 text-white text-center uppercase'
                        />
                        <p className='text-xl mb-6 text-white text-center'>Мы специализируемся на разработке и проведении деловых игр, тренингов, бизнес-симуляций, корпоративных мероприятий направленных на:</p>
                        <ul className='flex'>
                            <li className="flex items-center text-lg text-white mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>оценку</li>
                            <li className="flex items-center text-lg text-white mr-5"><AiFillCheckCircle className='mr-2 text-green-500'/>обучение</li>
                            <li className="flex items-center text-lg text-white"><AiFillCheckCircle className='mr-2 text-green-500'/>развитие</li>
                        </ul>
                        <Button className="max-w-[210px] mt-5">О компании</Button>
                    </div>
                </div>
                <div className="absolute bottom-16 left-1/2 -translate-x-1/2 w-16 h-16 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'></SlArrowDown></motion.div>
                </div>
                <motion.div animate={{ opacity: 0 }} transition={{ delay: 5.5 }} style={{'--image-url': `url(${getImage(images.hero1).images.fallback.src})`}} className="-z-10 bg-fixed absolute w-full h-full top-0 bg-no-repeat bg-cover 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(${getImage(images.hero2).images.fallback.src})`}} className="-z-10 bg-fixed bg-no-repeat bg-cover 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;