"use client";

import { motion, useReducedMotion } from "motion/react";
import { certifications } from "@/content/certifications";

/**
 * Every standard the group holds, set as type. The card fills from the base on
 * hover, which is the same dye rising motion used on the process ribbon.
 */
export function CertificationGrid() {
  const reduced = useReducedMotion();

  return (
    <ul className="grid gap-px bg-[var(--rule)] sm:grid-cols-2 lg:grid-cols-3">
      {certifications.map((cert, i) => (
        <motion.li
          key={cert.abbr}
          className="group relative overflow-hidden bg-[var(--ink)] p-7"
          initial={{ opacity: 0, y: 20, filter: "blur(6px)" }}
          whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
          viewport={{ once: true, amount: 0.4 }}
          transition={{
            duration: reduced ? 0 : 0.6,
            delay: reduced ? 0 : (i % 3) * 0.08,
            ease: [0.16, 1, 0.3, 1],
          }}
        >
          <span className="absolute inset-x-0 bottom-0 h-0 bg-[var(--thread)]/8 transition-[height] duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:h-full" />

          <div className="relative">
            <p className="font-display text-3xl text-[var(--cotton)] transition-colors duration-300 group-hover:text-[var(--thread)]">
              {cert.abbr}
            </p>
            <p className="mt-3 text-sm leading-snug text-[var(--cotton)]/75">
              {cert.name}
            </p>
            <p className="mt-4 font-mono text-[10px] uppercase tracking-[0.2em] text-[var(--melange)]">
              {cert.scope}
            </p>
          </div>
        </motion.li>
      ))}
    </ul>
  );
}