import { Code2, Terminal, Wrench, Palette, Sparkles } from "lucide-react";
import { skills } from "../data/profile";
import SectionHeading from "../components/SectionHeading";
import Reveal from "../components/Reveal";

const categoryIcon = {
  Desarrollo: Code2,
  Programación: Terminal,
  Herramientas: Wrench,
  Edición: Palette,
  Otras: Sparkles,
};

export default function Skills() {
  return (
    <section id="habilidades" className="container-px py-28 md:py-36">
      <div className="mx-auto max-w-6xl flex flex-col gap-14">
        <SectionHeading
          eyebrow="Habilidades"
          title="Con qué construyo"
          subtitle="No mido mis habilidades en porcentajes — las demuestro en los proyectos que verás a continuación."
        />

        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
          {Object.entries(skills).map(([category, items], i) => {
            const Icon = categoryIcon[category] ?? Sparkles;
            return (
              <Reveal key={category} delay={i * 0.06}>
                <div className="glow-border h-full rounded-2xl">
                  <div className="glass h-full rounded-2xl p-6 flex flex-col gap-4">
                    <div className="flex items-center gap-3">
                      <span className="grid place-items-center h-9 w-9 rounded-xl bg-[color:var(--color-accent)]/10 text-[color:var(--color-accent)]">
                        <Icon size={18} />
                      </span>
                      <h3 className="font-display font-medium text-lg">{category}</h3>
                    </div>

                    <ul className="flex flex-col gap-2.5">
                      {items.map((item) => (
                        <li
                          key={item.name}
                          className="group flex items-baseline justify-between gap-3 border-b border-[color:var(--color-border)] pb-2 last:border-none last:pb-0"
                        >
                          <span className="text-sm text-[color:var(--color-ink)] group-hover:text-[color:var(--color-accent)] transition-colors">
                            {item.name}
                          </span>
                          <span className="text-xs text-[color:var(--color-muted)] text-right">
                            {item.note}
                          </span>
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}
