<template>
  <div class="trouver-du-taf-page">
    <!-- Squelette V1 - sera étoffé par T4 (front Nuxt cascade TAFF) -->
    <section class="intro">
      <h1>Trouver du taf en archi</h1>
      <p class="intro-text">
        Annuaire critique des plateformes de mise en relation archi - particulier.
        Évaluations sur 5 axes : rémunération, transparence, pratiques pro, écologie, qualité du matching.
      </p>
      <p class="intro-disclaimer">
        Page en construction. Données à venir : T2 scoring 5 axes en cours après livraison T1.
      </p>
    </section>

    <!-- Filtres : à brancher par T4 (FiltreSecteur, FiltreTag) -->
    <!-- Liste plateformes : à brancher par T4 (FichePlateforme) -->
    <!-- Chatbot d'aiguillage : à brancher par T6 (ChatbotTaff réutilise ChatbotSheet.vue) -->
  </div>
</template>

<script setup lang="ts">
// Types disponibles : import type { PlateformeTaff, ScoringTaff, TagGlobal } from '~/types/plateforme-taff'
// Data attendue : public/data/plateformes-taff.json (livrée par T2 + T3 après T1)

useHead({
  title: 'Trouver du taf en archi - AEP',
  meta: [
    { name: 'description', content: "Annuaire critique des plateformes B2C archi - particulier. Évaluations éthiques sur 5 axes." }
  ]
})
</script>

<style scoped>
.trouver-du-taf-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}
.intro h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--nav-text);
  margin-bottom: 0.5rem;
}
.intro-text {
  font-size: 1rem;
  color: var(--nav-text);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.intro-disclaimer {
  font-size: 0.875rem;
  color: var(--nav-text-muted);
  font-style: italic;
}
</style>
