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

const HOST_LABEL = HOST_URL.replace(/^https?:\/\//, '');

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.6fr_1fr_1fr_1fr]">
          <div>
            <Link href="/" className="inline-flex" aria-label="Company Atlas home">
              <Wordmark markSize={22} textClassName="text-[16px]" />
            </Link>
            <p className="mt-3 max-w-sm text-sm leading-relaxed text-ink-2">
              A continuously updated corporate observation network. Every event links to the public page where it was detected; inferred facts carry a confidence label; history is never overwritten.
            </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}>
                    {n.href.startsWith('mailto:') ? (
                      <a href={n.href} className="inline-block py-0.5 text-ink-2 hover:text-ink">
                        {n.label}
                      </a>
                    ) : (
                      <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-3 border-t border-rule pt-5 text-[13px] leading-relaxed text-ink-2 md:flex-row md:items-start md:justify-between md:gap-8">
          {/* explicit spaces around the separators give the line break opportunities on narrow screens */}
          <p className="md:max-w-[60%]" data-credits>
            <span className="whitespace-nowrap">
              Built by <span className="font-medium text-ink">{AUTHOR_NAME}</span>
            </span>{' '}
            <span className="text-ink-3">·</span>{' '}
            <a href={`mailto:${CONTACT_EMAIL}`} className="underline decoration-rule-strong underline-offset-[3px] hover:text-ink hover:decoration-ink">
              {CONTACT_EMAIL}
            </a>{' '}
            <span className="text-ink-3">·</span>{' '}
            <span className="whitespace-nowrap">
              Hosted on{' '}
              <a href={HOST_URL} target="_blank" rel="noopener noreferrer" className="font-medium text-ink hover:underline">
                {HOST_NAME}
              </a>
            </span>{' '}
            <span className="text-ink-3">—</span>{' '}
            <a href={HOST_URL} target="_blank" rel="noopener noreferrer" className="mono text-[12.5px] hover:text-ink">
              {HOST_LABEL}
            </a>
          </p>
          <p className="max-w-xl text-ink-3 md:text-right">Data provenance: observations of publicly accessible corporate web pages, collected by CompanyAtlasBot in accordance with robots.txt. Interpretations are labelled, never asserted as fact.</p>
        </div>
      </div>
    </footer>
  );
}