import Link from 'next/link';
import { LogoMark } from '@/components/brand/logo';
import { AUTHOR_NAME, CONTACT_EMAIL, footerGroups, HOST_NAME, HOST_URL, SITE_URL, TAGLINE } from '@/lib/site';

export function SiteFooter() {
  return (
    <footer className="mt-16 border-t border-rule">
      <div className="container-x mx-auto max-w-[1600px] py-10">
        <div className="grid gap-8 md:grid-cols-[1.4fr_1fr_1fr_1fr_1fr]">
          <div>
            <p className="flex items-center gap-2 text-ink">
              <LogoMark size={22} /> <span className="tracking-tight"><span className="font-bold">AI</span> <span className="font-medium text-ink-2">Atlas</span></span>
            </p>
            <p className="mt-3 max-w-sm text-sm leading-relaxed text-ink-2">
              {TAGLINE}. Every number links back to its source, tier and observation time; history is never discarded; conflicts are shown, never averaged.
            </p>
            <p className="mono mt-3 text-xs text-ink-3">{SITE_URL.replace(/^https?:\/\//, '')}/api/v1</p>
          </div>
          {footerGroups.map((g) => (
            <div key={g.label}>
              <p className="eyebrow mb-2">{g.label}</p>
              <ul className="space-y-1 text-sm">
                {g.items.map((n) => (
                  <li key={n.href + n.label}>
                    <Link href={n.href} className="inline-block py-0.5 text-ink-2 hover:text-ink">
                      {n.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-10 flex flex-col gap-2 border-t border-rule pt-5 text-xs text-ink-3 md:flex-row md:items-center md:justify-between">
          <p>
            Built by <span className="text-ink-2">{AUTHOR_NAME}</span> ·{' '}
            <a href={`mailto:${CONTACT_EMAIL}`} className="text-ink-2 hover:text-ink">
              {CONTACT_EMAIL}
            </a>{' '}
            · Hosted on{' '}
            <a href={HOST_URL} className="text-ink-2 hover:text-ink" rel="noopener noreferrer">
              {HOST_NAME}
            </a>{' '}
            (<a href={HOST_URL} className="hover:text-ink" rel="noopener noreferrer">{HOST_URL.replace(/^https?:\/\//, '')}</a>)
          </p>
          <p>© 2026 {AUTHOR_NAME} · AI Atlas. Data is aggregated from public sources and attributed on every page.</p>
        </div>
      </div>
    </footer>
  );
}