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="lg:col-span-7 sm:col-span-full h2 max-lg:mb-6 font-medium">
        Хотите использовать интерактивные тренажеры в обучении?
        <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="lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14 row-start-2 self-end px-6 py-4"
        width="full"
        onClick={() => setModal(<ModalWithForm />)}
      >
        Оставить заявку
      </Button>
      <div className="lg:col-start-9 lg:col-span-4 sm:col-span-1 sm:col-start-1 max-sm:mb-8 space-y-3">
        <h4 className="mb-1 text-xl font-medium">Свяжитесь с нами</h4>
        <Link to={'mailto:info@graff.tech'} className="block">
          <Button
            color="secondary"
            className="py-4"
            width="full"
            icon={
              <ClassNameWrapper element={<MailIcon />} className="w-8 h-8" />
            }
          >
            <span className="btn-text opacity-80">Написать</span>
          </Button>
        </Link>
        <Link to={'tel:88007700067'} className="block">
          <Button
            color="secondary"
            className="py-4"
            width="full"
            icon={<PhoneIcon />}
          >
            <span className="btn-text opacity-80">Позвонить</span>
          </Button>
        </Link>
      </div>
      <div className="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 col-start-2 space-y-4">
        <h4 className="h4 font-medium">Социальные сети</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/graffinteractive?from=groups'}
            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>
  );
}