<template>
  <div class="media-tab-projets" style="padding: 1.5rem; overflow-y: auto;">
    <div style="max-width: 70ch; margin-bottom: 1.5rem;">
      <h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">PFE engagés</h2>
      <p style="font-size: 0.9rem; line-height: 1.6; color: var(--nav-text);">
        Mutualiser le savoir. Voici les PFE engagés publiés en ligne dont nous avons connaissance.
        Partage-nous le lien de ton travail si tu veux participer à cette initiative.
      </p>
    </div>

    <div class="projets-grid">
      <article v-for="p in projets" :key="p.id" class="projet-card">
        <img v-if="p.thumb" :src="p.thumb" :alt="p.titre" class="projet-thumb" loading="lazy" />
        <div v-else class="projet-thumb projet-thumb--placeholder">📐</div>

        <h3 style="font-weight: 600; font-size: 0.95rem; margin: 0.5rem 0 0.25rem; color: var(--nav-text);">{{ p.titre }}</h3>
        <p style="font-size: 0.8rem; color: var(--nav-text-muted); margin-bottom: 0.5rem;">
          {{ (p.auteurs || []).filter((a: string) => a !== 'Inconnu').join(', ') }}
          <template v-if="p.ecole && p.ecole !== 'Inconnu'"> · {{ p.ecole }}</template>
          <template v-if="p.annee && p.annee !== 'Inconnu'"> · {{ p.annee }}</template>
        </p>
        <p style="font-size: 0.875rem; line-height: 1.5; color: var(--nav-text); flex: 1; margin-bottom: 0.75rem;">{{ p.description }}</p>

        <a v-if="p.url" :href="p.url" target="_blank" rel="noopener" style="color: var(--nav-primary-solid, #3b6ea5); font-weight: 600; font-size: 0.875rem; text-decoration: none;">
          Découvrir →
        </a>
        <span v-if="p.link_status === 'broken'" style="color: #e67e22; font-size: 0.8rem; display: block; margin-top: 0.25rem;">⚠ Lien d'origine cassé</span>
      </article>
    </div>

    <p style="margin-top: 2rem; font-size: 0.875rem; color: var(--nav-text-muted);">
      Tu as un PFE engagé à partager ? <a href="mailto:contact@trans-former.fr" style="color: var(--nav-primary-solid);">Écris-moi</a>.
    </p>
  </div>
</template>

<script setup lang="ts">
const { data: pfeData } = await useFetch<{ projets: any[] }>('/data/pfe-engages.json')
const projets = computed(() => pfeData.value?.projets ?? [])
</script>

<style scoped>
.projets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.projet-card {
  border: 1px solid var(--nav-bg-alt, #eee);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  background: var(--nav-surface);
}
.projet-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--nav-bg-alt, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
</style>
