import { Button } from '../../ui/Button';
import { Link } from 'react-router-dom';
import { MailIcon } from '../icons/MailIcon';
import { PhoneIcon } from '../icons/PhoneIcon';
import { TelegramIcon } from '../icons/TelegramIcon';
import { VKIcon } from '../icons/VKIcon';
import { YouTubeIcon } from '../icons/YoutubeIcon';
import { useModalStore } from '../../store/modalStore';
import { ModalWithForm } from './ModalWithForm';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { ClassNameWrapper } from '../../hocs/ClassNameWrapper';

export function Contacts() {
  const setModal = useModalStore(state => state.setModal);

  return (
    <div className="sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]">
      <h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
        Хотите использовать интерактивные тренажеры в обучении?
        <br />
        <span className="text-gradient">Давайте обсудим детали</span>
      </h2>
      <Button
        color="primary"
        icon={
          <div className="p-2 bg-white rounded-full">
            <ClassNameWrapper
              element={<ArrowRightIcon />}
              className="text-black"
            />
          </div>
        }
        className="self-end row-start-2 px-6 py-4 lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14"
        width="full"
        onClick={() => setModal(<ModalWithForm />)}
      >
        Оставить заявку
      </Button>
      <div className="space-y-3 lg:col-start-9 lg:col-span-4 sm:col-span-1 sm:col-start-1 max-sm:mb-8">
        <h4 className="mb-1 text-xl font-medium">Свяжитесь с нами</h4>
        <Button
          color="secondary"
          className="py-4"
          width="full"
          icon={<MailIcon />}
          onClick={() => {
            window.location.href = 'mailto:info@graff.tech';
          }}
        >
          <span className="btn-text opacity-80">Написать</span>
        </Button>
        <Button
          color="secondary"
          className="py-4"
          width="full"
          icon={<PhoneIcon />}
          onClick={() => {
            window.location.href = 'tel:88007700067';
          }}
        >
          <span className="btn-text opacity-80">Позвонить</span>
        </Button>
      </div>
      <div className="col-start-2 space-y-4 lg:col-start-9 lg:col-span-4 lg:row-start-2 sm:row-start-3 lg:self-end sm:flex sm:flex-col sm:justify-between">
        <h4 className="font-medium h4">Социальные сети</h4>
        <div className="flex gap-x-2">
          <Link
            to={'https://www.youtube.com/@GRAFFtech'}
            className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
          >
            <YouTubeIcon />
          </Link>
          <Link
            to={'https://vk.com/graff.interactive'}
            className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
          >
            <VKIcon />
          </Link>
          <Link
            to={'https://t.me/graffestate'}
            className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
          >
            <TelegramIcon />
          </Link>
        </div>
      </div>
    </div>
  );
}
