import { Link } from "@tanstack/react-router";
import logo from "@/assets/lumenhost-logo.png.asset.json";

const DISCORD_URL = "https://discord.gg/GkQtbfTtcF";

const cols = [
  {
    title: "Hosting",
    links: [
      { label: "Minecraft Hosting", to: "/minecraft" },
      { label: "VPS Hosting", to: "/vps-hosting" },
      { label: "Bot Hosting", to: "/bot-hosting" },
      { label: "Game Hosting", to: "/game-hosting" },
    ],
  },
  {
    title: "Quick Links",
    links: [
      { label: "Discord Server", to: DISCORD_URL, external: true },
      { label: "Client Area", to: "https://billing.zyro.cloud", external: true },
      { label: "Game Hosting", to: "/game-hosting" },
      { label: "Contact Us", to: "/contact" },
      { label: "FAQs", to: "/faqs" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About Us", to: "/about" },
      { label: "Infrastructure", to: "/infrastructure" },
      { label: "Commitment", to: "/commitment" },
      { label: "Partnership", to: "/partnership" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Terms of Service", to: "/terms" },
      { label: "Privacy Policy", to: "/privacy" },
      { label: "Refund Policy", to: "/refund" },
      { label: "Acceptable Use", to: "/aup" },
      { label: "SLA", to: "/sla" },
    ],
  },
];

export function Footer() {
  return (
    <footer className="mt-24 border-t border-white/5 bg-black/30">
      <div className="mx-auto max-w-7xl px-4 py-14">
        <div className="grid grid-cols-1 gap-10 md:grid-cols-5">
          <div>
            <div className="flex items-center gap-2.5">
              <img src={logo.url} alt="LumenHost" className="h-9 w-9 rounded-full bg-white object-contain p-0.5 ring-1 ring-white/10" />
              <span className="text-base font-semibold tracking-tight text-white">
                Lumen<span className="text-primary">Host</span>
              </span>
            </div>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-muted-foreground">
              Enterprise-grade Minecraft, VPS and Bot hosting with 99.9% uptime and 24/7 support.
            </p>
            <a
              href={DISCORD_URL}
              target="_blank"
              rel="noopener noreferrer"
              className="mt-5 inline-flex items-center gap-2 rounded-xl border border-white/10 bg-[#5865F2]/15 px-4 py-2 text-sm font-semibold text-white hover:bg-[#5865F2]/25"
            >
              Join Discord
            </a>
          </div>
          {cols.map((col) => (
            <div key={col.title}>
              <h4 className="mb-4 text-xs font-semibold uppercase tracking-[0.2em] text-foreground/80">{col.title}</h4>
              <ul className="space-y-2.5">
                {col.links.map((l) => {
                  const isExternal = "external" in l && l.external;
                  return (
                    <li key={l.to}>
                      {isExternal ? (
                        <a
                          href={l.to}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-sm text-muted-foreground transition hover:text-primary"
                        >
                          {l.label}
                        </a>
                      ) : (
                        <Link to={l.to as string} className="text-sm text-muted-foreground transition hover:text-primary">
                          {l.label}
                        </Link>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-12 flex flex-col items-center justify-between gap-3 border-t border-white/5 pt-6 md:flex-row">
          <p className="text-xs text-muted-foreground">© {new Date().getFullYear()} LumenHost. All rights reserved.</p>
          <p className="text-xs text-muted-foreground">Enterprise-grade hosting for everyone.</p>
        </div>
      </div>
    </footer>
  );
}