import React from 'react'
import { YMaps, Map } from '@pbe/react-yandex-maps';
import Input from './UI/Input';
import { BsPerson } from "@react-icons/all-files/bs/BsPerson";
import { BsTelephone } from "@react-icons/all-files/bs/BsTelephone";
import Button from './UI/Button';
import Social from './UI/Social';

const Contacts = () => {
    return (
        <section className='py-[90px] max-lg:py-9 max-sm:px-3 max-lg:px-6'>
            <div className="container mx-auto border-[1px] border-slate-900 rounded-[20px] flex max-lg:flex-col justify-between overflow-hidden">
                <form className="bg-slate-900 p-[60px] max-md:p-10 w-full max-w-[632px] max-lg:max-w-none">
                    <h2 className='text-white text-[28px] max-md:text-xl font-medium max-w-[405px] mb-10 max-md:mb-6'>Получите индивидуальные решения для вашего бизнеса</h2>
                    <div className="w-[320px]">
                        <Input Ico={BsPerson} wrapperClasses='mb-[30px] max-md:mb-6' placeholder='Ваше имя'/>
                        <Input type='tel' Ico={BsTelephone} wrapperClasses='mb-[25px]' placeholder='+7 (___) ___ - __ - __'/>
                    </div>
                    <p className='text-white text-xs font-normal max-w-[286px] mb-[30px] max-md:mb-6'>Нажимая на кнопку “Отправить заявку”, Вы даете согласие на обработку Ваших персональных данных</p>
                    <div className="flex max-sm:flex-col items-center max-sm:max-w-[190px]">
                        <Button className='h-[46px] mr-7 max-sm:mr-0 max-sm:mb-2'>Оставить заявку</Button>
                        <p className='text-white font-medium text-base mr-7 max-sm:mr-0 max-sm:mb-2'>или</p>
                        <Social/>
                    </div>
                </form>
                <YMaps className="w-full max-md:h-[350px]">
                    <Map className="w-full max-md:h-[350px]" defaultState={{ center: [55.75, 37.57], zoom: 9 }} />
                </YMaps>
            </div>
        </section>
    )
}

export default Contacts;