import Link from 'next/link';
import { AUTHOR, CONTACT_EMAIL } from '@/lib/site';

export function Footer() {
  return (
    <footer className="mt-10 border-t border-line">
      <div className="mx-auto flex max-w-[1440px] flex-col gap-3 px-3 py-6 text-[11.5px] text-ink-2 sm:flex-row sm:items-center sm:justify-between sm:px-5">
        <p className="leading-relaxed">
          Independent observatory · {AUTHOR} ·{' '}
          <a href={`mailto:${CONTACT_EMAIL}`} className="text-ink hover:text-accent">
            {CONTACT_EMAIL}
          </a>{' '}
          · Hosted on MacLustr (
          <a href="https://www.maclustr.io" rel="noopener" className="text-ink hover:text-accent">
            www.maclustr.io
          </a>
          )
        </p>
        <nav aria-label="Footer" className="flex flex-wrap gap-x-4 gap-y-1">
          <Link href="/methodology" className="hover:text-ink">
            Methodology
          </Link>
          <Link href="/api" className="hover:text-ink">
            API
          </Link>
          <Link href="/probes" className="hover:text-ink">
            Probes
          </Link>
          <Link href="/history" className="hover:text-ink">
            History
          </Link>
          <Link href="/admin" className="hover:text-ink">
            Admin
          </Link>
        </nav>
      </div>
    </footer>
  );
}