import { Cpu, Server } from "lucide-react";
import singapore from "@/assets/locations/singapore.jpg";
import india from "@/assets/locations/india.jpg";
import germany from "@/assets/locations/germany.jpg";
import usa from "@/assets/locations/usa.jpg";
import flagSG from "@/assets/flags/singapore.png";
import flagIN from "@/assets/flags/india.png";
import flagDE from "@/assets/flags/germany.png";
import flagUS from "@/assets/flags/usa.png";

interface Location {
  name: string;
  flag: string;
  bg: string;
  cpus: string[];
  accent: string;
  popular?: boolean;
}

const locations: Location[] = [
  { name: "Singapore", flag: flagSG, bg: singapore, accent: "from-red-500/40", cpus: ["AMD EPYC", "Intel Haswell"] },
  { name: "India", flag: flagIN, bg: india, accent: "from-orange-500/50", cpus: ["AMD EPYC 7K62", "Intel Platinum 8269CY"], popular: true },
  { name: "Germany", flag: flagDE, bg: germany, accent: "from-yellow-500/40", cpus: ["AMD EPYC", "Intel Gold 6150"] },
  { name: "USA — California", flag: flagUS, bg: usa, accent: "from-blue-500/40", cpus: ["AMD EPYC 7413", "Intel Xeon E5"] },
];

export function LocationBanners() {
  return (
    <section className="mx-auto max-w-7xl px-4 py-10">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {locations.map((loc) => (
          <div
            key={loc.name}
            className="group relative overflow-hidden rounded-2xl border border-white/10 bg-card/40 transition hover:-translate-y-0.5 hover:border-primary/30"
          >
            {loc.popular && (
              <div className="absolute right-3 top-3 z-10 rounded-full bg-success px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-lg">
                Popular
              </div>
            )}
            <img
              src={loc.bg}
              alt=""
              loading="lazy"
              className="absolute inset-0 h-full w-full object-cover opacity-40 transition group-hover:opacity-60 group-hover:scale-105"
            />
            <div className={`absolute inset-0 bg-gradient-to-tr ${loc.accent} via-background/70 to-background/95`} />
            <div className="relative flex min-h-[170px] flex-col justify-between gap-4 p-5">
              <div className="flex items-center gap-3">
                <img src={loc.flag} alt="" className="h-9 w-9 rounded-full ring-2 ring-white/20" />
                <h3 className="text-lg font-bold leading-tight">{loc.name}</h3>
              </div>
              <div className="space-y-1.5 text-sm">
                {loc.cpus.map((c) => (
                  <div key={c} className="flex items-center gap-2 text-foreground/80">
                    {c.startsWith("AMD") ? (
                      <Cpu className="h-4 w-4 text-primary" />
                    ) : (
                      <Server className="h-4 w-4 text-primary" />
                    )}
                    <span className="truncate">{c}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}