import React, { useState } from 'react'
import { StaticImage } from 'gatsby-plugin-image';
import { Link } from 'gatsby';
import { Link as AnchorLink } from "react-scroll";

import Breadcrumbs from '../UI/Breadcrumbs/Breadcrumbs';
import Title from '../UI/Title';
import Button from '../UI/Button';

const Hero = () => {
    const [breadcrumbs] = useState([
        {id: 0, title: 'Главная', path: '/'},
        {id: 1, title: 'Услуги'}
    ]);
    return (
        <section className={'bg-[#F7F7FF] max-md:pb-9  md:h-[740px] xl:h-[760px] 2xl:h-[873px] max-sm:px-3 max-lg:px-6'}>
            <div className="container mx-auto flex flex-col items-center">
                <Breadcrumbs className='mt-[60px] max-md:mt-0 mb-[50px] max-md:mb-7' data={breadcrumbs} />
                <Title className='mb-[75px] max-md:mb-8' subtitle='Коммерческая деятельность любых размеров требует участия квалифицированного бухгалтера.' h1>Наши услуги</Title>
                <div className="flex max-md:flex-col justify-between items-center max-lg:items-start w-full">
                    <div className="flex flex-col items-start max-md:mb-10">
                        <p className='max-w-[430px] text-slate-600 text-lg max-md:text-base font-medium leading-normal mb-[30px] max-md:mb-6'>Помощь специалиста требуется не только юридическим, но и физическим лицам, особенно в ситуациях, касающихся заполнения налоговых документов и получения вычетов. «АудитКонсалт» предлагает своим клиентам комплекс услуг, помогающий быстро решить различные проблемы.</p>
                        <AnchorLink itemProp="url" className="cursor-pointer text-slate-600 hover:text-red-500 transition-all font-medium text-[28px] max-md:text-2xl mb-5" to="physlic" smooth={true}>{'>'} Физическим лицам</AnchorLink>
                        <AnchorLink itemProp="url" className="cursor-pointer text-slate-600 hover:text-red-500 transition-all font-medium text-[28px] max-md:text-2xl mb-[30px]" to="urlic" smooth={true}>{'>'} Юридическим лицам</AnchorLink>
                        <Button>Оставить заявку</Button>
                    </div>
                    <div className="w-[805px] max-md:w-full h-[450px] max-sm:h-[250px] max-md:h-[350px] max-lg:w-[400px] max-lg:h-[300px] relative">
                        <Link to='/calculator' className="flex flex-col items-center justify-center text-white w-[150px] max-lg:w-[120px] h-[150px] max-lg:h-[120px] bg-red-500 hover:bg-red-600 transition-all duration-200 rounded-full absolute z-10 top-5 lh:left-5 max-lg:right-5 -translate-y-1/2 lg:-translate-x-1/2">
                            <p className='uppercase mb-[5px] text-base max-lg:text-sm font-bold'>Калькулятор</p>
                            <p className='text-sm max-lg:text-xs font-medium'>Сколько это стоит ?</p>
                        </Link>
                        <StaticImage src="../../images/services-hero.jpg" alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Hero;