import React from 'react'
import { StaticImage } from 'gatsby-plugin-image';
import { Link } from 'gatsby';

import Title from './UI/Title';

const Hero = () => {
    return (
        <section className={'bg-[#F7F7FF] h-auto max-md:pb-9  md:h-[680px] xl:h-[700px] 2xl:h-[873px] max-sm:px-3 max-lg:px-6'}>
            <div className="container mx-auto flex flex-col items-center">
                <Title className='mt-[40px] xl:max-2xl:mt-5' subtitle='Получите комплексное обслуживание для устойчивого развития вашего бизнеса в новых условиях' h1>Максимизируйте вашу финансовую эффективность с профессиональными <span className='text-red-500'>бухгалтерскими услугами!</span></Title>
                <div className="md:w-[660px] lg:w-[800px] xl:w-[960px] 2xl:w-[1130px] max-sm:h-[220px] max-md:h-[400px] md:h-[410px] lg:h-[400px] xl:h-[430px] 2xl:h-[550px] mt-12 relative before:absolute before:w-full before:h-full before:bg-red-500 before:rounded-[20px] md:before:rounded-[30px] before:-bottom-2 md:before:-bottom-5 before:-right-2 md:before:-right-5 before:opacity-50">
                    <Link to='/calculator' className="flex flex-col items-center justify-center text-white w-[170px] max-md:w-32 max-md:h-32 h-[170px] bg-red-500 hover:bg-red-600 transition-all duration-200 rounded-full absolute z-10 top-0 right-12 max-md:right-1 -translate-y-1/2">
                        <p className='uppercase mb-[5px] max-md:mb-[2px] text-lg max-md:text-sm font-bold'>Калькулятор</p>
                        <p className='text-base max-md:text-xs font-medium'>Сколько это стоит ?</p>
                    </Link>
                    <StaticImage src="../images/index-hero.jpg" alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[20px] md:rounded-[30px]'/>
                </div>
            </div>
        </section>
    )
}

export default Hero;