import { Link, NavLink } from 'react-router-dom';
import { LogoWithoutText } from '../icons/LogoWithoutTextIcon';

export function Footer() {
  return (
    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2 bg-[#14161F]">
      <div className="flex sm:items-center max-sm:flex-col sm:px-6 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
        <Link to={'/'}>
          <img
            src="images/GRAFFinteractive.svg"
            alt="GRAFFinteractive"
            className="w-[118px]  max-md:hidden"
          />
          <div className="md:hidden">
            <LogoWithoutText />
          </div>
        </Link>
        <div className="flex flex-col gap-y-1">
          <div className="flex gap-x-4 m-text">
            <NavLink
              to="/policy"
              target="_blank"
              className="flex gap-4 sm:font-medium m-text"
            >
              Политика конфиденциальности
            </NavLink>
            <Link to="https://graff.tech">graff.tech</Link>
          </div>
          <p className="opacity-40 sm:font-medium m-text">
            © 2026 GRAFF interactive. Все права защищены
          </p>
        </div>
      </div>
      <div className="sm:px-6 px-4 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
        <div>
          <Contact type="email" text="info@graff.tech" />
          <Contact type="phone" text="8 800 770 00 67" />
        </div>
        <div className="font-medium p-[14px] border border-[#3D425C] rounded-full h4">
          RU
        </div>
      </div>
      <div className="sm:px-6 px-4 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
        <div>
          <Contact type="email" text="sam@graff.tech" />
          <Contact type="phone" text="+971 58 506 0097" />
        </div>
        <div className="font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full h4">
          UAE
        </div>
      </div>
    </footer>
  );
}

function Contact({
  text,
  className = '',
  type,
}: {
  className?: string;
  text: string;
  type: 'email' | 'phone';
}) {
  return (
    <div>
      <Link
        to={
          type === 'email' ? `mailto:${text}` : `tel:${text.replace(' ', '')}`
        }
        className={'l-text ' + className}
      >
        {text}
      </Link>
    </div>
  );
}
