'use client';

import Link from "next/link";
import { usePathname } from 'next/navigation';
import { getLocaleFromPathname, getTranslations } from '../../lib/i18n';

export default function Footer() {
  const pathname = usePathname();
  const locale = getLocaleFromPathname(pathname);
  const { t } = getTranslations(locale);

  // Generate locale-aware URLs
  const getLocalizedUrl = (path: string) => {
    if (locale === 'fi') {
      // Map English/Swedish paths to Finnish paths
      if (path === '/services/accounting') return '/palvelut/kirjanpito';
      if (path === '/services/payroll') return '/palvelut/palkanlaskenta';
      if (path === '/services/taxation') return '/palvelut/verotus';
      if (path === '/services') return '/palvelut';
      if (path === '/contact') return '/yhteystiedot';
      return path;
    }
    return `/${locale}${path}`;
  };
  return (
    <footer className="bg-slate-800 text-white py-16 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div>
            <h3 className="text-lg font-semibold mb-4">{t('footer.company')}</h3>
            <p className="text-slate-300 mb-4">
              {t('footer.tagline')}
            </p>
          </div>

          <div>
            <h4 className="text-lg font-semibold mb-4">{t('footer.services')}</h4>
            <ul className="space-y-2 text-slate-300">
              <li><Link href={getLocalizedUrl('/services/accounting')} className="hover:text-white transition-colors duration-200">{t('footer.accounting')}</Link></li>
              <li><Link href={getLocalizedUrl('/services/payroll')} className="hover:text-white transition-colors duration-200">{t('footer.payroll')}</Link></li>
              <li><Link href={getLocalizedUrl('/services/taxation')} className="hover:text-white transition-colors duration-200">{t('footer.taxation')}</Link></li>
            </ul>
          </div>

          <div>
            <h4 className="text-lg font-semibold mb-4">{t('footer.contact')}</h4>
            <ul className="space-y-2 text-slate-300">
              <li>{t('footer.email')}</li>
              <li>{t('footer.phone')}</li>
              <li>{t('footer.address')}</li>
              <li>{t('footer.businessId')}</li>
            </ul>
          </div>
        </div>

        <div className="border-t border-slate-700 mt-12 pt-8 text-center text-slate-300">
          <p>{t('footer.copyright')}</p>
        </div>
      </div>
    </footer>
  );
}