"use client";

import { useState } from "react";
import Link from "next/link";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import TiltCard from "@/components/motion/TiltCard";
import { products, productCategories } from "@/lib/content/products";

export default function ProductGrid() {
  const [cat, setCat] = useState<string>("All");
  const reduced = useReducedMotion();
  const visible = products.filter((p) => cat === "All" || p.category === cat);

  return (
    <>
      <div role="group" aria-label="Filter products" className="flex flex-wrap gap-2.5">
        {productCategories.map((c) => {
          const active = cat === c;
          return (
            <button
              key={c}
              onClick={() => setCat(c)}
              aria-pressed={active}
              className={`rounded-full border px-4 py-2 font-[family-name:var(--font-mono)] text-[0.8rem] tracking-[0.08em] transition-all ${
                active
                  ? "border-azure-deep bg-azure-deep font-medium text-white"
                  : "border-black/15 text-lmid hover:border-ice-deep hover:text-ice-deep"
              }`}
            >
              {c}
            </button>
          );
        })}
      </div>

      <motion.div layout={!reduced} className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
        <AnimatePresence mode="popLayout">
          {visible.map((p) => (
            <motion.article
              key={p.slug}
              layout={!reduced}
              initial={reduced ? false : { opacity: 0, y: 16, scale: 0.985 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={reduced ? undefined : { opacity: 0, scale: 0.985 }}
              transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}
              className="h-full"
            >
            <TiltCard className="h-full" max={4}>
            <div className="notch-card flex h-full flex-col rounded-xl border border-black/10 bg-white p-7">
              <div className="flex items-baseline justify-between gap-4">
                <h3 className="text-[1.35rem] font-semibold text-lhi">{p.name}</h3>
                <span className="ar shrink-0 text-ice-deep" lang="ar">
                  {p.arName}
                </span>
              </div>
              <p className="mt-1 font-[family-name:var(--font-mono)] text-[0.72rem] uppercase tracking-[0.14em] text-llo">
                {p.descriptor} · {p.category}
              </p>
              <p className="mt-3.5 text-[0.95rem] leading-relaxed text-lmid">{p.description}</p>

              <ul className="mt-4 grid flex-1 content-start gap-2 border-t border-dashed border-black/10 pt-4">
                {p.features.map((f) => (
                  <li key={f} className="flex items-baseline gap-2.5 text-[0.88rem] text-lmid">
                    <span className="text-[0.72rem] text-azure" aria-hidden>
                      ▸
                    </span>
                    {f}
                  </li>
                ))}
              </ul>

              <div className="mt-4 flex flex-wrap gap-2">
                {p.badges.map((b) => (
                  <span
                    key={b}
                    className="rounded-full border border-ice-deep/40 px-2.5 py-0.5 font-[family-name:var(--font-mono)] text-[0.68rem] uppercase tracking-[0.08em] text-ice-deep"
                  >
                    {b}
                  </span>
                ))}
              </div>

              <p className="mt-4 font-[family-name:var(--font-mono)] text-[0.75rem] text-llo">
                {p.tech}
              </p>

              <div className="mt-5 flex items-center justify-between gap-4 border-t border-black/10 pt-5">
                <p className="text-[0.9rem] text-lmid">
                  From{" "}
                  <b className="font-[family-name:var(--font-mono)] text-lg font-medium text-azure-deep tnum">
                    SAR {p.priceFromSar.toLocaleString()}
                  </b>
                  <span className="block text-[0.75rem] text-llo">one-time license · VAT excl.</span>
                </p>
                <Link
                  href={`/contact?product=${p.slug}`}
                  className="btn btn-ghost-light btn-sm shrink-0"
                >
                  Request demo
                </Link>
              </div>
            </div>
            </TiltCard>
            </motion.article>
          ))}
        </AnimatePresence>
      </motion.div>
    </>
  );
}