'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ArrowRight, MapPin, Users } from 'lucide-react';
import { useLanguage } from '@/contexts/LanguageContext';
import { useRegion } from '@/contexts/RegionContext';
import { shouldHidePublicChrome } from '@/lib/publicChrome';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { DEFAULT_REGION_SLUG } from '@/lib/region';
import { BrandLogo } from '@/components/brand/BrandLogo';

export function SiteFooter() {
  const pathname = usePathname();
  const { t } = useLanguage();
  const { homePath, regionPath, slug } = useRegion();

  if (shouldHidePublicChrome(pathname)) return null;

  const useRegionalLinks = slug !== DEFAULT_REGION_SLUG;
  const workersHref = useRegionalLinks ? regionPath('/workers') : '/workers';
  const mapHref = useRegionalLinks ? regionPath('/map') : '/map';

  const companyLinks = [
    { href: '/about', label: t('About', 'Tungkol sa amin') },
    { href: '/how-it-works', label: t('How it works', 'Paano ito gumagana') },
    { href: '/sponsor', label: t('Sponsor', 'Mag-sponsor') },
    { href: '/contact', label: t('Contact', 'Makipag-ugnayan') },
    { href: '/disclaimer', label: t('Disclaimer', 'Disclaimer') },
    { href: '/terms', label: t('Terms', 'Terms') },
  ];

  const exploreLinks = [
    { href: workersHref, label: t('Find workers', 'Hanapin ang workers') },
    { href: mapHref, label: t('Map', 'Mapa') },
    { href: '/categories', label: t('Trades', 'Mga trabaho') },
    { href: '/become-worker', label: t('Become a worker', 'Maging worker') },
    ...(JOBS_FEATURE_ENABLED
      ? [{ href: useRegionalLinks ? regionPath('/jobs') : '/jobs', label: t('Find jobs', 'Hanapin ang jobs') }]
      : []),
  ];

  return (
    <footer className="site-footer">
      <div className="mx-auto max-w-6xl px-4 py-12 md:py-14">
        <div className="grid gap-10 md:grid-cols-[1.4fr_1fr_1fr] md:gap-8">
          <div className="max-w-md">
            <BrandLogo
              variant="header"
              href={homePath()}
              className="mb-4"
              tagline={t('Workers Directory', 'Direktoryo ng Workers')}
            />
            <p className="text-sm text-slate-400 leading-relaxed">
              {t(
                'A workers directory connecting customers with independent blue-collar professionals across the Philippines.',
                'Direktoryo ng workers na nag-uugnay sa customers at independent blue-collar professionals sa buong Pilipinas.'
              )}
            </p>
            <p className="mt-3 text-xs text-slate-500 leading-relaxed">
              {t(
                'Workers listed here are independent and not employed by eHandyHire.',
                'Ang mga worker dito ay independent at hindi empleyado ng eHandyHire.'
              )}{' '}
              <Link href="/disclaimer" className="font-semibold text-amber-400 hover:text-amber-300">
                {t('Read disclaimer', 'Basahin ang disclaimer')}
              </Link>
            </p>
          </div>

          <div>
            <span className="site-footer-label">{t('Explore', 'Tuklasin')}</span>
            <nav className="flex flex-col gap-2.5">
              {exploreLinks.map((link) => (
                <Link key={link.href} href={link.href} className="site-footer-link">
                  {link.label}
                </Link>
              ))}
            </nav>
          </div>

          <div>
            <span className="site-footer-label">{t('Company', 'Kumpanya')}</span>
            <nav className="flex flex-col gap-2.5">
              {companyLinks.map((link) => (
                <Link key={link.href} href={link.href} className="site-footer-link">
                  {link.label}
                </Link>
              ))}
            </nav>

            <div className="mt-8 flex flex-col gap-2.5">
              <Link
                href={workersHref}
                className="inline-flex items-center gap-2 text-sm font-semibold text-amber-300 hover:text-amber-200"
              >
                <Users className="h-4 w-4" />
                {t('Browse workers', 'Tingnan ang workers')}
                <ArrowRight className="h-3.5 w-3.5" />
              </Link>
              <Link
                href={mapHref}
                className="inline-flex items-center gap-2 text-sm font-semibold text-slate-300 hover:text-white"
              >
                <MapPin className="h-4 w-4" />
                {t('Open map', 'Buksan ang mapa')}
              </Link>
            </div>
          </div>
        </div>

        <div className="mt-10 flex flex-col gap-2 border-t border-white/10 pt-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-xs text-slate-500">
            © {new Date().getFullYear()} eHandyHire.{' '}
            {t('All rights reserved.', 'Lahat ng karapatan ay nakalaan.')}
          </p>
          <p className="text-xs text-slate-500">
            {t('Built for skilled work in the Philippines.', 'Para sa bihasang trabaho sa Pilipinas.')}
          </p>
        </div>
      </div>
    </footer>
  );
}