edr-platform/apps/edr-passenger-web/portal/src/components/Footer.tsx

'use client';

import { Mail, Phone, MapPin } from 'lucide-react';
import Link from 'next/link';
import { useLanguage, getTranslation, Language } from '@/lib/i18n';
import { useEffect, useState } from 'react';

export function Footer() {
  const { getLang } = useLanguage();
  const [lang, setLang] = useState<Language>('en');
  const t = (key: string) => getTranslation(lang, key);

  useEffect(() => {
    setLang(getLang());
    const handleLanguageChange = (e: any) => setLang(e.detail);
    window.addEventListener('languageChange', handleLanguageChange);
    return () => window.removeEventListener('languageChange', handleLanguageChange);
  }, [getLang]);

  return (
    <footer className="bg-[rgb(20_113_76)] dark:bg-gray-900 text-white py-12">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            {/* Company Info */}
            <div>
              <h4 className="font-semibold mb-2">
                Ethio-Djibouti Railway
              </h4>
              <p className="text-sm text-gray-100 my-3">Connecting East Africa with train travel.
              </p>
              <div className="space-y-2 text-sm">
                <div className="flex items-center gap-2 text-gray-100">
                  <Phone className="w-4 h-4" />
                  <a href="tel:9546" className="hover:text-gray-200 transition">
                    9546
                  </a>
                </div>
                <div className="flex items-center gap-2 text-gray-100">
                  <Mail className="w-4 h-4" />
                  <a href="mailto:edr_@edrsc.com" className="hover:text-gray-200 transition">
                    edr_@edrsc.com
                  </a>
                </div>
                <div className="flex items-center gap-2 text-gray-100">
                  <MapPin className="w-4 h-4" />
                  <span>Furi, Sheger City</span>
                </div>
              </div>
            </div>

            {/* Quick Links */}
            <div>
              <h4 className="font-semibold mb-4">{t('nav.home')}</h4>
              <ul className="space-y-2 text-sm text-gray-100">
                <li>
                  <Link href="/" className="hover:text-gray-200 transition">
                    {t('nav.home')}
                  </Link>
                </li>
                <li>
                  <Link href="/services" className="hover:text-gray-200 transition">
                    {t('nav.services')}
                  </Link>
                </li>
                <li>
                  <Link href="/about" className="hover:text-gray-200 transition">
                    {t('nav.about')}
                  </Link>
                </li>
                <li>
                  <Link href="/contact" className="hover:text-gray-200 transition">
                    {t('nav.contact')}
                  </Link>
                </li>
              </ul>
            </div>

            {/* Support */}
            <div>
              <h4 className="font-semibold mb-4">{t('footer.support')}</h4>
              <ul className="space-y-2 text-sm text-gray-100">
                <li>
                  <Link href="/help" className="hover:text-gray-200 transition">
                    {t('nav.help')}
                  </Link>
                </li>
                <li>
                  <a href="#" className="hover:text-gray-200 transition">
                    {t('footer.privacy')}
                  </a>
                </li>
                <li>
                  <a href="#" className="hover:text-gray-200 transition">
                    {t('footer.terms')}
                  </a>
                </li>
              </ul>
            </div>

            {/* Social Media */}
            <div>
              <h4 className="font-semibold mb-4">{t('footer.follow')}</h4>
              <div className="flex gap-3">
                <a href="https://web.facebook.com/ethiodjiboutirailwaysc" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Facebook">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                </a>
                <a href="https://twitter.com/edr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Twitter">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                </a>
                <a href="https://instagram.com/edr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="Instagram">
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                </a>
                <a href="https://linkedin.com/company/edr" target="_blank" rel="noopener noreferrer" className="w-10 h-10 bg-white bg-opacity-20 rounded-lg flex items-center justify-center hover:bg-opacity-30 transition duration-200 transform hover:scale-110" aria-label="LinkedIn">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
                </a>
              </div>
            </div>
          </div>

          {/* Divider */}
          <div className="border-t border-white border-opacity-20 dark:border-gray-700 pt-8">
            <div className="flex flex-col md:flex-row justify-between items-center text-sm text-gray-100">
              <p>
                &copy; 2024 Ethio-Djibouti Railway. {t('footer.rights')}
              </p>
              <div className="flex gap-6 mt-4 md:mt-0">
                <a href="#" className="hover:text-gray-200 transition">
                  {t('footer.privacy')}
                </a>
                <a href="#" className="hover:text-gray-200 transition">
                  {t('footer.terms')}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}