import { useTranslation } from 'react-i18next';
import { LogoIcon } from './icons/LogoIcon';

const SUPPORT_EMAIL = 'support@perfect-postcode.co.uk';

function FooterLink({ href, label }: { href: string; label: string }) {
  return (
    <li>
      <a
        href={href}
        className="text-sm text-warm-500 hover:text-teal-600 dark:text-warm-400 dark:hover:text-teal-400 transition-colors"
      >
        {label}
      </a>
    </li>
  );
}

export default function Footer() {
  const { t } = useTranslation();
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-warm-200 bg-warm-50 dark:border-warm-800 dark:bg-navy-950">
      <div className="mx-auto max-w-6xl px-4 py-10">
        <div className="grid gap-8 sm:grid-cols-2 md:grid-cols-4">
          <div>
            <a href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
              <LogoIcon className="h-5 w-5 shrink-0 text-teal-500" />
              <span className="text-base font-semibold text-navy-950 dark:text-teal-300">
                {t('header.appName')}
              </span>
            </a>
            <p className="mt-3 text-sm leading-relaxed text-warm-500 dark:text-warm-400">
              {t('footer.tagline')}
            </p>
          </div>

          <nav aria-label={t('footer.product')}>
            <h2 className="text-xs font-semibold uppercase tracking-wide text-warm-400 dark:text-warm-500">
              {t('footer.product')}
            </h2>
            <ul className="mt-3 space-y-2">
              <FooterLink href="/dashboard" label={t('header.dashboard')} />
              <FooterLink href="/pricing" label={t('header.pricing')} />
              <FooterLink href="/learn" label={t('header.learn')} />
            </ul>
          </nav>

          <nav aria-label={t('footer.resources')}>
            <h2 className="text-xs font-semibold uppercase tracking-wide text-warm-400 dark:text-warm-500">
              {t('footer.resources')}
            </h2>
            <ul className="mt-3 space-y-2">
              <FooterLink href="/data-sources" label={t('footer.dataSources')} />
              <FooterLink href="/methodology" label={t('footer.methodology')} />
              <FooterLink href={`mailto:${SUPPORT_EMAIL}`} label={t('footer.contact')} />
            </ul>
          </nav>

          <nav aria-label={t('footer.legal')}>
            <h2 className="text-xs font-semibold uppercase tracking-wide text-warm-400 dark:text-warm-500">
              {t('footer.legal')}
            </h2>
            <ul className="mt-3 space-y-2">
              <FooterLink href="/terms" label={t('footer.terms')} />
              <FooterLink href="/privacy" label={t('footer.privacy')} />
            </ul>
          </nav>
        </div>

        <div className="mt-10 flex flex-col gap-2 border-t border-warm-200 pt-6 text-xs text-warm-400 dark:border-warm-800 dark:text-warm-500 sm:flex-row sm:items-center sm:justify-between">
          <p>{t('footer.copyright', { year })}</p>
          <p>{t('footer.coverage')}</p>
        </div>
      </div>
    </footer>
  );
}
