---
import { getCollection } from "astro:content";
import { Image } from "astro:assets";
import Layout from "../../../layouts/main.astro";
import Link from "../../../components/Link.astro";
import NavigationCard from "../../../components/code/NavigationCard.astro";
import FeaturedRecommendation from "../../../components/code/FeaturedRecommendation.astro";
import logoTiqa from "../../../assets/images/logo-tiqa-blanc.png";

const locale = "ar";

const experiences = (await getCollection("experiences"))
  .filter((e) => e.data.lang === locale && !e.data.draft)
  .sort((a, b) => (b.data.startDate > a.data.startDate ? 1 : -1));

const currentPosition = experiences.find((e) => !e.data.endDate);

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

const recommendationTexts = recommendations.map((rec) => ({
  ...rec,
  text: rec.body || '',
}));
---

<Layout
  title="برمجة - جليل عرفاوي"
  facet="code"
  description="المسار المهني لجليل عرفاوي: مطوّر مستقل متخصص في Software Craftsmanship، TDD، DDD. TypeScript، PHP، Elixir."
>
  <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">
      <h1 class="text-4xl sm:text-5xl font-bold text-white">برمجة</h1>
      <p class="mt-4 text-lg text-white/65 leading-relaxed max-w-2xl">
        أكثر من 20 سنة في بناء البرمجيات. Craftsmanship، TDD، DDD — وهاجس التحيّزات التي نضعها في الكود دون أن ندري.
      </p>
    </div>

    <div class="facet-card rounded-2xl bg-white/[0.06] border border-white/[0.1] p-6 mb-10">
      <p class="text-white/70 leading-relaxed">
        مطوّر مستقل مقيم في <strong class="text-white">ألبي، فرنسا</strong>، أرافق الفرق كمطوّر أول، أو قائد تقني، أو مدرب تقني. أفضّل البرمجيات الحرّة والأدوات التي تلبي احتياجات حقيقية.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-12">
      <NavigationCard
        title="المسار"
        description="الجدول الزمني لخبراتي المهنية منذ 2002."
        href="/ar/برمجة/مسار"
        icon="📋"
      />
      <NavigationCard
        title="المشاريع"
        description="برمجيات مفتوحة المصدر ومشاريع شخصية."
        href="/ar/برمجة/مشاريع"
        icon="💻"
      />
      <NavigationCard
        title="المهارات"
        description="لغات، أطر عمل، ممارسات وأدوات."
        href="/ar/برمجة/مهارات"
        icon="🛠"
      />
      <NavigationCard
        title="التوصيات"
        description="ما يقوله الأشخاص الذين عملت معهم."
        href="/ar/برمجة/توصيات"
        icon="💬"
      />
    </div>

    {currentPosition && (
      <div class="facet-card rounded-2xl bg-gradient-to-r from-purple-500/20 to-indigo-500/20 border border-purple-300/15 p-6 mb-10">
        <p class="text-xs font-semibold text-purple-200 uppercase tracking-wider mb-2">المنصب الحالي</p>
        <p class="text-xl font-bold text-white">{currentPosition.data.role}</p>
        <p class="text-sm text-white/60 mt-1">
          {currentPosition.data.companyUrl ? (
            <a href={currentPosition.data.companyUrl} target="_blank" rel="noopener noreferrer" class="text-purple-200 hover:text-white transition-colors">{currentPosition.data.company}</a>
          ) : (
            currentPosition.data.company
          )}
          {currentPosition.data.location && ` · ${currentPosition.data.location}`}
        </p>
      </div>
    )}

    {recommendationTexts.length > 0 && (
      <div class="mb-12">
        <div class="flex items-center justify-between mb-5">
          <h2 class="text-2xl font-bold text-white">التوصيات</h2>
          <a href="/ar/برمجة/توصيات" class="text-sm text-purple-200 hover:text-white transition-colors">&larr; عرض الكل</a>
        </div>
        <div class="space-y-4">
          {recommendationTexts.map((rec) => (
            <FeaturedRecommendation
              author={rec.data.author}
              authorRole={rec.data.authorRole}
              company={rec.data.company}
              text={rec.text}
              avatar={rec.data.avatar}
              url={rec.data.url}
            />
          ))}
        </div>
      </div>
    )}

    <h2 class="text-2xl font-bold text-white mb-5">القيم والمنهج</h2>
    <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
      <ul class="space-y-3 text-white/70">
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>حركة <Link href="http://manifesto.softwarecraftsmanship.org/#/fr-fr" external>Software Craftsmanship</Link></span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>الفائدة الاجتماعية للمطوّر</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>الفخر بالعمل، دون غرور</span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>منهج <strong class="text-white">Domain Driven Design</strong></span>
        </li>
        <li class="flex items-start gap-3">
          <span class="w-1.5 h-1.5 rounded-full bg-purple-400 mt-2 flex-shrink-0"></span>
          <span>تنظيم <Link href="https://agilemanifesto.org/iso/fr/manifesto.html" external>أجايل</Link>: التكرار والتحسين المستمر</span>
        </li>
      </ul>
    </div>

    <h2 class="text-2xl font-bold text-white mb-5">المجتمع والتدريس</h2>
    <div class="facet-card rounded-2xl bg-white/[0.04] border border-white/[0.08] p-6 mb-10">
      <p class="text-white/70 leading-relaxed">
        أنشّط مجتمع <Link href="https://www.meetup.com/software-crafters-albi/" external>Software Crafters Albi</Link> منذ 2018. أستاذ هندسة البرمجيات في <Link href="https://www.univ-jfc.fr/" external>جامعة شامبوليون</Link> في ألبي منذ 2019.
      </p>
    </div>

    <h2 class="text-2xl font-bold text-white mb-5">على الإنترنت</h2>
    <div class="facet-card flex flex-wrap gap-3 mb-12">
      {[
        { label: 'LinkedIn', href: 'https://www.linkedin.com/in/jalil' },
        { label: 'Malt', href: 'https://www.malt.fr/profile/jalilarfaoui' },
        { label: 'Stack Overflow', href: 'https://stackexchange.com/users/54164/jalil' },
        { label: 'GitHub', href: 'https://github.com/JalilArfaoui' },
        { label: 'Framagit', href: 'https://framagit.org/jalil' },
        { label: 'Forge شخصية', href: 'https://forge.tiqa.fr' },
      ].map((link) => (
        <a
          href={link.href}
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-1.5 px-4 py-2 rounded-full bg-white/[0.06] border border-white/[0.1] text-sm text-white/70 hover:bg-white/[0.12] hover:text-white transition-all duration-200"
        >
          {link.label}
          <svg class="w-3 h-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
          </svg>
        </a>
      ))}
    </div>

    <div class="text-center pt-8 border-t border-white/[0.08]">
      <Image src={logoTiqa} alt="شعار Tiqa" class="mx-auto mb-4" width={160} />
      <p class="text-sm text-white/40">
        <strong class="text-white/60">SAS Tiqa</strong><br />
        12, rue Fabre d'Églantine — 81 000 Albi, France<br />
        811 917 871 RCS Albi
      </p>
    </div>
  </section>
</Layout>