import Link from "next/link";
import { TOOLS, TOOL_GROUPS, type ToolEntry } from "@/lib/tool-catalog";

export function ToolsSection() {
  return (
    <section className="py-16 lg:py-24" id="tools">
      <div className="max-w-container mx-auto px-4 lg:px-6">
        <div className="mb-10 text-center lg:mb-14">
          <div className="ornament-line text-brand-gold-soft mb-3 text-xs tracking-[0.22em] uppercase">
            Bộ công cụ
          </div>
          <h2 className="font-display text-3xl font-semibold lg:text-5xl">
            Tất cả <span className="italic">{TOOLS.length} công cụ</span> mệnh học
          </h2>
          <p className="text-ink-secondary mx-auto mt-3 max-w-[58ch]">
            Tử vi, vận mệnh, phong thủy, hợp tuổi, đặt tên — đầy đủ trong một nơi.
          </p>
        </div>

        {/* Group quick-jump (links to /tu-vi, /phong-thuy, etc.) */}
        <nav
          aria-label="Nhóm công cụ"
          className="no-scrollbar mb-8 flex gap-2 overflow-x-auto pb-2 lg:justify-center"
        >
          <Link
            href="#tools"
            className="bg-brand-gold text-bg-base flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium"
          >
            Tất cả
          </Link>
          {TOOL_GROUPS.map((g) => (
            <Link
              key={g.slug}
              href={`/${g.slug}`}
              className="border-stroke-default text-ink-secondary hover:border-brand-gold/50 hover:text-brand-gold flex-shrink-0 rounded-full border px-4 py-2 text-sm transition"
            >
              {g.label}
            </Link>
          ))}
        </nav>

        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5 lg:gap-4">
          {TOOLS.map((tool) => (
            <ToolCard key={tool.slug} tool={tool} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ToolCard({ tool }: { tool: ToolEntry }) {
  const { slug, title, desc, Icon, badge, iconAccent, available } = tool;
  const inner = (
    <>
      <div
        className={`text-brand-gold mb-3 flex h-10 w-10 items-center justify-center rounded-md ${
          iconAccent === "red"
            ? "bg-brand-red/10 group-hover:bg-brand-red/20"
            : "bg-brand-gold/10 group-hover:bg-brand-gold/20"
        }`}
      >
        <Icon className="h-5 w-5" aria-hidden="true" />
      </div>
      <h3 className="font-display text-ink-primary text-base font-semibold">{title}</h3>
      <p className="text-ink-muted mt-1 line-clamp-2 text-xs">{desc}</p>
      {badge ? (
        <span
          className={`mt-2 inline-block text-[10px] tracking-wider uppercase ${
            badge.tone === "popular" ? "text-brand-gold-soft" : "text-brand-red-light"
          }`}
        >
          {badge.label}
        </span>
      ) : !available ? (
        <span className="text-ink-muted mt-2 inline-block text-[10px] tracking-wider uppercase">
          Sắp ra mắt
        </span>
      ) : null}
    </>
  );

  if (available) {
    return (
      <Link
        href={`/${slug}`}
        className="group border-stroke-subtle bg-bg-elevated/40 hover:border-brand-gold/40 hover:bg-bg-elevated/80 rounded-xl border p-4 transition hover:-translate-y-0.5 lg:p-5"
      >
        {inner}
      </Link>
    );
  }
  return (
    <div
      aria-disabled="true"
      className="group border-stroke-subtle/50 bg-bg-elevated/20 cursor-not-allowed rounded-xl border p-4 opacity-60 lg:p-5"
    >
      {inner}
    </div>
  );
}