import { Button } from './ui/Button';
import { MailIcon } from './icons/MailIcon';
import { PhoneIcon } from './icons/PhoneIcon';
import { SendIcon } from './icons/SendIcon';
import { TelegramIcon } from './icons/TelegramIcon';
import { VKIcon } from './icons/VKIcon';
import { RutubeIcon } from './icons/RutubeIcon';
import { Link } from 'react-router-dom';
import { useModalStore } from '../stores/modalStore';
import { ModalWithForm } from './Layout/ModalWithForm';

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

  return (
    <div
      id="contacts"
      className="lg:px-6 px-4 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] max-sm:scroll-m-14"
    >
      <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={<SendIcon />}
        className="lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14 self-end row-start-2 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>
        <Button
          color="secondary"
          className="py-4"
          width="full"
          icon={<MailIcon />}
          href="mailto:info@graff.tech"
        >
          <span className="btn-text opacity-80">Написать</span>
        </Button>
        <Button
          color="secondary"
          className="py-4"
          width="full"
          icon={<PhoneIcon />}
          href="tel:88007700067"
        >
          <span className="btn-text opacity-80">Позвонить</span>
        </Button>
      </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="gap-x-2 flex">
          <Link
            to={'https://rutube.ru/channel/25505040/'}
            className="p-4 flex items-center justify-center rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
          >
            <RutubeIcon />
          </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/GRAFFinteractive'}
            className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
          >
            <TelegramIcon />
          </Link>
        </div>
      </div>
    </div>
  );
}
