import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
import {
  FaInstagram,
  FaTelegram,
  FaVk,
  FaFacebook,
  FaYoutube,
  FaTiktok,
} from 'react-icons/fa'
import EmailHandler from './EmailHandler'

const Footer = () => {
  return (
    <div>
      <div className="bg-[#272424]">
        <div className="flex flex-col md:flex-row px-6 py-8 w-[93%] mx-auto gap-8 md:gap-16">
          {/* левый таб */}
          <div className="flex flex-col space-y-5 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
            <Image
              src="/images/footerLogo.png"
              alt="logo"
              width={50}
              height={50}
            />
            <span className="text-sm text-gray-300">
              Подпишись и будь в курсе всех событий, а также получай подарки и
              бонусы от Trip With Bonus
            </span>
            <EmailHandler />
            <div className="flex gap-4 justify-center md:justify-start">
              <a
                href="https://instagram.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaInstagram
                  size={20}
                  className="text-white hover:text-orange transition-colors"
                />
              </a>
              <a
                href="https://telegram.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaTelegram
                  size={20}
                  className="text-white hover:text-orange transition-colors"
                />
              </a>
              <a
                href="https://vk.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaVk
                  size={20}
                  className="text-white hover:text-orange transition-colors"
                />
              </a>
              <a
                href="https://facebook.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaFacebook
                  size={20}
                  className="text-white hover:text-orange transition-colors"
                />
              </a>
              <a
                href="https://tiktok.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaTiktok
                  size={20}
                  className="text-white hover:text-orange transition-colors"
                />
              </a>
              <a
                href="https://youtube.com"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaYoutube
                  size={20}
                  className="text-white hover:text-orange transition-colors"
                />
              </a>
            </div>
          </div>

          {/* ссылки */}
          <div className="flex flex-col md:flex-row justify-between w-full md:w-2/4 space-y-8 md:space-y-0 items-center md:items-start text-center md:text-left">
            {/* информация */}
            <div className="flex flex-col space-y-4 items-center md:items-start">
              <div className="text-white text-xl font-medium md:pb-5">
                Информация
              </div>
              <div className="flex flex-col space-y-1">
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Перевезти посылку
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Отправить посылку
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Для отправителя
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Для перевозчика
                </Link>
              </div>
            </div>

            {/* О Trip With Bonus */}
            <div className="flex flex-col space-y-4 items-center md:items-start">
              <div className="text-white text-xl font-medium md:pb-5">
                О Trip With Bonus
              </div>
              <div className="flex flex-col space-y-1">
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Новости
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Партнерам
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Реклама
                </Link>
              </div>
            </div>
            <div className="flex flex-col space-y-4 items-center md:items-start">
              <div className="text-white text-xl font-medium md:pb-5">
                Кооперация
              </div>
              <div className="flex flex-col space-y-1">
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Реклама
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Поддержка
                </Link>
                <Link
                  href="/"
                  className="text-gray-300 hover:text-orange transition-colors"
                >
                  Контакты
                </Link>
              </div>
            </div>
          </div>

          <div className="flex flex-col space-y-4 w-full md:w-1/4 items-center md:items-start text-center md:text-left">
            <div className="text-white text-xl font-medium md:pb-5">
              Свяжитесь с нами:
            </div>
            <div>
              <div className="flex flex-col space-y-3">
                <a
                  href="tel:+375291234567"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
                >
                  + 7 (777) 777-77-77{' '}
                </a>
                <a
                  href="mailto:sales@tripwb.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
                >
                  sales@tripwb.com
                </a>
                <a
                  href="mailto:support@tripwb.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:opacity-80 transition-opacity text-gray-300 hover:text-orange"
                >
                  support@tripwb.com
                </a>
              </div>
              <div className="flex flex-col md:flex-row gap-2 mt-7 justify-center md:justify-start">
                <Link
                  href="/register"
                  className="bg-orange hover:bg-orange/80 text-white px-4 py-2 rounded-2xl text-base font-medium"
                >
                  Регистрация
                </Link>
                <Link
                  href="/login"
                  className="text-white hover:text-orange transition-colors py-2"
                >
                  Войти
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Нижняя часть футера */}
      <div>
        <div className="flex flex-col justify-between md:flex-row px-6 py-4 md:py-8 w-[95%] mx-auto text-center md:text-left">
          <div>Copyright © {new Date().getFullYear()}. Все права защищены.</div>
          <div className="flex flex-col md:flex-row py-4 md:py-0 md:space-x-5 items-center md:items-start">
            <Link href="/" className="hover:text-orange">
              Публичная оферта
            </Link>
            <Link href="/" className="hover:text-orange">
              Политика конфиденциальности
            </Link>
            <Link href="/" className="hover:text-orange">
              Правила пользования сервисом
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Footer