import Link from "next/link";
import { contact } from "@/lib/portfolio";

const sectionLinks = [
  { label: "Work", href: "#work" },
  { label: "Capabilities", href: "#capabilities" },
  { label: "Operator", href: "#operator" },
  { label: "Contact", href: "#contact" },
];

const elsewhereLinks = [
  { label: "Git", href: contact.git },
  { label: "LinkedIn", href: contact.linkedIn },
];

export function ClosingCta() {
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-blacksite-line bg-blacksite-bg px-4 py-16 text-blacksite-text sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <div className="grid gap-4 lg:grid-cols-2">
          <a
            href="#work"
            className="group min-h-52 border border-blacksite-line bg-blacksite-surface p-6 transition-colors hover:border-signal-orange/70 focus-visible:outline-signal-orange sm:p-8"
          >
            <p className="section-label mb-12">CTA /.01</p>
            <span className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text transition-colors group-hover:text-signal-orange sm:text-6xl">
              View Selected Work →
            </span>
          </a>

          <a
            href={`mailto:${contact.email}`}
            className="group min-h-52 border border-blacksite-line bg-blacksite-surface p-6 transition-colors hover:border-signal-orange/70 focus-visible:outline-signal-orange sm:p-8"
          >
            <p className="section-label mb-12">CTA /.02</p>
            <span className="font-display text-4xl font-semibold tracking-[-0.04em] text-blacksite-text transition-colors group-hover:text-signal-orange sm:text-6xl">
              Start a Conversation →
            </span>
          </a>
        </div>

        <div className="mt-8 grid gap-8 border border-blacksite-line bg-blacksite-surface2/35 p-6 sm:grid-cols-2 lg:grid-cols-[1fr_1fr_1fr_1.2fr] lg:p-8">
          <nav aria-label="Footer sections">
            <p className="section-label mb-4">Sections</p>
            <ul className="grid gap-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
              {sectionLinks.map((link) => (
                <li key={link.href}>
                  <a href={link.href} className="transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>

          <nav aria-label="Footer field notes">
            <p className="section-label mb-4">Field Notes</p>
            <Link href="/blog/" className="font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
              /blog/
            </Link>
          </nav>

          <nav aria-label="Footer elsewhere">
            <p className="section-label mb-4">Elsewhere</p>
            <ul className="grid gap-3 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">
              {elsewhereLinks.map((link) => (
                <li key={link.href}>
                  <a href={link.href} target="_blank" rel="noreferrer" className="transition-colors hover:text-signal-orange focus-visible:outline-signal-orange">
                    {link.label} ↗
                  </a>
                </li>
              ))}
            </ul>
          </nav>

          <div>
            <p className="section-label mb-4">Build</p>
            <p className="font-mono text-xs uppercase leading-6 tracking-[0.14em] text-blacksite-muted">
              Next.js · Tailwind · deployed from out/
            </p>
            <p className="mt-4 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">© {year}</p>
            <p className="mt-6 font-mono text-xs uppercase tracking-[0.14em] text-blacksite-muted">⌘K opens command index</p>
          </div>
        </div>
      </div>
    </footer>
  );
}