import Link from "next/link";
import { BadgeCheck, Mail, ShieldCheck } from "lucide-react";
import { Brand } from "@/components/brand";
import { CryptoIcon } from "@/components/crypto-icon";

const sportsLinks = [
  ["Paris sportifs", "/sports"],
  ["Football", "/sports/football"],
  ["Tennis", "/sports/tennis"],
  ["Basketball", "/sports/basketball"]
];

const aboutLinks = [
  ["À propos", "/about"],
  ["Promotions", "/promotions"],
  ["VIP", "/vip"],
  ["Centre d'aide", "/help"],
  ["Profil", "/profile"]
];

const legalLinks = [
  ["Conditions générales", "/terms"],
  ["Jeu responsable", "/responsible-gaming"],
  ["Politique de confidentialité", "/privacy"],
  ["Politique KYC", "/aml-kyc"]
];

export function SiteFooter() {
  return (
    <footer className="mt-8 border-t border-white/10 pt-6">
      <section className="surface rounded-lg p-4">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <Brand />
            <p className="mt-2 max-w-2xl text-xs leading-5 text-slate-400">
              Plateforme de paris sportifs 18+ avec compte sécurisé, limites responsables et assistance dédiée.
            </p>
          </div>
          <Link href="mailto:support@zirabet.com" className="inline-flex items-center gap-2 text-sm font-bold text-felt">
            <Mail className="h-4 w-4" />
            support@zirabet.com
          </Link>
        </div>

        <div className="mt-6 grid gap-5 sm:grid-cols-3">
          <FooterColumn title="Sports" links={sportsLinks} />
          <FooterColumn title="À propos de nous" links={aboutLinks} />
          <FooterColumn title="Légales" links={legalLinks} />
        </div>

        <div className="mt-6 flex flex-wrap gap-2">
          {["BTC", "ETH", "USDC", "USDT"].map((item) => (
            <span key={item} title={item} aria-label={item} className="grid h-10 w-10 place-items-center rounded-lg border border-white/10 bg-white/[0.04]">
              <CryptoIcon asset={item} className="h-6 w-6" />
            </span>
          ))}
          <span className="inline-flex items-center gap-2 rounded-lg border border-felt/25 bg-felt/10 px-3 py-2 text-xs font-black text-felt">
            <ShieldCheck className="h-3.5 w-3.5" />
            Jeu sécurisé
          </span>
          <span className="inline-flex items-center gap-2 rounded-lg border border-gold/25 bg-gold/10 px-3 py-2 text-xs font-black text-gold">
            <BadgeCheck className="h-3.5 w-3.5" />
            18+
          </span>
        </div>
      </section>
    </footer>
  );
}

function FooterColumn({ title, links }: { title: string; links: string[][] }) {
  return (
    <div>
      <h2 className="text-sm font-black text-white">{title}</h2>
      <div className="mt-3 space-y-2">
        {links.map(([label, href]) => (
          <Link key={href} href={href} className="block text-sm font-semibold text-slate-400 transition hover:text-felt">
            {label}
          </Link>
        ))}
      </div>
    </div>
  );
}