import { Link } from "@tanstack/react-router";
import { Github, MessageCircle } from "lucide-react";

export function Footer() {
  return (
    <footer className="mt-24 border-t border-border/60 bg-surface/50">
      <div className="mx-auto grid max-w-[1400px] grid-cols-2 gap-8 px-4 py-12 sm:grid-cols-4">
        <div className="col-span-2 sm:col-span-1">
          <div className="flex items-center gap-2">
            <div className="grid h-9 w-9 place-items-center rounded-lg gradient-primary">
              <span className="font-display text-lg font-bold text-primary-foreground">P</span>
            </div>
            <span className="font-display font-bold">PURPLE ZONE</span>
          </div>
          <p className="mt-3 max-w-xs text-sm text-muted-foreground">
            A Counter-Strike 2 community platform — servers, stats, skins and store, run by players for players.
          </p>
        </div>
        <FooterCol title="Platform" links={[["Servers", "/servers"], ["Rankings", "/rankings"], ["Store", "/store"], ["Skins", "/skins"]]} />
        <FooterCol title="Community" links={[["News", "/news"], ["Rules", "/rules"], ["Support", "/support"], ["Live chat", "/chat"]]} />
        <FooterCol title="Account" links={[["Overview", "/account"], ["Balance", "/account/balance"], ["Orders", "/account/orders"], ["Settings", "/account/settings"]]} />
      </div>
      <div className="border-t border-border/60">
        <div className="mx-auto flex max-w-[1400px] flex-col items-center justify-between gap-3 px-4 py-4 text-xs text-muted-foreground sm:flex-row">
          <span>© 2026 Purple Zone. Not affiliated with Valve or Counter-Strike.</span>
          <div className="flex items-center gap-4">
            <a href="#" aria-label="Discord" className="hover:text-foreground"><MessageCircle className="h-4 w-4" /></a>
            <a href="#" aria-label="GitHub" className="hover:text-foreground"><Github className="h-4 w-4" /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, links }: { title: string; links: [string, string][] }) {
  return (
    <div>
      <div className="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">{title}</div>
      <ul className="space-y-2 text-sm">
        {links.map(([l, to]) => (
          <li key={to}><Link to={to} className="text-muted-foreground transition-colors hover:text-foreground">{l}</Link></li>
        ))}
      </ul>
    </div>
  );
}