import React from 'react'
import { StaticImage } from 'gatsby-plugin-image';
import Title from '../UI/Title';
import Button from '../UI/Button';

const Hero = () => {
    return (
        <section className={'bg-[#F7F7FF] pt-[70px] max-2xl:pt-10 max-lg:pt-7 md:h-[700px] xl:h-[710px] 2xl:h-[890px] max-sm:px-3 max-lg:px-6'}>
            <div className="container h-full mx-auto flex flex-col items-center relative">
                <Title className='mb-[70px] max-2xl:mb-12 max-md:mb-4 md:max-lg:mb-8' h1>Наши <span className='text-red-500'>контакты</span></Title>
                <div className="flex max-lg:flex-col justify-between items-center max-lg:items-start w-full">
                    <div className="flex flex-col items-start max-lg:mb-20 z-10">
                        <div className="mb-6 max-md:mb-3 max-w-[615px] max-md:text-base">
                            <h3 className='text-black font-medium text-lg max-lg:text-base leading-none mb-[9px] max-md:mb-2'>Телефон:</h3>
                            <a href="tel:+79602819790" aria-label='phone' className='text-slate-900 font-bold text-4xl max-lg:text-xl max-2xl:text-[28px]'>+7 (960) 281 97-90</a>
                        </div>
                        <div className="mb-6 max-md:mb-3 max-w-[615px] max-md:text-base">
                            <h3 className='text-black font-medium text-lg max-lg:text-base leading-none mb-[9px] max-md:mb-2'>E-mail:</h3>
                            <a href="mailto:example@mail.ru" aria-label='email' className='text-slate-900 font-bold text-4xl max-lg:text-xl max-2xl:text-[28px]'>example@mail.ru</a>
                        </div>
                        <div className="mb-6 max-md:mb-3 max-w-[660px] max-md:text-base">
                            <h3 className='text-black font-medium text-lg max-lg:text-base leading-none mb-[9px] max-md:mb-2'>Наш адрес:</h3>
                            <p className='text-slate-900 font-bold text-4xl max-lg:text-xl max-2xl:text-[28px] leading-snug'>г.Санкт-Петербург, вн.тер.г. Муниципальный Округ Пулковский Меридиан, ул Бассейная, д. 27, Литера А, помещ. 23-н, офис 1</p>
                        </div>
                        <div className="mb-6 max-md:mb-3 max-w-[615px] max-md:text-base">
                            <p className='text-slate-900 font-bold text-4xl max-lg:text-xl max-2xl:text-[28px] leading-snug mb-[10px]'>9:00 ДО 21:00 ПН-СБ</p>
                            <p className='text-black font-medium text-lg max-lg:text-base  max-w-[300px]'>В субботу мы работаем по предварительной записи</p>
                        </div>
                        <Button>Оставить заявку</Button>
                    </div>
                    <div className="w-[1000px] max-lg:w-[360px] max-2xl:w-[700px] h-auto max-lg:self-center absolute max-lg:relative right-0 select-none pointer-events-none bottom-0">
                        <div className="bg-red-500 w-[560px] h-[560px] max-2xl:w-[470px] max-2xl:h-[470px] max-lg:w-[300px] max-lg:h-[300px] rounded-full absolute max-lg:right-8 max-lg:bottom-0 right-20 bottom-30"></div>
                        <StaticImage src="../../images/woman-account2.png" quality='100' alt="hero" placeholder="blurred" className='object-cover w-full h-full rounded-[30px]'/>
                    </div>
                </div>
            </div>
        </section>
    )
}

export default Hero;