'use client';

import { Link } from '@/i18n/navigation';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInstagram, faTiktok, faXTwitter } from '@fortawesome/free-brands-svg-icons';
import { useTranslations } from 'next-intl';
import LanguageSwitcher from '@/components/LanguageSwitcher';

export default function Footer() {
  const t = useTranslations('footer');
  const tc = useTranslations('common');

  return (
    <footer className="bg-[#4C1D95] text-white pt-12 pb-8">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <div className="flex items-center gap-2 mb-8">
          <img src="/cahootravel-logo.svg" alt="" className="h-8 w-auto brightness-0 invert" />
        </div>

        <div className="grid grid-cols-2 gap-6 mb-10 text-sm sm:grid-cols-3 sm:gap-8">
          <div className="flex flex-col gap-2">
            <Link href="/about" className="text-purple-200 hover:text-white transition-colors">{t('aboutUs')}</Link>
            <Link href="/how-it-works" className="text-purple-200 hover:text-white transition-colors">{t('howItWorks')}</Link>
            <Link href="/how-it-works#faq" className="text-purple-200 hover:text-white transition-colors">{t('faq')}</Link>
            <Link href="/pricing" className="text-purple-200 hover:text-white transition-colors">{t('pricing')}</Link>
            <Link href="/contact" className="text-purple-200 hover:text-white transition-colors">{t('contact')}</Link>
          </div>

          <div className="flex flex-col gap-2">
            <a href="#" className="flex items-center gap-2 text-purple-200 hover:text-white transition-colors">
              <FontAwesomeIcon icon={faInstagram} className="w-4 h-4" /> {t('instagram')}
            </a>
            <a href="#" className="flex items-center gap-2 text-purple-200 hover:text-white transition-colors">
              <FontAwesomeIcon icon={faXTwitter} className="w-4 h-4" /> {t('xPlatform')}
            </a>
            <a href="#" className="flex items-center gap-2 text-purple-200 hover:text-white transition-colors">
              <FontAwesomeIcon icon={faTiktok} className="w-4 h-4" /> {t('tiktok')}
            </a>
          </div>

          <div className="flex flex-col gap-2">
            <Link href="/countries" className="text-purple-200 hover:text-white transition-colors">{t('supportedCountries')}</Link>
            <Link href="/platforms" className="text-purple-200 hover:text-white transition-colors">{t('platforms')}</Link>
            <Link href="/partners" className="text-purple-200 hover:text-white transition-colors">{t('partners')}</Link>
            <Link href="/cookies" className="text-purple-200 hover:text-white transition-colors">{t('cookiePreferences')}</Link>
            <Link href="/security" className="text-purple-200 hover:text-white transition-colors">{t('security')}</Link>
            <Link href="/privacy" className="text-purple-200 hover:text-white transition-colors">{t('privacyPolicy')}</Link>
          </div>
        </div>

        <div className="border-t border-purple-700 pt-6 flex items-center justify-between gap-4">
          <LanguageSwitcher />
          <span className="text-xs text-purple-300">
            {tc('copyright', { year: new Date().getFullYear() })}
          </span>
        </div>
      </div>
    </footer>
  );
}