/* eslint-disable no-irregular-whitespace */
import "./App.css";
import "react-rangeslider/lib/index.css";
import "./components/RangeSlider.css";
import IProject from "./types/IProject";
import api from "./utils/api";
import { useEffect, useState } from "react";
import FeatureItem from "./components/FeatureItem";
import StreamButton from "./components/StreamButton";
import ProjectCard from "./components/ProjectCard";
import ExampleCard from "./components/ExampleCard";
import FeatureVideoViewBox from "./components/FeatureVideoViewBox";
import Button from "./components/Button";
import Calc from "./components/Calc";
import Heading2 from "./components/Headings/Heading2";
import VideoSliderMobile from "./components/VideoSliderMobile";
// import { isMobile } from "react-device-detect";
import FeedbackForm from "./components/FeedbackForm";
import useModalStore from "./stores/useModalStore";
import FeedbackModal from "./components/modals/FeedbackModal";
import ModalContainer from "./components/ModalContainer";
import MoreProjectButton from "./components/MoreProjectButton";
import MailIcon from "./components/icons/MailIcon";
import PhoneIcon from "./components/icons/PhoneIcon";
import VKIcon from "./components/icons/VKIcon";
import YouTubeIcon from "./components/icons/YouTubeIcon";
import TelegramIcon from "./components/icons/TelegramIcon";

function App() {
  const [selectedVideo, setSelectedVideo] = useState<string>(
    "/videos/features/virtual_tour.mp4"
  );
  const [projects, setProjects] = useState<IProject[]>([]);
  const [setModal] = useModalStore((state) => [state.setModal]);
  const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
  const [isBuffering, setIsBuffering] = useState(true);

  async function getProjects() {
    try {
      const projects: IProject[] = await api.get("projects").json();

      setProjects(projects);
    } catch (error) {
      if (error instanceof Error) {
        alert(`Error: ${error.message}`);
      }
    }
  }

  useEffect(() => {
    getProjects();
  }, []);

  return (
    <div>
      <div className="min-h-screen 2xl:px-10 xl:px-8 sm:px-6 px-4 overflow-x-clip">
        <div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
          <div className="flex justify-between py-6 2xl:mb-28 xl:mb-[88px] sm:mb-12 mb-14">
            <div>
              <img
                src="/images/Logo.svg"
                alt=""
                className="sm:block hidden max-h-fit"
              />
              <img
                src="/images/LogoMobile.svg"
                alt=""
                className="sm:hidden block"
              />
            </div>
            <div className="flex sm:gap-8 gap-2">
              <Button onClick={() => setModal(<FeedbackModal />)}>
                <span className="sm:inline hidden">Оставить заявку</span>
                <span className="sm:hidden inline">Связаться</span>
              </Button>

              {/* <div className="flex gap-1">
                <button className="px-3 border-gradient rounded-full font-gilroy font-medium h-10 flex items-center justify-center w-12">
                  <span className="absolute">RU</span>
                </button>
                <button className="px-3 rounded-full font-gilroy font-medium leading-none h-10 flex items-center justify-center w-12">
                  <span className="absolute">EN</span>
                </button>
              </div> */}
            </div>
          </div>

          <div className="flex flex-col 2xl:gap-14 gap-6 2xl:mb-[120px] xl:mb-20 sm:mb-12 mb-8">
            <h1 className="max-w-[1255px] font-gilroy 2xl:text-8xl sm:text-[64px] text-[40px] leading-none text-gradient font-medium">
              Интерактивный инструмент
              <br />
              продаж{" "}
              <span style={{ WebkitTextFillColor: "#fff" }}>
                для застройщиков
              </span>
            </h1>
            <p className="xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]">
              Помогаем девелоперам эффективно демонстрировать свой объект.
              Продавать больше и быстрее.
            </p>
            <div className="absolute top-20 right-0 blur-[10px] -z-10">
              <img src="/images/blendings/1.svg" alt="" />
            </div>
          </div>
        </div>

        <div className="relative aspect-video w-full 2xl:mb-[200px] sm:mb-[120px] mb-20">
          <video
            src="/videos/showreel_1080p_4000k_h264.mp4"
            muted
            autoPlay
            loop
            playsInline
            className="absolute aspect-video w-full"
            onPlaying={() => setIsBuffering(false)}
            onWaiting={() => setIsBuffering(true)}
          />

          <div
            className={`absolute aspect-video w-full h-full flex justify-center items-center bg-black bg-opacity-50 transition-opacity ${
              isBuffering ? "opacity-100" : "opacity-0"
            }`}
          >
            <div className="flex gap-4 items-center">
              <span>
                <svg
                  className="animate-spin h-5 w-5"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle
                    className="opacity-25"
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    strokeWidth="4"
                  ></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
              </span>
              <span className="font-gilroy">Загружаем шоурил...</span>
            </div>
          </div>
        </div>

        <div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
          <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <Heading2>
              Продавайте недвижимость
              <br />
              <span style={{ WebkitTextFillColor: "#fff" }}>
                проще и{" "}
                <span className="relative">
                  <span style={{ WebkitTextFillColor: "#52587A" }}>
                    быстрее
                  </span>
                  <span className="absolute top-[55%] -left-[2.5%] 2xl:h-1.5 h-1 w-[105%] bg-white"></span>
                </span>{" "}
                дороже
              </span>
            </Heading2>

            <div className="relative xl:flex items-center gap-4 xl:max-h-[400px]">
              <p className="2xl:text-2xl sm:text-xl font-gilroy min-w-fit">
                Мы собрали статистику{" "}
                <span className="text-gradient font-semibold">за 13 лет</span>{" "}
                работы
                <br />
                с застройщиками,{" "}
                <span className="text-gradient font-semibold">
                  реализовав 31 проект
                </span>
              </p>

              <div className="2xl:ml-6 xl:ml-[14px] relative 2xl:-top-8 xl:-top-4 -z-10">
                <img src="/images/Map.png" alt="" />
              </div>
            </div>

            <p className="2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy font-medium w-fit leading-none">
              Graff.estate
            </p>

            <div className="grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 xl:gap-0 gap-3">
              <div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
                <p className="2xl:text-base text-sm">На</p>
                <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
                  18
                  <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
                    %
                  </span>
                </p>
                <p className="2xl:text-base text-sm">
                  увеличивает конверсию из консультации в бронирование
                </p>
              </div>

              <div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
                <p className="2xl:text-base text-sm">На</p>
                <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
                  12
                  <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
                    %
                  </span>
                </p>
                <p className="2xl:text-base text-sm">
                  увеличивает конверсию из бронирования в продажу
                </p>
              </div>

              <div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
                <p className="2xl:text-base text-sm">До</p>
                <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
                  2
                  <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
                    раз
                  </span>
                </p>
                <p className="2xl:text-base text-sm">
                  сокращает время
                  <br />
                  реализации проекта
                </p>
              </div>

              <div className="2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
                <p className="2xl:text-base text-sm">До</p>
                <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
                  4
                  <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
                    раз
                  </span>
                </p>
                <p className="2xl:text-base text-sm">
                  сокращает время на подготовку рекламных материалов
                </p>
              </div>
            </div>
          </div>

          <div className="relative sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <div className="2xl:mt-[220px] xl:mt-40 sm:mt-[104px]">
              <ExampleCard
                title="ЖК «Life Резиденция»"
                company="ГК Паритет Девелопмент"
                image="/images/Aivaz1.jpg"
              />

              <ExampleCard
                title="ЖК «Айвазовский City»"
                company="ЭНКО"
                image="/images/Aivaz3.jpg"
              />
            </div>

            <div>
              <ExampleCard
                title="Авторский квартал Машаров"
                company="Сибинтел Девелопмент"
                image="/images/Aivaz2.jpg"
              />

              <ExampleCard
                title="ЖК «Сюжеты»"
                company="Fortis Development"
                image="/images/Aivaz4.jpg"
              />
            </div>

            <div className="absolute top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%] scale-150 -z-10 blur-[44px]">
              <img src="/images/blendings/2.svg" alt="" />
            </div>
          </div>

          <div className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <div className="flex flex-col gap-20">
              <div className="xl:flex flex-col grid sm:grid-cols-2 xl:gap-8 gap-3">
                <Heading2>
                  Функциональные
                  <br />
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    возможности
                  </span>
                </Heading2>
                <p className="xl:w-2/3 xl:text-base text-sm">
                  Интерактивная презентация увлекает покупателей и предоставляет
                  актуальную информацию о жилом комплексе, отвечая на все
                  вопросы и показывая важные особенности и преимущества объекта
                </p>
              </div>

              <div className="pr-6 xl:block hidden">
                <FeatureItem
                  title="Виртуальный тур по жилому комплексу"
                  desc="Клиент лично оценит угол инсоляции, малые архитектурные формы и ландшафт, перемещаясь по комплексу с помощью тапа."
                  video="/videos/features/virtual_tour.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Вся инфрастуктура на одном экране"
                  desc="Возможность оценить инфраструктуру района покажет важные для клиента точки интереса и время, за которое он сможет до них дойти."
                  video="/videos/features/nks_infra.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Конфигуратор интерьера"
                  desc="Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные детали."
                  video="/videos/features/uralsky.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Параметрический поиск квартир"
                  desc="Фильтр позволит отметить конкретные преимущества, определить количество комнат, желаемый этаж, цену, и получить выборку подходящих вариантов."
                  video="/videos/features/parametric.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Любой рендер за несколько секунд"
                  desc="Когда для рекламы вам понадобится любой объект с любого ракурса, просто сделайте фотографию внутри презентации."
                  video="/videos/features/render.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Формирование вишлиста"
                  desc="Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру."
                  video="/videos/features/wish.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Интеграция с CRM-системой"
                  desc="Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир."
                  video="/videos/features/integra_crm.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Отправка коммерческого предложения"
                  desc="Коммерческое предложение с выбранными квартирами может быть отправлено клиенту на почту или распечатано и отдано лично в руки."
                  video="/videos/features/send.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                {/* <FeatureItem
                  title="Интерактивная инсоляция"
                  desc="Функция позволяет в режиме реального времени увидеть уровень освещенности выбранной квартиры, а если вы изучаете экстерьер жилого комплекса – функция покажет архитектурную подсветку."
                  video=""
                />
                <FeatureItem
                  title="Подбор квартир на генплане"
                  desc="Сделать генплан удобным инструментом выбора квартиры поможет подсветка выбранных квартир прямо на фасаде Жилого комплекса."
                  video=""
                /> */}
              </div>
            </div>
            <div className="aspect-video sticky top-[25%] xl:block hidden">
              <FeatureVideoViewBox video={selectedVideo} />
            </div>

            <VideoSliderMobile />
          </div>

          <div className="relative 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">
              <div className="flex flex-col gap-8 justify-between">
                <Heading2>
                  Graff.estate stream —
                  <br />
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    удаленная
                    <br />
                    демонстрация
                    <br />
                    жилого комплекса
                  </span>
                </Heading2>
                <a
                  href="https://stream.graff.tech"
                  target="_blank"
                  className="w-fit sm:inline-block hidden"
                >
                  <Button>Узнать больше</Button>
                </a>
              </div>
              <div className="flex flex-col xl:gap-16 gap-6">
                <div className="grid xl:grid-cols-2 xl:gap-4 gap-2">
                  <p className="2xl:text-base text-sm">
                    Высокий уровень графики и полное погружение покупателя в
                    процесс выбора квартиры
                  </p>
                  <p className="2xl:text-base text-sm">
                    Местоположение и устройство значения не имеют. Нужен только
                    интернет
                  </p>
                </div>
                <div className="xl:grid grid-cols-2 gap-4">
                  <img src="/images/Datamining.jpg" alt="" className="w-full" />
                </div>
                <a
                  href="https://stream.graff.tech"
                  target="_blank"
                  className="w-fit sm:hidden inline-block"
                >
                  <Button>Узнать больше</Button>
                </a>
              </div>
            </div>

            <div className="border-t border-[#3D425C]">
              <StreamButton
                icon="/icons/Revolution.svg"
                title="МФК «Re:volution towers»"
                location="Россия, Екатеринбург"
                background="/images/stream/nks.jpg"
                link="https://stream.graff.tech/?build=nksJukovaDev&location=a1"
              />
              <StreamButton
                icon="/icons/Residence.svg"
                title="ЖК «Life Резиденция»"
                location="Россия, Тюмень"
                background="/images/stream/liferes.jpg"
                link="https://stream.graff.tech/?build=lifeResidence&location=a1"
              />
              <StreamButton
                icon="/icons/Aivaz.svg"
                title="ЖК «Айвазовский City»"
                location="Россия, Тюмень"
                background="/images/stream/aivaz.jpg"
                link="https://stream.graff.tech/?build=IvazowskyDev&location=a1"
              />
            </div>

            <div className="absolute -top-36 left-0 -z-10 blur-[20px]">
              <img src="/images/blendings/3.svg" alt="" />
            </div>
          </div>

          <div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <div className="flex flex-col justify-between">
              <div className="flex flex-col xl:gap-8 sm:gap-6 gap-4">
                <Heading2>
                  Анализируем
                  <br />
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    поведение
                    <br />
                    пользователей
                  </span>
                </Heading2>
                <p className="xl:w-2/3 2xl:text-base text-sm">
                  Система внутренней аналитики программы собирает информацию о
                  поведении пользователя и эффективности работы менеджеров для
                  создания отчета, содержащего необходимые метрики
                </p>
              </div>
              <div className="sm:block hidden xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
                <p className="xl:w-4/5 2xl:text-xl font-gilroy font-medium 2xl:leading-[120%]">
                  Полученный отчет позволяет сделать процесс демонстрации
                  жилого комплекса еще эффективнее
                </p>
              </div>
            </div>
            <div
              className="w-full 2xl:min-h-[600px] xl:min-h-[500px] min-h-[384px] bg-cover bg-center bg-no-repeat"
              style={{ backgroundImage: "url('/images/Analysis.jpg')" }}
            ></div>

            <div className="sm:hidden block xl:pb-8 pb-6 border-b border-[#3D425C] -mt-0.5">
              <p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium leading-[120%]">
                Полученный отчет позволяет сделать процесс демонстрации
                жилого комплекса еще эффективнее
              </p>
            </div>
          </div>

          <div className="relative grid sm:grid-cols-2 2xl:gap-4 xl:gap-10 sm:gap-3 gap-4 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <div className="flex flex-col justify-between">
              <div className="flex flex-col gap-8">
                <Heading2>
                  Экскурсия
                  <br />
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    в виртуальной
                    <br />
                    реальности
                  </span>
                </Heading2>
                <Button
                  className="sm:block hidden"
                  onClick={() => setModal(<FeedbackModal />)}
                >
                  Записаться в шоу-рум
                </Button>
              </div>
              <div className="xl:block hidden pb-8 border-b border-[#3D425C]">
                <p className="font-gilroy 2xl:text-xl 2xl:leading-[120%]">
                  Клиент полностью погружается в воссозданную реальность,
                  чувствует удобство и уровень комфорта
                </p>
              </div>
            </div>
            <div className="flex flex-col gap-10">
              <div className="grid xl:grid-cols-2 xl:gap-4 gap-6">
                <p className="2xl:text-base text-sm">
                  Достаточно надеть шлем виртуальной реальности, чтобы
                  прогуляться, оценить и ощутить пространство
                </p>
                <img
                  src="/images/VR.png"
                  alt=""
                  className="sm:px-6 sm:pt-8 sm:pb-5 p-4 pb-2 border-t border-[#3D425C] w-full"
                />
              </div>
              <video
                src="/videos/vr.mp4"
                muted
                autoPlay
                loop
                playsInline
                className="xl:block hidden"
              ></video>
            </div>

            <div className="col-span-full sm:mt-8 mt-4 flex flex-col sm:gap-12 gap-8">
              <video
                src="/videos/vr.mp4"
                muted
                autoPlay
                loop
                playsInline
                className="xl:hidden block"
              ></video>
              <div className="xl:hidden flex border-b border-[#3D425C] sm:pb-10 pb-6 flex-col gap-8">
                <p className="font-gilroy font-medium leading-[120%] xl:hidden block">
                  Клиент полностью погружается
                  <br />
                  в воссозданную реальность, чувствует
                  <br />
                  удобство и уровень комфорта
                </p>
                <Button
                  className="sm:hidden inline-block"
                  onClick={() => setModal(<FeedbackModal />)}
                >
                  Записаться в шоу-рум
                </Button>
              </div>
            </div>

            <div className="absolute -top-[50%] left-[16%] blur-[20px] -z-10">
              <img src="/images/blendings/4.svg" alt="" />
            </div>
          </div>

          <div className="relative flex flex-col 2xl:gap-16 xl:gap-10 sm:gap-12 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <div className="flex flex-col sm:gap-8 gap-6">
              <Heading2>
                Оцените эффективность <br className="xl:hidden block" />
                интерактивного
                <br />
                <span style={{ WebkitTextFillColor: "#fff" }}>
                  инструмента продаж
                </span>
              </Heading2>
              <div className="grid sm:grid-cols-2 xl:gap-4 sm:gap-3 gap-2">
                <p className="xl:w-2/3 2xl:text-base text-sm">
                  Мы изучили отраслевую аналитику на рынке продаж новых квартир
                  и на основе данных собрали калькулятор эффективности продукта
                </p>
                <p className="xl:w-2/3 2xl:text-base text-sm">
                  При использовании проектного финансирования, главное — это
                  время. Быстрее наполняются эскроу-счета — меньше процент за
                  использование заемных денег
                </p>
              </div>
            </div>

            <Calc />

            <div className="absolute -top-16 right-0 blur-[18px] -z-10">
              <img src="/images/blendings/5.svg" alt="" />
            </div>
          </div>

          <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <Heading2>Проекты</Heading2>
            <div className="2xl:grid hidden xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6 gap-3">
              {projects.map((project, index) => (
                <ProjectCard key={index} {...project} />
              ))}
            </div>
            <div className="2xl:hidden grid xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6 gap-3">
              {[...Array(5)].map((_, index) => (
                <ProjectCard key={index} {...projects[index]} />
              ))}
              {!isShownAllProjects ? (
                <MoreProjectButton
                  onClick={() => setIsShownAllProjects(true)}
                />
              ) : (
                <>
                  {projects.map(
                    (_, index) =>
                      projects[index + 5] && (
                        <ProjectCard key={index} {...projects[index + 5]} />
                      )
                  )}
                </>
              )}
            </div>
          </div>

          <div className="relative flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
            <Heading2>
              Наши клиенты{" "}
              <span style={{ WebkitTextFillColor: "#fff" }}>
                в девелопменте
              </span>
            </Heading2>
            <img
              src="/images/clients-logos.png"
              alt=""
              className="sm:block hidden"
            />
            <img
              src="/images/clients-logos-mobile.png"
              alt=""
              className="sm:hidden block"
            />
            <div className="absolute top-0 right-0 blur-[34px] -z-10">
              <img src="/images/blendings/6.svg" alt="" />
            </div>
          </div>

          <div className="relative overflow-hidden pb-[50px]">
            <div className="lg:mt-40 sm:mt-[120px] mt-[88px]">
              <div className="grid lg:grid-cols-4 grid-cols-1 lg:gap-4 gap-6">
                <div className="col-span-1">
                  <div className="grid lg:grid-cols-1 sm:grid-cols-2 lg:gap-6 gap-4">
                    <p className="2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none">
                      Свяжитесь
                      <br />с нами
                    </p>
                    <p className="2xl:text-xl lg:text-lg font-gilroy font-semibold leading-tight">
                      Хотите увеличить конверсию?
                      <br />
                      Давайте обсудим детали!
                    </p>
                  </div>
                </div>

                <div className="lg:col-span-3">
                  <FeedbackForm />
                </div>
              </div>
            </div>
            <div className="mt-[104px] relative">
              <div className="relative grid lg:grid-cols-4 gap-4">
                <div className="flex gap-4">
                  <p className="2xl:text-xl font-gilroy font-semibold">
                    Горячая линия
                  </p>
                  <div className="w-full h-px bg-[#3D425C]"></div>
                </div>

                <div className="space-y-2 2xl:pr-4 xl:pr-2">
                  <a
                    href="mailto:info@graff.tech"
                    className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
                  >
                    <span>Написать</span>
                    <MailIcon className="lg:w-8 lg:h-8 w-6 h-6" />
                  </a>
                  <a
                    href="tel:88007700067"
                    className="2xl:h-16 h-14 px-6 py-4 2xl:text-base text-sm border rounded-full font-medium flex justify-between items-center w-full border-[#52587A] opacity-80 hover:opacity-100 transition-all"
                  >
                    <span>Позвонить</span>
                    <PhoneIcon className="lg:w-8 lg:h-8 w-6 h-6" />
                  </a>
                </div>

                <div className="sm:col-span-2 flex sm:justify-end lg:mt-0 mt-10">
                  <div className="lg:w-auto sm:w-1/2 w-full flex justify-between 2xl:gap-8 lg:gap-6 gap-4">
                    <p className="2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1">
                      Социальные
                      <br />
                      сети
                    </p>
                    <div className="flex gap-2 h-fit">
                      <a
                        href="https://www.youtube.com/@GRAFFtech"
                        target="_blank"
                        className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
                      >
                        <YouTubeIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
                      </a>
                      <a
                        href="https://vk.com/graff.interactive"
                        target="_blank"
                        className="group border border-[#3D425C] xl:p-4 p-3 rounded-full hover:border-[#52587A] transition-all"
                      >
                        <VKIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
                      </a>
                      <a
                        href="https://t.me/GRAFFinteractive"
                        target="_blank"
                        className="border rounded-full border-[#52587A] xl:p-4 p-3 opacity-80 hover:opacity-100 transition-all"
                      >
                        <TelegramIcon className="2xl:w-8 2xl:h-8 w-6 h-6" />
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="absolute top-[65%] left-[26%] -z-10 blur-[10px]">
              <img src="/images/blendings/7.svg" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div className=" border-t border-[#3D425C] text-sm">
        <div className="container mx-auto xl:px-8 max-w-[1600px]">
          <div className="grid lg:grid-cols-4">
            <div className="sm:col-span-2 lg:order-none order-last py-6 xl:px-0 px-6 flex sm:flex-row flex-col sm:gap-6 gap-4 lg:border-t-0 border-t border-[#3D425C]">
              <div>
                <img src="/images/Logo.svg" alt="" className="max-h-fit" />
              </div>
              <div className="flex flex-col sm:gap-1 gap-4">
                <p className="flex sm:flex-row flex-col sm:gap-4 gap-1">
                  <a href="https://graff.tech/privacypolicy" target="_blank">
                    Политика конфиденциальности
                  </a>
                  {/* <a href="https://graff.estate" className="">
                    graff.estate
                  </a> */}
                </p>
                <p className="text-xs text-[#C5C7CE]">
                  © 2023 GRAFF interactive. Все права защищены.
                </p>
              </div>
            </div>

            <div className="col-span-1 lg:border-l sm:border-b-0 border-b border-[#3D425C] xl:px-8 sm:px-6 px-4 py-6 flex flex-col justify-center">
              <div className="flex justify-between items-center">
                <div className="text-[#EBEBEB] flex flex-col gap-1">
                  <a href="mailto:info@graff.tech">info@graff.tech</a>
                  <a href="tel:88007700067">8 800 770 00 67</a>
                </div>
                <div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
                  RU
                </div>
              </div>
            </div>

            <div className="col-span-1 sm:border-l border-[#3D425C] xl:pl-8 xl:pr-0 sm:px-6 px-4 py-6 flex flex-col justify-center">
              <div className="flex justify-between items-center">
                <div className="text-[#EBEBEB] flex flex-col gap-1">
                  <a href="mailto:waseem@graff.tech">waseem@graff.tech</a>
                  <a href="tel:+971509388902">+971 50 938 8902</a>
                </div>
                <div className="w-12 h-12 border border-[#3D425C] rounded-full flex justify-center items-center">
                  UAE
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <ModalContainer />
    </div>
  );
}

export default App;
