export const Skills = () => (
  <section id="skills" class="scroll-mt-24">
    <h2 class="text-3xl font-bold mb-4 text-dracula-purple">Skills</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-green mb-3">Operating Systems</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Arch Linux</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Debian</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Windows Server</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Windows Client</span>
        </div>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-green mb-3">Languages</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">JavaScript</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Python</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Go</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Bash</span>
        </div>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-green mb-3">Testing & QA</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Postman</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">k6</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">API Testing</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Performance Testing</span>
        </div>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-green mb-3">DevOps & Cloud</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Azure Pipelines</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Docker</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Podman</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Cloudflare Workers</span>
        </div>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-green mb-3">Infrastructure</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">KVM</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">WireGuard</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">RAID</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">OpenWrt</span>
        </div>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-green mb-3">Web Stack</h3>
        <div class="flex flex-wrap gap-2">
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">Hono.js</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">HTMX</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">TailwindCSS</span>
          <span class="bg-dracula-bg px-3 py-1 rounded text-sm">PocketBase</span>
        </div>
      </div>
    </div>
  </section>
)