import { PropsWithChildren } from "react";
import ArrowMoreIcon from "@/components/icons/ArrowMoreIcon";
import RutubeIcon from "@/components/icons/RutubeIcon";
import TelegramIcon from "@/components/icons/TgIcon";
import VkIcon from "@/components/icons/VKIcon";
import YoutubeIcon from "@/components/icons/YoutubeIcon";

export function Footer() {
  return (
    <footer className="lg:px-5 lg:pb-5 md:max-lg:px-4 md:max-lg:pb-4 px-[10px] pb-[10px] space-y-6 mb-0">
      <div className="max-md:flex-col lg:gap-[0.833vw] md:max-lg:gap-[1.042vw] flex gap-[1.111vw]">
        <a
          href={"tel:" + "8 800 770 00 67".replaceAll(" ", "")}
          className="lg:p-[1.667vw] p-6 flex flex-col justify-between max-md:gap-y-10 bg-[linear-gradient(to_top_left,#7A7A7A50,transparent)] lg:rounded-[1.111vw] rounded-2xl lg:aspect-[696/248] lg:w-[48.333vw] md:max-lg:w-[47.656vw] hover:bg-[#37393B99] bg-transparent transition-colors"
        >
          <div className="text-[#7A7A7A] text1 font-medium">Позвонить</div>
          <div className="lg:line2 md:max-lg:heading1 line2 flex items-center font-medium">
            8 800 770 00 67
            <div className="text-white lg:size-[5.556vw] size-[10vw]">
              <ArrowMoreIcon />
            </div>
          </div>
        </a>
        <a
          href={"mailto:" + "info@graff.tech"}
          className="lg:p-[1.667vw] p-6 flex flex-col justify-between max-md:gap-y-10 bg-[linear-gradient(to_top_left,#7A7A7A50,transparent)] lg:rounded-[1.111vw] rounded-2xl lg:aspect-[624/248] lg:w-[43.333vw] md:max-lg:w-[47.656vw] hover:bg-[#37393B99] bg-transparent transition-colors"
        >
          <div className="text-[#7A7A7A] text1 font-medium">Написать</div>
          <div className="lg:line2 md:max-lg:heading1 line2 flex items-center font-medium">
            info@graff.tech
            <div className="text-white lg:size-[5.556vw] size-[10vw]">
              <ArrowMoreIcon />
            </div>
          </div>
        </a>
        <div className="gap-y-2 justify-between md:gap-x-[1.042vw] gap-x-[1.111vw] md:flex-col flex">
          <ContactLink href="https://t.me/graffestate">
            <div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
              <TelegramIcon />
            </div>
          </ContactLink>
          <ContactLink href="https://rutube.ru/channel/25505040">
            <div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
              <RutubeIcon />
            </div>
          </ContactLink>
          <ContactLink href="https://vk.com/graff.estate">
            <div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
              <VkIcon />
            </div>
          </ContactLink>
          <ContactLink href="https://www.youtube.com/@GRAFFtech">
            <div className="text-white lg:size-[1.389vw] size-[5.556vw] group-hover:text-black">
              <YoutubeIcon />
            </div>
          </ContactLink>
        </div>
      </div>

      <div className="lg:w-full flex flex-col md:flex-row md:max-lg:gap-[1.042vw] lg:gap-x-[0.833vw] gap-6 lg:pb-6 max-lg:py-6 pb-10 md:max-lg:pt-4 !max-md:mt-[11.111vw] border-b border-[#232425] relative">
        <div className="flex flex-col gap-y-[1.111vw] lg:min-w-[48.193vw] flex-1">
          <span className=" text1 text-[#7A7A7A]">Юридический адрес:</span>
          <span className="headline2 max-md:leading-4 font-medium text-[#7A7A7A]">
            620063, г. Екатеринбург, <br /> ул. Большакова, д. 66, кв. 6
          </span>

          <div className="flex flex-col gap-y-[1.111vw] lg:mt-[0px] md:mt-[2.083vw] mt-6">
            <span className=" text1 text-[#7A7A7A]">Наш основной стек:</span>
            <div className="headline2 max-md:leading-4 font-medium text-[#7A7A7A]">
              <p>Unreal Engine 5, C++</p>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-y-[1.111vw] flex-1">
          <span className="text1 text-[#7A7A7A]">Реквизиты:</span>
          <div className="headline2 max-md:leading-4 font-medium text-[#7A7A7A]">
            <p>ИНН: 6679174128</p>
            <p>КПП: 667101001</p>
            <p>ООО &quot;ГРАФФ.ЭСТЕЙТ&quot;</p>
            <p>ОГРН 1246600010140</p>
          </div>
        </div>
        <img
          src="/img/components/header/Sk.svg"
          alt="Сколково"
          className=" lg:size-[3.333vw] lg:mt-[2.292vw] md:size-[6.25vw] size-[13.333vw] max-md:absolute max-md:right-0 max-md:bottom-6"
        />
      </div>

      <div className="lg:gap-x-[0.833vw] gap-y-2 flex max-lg:flex-col">
        <a
          target="_blank"
          rel="noopener noreferrer"
          href={"/policy"}
          className="text-[#37393B] text1 font-medium leading-[18.9px] lg:w-[48.193vw] w-fit"
        >
          Политика конфиденциальности и обработки персональных данных
        </a>
        <p className="text-[#37393B] text1 font-medium leading-[18.9px] col-start-1">
          © 2026 GRAFF interactive. Все права защищены
        </p>
        <a
          target="_blank"
          rel="noopener noreferrer"
          href={"https://graff.tech"}
          className="text-[#37393B] text1 font-medium leading-[18.9px] lg:ml-auto w-fit md:col-start-2 md:text-right"
        >
          graff.tech
        </a>
      </div>
    </footer>
  );
}

export function ContactLink({
  children,
  href,
  className = "",
}: PropsWithChildren<{ href: string; className?: string }>) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className={`lg:rounded-[1.111vw] rounded-2xl bg-[#37393B99] lg:p-[1.25vw] p-[18px] hover:bg-white transition-all hover:text-black flex justify-center w-full group ${className}`}
    >
      {children}
    </a>
  );
}
