const categories: { name: string; items: string[] }[] = [
  { name: 'Experience', items: ['Freelance projects', 'Collaborations', 'Open-source contributions'] },
  { name: 'Backend', items: ['Django', 'Python', 'REST API', 'PostgreSQL', 'Celery', 'Docker'] },
  { name: 'Frontend', items: ['React', 'Tailwind', 'Vite', 'TypeScript', 'ShadCN', 'Bootstrap'] },
  { name: 'DevOps / Hosting', items: ['Nginx', 'Docker Compose', 'SSL', 'Cloudflare', 'Self-hosting'] },
  { name: 'Other Tools', items: ['Git', 'VSCode', 'WebRTC', 'ESP32', 'Automation'] },
];

export default function SkillsSection() {
  return (
    <section id="skills" className="py-20 bg-gradient-to-b from-brand-bg to-brand-bgLight">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold mb-4 text-rainbow">Skills</h2>
          <p className="text-brand-text/80 max-w-2xl mx-auto">Core technologies and tools I use across backend, frontend, infrastructure and hardware.</p>
        </div>
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
          {categories.map(cat => (
            <div key={cat.name} className="card p-6">
              <h3 className="font-semibold mb-4 text-rainbow tracking-wide">{cat.name}</h3>
              <ul className="space-y-2 text-sm">
                {cat.items.map(i => (
                  <li key={i} className="flex items-center gap-2 text-brand-text/80">
                    <span className="inline-block w-2 h-2 rounded-full bg-brand-accent" />
                    <span className="group-hover:text-brand-text transition-colors">{i}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}