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

export function Footer() {
  return (
    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
      <div className="flex sm:items-center max-sm:flex-col lg:px-10 sm:px-6 px-4 sm:py-[30px] py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
        <Link to={'/'} className="outline-none">
          <LogoWithTextIcon className="h-[50px] w-[104px]" />
        </Link>
        <div className="flex flex-col gap-y-1">
          <NavLink
            to="/policy"
            className="sm:font-medium m-text flex gap-4 outline-none"
            target="_blank"
          >
            Политика конфиденциальности <span>graff.tech</span>
          </NavLink>
          <p className="sm:font-medium m-text opacity-40">
            © 2025 GRAFF interactive. Все права защищены
          </p>
        </div>
      </div>
      <div className="lg:px-10 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 m-text">
          RU
        </div>
      </div>
      <div className="lg:px-10 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 m-text">
          UAE
        </div>
      </div>
    </footer>
  );
}

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