"use client";

import { motion, useReducedMotion } from "motion/react";

/**
 * The departments a garment passes through, laid out as a ribbon that lights up
 * stage by stage. Hovering a stage brings it forward, so a buyer scanning for
 * one capability can find it fast.
 */
export function ProcessRibbon({
  stages,
  accent = "thread",
}: {
  stages: readonly { step: string; note: string }[];
  accent?: "thread" | "indigo" | "hiviz";
}) {
  const reduced = useReducedMotion();

  const color =
    accent === "indigo"
      ? "var(--indigo-lit)"
      : accent === "hiviz"
        ? "var(--hiviz)"
        : "var(--thread)";

  return (
    <ol className="relative grid gap-px bg-[var(--rule)] sm:grid-cols-2 lg:grid-cols-4">
      {stages.map((stage, i) => (
        <motion.li
          key={stage.step}
          className="group relative overflow-hidden bg-[var(--ink)] p-6 lg:p-7"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.4 }}
          transition={{
            duration: reduced ? 0 : 0.55,
            delay: reduced ? 0 : (i % 4) * 0.08,
            ease: [0.16, 1, 0.3, 1],
          }}
        >
          {/* Fill sweeps up from the base on hover, the way dye rises in cloth. */}
          <span
            className="absolute inset-x-0 bottom-0 h-0 transition-[height] duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:h-full"
            style={{ backgroundColor: `color-mix(in srgb, ${color} 9%, transparent)` }}
          />
          <span
            className="absolute inset-x-0 bottom-0 h-px origin-left scale-x-0 transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-x-100"
            style={{ backgroundColor: color }}
          />

          <div className="relative">
            <span className="data text-[11px]" style={{ color }}>
              {String(i + 1).padStart(2, "0")}
            </span>
            <h3 className="mt-3 text-lg text-[var(--cotton)]">{stage.step}</h3>
            <p className="mt-2 text-[13px] leading-relaxed text-[var(--melange)]">
              {stage.note}
            </p>
          </div>
        </motion.li>
      ))}
    </ol>
  );
}