import Link from "next/link";

import { Logo } from "@/components/marketing/logo";
import { MarqueeStrip } from "@/components/marketing/marquee-strip";

const footerLinks = [
  { href: "/landing#features", label: "Capabilities" },
  { href: "/landing#manifest", label: "Manifest" },
  { href: "/landing/pricing", label: "Pricing" },
  { href: "/sign-in", label: "Sign in" },
] as const;

export function SiteFooter() {
  return (
    <footer className="bg-background">
      <MarqueeStrip variant="light" />
      <div className="mx-auto flex max-w-6xl flex-col gap-10 px-4 py-14 sm:px-6 md:flex-row md:items-start md:justify-between">
        <div className="space-y-3">
          <Logo size="sm" showTagline variant="light" />
          <p className="max-w-xs font-marketing text-sm text-muted-foreground">
            Subagents. Frontmatter. One workspace.
          </p>
        </div>

        <nav className="flex flex-wrap gap-x-10 gap-y-3" aria-label="Footer">
          {footerLinks.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="font-mono-brand text-[11px] uppercase tracking-[0.16em] text-muted-foreground transition-colors hover:text-foreground"
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </div>

      <div className="marketing-hard-rule" aria-hidden />
      <div className="mx-auto flex max-w-6xl flex-col gap-2 px-4 py-5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
        <p className="font-mono-brand text-[11px] text-muted-foreground">© {new Date().getFullYear()} Submatter</p>
        <p className="font-mono-brand text-[11px] text-muted-foreground">v2 · sbmtr.io</p>
      </div>
    </footer>
  );
}