"use client";
import { motion } from "framer-motion";
import { SKILLS } from "@/lib/data";
import { Reveal, Stagger, staggerItem } from "./Reveal";

const categories: Array<keyof typeof SKILLS> = ["Development","Infrastructure","Business"];

export default function Skills() {
  return (
    <section className="bg-[#07080c] py-16 sm:py-20 border-t border-white/[0.06]">
      <div className="max-w-[1200px] mx-auto px-6 sm:px-8">
        <Reveal>
          <p className="text-[11px] tracking-[0.2em] font-semibold text-white/30 uppercase">Skills</p>
          <h2 className="mt-3 text-[28px] sm:text-[36px] font-[700] tracking-[-0.03em] text-white">What I work with.</h2>
        </Reveal>

        <div className="mt-8 grid md:grid-cols-3 gap-4 sm:gap-5">
          {categories.map((cat) => (
            <Reveal key={cat} delay={0.06} className="rounded-[20px] border border-white/[0.08] bg-white/[0.04] p-6">
              <p className="text-[12px] tracking-[0.15em] font-semibold text-white/40 uppercase">{cat}</p>
              <Stagger className="mt-4 flex flex-wrap gap-2">
                {(SKILLS[cat] as readonly string[]).map((skill) => (
                  <motion.span
                    key={skill}
                    variants={staggerItem}
                    whileHover={{ scale: 1.04, y: -1 }}
                    className="px-3 py-1.5 rounded-full bg-white text-black text-[12px] font-medium border border-white/10 hover:bg-white/90 transition-colors cursor-default"
                  >
                    {skill}
                  </motion.span>
                ))}
              </Stagger>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}