"use client";

import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import { Award } from "lucide-react";
import { normativeData } from "@/lib/demoData";

export function NormativeCard() {
  const t = useTranslations();

  return (
    <div className="flex flex-col gap-8 py-10 max-w-6xl mx-auto px-2">
      {normativeData.map((c, i) => (
        <motion.article
          key={i}
          initial={{ opacity: 0, y: 28 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.55, delay: i * 0.1 }}
          viewport={{ once: true }}
          className="group flex flex-col rounded-2xl overflow-hidden sm:p-5 p-2 bg-[#161514] border border-white/5 hover:border-red-600/20 transition-colors duration-300 w-full"
        >
          {/* Meta + actions */}
          <div className="flex flex-col justify-between flex-1 min-w-0 py-1 gap-4">
            <div className="space-y-2">
              {/* Badge row */}
              <div className="flex items-center gap-2 flex-wrap">
                <div className="flex items-center gap-1.5">
                  <Award size={11} className="text-red-600 shrink-0" />
                  <span className="text-[10px] font-black uppercase tracking-widest text-red-600">
                    {t("about.certificatePage.card.badge")}
                  </span>
                </div>
                <span className="text-[10px] font-bold uppercase tracking-wider text-white/20 border border-white/10 px-2 py-0.5 rounded-full">
                  {c.category}
                </span>
              </div>

              {/* Title */}
              <h3 className="font-bold text-sm md:text-base text-white leading-snug">
                {t(c.titleKey)}
              </h3>
            </div>
          </div>

          {/* Divider */}
          <div className="mx-4 h-px bg-white/5 sm:my-5 my-2" />

          {/* Documents list */}
          <div className="overflow-hidden">
            <ul className="flex flex-col gap-2.5">
              {c.documents.map((doc, di) => (
                <li key={di} className="flex items-start gap-2.5">
                  <span className="mt-1 flex-none w-1.5 h-1.5 rounded-full bg-red-600/60" />
                  <p className="text-xs text-gray-400 leading-relaxed">
                    {t(doc)}
                  </p>
                </li>
              ))}
            </ul>
          </div>
        </motion.article>
      ))}
    </div>
  );
}