/* 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 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 px-4 2xl:px-10 xl:px-8 sm:px-6 overflow-x-clip'>
        <div className='relative mx-auto conatiner 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='hidden sm:block max-h-fit'
              />
              <img
                src='/images/LogoMobile.svg'
                alt=''
                className='block sm:hidden'
              />
            </div>
            <div className='flex gap-2 sm:gap-8'>
              <Button onClick={() => setModal(<FeedbackModal />)}>
                <span className='hidden sm:inline'>Submit a request</span>
                <span className='inline sm:hidden'>Contact us</span>
              </Button>

              {/* <div className="flex gap-1">
                <button className="flex items-center justify-center w-12 h-10 px-3 font-medium rounded-full border-gradient font-gilroy">
                  <span className="absolute">RU</span>
                </button>
                <button className="flex items-center justify-center w-12 h-10 px-3 font-medium leading-none rounded-full font-gilroy">
                  <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'>
              Interactive sales tool
              <br />
              <span style={{ WebkitTextFillColor: '#fff' }}>
                for developers
              </span>
            </h1>
            <p className='xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]'>
              We help developers effectively showcase their property.
              <br />
              Sell more and faster.
            </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 w-full aspect-video'
            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 items-center gap-4'>
              <span>
                <svg
                  className='w-5 h-5 animate-spin'
                  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 mx-auto conatiner 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>
              Sell real estate
              <br />
              <span style={{ WebkitTextFillColor: '#fff' }}>
                more easily,{' '}
                <span className='relative'>
                  <span style={{ WebkitTextFillColor: '#52587A' }}>
                    quickly,
                  </span>
                  <span className='absolute top-[55%] -left-[2.5%] 2xl:h-1.5 h-1 w-[105%] bg-white'></span>
                </span>{' '}
                and at a higher price
              </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'>
                We have gathered statistics{' '}
                <span className='font-semibold text-gradient'>
                  over 13 years
                </span>{' '}
                of working
                <br />
                with developers,{' '}
                <span className='font-semibold text-gradient'>
                  having implemented 31 projects
                </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 grid-cols-1 gap-3 xl:grid-cols-4 sm:grid-cols-2 xl:gap-0'>
              <div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
                <p className='text-sm 2xl:text-base'>By</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='text-sm 2xl:text-base'>
                  increases conversion from consultation to reservation
                </p>
              </div>

              <div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
                <p className='text-sm 2xl:text-base'>By</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='text-sm 2xl:text-base'>
                  increases conversion from reservation to sale
                </p>
              </div>

              <div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
                <p className='text-sm 2xl:text-base'>Up to</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%]'>
                    times
                  </span>
                </p>
                <p className='text-sm 2xl:text-base'>
                  cuts the project
                  <br />
                  implementation time
                </p>
              </div>

              <div className='2xl:px-8 px-6 py-4 flex flex-col gap-4 border-l border-[#3D425C]'>
                <p className='text-sm 2xl:text-base'>Up to</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%]'>
                    times
                  </span>
                </p>
                <p className='text-sm 2xl:text-base'>
                  reduces the time for preparing advertising materials
                </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='Residential Complex "Life Residence"'
                company='Paritet Development'
                image='/images/Aivaz1.jpg'
              />

              <ExampleCard
                title='Residential Complex "Aivazovsky City"'
                company='ENCO'
                image='/images/Aivaz3.jpg'
              />
            </div>

            <div>
              <ExampleCard
                title="Authors' quarter Masharov"
                company='Sibintel Development'
                image='/images/Aivaz2.jpg'
              />

              <ExampleCard
                title='Residential Complex "Plotlines"'
                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='grid flex-col gap-3 xl:flex sm:grid-cols-2 xl:gap-8'>
                <Heading2>
                  Functional
                  <br />
                  <span style={{ WebkitTextFillColor: '#fff' }}>
                    capabilities
                  </span>
                </Heading2>
                <p className='text-sm xl:w-2/3 xl:text-base'>
                  An interactive presentation engages buyers and provides
                  current information about the residential complex, answering
                  all questions and showing important features and advantages of
                  the object
                </p>
              </div>

              <div className='hidden pr-6 xl:block'>
                <FeatureItem
                  title='Virtual tour of the residential complex'
                  desc='The client can personally assess the angle of sunlight, minor architectural forms, and landscape, moving through the complex with a tap.'
                  video='/videos/features/virtual_tour.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='All infrastructure on one screen'
                  desc='The ability to assess the infrastructure of the area will show the client important points of interest and the time it takes to reach them.'
                  video='/videos/features/nks_infra.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='Interior configurator'
                  desc='The client can freely choose furniture and design using the interior configurator. It is possible to select the style for the entire apartment or change individual details.'
                  video='/videos/features/uralsky.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='Parametric apartment search'
                  desc='The filter will allow marking specific advantages, determine the number of rooms, desired floor, price, and receive a selection of suitable options.'
                  video='/videos/features/parametric.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='Any render in a few seconds'
                  desc='When you need any object from any angle for advertising, just take a picture inside the presentation.'
                  video='/videos/features/render.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='Formation of a wishlist'
                  desc='The client can add apartment options to favorites, compare them with each other by the main parameters, and choose their future apartment.'
                  video='/videos/features/wish.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='Integration with CRM'
                  desc="The application transfers client information to the developer's CRM system and receives current information about prices and statuses of apartments."
                  video='/videos/features/integra_crm.mp4'
                  handleHoverStart={(video) => setSelectedVideo(video)}
                />
                <FeatureItem
                  title='Sending a commercial offer'
                  desc='A commercial offer with selected apartments can be sent to the client by mail or printed and handed over personally.'
                  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 gap-6 mb-8 sm:grid-cols-2 sm:gap-4 2xl:mb-16 xl:mb-10 sm:mb-12'>
              <div className='flex flex-col justify-between gap-8'>
                <Heading2>
                  Graff.estate stream —
                  <br />
                  <span style={{ WebkitTextFillColor: '#fff' }}>
                    remote
                    <br />
                    demonstration
                    <br />
                    of a residential complex
                  </span>
                </Heading2>
                <a
                  href='https://stream.graff.tech'
                  target='_blank'
                  className='hidden w-fit sm:inline-block'
                >
                  <Button>Learn more</Button>
                </a>
              </div>
              <div className='flex flex-col gap-6 xl:gap-16'>
                <div className='grid gap-2 xl:grid-cols-2 xl:gap-4'>
                  <p className='text-sm 2xl:text-base'>
                    High level of graphics and full immersion of the buyer in
                    the process of choosing an apartment
                  </p>
                  <p className='text-sm 2xl:text-base'>
                    Location and device do not matter.
                    <br />
                    Only the internet is required
                  </p>
                </div>
                <div className='grid-cols-2 gap-4 xl:grid'>
                  <img src='/images/Datamining.jpg' alt='' className='w-full' />
                </div>
                <a
                  href='https://stream.graff.tech'
                  target='_blank'
                  className='inline-block w-fit sm:hidden'
                >
                  <Button>Learn more</Button>
                </a>
              </div>
            </div>

            <div className='border-t border-[#3D425C]'>
              <StreamButton
                icon='/icons/Revolution.svg'
                title='MFC "Re:volution towers"'
                location='Russia, Yekaterinburg'
                background='/images/stream/nks.jpg'
                link='https://stream.graff.tech/?build=nksJukovaDev&location=a1'
              />
              <StreamButton
                icon='/icons/Residence.svg'
                title='Residential Complex "Life Residence"'
                location='Russia, Tyumen'
                background='/images/stream/liferes.jpg'
                link='https://stream.graff.tech/?build=lifeResidence&location=a1'
              />
              <StreamButton
                icon='/icons/Aivaz.svg'
                title='Residential Complex "Aivazovsky City"'
                location='Russia, Tyumen'
                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 gap-4 xl:gap-8 sm:gap-6'>
                <Heading2>
                  We analyze
                  <br />
                  <span style={{ WebkitTextFillColor: '#fff' }}>
                    user behavior
                  </span>
                </Heading2>
                <p className='text-sm xl:w-2/3 2xl:text-base'>
                  The program's internal analytics system collects information
                  on user behavior and the efficiency of managers to create a
                  report containing necessary metrics
                </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%]'>
                  The report makes the process of demonstrating the
                  residential complex even more efficient
                </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%]'>
                The report makes the process of demonstrating the
                residential complex even more efficient
              </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>
                  Virtual reality
                  <br />
                  <span style={{ WebkitTextFillColor: '#fff' }}>tour</span>
                </Heading2>
                <Button
                  className='hidden sm:block'
                  onClick={() => setModal(<FeedbackModal />)}
                >
                  Sign up for the showroom
                </Button>
              </div>
              <div className='xl:block hidden pb-8 border-b border-[#3D425C]'>
                <p className='font-gilroy 2xl:text-xl 2xl:leading-[120%]'>
                  The client is fully immersed in the recreated reality, feels
                  convenience, and the level of comfort
                </p>
              </div>
            </div>
            <div className='flex flex-col gap-10'>
              <div className='grid gap-6 xl:grid-cols-2 xl:gap-4'>
                <p className='text-sm 2xl:text-base'>
                  Just put on a virtual reality helmet to walk around, evaluate
                  and feel the space
                </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='hidden xl:block'
              ></video>
            </div>

            <div className='flex flex-col gap-8 mt-4 col-span-full sm:mt-8 sm:gap-12'>
              <video
                src='/videos/vr.mp4'
                muted
                autoPlay
                loop
                playsInline
                className='block xl:hidden'
              ></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'>
                  The client is fully immersed
                  <br />
                  in the recreated reality, feels
                  <br />
                  convenience, and the level of comfort
                </p>
                <Button
                  className='inline-block sm:hidden'
                  onClick={() => setModal(<FeedbackModal />)}
                >
                  Sign up for the showroom
                </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 gap-6 sm:gap-8'>
            <Heading2>
              Evaluate the effectiveness <br className='block xl:hidden' />
              of the interactive
              <br />
              <span style={{ WebkitTextFillColor: '#fff' }}>sales tool</span>
            </Heading2>
            <div className='grid gap-2 sm:grid-cols-2 xl:gap-4 sm:gap-3'>
              <p className='text-sm xl:w-2/3 2xl:text-base'>
                We studied industry analytics in the new apartment sales
                market and based on this data, assembled a product efficiency
                calculator
              </p>
              <p className='text-sm xl:w-2/3 2xl:text-base'>
                When using project financing, the main thing is time. The
                faster escrow accounts are filled, the lower the percentage
                for the use of borrowed money
              </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>Projects</Heading2>
            <div className='hidden gap-3 2xl:grid xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6'>
              {projects.map((project, index) => (
                <ProjectCard key={index} {...project} />
              ))}
            </div>
            <div className='grid gap-3 2xl:hidden xl:grid-cols-3 sm:grid-cols-2 2xl:gap-8 xl:gap-6'>
              {[...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>
              Our customers are{' '}
              <span style={{ WebkitTextFillColor: '#fff' }}>
                in real estate
              </span>
            </Heading2>
            <img
              src='/images/clients-logos.png'
              alt=''
              className='hidden sm:block'
            />
            <img
              src='/images/clients-logos-mobile.png'
              alt=''
              className='block sm:hidden'
            />
            <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 grid-cols-1 gap-6 lg:grid-cols-4 lg:gap-4'>
                <div className='col-span-1'>
                  <div className='grid gap-4 lg:grid-cols-1 sm:grid-cols-2 lg:gap-6'>
                    <p className='2xl:text-[64px] xl:text-5xl text-[40px] font-gilroy text-gradient font-medium w-fit leading-none'>
                      Contact us
                    </p>
                    <p className='font-semibold leading-tight 2xl:text-xl lg:text-lg font-gilroy'>
                      Want to increase conversion?
                      <br />
                      Let's discuss the details!
                    </p>
                  </div>
                </div>

                <div className='lg:col-span-3'>
                  <FeedbackForm />
                </div>
              </div>
            </div>
            <div className='mt-[104px] relative'>
              <div className='relative grid gap-4 lg:grid-cols-4'>
                <div className='flex gap-4'>
                  <p className='font-semibold 2xl:text-xl font-gilroy'>
                    Hot line
                  </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>Write us</span>
                    <MailIcon className='w-6 h-6 lg:w-8 lg:h-8' />
                  </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>Call us</span>
                    <PhoneIcon className='w-6 h-6 lg:w-8 lg:h-8' />
                  </a>
                </div>

                <div className='flex mt-10 sm:col-span-2 sm:justify-end lg:mt-0'>
                  <div className='flex justify-between w-full gap-4 lg:w-auto sm:w-1/2 2xl:gap-8 lg:gap-6'>
                    <p className='2xl:text-xl font-gilroy font-semibold 2xl:-mt-1.5 -mt-1'>
                      Social
                      <br />
                      media
                    </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='w-6 h-6 2xl:w-8 2xl:h-8' />
                      </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='w-6 h-6 2xl:w-8 2xl:h-8' />
                      </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='w-6 h-6 2xl:w-8 2xl:h-8' />
                      </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 gap-4 sm:gap-1'>
                <p className='flex flex-col gap-1 sm:flex-row sm:gap-4'>
                  <a href='https://graff.tech/privacypolicy' target='_blank'>
                    Privacy policy
                  </a>
                  {/* <a href="https://graff.estate" className="">
                    graff.estate
                  </a> */}
                </p>
                <p className='text-xs text-[#C5C7CE]'>
                  © {new Date().getFullYear()} GRAFF interactive. All rights
                  reserved.
                </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 items-center justify-between'>
                <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 items-center justify-between'>
                <div className='text-[#EBEBEB] flex flex-col gap-1'>
                  <a href='mailto:sam@graff.tech'>sam@graff.tech</a>
                  <a href='tel:+971585060097'>+971 58 506 0097</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;
