import Link from "next/link";
import { StatusTerminal } from "./StatusTerminal";

const NAV_LINKS = [
  { label: "Home", href: "/" },
  { label: "About", href: "/about" },
  { label: "Projects", href: "/projects" },
  { label: "Contact", href: "/contact" },
];

const SOCIALS = [
  { label: "GitHub", href: "https://github.com/jasonwoltje" },
  { label: "LinkedIn", href: "https://linkedin.com/in/jasonwoltje" },
];

export function Footer() {
  return (
    <footer className="bg-background">
      <div className="mx-auto max-w-7xl px-6 pt-16 pb-8">
        {/* Columns */}
        <div className="grid grid-cols-1 gap-12 md:grid-cols-3 md:gap-8">
          {/* Brand */}
          <div className="flex flex-col gap-4">
            <Link
              href="/"
              className="font-headline text-lg font-bold uppercase tracking-tighter text-primary"
            >
              JASON WOLTJE
            </Link>
            <p className="font-body text-sm leading-relaxed text-on-surface-variant">
              Systems thinker. Builder. IT leader turning into a software
              engineer.
            </p>
          </div>

          {/* Nav */}
          <div className="flex flex-col gap-3">
            <span className="label-md text-on-surface-variant mb-1">Navigate</span>
            {NAV_LINKS.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className="font-label text-[11px] uppercase tracking-widest text-on-surface-variant transition-colors hover:text-primary"
              >
                {link.label}
              </Link>
            ))}
          </div>

          {/* Socials */}
          <div className="flex flex-col gap-3">
            <span className="label-md text-on-surface-variant mb-1">Connect</span>
            {SOCIALS.map((s) => (
              <a
                key={s.href}
                href={s.href}
                target="_blank"
                rel="noopener noreferrer"
                className="font-label text-[11px] uppercase tracking-widest text-on-surface-variant transition-colors hover:text-secondary"
              >
                {s.label}
              </a>
            ))}
          </div>
        </div>

        {/* Divider tonal shift — no 1px border at 100% */}
        <div className="mt-12 h-px bg-gradient-to-r from-transparent via-outline-variant/20 to-transparent" />

        {/* Bottom bar */}
        <div className="mt-6 flex flex-col items-start gap-4 md:flex-row md:items-center md:justify-between">
          <span className="font-label text-[9px] uppercase tracking-[0.3em] text-on-surface-variant">
            © {new Date().getFullYear()} JASON WOLTJE // ALL RIGHTS RESERVED
          </span>
          <StatusTerminal />
          <span className="font-label text-[8px] uppercase tracking-[0.5em] text-outline">
            ENGINEERED FOR EXCELLENCE
          </span>
        </div>
      </div>
    </footer>
  );
}