---
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());

const leftCol = recommendations.filter((_, i) => i % 2 === 0);
const rightCol = recommendations.filter((_, i) => i % 2 === 1);
---

<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="hidden sm:grid grid-cols-2 gap-5 items-start">
      {[leftCol, rightCol].map((col) => (
        <div class="space-y-5">
          {col.map((rec) => (
            <RecommendationCard
              author={rec.data.author}
              authorRole={rec.data.authorRole}
              company={rec.data.company}
              text={rec.body || ''}
              date={rec.data.date}
              avatar={rec.data.avatar}
              url={rec.data.url}
              lang={rec.data.lang}
            />
          ))}
        </div>
      ))}
    </div>
    <div class="sm:hidden space-y-5">
      {recommendations.map((rec) => (
        <RecommendationCard
          author={rec.data.author}
          authorRole={rec.data.authorRole}
          company={rec.data.company}
          text={rec.body || ''}
          date={rec.data.date}
          avatar={rec.data.avatar}
          url={rec.data.url}
          lang={rec.data.lang}
        />
      ))}
    </div>
  </section>
</Layout>