---
import { getLocalizedCollection } from "../../../utils/content-i18n";
import Layout from "../../../layouts/main.astro";
import ProjectCard from "../../../components/code/ProjectCard.astro";
import { getProjectBaseSlug, getProjectsBasePath } from "../../../utils/i18n";

const locale = "ar";
const projectsBasePath = getProjectsBasePath(locale);

const projects = (await getLocalizedCollection("projects", locale))
  .filter((p) => !p.data.draft && p.data.category === "dev")
  .sort((a, b) => {
    if (a.data.featured !== b.data.featured) return a.data.featured ? -1 : 1;
    return b.data.date!.getTime() - a.data.date!.getTime();
  });
---

<Layout
  title="المشاريع - جليل عرفاوي"
  facet="code"
  description="مشاريع جليل عرفاوي البرمجية: mon-entreprise.urssaf.fr، DisMoi، Débats.co ومشاريع أخرى مفتوحة المصدر."
>
  <section dir="rtl" lang="ar" class="relative z-20 max-w-3xl mx-auto my-12 px-7 lg:px-0">
    <div class="mb-10">
      <a href="/ar/برمجة" class="inline-flex items-center gap-1.5 text-sm text-white/50 hover:text-white/80 transition-colors mb-6 group">
        برمجة
        <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </a>
      <h1 class="text-3xl sm:text-4xl font-bold text-white">المشاريع</h1>
      <p class="mt-3 text-white/60 text-lg">برمجيات مفتوحة المصدر، أدوات ومشاريع شخصية.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
      {projects.map((project) => (
        <ProjectCard
          title={project.data.title}
          description={project.data.description}
          technologies={project.data.technologies}
          featured={project.data.featured}
          detailUrl={`${projectsBasePath}/${getProjectBaseSlug(project.id)}`}
          lang={locale}
        />
      ))}
    </div>
  </section>
</Layout>