---
import { getCollection } from "astro:content";
import Layout from "../../../layouts/main.astro";
import RecommendationCard from "../../../components/code/RecommendationCard.astro";

const recommendations = (await getCollection("recommendations"))
  .sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
---

<Layout
  title="التوصيات - جليل عرفاوي"
  facet="code"
  description="توصيات LinkedIn لجليل عرفاوي: شهادات زملاء ومديرين وعملاء حول مهاراته في تطوير البرمجيات."
>
  <section dir="rtl" lang="ar" class="relative z-20 max-w-4xl 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="columns-1 sm:columns-2 gap-5 space-y-5">
      {recommendations.map((rec) => (
        <div class="break-inside-avoid">
          <RecommendationCard
            author={rec.data.author}
            authorRole={rec.data.authorRole}
            company={rec.data.company}
            text={rec.body || ''}
            date={rec.data.date}
            avatar={rec.data.avatar}
            lang={rec.data.lang}
          />
        </div>
      ))}
    </div>
  </section>
</Layout>