import { Send, Headphones, Info } from "lucide-react";
import { supportLinks } from "@/data/support";
import { useI18n } from "@/i18n";

const icons = { channel: Send, admin: Headphones } as const;

export function SupportSection() {
  const { t } = useI18n();

  return (
    <section aria-labelledby="support-heading" className="mt-10">
      <h2 id="support-heading" className="text-lg font-bold">
        {t("support.title")}
      </h2>
      <p className="mt-1 text-xs text-muted-foreground">{t("support.hint")}</p>
      <div className="mt-3 grid grid-cols-1 gap-2.5 sm:grid-cols-2">
        {supportLinks.map((link) => {
          const Icon = icons[link.id];
          const label = t(link.id === "channel" ? "support.channel" : "support.admin");
          const sub = t(link.id === "channel" ? "support.channel.sub" : "support.admin.sub");
          const hasUrl = link.url.trim().length > 0;

          const inner = (
            <>
              <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-primary/15">
                <Icon className="size-4 text-primary" aria-hidden />
              </span>
              <span className="min-w-0 text-left">
                <span className="block truncate font-display text-sm font-semibold">{label}</span>
                <span className="block truncate text-xs font-medium text-primary">{link.name}</span>
                <span className="block truncate text-xs text-muted-foreground">
                  {hasUrl ? sub : t("support.pending")}
                </span>
              </span>

            </>
          );

          return hasUrl ? (
            <a
              key={link.id}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              className="panel flex items-center gap-3 rounded-2xl p-3 transition-all hover:border-primary/40 hover:shadow-[0_0_24px_-8px_hsl(var(--primary)/0.55)] active:scale-[0.99] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
            >
              {inner}
            </a>
          ) : (
            <button
              key={link.id}
              type="button"
              disabled
              aria-disabled="true"
              title={t("support.pending")}
              className="panel flex cursor-not-allowed items-center gap-3 rounded-2xl p-3 opacity-60"
            >
              {inner}
            </button>
          );
        })}
      </div>
      {supportLinks.some((l) => !l.url.trim()) && (
        <p className="mt-2 flex items-start gap-2 text-xs text-muted-foreground">
          <Info className="mt-0.5 size-3.5 shrink-0 text-primary" aria-hidden />
          <span>{t("support.pending")}</span>
        </p>
      )}
    </section>
  );
}