import Link from "next/link";

import { CustodyMark } from "@/components/custody-mark";

import { OwlBust } from "@/components/owl";

export function SiteFooter() {

  const year = new Date().getFullYear();

  return (

    <footer className="mt-24 border-t border-line">

      <div className="mx-auto w-full max-w-register px-4 py-10 sm:px-6">

        <div className="flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between">

          <div className="max-w-sm">

            <div className="flex items-center gap-2.5">

              <CustodyMark size={26} showTick={false} />

              <span className="font-display text-[15px] font-800 tracking-tighter">

                Docket

              </span>

            </div>

            <p className="prose-lead mt-4 italic text-ash">

              Record the action, not the argument.

            </p>

            <div className="mt-6 flex items-center gap-3">

              <OwlBust size={40} className="shrink-0 opacity-90" title="Archie, the Docket archivist" />

              <span className="label text-ash-2">Docket - the public record</span>

            </div>

          </div>

          <nav aria-label="Footer" className="grid grid-cols-2 gap-x-10 gap-y-2 sm:grid-cols-3">

            <FooterLink href="/register">Register</FooterLink>

            <FooterLink href="/calendar">Calendar</FooterLink>

            <FooterLink href="/schedule">Schedule</FooterLink>

            <FooterLink href="/votes">Votes</FooterLink>

            <FooterLink href="/members">Members</FooterLink>

            <FooterLink href="/bills">Bills</FooterLink>

            <FooterLink href="/categories">Topics</FooterLink>

            <FooterLink href="/executive">Executive</FooterLink>

            <FooterLink href="/spending">Spending</FooterLink>

            <FooterLink href="/states">States</FooterLink>

            <FooterLink href="/search">Search</FooterLink>

            <FooterLink href="/how-we-pick">How we pick</FooterLink>

            <FooterLink href="/who-pays">Who pays</FooterLink>

          </nav>

        </div>

        <div className="mt-10 flex flex-col gap-2 border-t border-line pt-6 sm:flex-row sm:items-center sm:justify-between">

          <p className="label">

            Read API live · sourced from official records · {year}

          </p>

          <p className="label text-ash-2">

            Every fact below links to an official government record.

          </p>

        </div>

      </div>

    </footer>

  );

}

function FooterLink({

  href,

  children,

}: {

  href: string;

  children: React.ReactNode;

}) {

  return (

    <Link

      href={href}

      className="label w-fit text-ash transition-colors hover:text-paper"

    >

      {children}

    </Link>

  );

}