import CheckLabel from './CheckLabel'
import Braces from './Braces'
import Thesis from './Thesis'
import { useState } from 'react'
import axios from 'axios'
import { InputMask } from '@react-input/mask'

const DiscussSection = () => {
    const [consult, setConsult] = useState({
        fio: '',
        phone: '',
        email: '',
        desc: '',
        conf: false
    })

    const mail = () => {
        axios.create({
            headers: {
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Origin': 'http://commit-it.ru:5173',
                'Content-Type': 'application/json'
            }
        })
        if (consult.conf) {
            axios.post('http://commit-it.ru:3000/send_mail', consult).then(res => {
                if (res.data == 'OK') {
                    setConsult({
                        fio: '',
                        phone: '',
                        email: '',
                        desc: '',
                        conf: false
                    })
                }
            })
        }
    }

    return (
        <section id='discuss' className='max-w-7xl w-full h-auto flex flex-col sm:grid sm:grid-cols-5 gap-4'>
            <div className='flex flex-col col-span-3 gap-4 p-8'>
                <span className='text-3xl sm:text-4xl'>
                    Обсудить <span className='text-blue-500'>проект</span>
                </span>

                <span className='text-base-content/70'>
                    От концепции до релиза — подберём оптимальную стратегию разработки за 1 рабочий день
                </span>

                <CheckLabel text='Ответим в течение 1 рабочего дня' />
                <CheckLabel text='Оценка стоимости и сроков' />
                <CheckLabel text='Обсудим формат сотрудничества' />

                <div id='form' className='flex flex-col gap-4'>
                    <input type="name" onChange={(e) => { setConsult({ ...consult, fio: e.target.value }) }} value={consult.fio} placeholder="Введите ваше имя *" required className="input rounded-full w-full border-[#1C8EFF] outline-none" />
                    <InputMask type='tel' mask="+7 (___) ___-__-__" replacement={{ _: /\d/ }} onChange={(e) => { setConsult({ ...consult, phone: e.target.value }) }} value={consult.phone} placeholder="+7 (000) 000-00-00 *" required className="input rounded-full w-full border-[#1C8EFF] outline-none" />
                    <input onChange={(e) => { setConsult({ ...consult, email: e.target.value }) }} value={consult.email} type="email" placeholder="mail@company.ru *" required className="input validator rounded-full w-full border-[#1C8EFF] outline-none" />
                    <textarea onChange={(e) => { setConsult({ ...consult, desc: e.target.value }) }} value={consult.desc} rows={5} cols={30} className="textarea rounded-2xl w-full border-[#1C8EFF] outline-none" placeholder="Опишите вашу ситуацию (необязательно)"></textarea>

                    <label className="label flex flex-row items-start">
                        <input type="checkbox" onChange={(e) => { setConsult({ ...consult, conf: e.target.checked }) }} checked={consult.conf} className="mt-1 checkbox checkbox-xs checked:border-blue-500 checked:bg-blue-400 checked:text-white rounded-sm" />
                        <span className='text-wrap'>
                            Я разрешаю обработку моих персональных данных согласно <a href='/assets/legal/Политика_обработки_персональных_данных_КОММИТ.pdf' target='_blank' className='text-blue-500'>Политики обработки персональных данных</a>
                        </span>
                    </label>

                    <button disabled={(consult.phone == '') || (consult.email == '') || (consult.fio == '') || (!consult.conf)} onClick={() => mail()} className='btn btn-lg text-white rounded-full font-light not-disabled:bg-[#1C8EFF]'>
                        Оставить заявку
                    </button>

                    <span className='text-base-content/70'>Отправляя форму, вы даёте согласие на обработку ваших персональных данных (ФИО, номер телефона, электронную почту и комментарий) для связи c вами и обработки вашей заявки. Данные будут храниться в течение <span className='underline text-blue-500'>12 месяцев</span>. Вы можете отозвать своё согласие в любой момент</span>
                </div>
            </div>

            <div className='flex flex-col col-span-2 bg-base-200 rounded-2xl gap-8'>
                <div className='flex flex-col p-8 gap-8'>
                    <Braces text='С нами надёжно и безопасно' />

                    <div className='flex flex-col gap-4'>
                        <Thesis info={{
                            icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="11" cy="11" r="11" fill="#1C8EFF" />
                                <path d="M5.75008 15.0837H6.33341V7.71036C6.33343 7.52669 6.39125 7.34768 6.49866 7.1987C6.60608 7.04972 6.75766 6.93832 6.93191 6.88028L11.5986 5.32511C11.7301 5.2813 11.8701 5.26937 12.0072 5.2903C12.1442 5.31123 12.2743 5.36441 12.3868 5.44547C12.4992 5.52654 12.5908 5.63315 12.654 5.75655C12.7171 5.87994 12.7501 6.01657 12.7501 6.15519V15.0837H13.3334V9.82786C13.3334 9.78472 13.343 9.74213 13.3615 9.70315C13.38 9.66417 13.4069 9.62977 13.4402 9.60243C13.4736 9.57509 13.5126 9.55549 13.5545 9.54505C13.5963 9.5346 13.6399 9.53357 13.6822 9.54203L14.9632 9.79869C15.1615 9.83832 15.34 9.94541 15.4682 10.1017C15.5965 10.2581 15.6666 10.454 15.6667 10.6562V15.0837H16.2501C16.4048 15.0837 16.5532 15.1451 16.6626 15.2545C16.772 15.3639 16.8334 15.5123 16.8334 15.667C16.8334 15.8217 16.772 15.9701 16.6626 16.0795C16.5532 16.1889 16.4048 16.2504 16.2501 16.2504H5.75008C5.59537 16.2504 5.447 16.1889 5.3376 16.0795C5.22821 15.9701 5.16675 15.8217 5.16675 15.667C5.16675 15.5123 5.22821 15.3639 5.3376 15.2545C5.447 15.1451 5.59537 15.0837 5.75008 15.0837Z" fill="white" />
                            </svg>
                            , title: 'Проверенная экспертиза', description: 'Реализовали проекты для отраслевых лидеров и государственных заказчиков'
                        }} />
                        <Thesis info={{
                            icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="11" cy="11" r="11" fill="#1C8EFF" />
                                <path d="M10.2999 11.953L9.11059 10.7637C9.04525 10.6988 8.96859 10.6643 8.88059 10.6603C8.79259 10.6563 8.71192 10.6908 8.63859 10.7637C8.56525 10.8366 8.52836 10.9159 8.52792 11.0017C8.52747 11.0874 8.56436 11.1668 8.63859 11.2397L9.92325 12.5277C10.0308 12.6357 10.1564 12.6897 10.2999 12.6897C10.4435 12.6897 10.5693 12.6357 10.6773 12.5277L13.3693 9.83567C13.4341 9.77078 13.4688 9.69367 13.4733 9.60433C13.4777 9.515 13.443 9.43367 13.3693 9.36033C13.2955 9.287 13.2161 9.25011 13.1313 9.24967C13.0464 9.24922 12.9673 9.28611 12.8939 9.36033L10.2999 11.953ZM10.9999 16.895C10.9395 16.895 10.8759 16.8894 10.8093 16.8783C10.7426 16.8672 10.6801 16.8506 10.6219 16.8283C9.30947 16.3279 8.26659 15.4797 7.49325 14.2837C6.71992 13.0877 6.33325 11.793 6.33325 10.3997V7.54433C6.33325 7.31767 6.39881 7.11256 6.52992 6.929C6.66103 6.74544 6.82881 6.61211 7.03325 6.529L10.6233 5.19567C10.753 5.14856 10.8786 5.125 10.9999 5.125C11.1213 5.125 11.247 5.14856 11.3773 5.19567L14.9666 6.529C15.171 6.61211 15.3388 6.74544 15.4699 6.929C15.601 7.11256 15.6666 7.31767 15.6666 7.54433V10.3997C15.6666 11.793 15.2799 13.0877 14.5066 14.2837C13.7333 15.4797 12.6904 16.3277 11.3779 16.8277C11.3201 16.8499 11.2579 16.8666 11.1913 16.8777C11.1246 16.8888 11.0608 16.8943 10.9999 16.8943" fill="white" />
                            </svg>
                            , title: 'Прозрачный расчёт', description: 'Оценим стоимость и сроки без скрытых допущений'
                        }} />
                    </div>

                    <div className='flex flex-col gap-2 p-4 bg-base-100 rounded-2xl'>
                        <Thesis showDescription={false} info={{
                            icon: <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="11" cy="11" r="11" fill="#1C8EFF" />
                                <path d="M11 8.66634C11.1547 8.66634 11.3031 8.7278 11.4125 8.8372C11.5219 8.94659 11.5833 9.09496 11.5833 9.24967C11.5833 9.40438 11.5219 9.55276 11.4125 9.66215C11.3031 9.77155 11.1547 9.83301 11 9.83301C10.8453 9.83301 10.6969 9.77155 10.5875 9.66215C10.4781 9.55276 10.4167 9.40438 10.4167 9.24967C10.4167 9.09496 10.4781 8.94659 10.5875 8.8372C10.6969 8.7278 10.8453 8.66634 11 8.66634ZM16.25 10.4163C16.25 13.6538 14.01 16.6813 11 17.4163C7.99 16.6813 5.75 13.6538 5.75 10.4163V6.91634L11 4.58301L16.25 6.91634V10.4163ZM11 7.49967C10.5359 7.49967 10.0908 7.68405 9.76256 8.01224C9.43437 8.34043 9.25 8.78555 9.25 9.24967C9.25 10.0138 9.73417 10.6613 10.4167 10.9005V14.4997H11.5833V13.333H12.75V12.1663H11.5833V10.9005C12.2658 10.6613 12.75 10.0138 12.75 9.24967C12.75 8.78555 12.5656 8.34043 12.2374 8.01224C11.9092 7.68405 11.4641 7.49967 11 7.49967Z" fill="white" />
                            </svg>
                            , title: 'Ваши данные под защитой', description: 'Мы используем SSL-шифрование и обеспечиваем полную защиту ваших данных'
                        }} />
                        <span className='text-sm text-base-content/70 font-light'>Мы используем SSL-шифрование и обеспечиваем полную защиту ваших данных</span>
                    </div>
                </div>


                <div className='flex justify-center mt-auto px-8'>
                    <img className='' src='/assets/withLogo.png' />
                </div>
            </div>
        </section>
    )
}

export default DiscussSection