import Link from "next/link";
import type { CategoryWithCount } from "@/lib/queries";
import { PetIcon } from "./pet-icon";
import { Reveal } from "./reveal";

const PASTELS = [
  { bg: "bg-[#FFE9D6]", icon: "text-brand-600", ring: "group-hover:ring-brand-300" },
  { bg: "bg-[#FDECEC]", icon: "text-rose-500", ring: "group-hover:ring-rose-300" },
  { bg: "bg-[#E4F0F8]", icon: "text-sky-500", ring: "group-hover:ring-sky-300" },
  { bg: "bg-[#E7F3E8]", icon: "text-emerald-500", ring: "group-hover:ring-emerald-300" },
  { bg: "bg-[#F3EBF9]", icon: "text-violet-500", ring: "group-hover:ring-violet-300" },
  { bg: "bg-[#FFF6DA]", icon: "text-amber-500", ring: "group-hover:ring-amber-300" },
];

export function CategoryRow({ categories }: { categories: CategoryWithCount[] }) {
  return (
    <section className="relative bg-white">
      {/* Dalga */}
      <svg
        viewBox="0 0 1440 80"
        preserveAspectRatio="none"
        className="absolute -top-1 left-0 h-10 w-full text-cream sm:h-14"
        aria-hidden
      >
        <path
          d="M0,0 L1440,0 L1440,20 C1200,70 960,10 720,40 C480,70 240,20 0,50 Z"
          fill="currentColor"
        />
      </svg>

      <div className="mx-auto max-w-7xl px-4 pb-16 pt-20 sm:px-6">
        <Reveal className="mx-auto max-w-xl text-center">
          <p className="text-xs font-extrabold uppercase tracking-[0.2em] text-brand-600">
            Kategoriler
          </p>
          <h2 className="mt-2 font-display text-3xl font-extrabold text-ink sm:text-4xl">
            Hangi Pati İçin Alışveriş Yapıyorsun?
          </h2>
          <p className="mt-3 text-sm font-semibold leading-relaxed text-mocha sm:text-base">
            Her dostumuzun ihtiyacı farklı — patini seç, ona özel hazırlanmış dünyayı keşfet.
          </p>
        </Reveal>

        <div className="mt-10 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
          {categories.map((cat, i) => {
            const pastel = PASTELS[i % PASTELS.length];
            return (
              <Reveal key={cat.slug} delay={i * 70}>
                <Link
                  href={`/urunler?kategori=${cat.slug}`}
                  className="group flex flex-col items-center rounded-4xl border border-sand-dark/60 bg-cream/60 px-4 py-7 text-center transition-all duration-300 hover:-translate-y-2 hover:bg-white hover:shadow-xl hover:shadow-brand-500/10"
                >
                  <span
                    className={`grid size-20 place-items-center rounded-full ${pastel.bg} ring-4 ring-transparent transition-all duration-300 group-hover:scale-110 ${pastel.ring}`}
                  >
                    <PetIcon
                      icon={cat.icon}
                      className={`size-9 ${pastel.icon} transition-transform duration-300 group-hover:-rotate-6`}
                    />
                  </span>
                  <span className="mt-4 font-display text-base font-extrabold text-ink">
                    {cat.name}
                  </span>
                  <span className="mt-1 rounded-full bg-sand px-2.5 py-0.5 text-[11px] font-extrabold text-cocoa">
                    {cat.count} ürün
                  </span>
                </Link>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}