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] h-[873px]'}>
            <div className="container mx-auto flex flex-col items-center">
                <Breadcrumbs className='mt-[60px] mb-[50px]' data={breadcrumbs} />
                <Title className='mb-[75px]' subtitle='Коммерческая деятельность любых размеров требует участия квалифицированного бухгалтера.' h1>Наши услуги</Title>
                <div className="flex justify-between items-center w-full">
                    <div className="flex flex-col items-start">
                        <p className='max-w-[430px] text-slate-600 text-lg font-medium leading-normal mb-[30px]'>Помощь специалиста требуется не только юридическим, но и физическим лицам, особенно в ситуациях, касающихся заполнения налоговых документов и получения вычетов. «АудитКонсалт» предлагает своим клиентам комплекс услуг, помогающий быстро решить различные проблемы.</p>
                        <AnchorLink itemProp="url" className="cursor-pointer text-slate-600 hover:text-red-500 transition-all font-medium text-[28px] 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] mb-[30px]" to="urlic" smooth={true}>{'>'} Юридическим лицам</AnchorLink>
                        <Button>Оставить заявку</Button>
                    </div>
                    <div className="w-[805px] h-[450px] relative">
                        <Link to='/calculator' className="flex flex-col items-center justify-center text-white w-[150px] h-[150px] bg-red-500 hover:bg-red-600 transition-all duration-200 rounded-full absolute z-10 top-5 left-5 -translate-y-1/2 -translate-x-1/2">
                            <p className='uppercase mb-[5px] text-base font-bold'>Калькулятор</p>
                            <p className='text-sm 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;