export const Projects = () => (
  <section id="projects" class="scroll-mt-24">
    <h2 class="text-3xl font-bold mb-4 text-dracula-purple">Projects</h2>
    <div class="space-y-6">
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-cyan mb-2">k6 Performance Testing Framework</h3>
        <p class="text-dracula-comment mb-3">JavaScript-based k6 abstraction layer for API synthetic testing</p>
        <ul class="list-disc list-inside space-y-1">
          <li>Enabled Postman-like experience for endpoint-specific testing</li>
          <li>Developer-friendly workflow with JavaScript abstraction</li>
          <li>80% automation coverage across 50+ API endpoints</li>
        </ul>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-cyan mb-2">Home Lab Infrastructure</h3>
        <p class="text-dracula-comment mb-3">Complete self-hosted stack demonstrating production-grade deployment skills</p>
        <ul class="list-disc list-inside space-y-1">
          <li>Gitea, Owncloud, SearXNG, PocketBase, WireGuard, nginx-proxy-manager</li>
          <li>Full CI/CD pipeline integration</li>
          <li>Monitoring with Grafana and Cockpit</li>
        </ul>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-cyan mb-2">Media Processing Automation</h3>
        <p class="text-dracula-comment mb-3">FFmpeg-based video conversion utility with multi-subtitle track management</p>
        <ul class="list-disc list-inside space-y-1">
          <li>Television optimization workflows</li>
          <li>Automated subtitle track handling</li>
        </ul>
      </div>
      <div class="bg-dracula-selection p-6 rounded-lg">
        <h3 class="text-xl font-bold text-dracula-cyan mb-2">Service Platform (Proof of Concept)</h3>
        <p class="text-dracula-comment mb-3">Cloudflare Worker + PocketBase + HTMX/TailwindCSS stack</p>
        <a href="https://sudestec.sudeste.workers.dev/" target="_blank" class="text-dracula-green hover:underline">View Demo →</a>
      </div>
    </div>
  </section>
)