tripwithbonus/frontend/components/Footer.tsx

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="mx-auto flex w-[93%] flex-col gap-8 px-6 py-8 md:flex-row md:gap-16">
          {/* левый таб */}
          <div className="flex w-full flex-col items-center space-y-5 text-center md:w-1/4 md:items-start 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 justify-center gap-4 md:justify-start">
              <a href="https://instagram.com/tripwb_com" target="_blank" rel="noopener noreferrer">
                <FaInstagram size={20} className="hover:text-orange text-white transition-colors" />
              </a>
              <a href="https://t.me/tripWB" target="_blank" rel="noopener noreferrer">
                <FaTelegram size={20} className="hover:text-orange text-white transition-colors" />
              </a>
              <a href="https://vk.com/club226251027" target="_blank" rel="noopener noreferrer">
                <FaVk size={20} className="hover:text-orange text-white transition-colors" />
              </a>
              <a
                href="https://www.facebook.com/share/p/tckdLFiyXm9r2925/?mibextid=WC7FNe"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaFacebook size={20} className="hover:text-orange text-white transition-colors" />
              </a>
              <a
                href="https://www.tiktok.com/@tripwithbonus?_t=8qHingfQWNq"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaTiktok size={20} className="hover:text-orange text-white transition-colors" />
              </a>
              <a
                href="https://youtube.com/@tripwb?si=oiNZrtiOqx6OePJv"
                target="_blank"
                rel="noopener noreferrer"
              >
                <FaYoutube size={20} className="hover:text-orange text-white transition-colors" />
              </a>
            </div>
          </div>

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

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

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

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

export default Footer