import Link from "next/link";
import type { Locale } from "@/i18n/config";
import { localizedHref } from "@/lib/utils";
import { Container } from "@/components/ui/Container";
import { MonoTick } from "@/components/ui/MonoTick";

type FooterColumn = { heading: string; links: { label: string; href: string }[] };

const COLUMNS: FooterColumn[] = [
  { heading: "Beyond 2", links: [
    { label: "Overview", href: "/v2" },
    { label: "Optics", href: "#optics" },
    { label: "Eyetracking", href: "#eyetracking" },
    { label: "Specs", href: "#specs" },
  ]},
  { heading: "Shop", links: [
    { label: "Order now", href: "/shop" },
    { label: "Accessories", href: "/shop" },
    { label: "Refurbished", href: "/shop" },
  ]},
  { heading: "Company", links: [
    { label: "About", href: "/about" },
    { label: "Press", href: "/news" },
    { label: "Careers", href: "/about" },
  ]},
  { heading: "Support", links: [
    { label: "Help center", href: "/support" },
    { label: "Warranty", href: "/support" },
    { label: "Compatibility", href: "/support" },
  ]},
];

const SOCIAL = ["Discord", "Instagram", "YouTube", "X"];

/**
 * Footer — dense, left-aligned, multi-column with mono labels (design system).
 * Near-black plate to close the dark stage; hairline rules, newsletter row, and
 * a mono legal/social line.
 */
export function SiteFooter({ locale }: { locale: Locale }) {
  return (
    <footer className="border-t border-white/10 bg-[#0a0a0b] py-20 text-ink md:py-24">
      <Container>
        <div className="grid gap-12 md:grid-cols-12">
          {/* brand + newsletter */}
          <div className="md:col-span-4">
            <span className="font-display text-xl font-medium tracking-tight">bigscreen</span>
            <p className="mt-4 max-w-xs text-sm text-ink/55">
              The world&apos;s smallest VR headset. Made in California for cinema,
              simulation, and the impossible games.
            </p>
            <form className="mt-8 flex max-w-xs items-center gap-3 border-b border-white/15 pb-2">
              <input
                type="email"
                placeholder="Email for updates"
                className="w-full bg-transparent text-sm text-ink placeholder:text-ink/40 focus:outline-none"
              />
              <button type="submit" className="font-mono text-caption text-brand">→</button>
            </form>
          </div>

          {/* link columns */}
          <div className="grid grid-cols-2 gap-8 sm:grid-cols-4 md:col-span-8">
            {COLUMNS.map((col) => (
              <nav key={col.heading}>
                <MonoTick className="text-ink">{col.heading}</MonoTick>
                <ul className="mt-5 space-y-3">
                  {col.links.map((l) => (
                    <li key={l.label}>
                      <Link
                        href={localizedHref(locale, l.href)}
                        className="text-sm text-ink/70 transition-colors duration-fast hover:text-ink"
                      >
                        {l.label}
                      </Link>
                    </li>
                  ))}
                </ul>
              </nav>
            ))}
          </div>
        </div>

        <div className="mt-16 flex flex-col gap-4 border-t border-white/10 pt-6 md:flex-row md:items-center md:justify-between">
          <MonoTick className="text-ink">© 2026 Bigscreen, Inc.</MonoTick>
          <MonoTick className="text-ink">Beyond 2 · v1.0 · Q3 2026</MonoTick>
          <div className="flex gap-5">
            {SOCIAL.map((s) => (
              <a key={s} href="#" className="text-sm text-ink/55 transition-colors duration-fast hover:text-ink">
                {s}
              </a>
            ))}
          </div>
        </div>
      </Container>
    </footer>
  );
}