const skills = [
    { category: "Frontend", items: ["React", "Vite", "JavaScript (ES6+)", "Tailwind CSS", "HTML5 / CSS3"] },
    { category: "Backend & Database", items: ["Node.js", "Express", "MySQL", "MongoDB"] },
    { category: "DevOps & SysAdmin", items: ["Docker & Compose", "Nginx (Reverse Proxy)", "Linux (Ubuntu Server)", "Git / Github/ Forgejo"] }
  ];
  
  export default function Skills() {
    return (
      <section id="skills" className="py-20 px-6 max-w-5xl mx-auto border-t border-slate-900">
        <div className="mb-12">
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Competenze & Tecnologie</h2>
          <p className="text-slate-400 mt-2">Gli strumenti che utilizzo per trasformare le idee in prodotti reali.</p>
        </div>
  
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {skills.map((group, index) => (
            <div key={index} className="bg-slate-900/30 border border-slate-800/50 rounded-xl p-6">
              <h3 className="text-lg font-semibold text-cyan-400 mb-4 font-mono">
                // {group.category}
              </h3>
              <ul className="space-y-2.5">
                {group.items.map((skill, i) => (
                  <li key={i} className="text-slate-300 text-sm flex items-center gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-cyan-500"></span>
                    {skill}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>
    );
  }