/* eslint-disable no-irregular-whitespace */
import "./App.css";
import BlendingHeader from "./components/blendings/BlendingHeader";
import FeatureItem from "./components/FeatureItem";
// import BlendVR from "./components/blendings/BlendVR";
import BlendStream from "./components/blendings/BlendStream";
import StreamButton from "./components/StreamButton";
import "react-rangeslider/lib/index.css";
import "./components/RangeSlider.css";
import { useEffect, useState } from "react";
import ProjectCard from "./components/ProjectCard";
// import MoreProjectButton from "./components/MoreProjectButton";
import ExampleCard from "./components/ExampleCard";
import FeatureVideoViewBox from "./components/FeatureVideoViewBox";
import Button from "./components/Button";
import Calc from "./components/Calc";
import BlendingCalc from "./components/blendings/BlendingCalc";
import BlendingClients from "./components/blendings/BlendingClients";
import Heading2 from "./components/Headings/Heading2";
// import PlayIcon from "./components/icons/PlayIcon";
import VideoSliderMobile from "./components/VideoSliderMobile";
// import { isMobile } from "react-device-detect";
import IProject from "./types/IProject";
import api from "./utils/api";
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";
import FeedbackForm from "./components/FeedbackForm";

function App() {
  const [selectedVideo, setSelectedVideo] = useState<string>(
    "https://graff.estate/videos/features/virtual_tour.mp4"
  );
  // const [isShowProjects, setIsShowProjects] = useState<boolean>(false);

  const [projects, setProjects] = useState<IProject[]>([]);

  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 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>
                <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 -z-10 top-0 right-0 opacity-90 blur-[10px]">
              <BlendingHeader />
            </div>
          </div>

          <div className="2xl:mb-40 sm:mb-[120px] mb-20">
            <video
              src="https://graff.estate/videos/showreel_1080p_4000k_h264.mp4"
              muted
              autoPlay
              loop
              playsInline
              preload="metadata"
              className="aspect-video"
            />
          </div>

          <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
            <div className="grid xl:grid-cols-4 xl:gap-0 sm:gap-6 gap-4">
              <div className="col-span-full">
                <Heading2>
                  Помогаем <br className="sm:hidden" /> продавать{" "}
                  <br className="2xl:hidden" />{" "}
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    проще <br className="sm:hidden" /> и{" "}
                    <span
                      style={{ WebkitTextFillColor: "#52587A" }}
                      className="relative custom-line-through"
                    >
                      быстрее
                    </span>{" "}
                    <br className="sm:hidden" />
                    дороже
                  </span>
                </Heading2>
              </div>
              <div className="relative flex items-center gap-4 col-span-full h-[400px]">
                <p className="2xl:text-2xl text-sm font-gilroy font-medium min-w-[496px] ">
                  Мы собрали статистику{" "}
                  <span className="text-gradient font-semibold">за 13 лет</span>{" "}
                  работы
                  <br />
                  с застройщиками,{" "}
                  <span className="text-gradient font-semibold">
                    реализовав 31 проект
                  </span>
                </p>

                <div className="">
                  <img
                    src="/images/Map.png"
                    alt=""
                    className="relative top-8 -z-10"
                  />
                </div>
              </div>
            </div>

            <p className="text-gradient font-gilroy font-medium text-5xl w-fit">
              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="sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-40 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>

          <div className="xl:grid flex flex-col grid-cols-2 xl:gap-4 sm:gap-10 gap-8 2xl:mb-40 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="https://graff.estate/videos/features/virtual_tour.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Вся инфрастуктура на одном экране"
                  desc="Возможность оценить инфраструктуру района покажет важные для клиента точки интереса и время, за которое он сможет до них дойти."
                  video="https://graff.estate/videos/features/nks_infra.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Конфигуратор интерьера"
                  desc="Клиент может свободно выбирать мебель и дизайн с помощью конфигуратора интерьера. Возможно выбрать стиль всей квартиры или изменить отдельные детали."
                  video="https://graff.estate/videos/features/uralsky.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Параметрический поиск квартир"
                  desc="Фильтр позволит отметить конкретные преимущества, определить количество комнат, желаемый этаж, цену, и получить выборку подходящих вариантов."
                  video="https://graff.estate/videos/features/parametric.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Любой рендер за несколько секунд"
                  desc="Когда для рекламы вам понадобится любой объект с любого ракурса, просто сделайте фотографию внутри презентации."
                  video="https://graff.estate/videos/features/render.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Формирование вишлиста"
                  desc="Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру."
                  video="https://graff.estate/videos/features/wish.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Интеграция с CRM-системой"
                  desc="Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир."
                  video="https://graff.estate/videos/features/integra_crm.mp4"
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title="Отправка коммерческого предложения"
                  desc="Коммерческое предложение с выбранными квартирами может быть отправлено клиенту на почту или распечатано и отдано лично в руки."
                  video="https://graff.estate/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-40 sm:mb-[120px] mb-20">
            <div className="grid grid-cols-2 gap-4 mb-16">
              <div className="flex flex-col gap-8">
                <Heading2>
                  Graff.estate stream —
                  <br />
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    удаленная
                    <br />
                    демонстрация
                    <br />
                    жилого комплекса
                  </span>
                </Heading2>
                <Button>Узнать больше</Button>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div className="flex flex-col gap-12">
                  <p>
                    Высокий уровень графики и полное погружение покупателя в
                    процесс выбора квартиры
                  </p>
                  <img src="/images/Datamining.jpg" alt="" />
                </div>
                <div className="">
                  <p>
                    Местоположение и устройство значения не имеют. Нужен только
                    интернет
                  </p>
                </div>
              </div>
            </div>

            {/* <div className="grid grid-cols-4 mb-16">
            <Heading2 className="col-span-3">
              Graff.estate stream —{" "}
              <span style={{ WebkitTextFillColor: "#fff" }}>
                удаленная демонстрация жилого комплекса
              </span>
            </Heading2>

            <p>
              Высокий уровень графики и полное
              <br />
              погружение покупателя в процесс
              <br />
              выбора квартиры
            </p>
          </div>

          <div className="relative mb-[120px]">
            <img src="/images/Stream.jpg" alt="" />

            <div className="absolute bottom-10 left-10">
              <p className="flex flex-col gap-4 text-2xl font-gilroy font-medium">
                <span>
                  Местоположение и устройство
                  <br />
                  значения не имеют
                </span>
                <span>Нужен только интернет</span>
              </p>
            </div>
          </div>

          <div className="flex justify-between mb-16">
            <p className="text-5xl font-gilroy font-medium">
              Демонстрация технологии
            </p>
            <Button icon={<ArrowRightIcon />}>Узнать больше</Button>
          </div> */}

            <div>
              <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=Ivazowsky&location=a1"
              />
            </div>

            <div className="absolute -bottom-[2%] -right-[30%] -z-10 blur-[18px]">
              <BlendStream />
            </div>
          </div>

          <div className="grid grid-cols-2 xl:gap-4 gap-3 2xl:mb-40 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>
                <p className="xl:w-2/3 2xl:text-base text-sm">
                  Система внутренней аналитики программы собирает информацию о
                  поведении пользователя и эффективности работы менеджеров для
                  создания отчета, содержащего необходимые метрики
                </p>
              </div>
              <div className="pb-8 border-b border-[#3D425C] -mt-0.5">
                <p className="xl:w-4/5 2xl:text-xl text-base font-gilroy font-medium">
                  Полученный отчет позволяет сделать процесс демонстрации
                  жилого комплекса еще эффективнее
                </p>
              </div>
            </div>
            <img src="/images/Analysis.jpg" alt="" className="w-full" />
          </div>

          <div className="grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
            <div className="flex flex-col justify-between">
              <div className="flex flex-col gap-8">
                <Heading2>
                  Экскурсия{" "}
                  <span style={{ WebkitTextFillColor: "#fff" }}>
                    в виртуальной реальности
                  </span>
                </Heading2>
                <Button>Записаться в шоу-рум</Button>
              </div>
              <p className="font-gilroy text-2xl">
                Клиент полностью погружается в воссозданную реальность,
                чувствует удобство и уровень комфорта
              </p>
            </div>
            <div className="flex flex-col gap-10">
              <div className="grid grid-cols-2 gap-4">
                <p>
                  Достаточно надеть шлем виртуальной реальности, чтобы
                  прогуляться, оценить и ощутить пространство
                </p>
                <img
                  src="/images/VR.png"
                  alt=""
                  className="px-6 pt-8 pb-5 border-t border-[#3D425C]"
                />
              </div>
              <img src="/images/VR2.jpg" alt="" />
            </div>
          </div>

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

            <Calc />

            <div className="absolute right-0 top-0 blur-[18px] -z-10">
              <BlendingCalc />
            </div>
          </div>

          <div className="flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
            <Heading2>Проекты</Heading2>
            <div className="grid 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>

          <div className="relative flex flex-col gap-16 2xl:mb-40 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]">
              <BlendingClients />
            </div>
          </div>

          <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="absolute flex justify-center items-center w-full -top-8 left-32 blur-md">
              <img src="/images/shapes/shape-2.svg" alt="" className="" />
            </div>

            <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>
      </div>

      <div className="mt-[50px] relative 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="#" className="">
                    Политика конфиденциальности
                  </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>
    </>
  );
}

export default App;