import { Link } from 'react-router-dom';
import { useTranslation } from '@/contexts/language';

/**
 * The site links that live in the desktop footer — surfaced on the map
 * (a full-bleed route where the footer is hidden) without stealing map height.
 *
 * Desktop: a slim full-width bar. Mobile: a tiny collapsed "Links" chip that
 * expands to a compact row. Always visible: the map is a full-bleed route, so
 * this strip is the only footer there — no accidental permanent hiding.
 */
export function MapFooterStrip() {
  const { t } = useTranslation();
  const links = [
    { to: '/diy', label: t('nav.diy') },
    { to: '/newsletter', label: t('nav.newsletter') },
    { to: '/license', label: t('chromeUi.license') },
    { to: '/privacy', label: t('chromeUi.privacy') },
  ];

  return (
    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[1000]">
      {/* Desktop — slim full-width bar */}
      <div className="pointer-events-auto hidden w-full items-center justify-between gap-4 border-t border-white/10 bg-black/85 px-4 py-1.5 text-[11px] text-gray-400 backdrop-blur md:flex">
        <div className="flex items-center gap-4">
          {links.map((l) => (
            <Link key={l.to} to={l.to} className="font-medium transition-colors hover:text-[#ccff00]">
              {l.label}
            </Link>
          ))}
        </div>
        <div className="flex items-center gap-3">
          <span className="flex items-center gap-1.5 text-gray-500">
            {t('chromeUi.notSponsoredBy')}
            <img src="/images/opensats.ico" alt="OpenSats" className="h-3 w-3" />
            <span className="font-medium text-gray-400">OpenSats</span>
          </span>
        </div>
      </div>

      {/* Mobile — a slim always-visible strip, not a floating chip over the nav */}
      <div className="pointer-events-auto flex w-full items-center justify-center gap-3 border-t border-white/10 bg-black/80 px-3 py-1 text-[10px] text-gray-400 backdrop-blur md:hidden">
        {links.map((l) => (
          <Link key={l.to} to={l.to} className="font-semibold transition-colors hover:text-[#ccff00]">
            {l.label}
          </Link>
        ))}
      </div>
    </div>
  );
}