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

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

const Workers = () => {
    return (
        <section className="py-[90px] max-md:py-9 max-sm:px-3 max-md:px-6 bg-[#F7F7FF]">
            <div className="container mx-auto">
                <Title titleClass='max-w-[500px]' className='mb-[70px] max-md:mb-8' subtitle='Максимизируйте свои налоговые преимущества'>Доверьтесь опытным специалистам</Title>
                <div className="flex justify-between items-center max-lg:items-start max-lg:flex-col">
                    <div className="w-[670px] max-lg:w-full max-sm:h-[300px] max-md:h-[400px] lg:max-xl:max-w-[550px] max-lg:h-[500px] h-[456px] relative max-lg:order-2">
                        <div className="flex flex-col items-center justify-center text-white w-[190px] max-lg:w-[145px] h-[190px] max-lg:h-[145px] bg-red-500 rounded-full absolute z-10 top-5 right-5 xl:max-2xl:right-9 -translate-y-1/2 xl:translate-x-1/2">
                            <p className='uppercase text-center text-lg max-lg:text-base font-medium'>Мы знаем более<br/><b className='font-semibold max-lg:text-lg text-[28px]'>1800</b><br/> законов РФ</p>
                        </div>
                        <StaticImage src="../../images/campaign-creators.jpg"  alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
                    </div>
                    <div className="flex flex-col items-start max-w-[520px] lg:max-xl:max-w-[400px] mr-6 max-lg:mr-0 max-lg:mb-14 max-lg:order-1">
                        <p className='text-slate-600 font-medium text-xl max-lg:text-base leading-normal mb-7 max-lg:mb-5'>Мы практикуем индивидуальный подход к каждому клиенту. Данное правило является основополагающим в нашей работе с заказчиками. Мы полностью вникаем в суть проблем своего клиента, думаем вместе с ним, анализируем особенности его бизнеса.</p>
                        <p className='text-slate-600 font-medium text-xl max-lg:text-base leading-normal mb-[30px] max-lg:mb-5'>Это позволяет нам понять настоящие причины возникновения сложностей и подыскать оптимальные способы решения</p>
                        <Button>Оставить заявку</Button>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Workers;