"use client";

type Affiliate = {
  name: string;
  good: string[];
  bad: string[];
  link: string;
  icon: string;
  location: string;
  provides: string[];
};

const affiliates: Affiliate[] = [
  {
    name: "SparkedHost",
    good: ["Decent Support", "Good Bot Hosting", "Generous Webhosting"],
    bad: ["Staff can be hit or miss"],
    link: "https://billing.sparkedhost.com/aff.php?aff=1843",
    icon: "https://sparkedhost.com/_next/static/media/logo-text.fce7e4c5.svg",
    location: "Global",
    provides: ["A ton of Game Hosting", "Web Hosting", "VPS", "Bot Hosting", "Domains"],
  },
  {
    name: "Datalix",
    good: ["Uptime", "Hardware", "Prices", "Support"],
    bad: ["Nothing"],
    link: "https://datalix.de/a/space",
    icon: "https://cdn.datalix.de/images/header.png",
    location: "Germany",
    provides: ["KVM VPS", "Web Hosting", "Dedicated Servers", "Game Servers", "S3", "Nextcloud", "Reselling"],
  },
];

export function Affiliates() {
  return (
    <section className="w-full max-w-5xl mx-auto space-y-6 px-4 sm:space-y-8">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 sm:text-3xl">
          Affiliates
        </h2>
        <p className="mx-auto max-w-2xl text-sm text-gray-400 sm:text-base">
          Looking for hosting? I recommend checking out Datalix!
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 sm:gap-5">
        {affiliates.map((affiliate) => (
          <a
            key={affiliate.name}
            href={affiliate.link}
            target="_blank"
            rel="noopener noreferrer"
            className="mx-auto w-full max-w-[20rem] rounded-xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-all duration-300 hover:border-purple-500/40 hover:bg-white/10 sm:max-w-none sm:p-4"
          >
            <div className="flex flex-col items-center text-center gap-2 mb-3">
              <img
                src={affiliate.icon}
                alt={affiliate.name}
                className="h-7 max-w-[130px] w-auto object-contain rounded"
              />
              <div>
                <h3 className="text-lg font-semibold text-white">
                  {affiliate.name}
                </h3>
                <p className="text-[10px] uppercase tracking-widest text-gray-500 font-medium leading-none mt-1">
                  {affiliate.location}
                </p>
              </div>
            </div>

            <div className="space-y-3">
              <div>
                <p className="text-xs font-semibold text-blue-300 mb-1.5">
                  Provides
                </p>
                <div className="flex flex-wrap gap-2">
                  {affiliate.provides.map((item) => (
                    <span
                      key={item}
                      className="inline-flex items-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-500/10 px-2.5 py-1 text-xs text-blue-200"
                    >
                      {item}
                    </span>
                  ))}
                </div>
              </div>
              <div>
                <p className="text-xs font-semibold text-emerald-300 mb-1.5">
                  Good
                </p>
                <div className="flex flex-wrap gap-2">
                  {affiliate.good.map((item) => (
                    <span
                      key={item}
                      className="inline-flex items-center gap-1.5 rounded-full border border-emerald-400/30 bg-emerald-500/10 px-2.5 py-1 text-xs text-emerald-200"
                    >
                      <span className="font-bold">+</span>
                      {item}
                    </span>
                  ))}
                </div>
              </div>
              <div>
                <p className="text-xs font-semibold text-rose-300 mb-1.5">
                  Bad
                </p>
                <div className="flex flex-wrap gap-2">
                  {affiliate.bad.map((item) => (
                    <span
                      key={item}
                      className="inline-flex items-center gap-1.5 rounded-full border border-rose-400/30 bg-rose-500/10 px-2.5 py-1 text-xs text-rose-200"
                    >
                      <span className="font-bold">-</span>
                      {item}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}
