/*
  site-footer.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import Link from "next/link";
import { Github, Mail } from "lucide-react";

const footerNav = [
  { href: "/research", label: "Research" },
  { href: "/teaching", label: "Teaching" },
  { href: "/apps", label: "Apps" },
  { href: "/blog", label: "Blog" },
  { href: "/cv", label: "CV" },
];

export function SiteFooter() {
  return (
    <footer className="mt-16 border-t border-border/80">
      <div className="mx-auto max-w-5xl 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">
            <p className="font-display text-lg font-semibold tracking-tight">
              Simon-Pierre Boucher
            </p>
            <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">
              Financial econometrics researcher &amp; macOS/AI developer.
              Professor, Département des sciences administratives, UQO.
            </p>
            <div className="mt-4 flex items-center gap-2">
              <a
                href="mailto:contact@spboucher.ai"
                aria-label="Email contact@spboucher.ai"
                className="inline-flex h-8 w-8 items-center justify-center border border-foreground/15 bg-card text-muted-foreground transition-all hover:-translate-y-px hover:border-foreground/50 hover:text-foreground"
              >
                <Mail className="h-3.5 w-3.5" aria-hidden="true" />
              </a>
              <a
                href="https://git.spboucher.ai"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Git profile"
                className="inline-flex h-8 w-8 items-center justify-center border border-foreground/15 bg-card text-muted-foreground transition-all hover:-translate-y-px hover:border-foreground/50 hover:text-foreground"
              >
                <Github className="h-3.5 w-3.5" aria-hidden="true" />
              </a>
            </div>
          </div>

          <nav aria-label="Footer" className="grid gap-2">
            <p className="font-mono text-[0.66rem] font-medium uppercase tracking-[0.2em] text-muted-foreground/70">
              Index
            </p>
            {footerNav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="w-fit font-mono text-xs uppercase tracking-[0.12em] text-muted-foreground transition-colors hover:text-primary"
              >
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="grid gap-2">
            <p className="font-mono text-[0.66rem] font-medium uppercase tracking-[0.2em] text-muted-foreground/70">
              Contact
            </p>
            <a
              href="mailto:simon-pierre.boucher@uqo.ca"
              className="w-fit font-mono text-xs text-muted-foreground transition-colors hover:text-primary"
            >
              simon-pierre.boucher@uqo.ca
            </a>
            <a
              href="mailto:contact@spboucher.ai"
              className="w-fit font-mono text-xs text-muted-foreground transition-colors hover:text-primary"
            >
              contact@spboucher.ai
            </a>
            <p className="font-mono text-xs text-muted-foreground/80">
              UQO, Gatineau — Pavillon Alexandre-Taché
            </p>
          </div>
        </div>

        <div className="mt-10 flex flex-col gap-2 border-t border-border/60 pt-5 font-mono text-[0.66rem] uppercase tracking-[0.14em] text-muted-foreground/70 sm:flex-row sm:items-center sm:justify-between">
          <p>© {new Date().getFullYear()} Simon-Pierre Boucher · www.spboucher.ai</p>
          <p>Set in Fraunces, Inter &amp; IBM Plex Mono</p>
        </div>
      </div>
    </footer>
  );
}