nav-carte/components/PlatformeTaffCard.vue

<template>
  <button
    type="button"
    class="w-full text-left rounded-xl border transition-all duration-200 hover:shadow-md focus-visible:outline-none"
    :style="`
      background: var(--nav-surface);
      border-color: ${tagBorderColor};
      border-left: 4px solid ${tagAccentColor};
    `"
    @click="$emit('open', plateforme)"
  >
    <!-- Header -->
    <div class="flex items-start justify-between gap-2 px-4 pt-4 pb-2">
      <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2 flex-wrap mb-0.5">
          <span
            class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold shrink-0"
            :style="`background: ${tagBgColor}; color: ${tagTextColor};`"
          >
            <span>{{ tagEmoji }}</span>
            <span>{{ tagLabel }}</span>
          </span>
          <span
            v-if="plateforme.type === 'appel-offre-public'"
            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium shrink-0"
            style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
          >AO public</span>
        </div>
        <h3 class="font-semibold text-base leading-snug" style="color: var(--nav-text);">
          {{ plateforme.nom }}
        </h3>
      </div>
      <a
        :href="plateforme.url"
        target="_blank"
        rel="noopener noreferrer"
        class="shrink-0 flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
        style="background: var(--nav-bg-alt); color: var(--nav-text);"
        @click.stop
        title="Visiter le site"
      >
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
          <polyline points="15 3 21 3 21 9"/>
          <line x1="10" y1="14" x2="21" y2="3"/>
        </svg>
        Visiter
      </a>
    </div>

    <!-- Description courte -->
    <p class="px-4 pb-3 text-sm leading-relaxed line-clamp-2" style="color: var(--nav-text-muted);">
      {{ plateforme.description_courte }}
    </p>

    <!-- Scoring axes -->
    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
      <template v-for="axe in axes" :key="axe.id">
        <span
          v-if="plateforme.scoring[axe.id] !== null"
          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium"
          :style="`background: ${axeScoreBg(plateforme.scoring[axe.id])}; color: ${axeScoreText(plateforme.scoring[axe.id])};`"
          :title="axe.label"
        >
          <span>{{ axe.icon }}</span>
          <span>{{ plateforme.scoring[axe.id] }}</span>
        </span>
      </template>
    </div>

    <!-- Footer: secteurs + coût -->
    <div class="px-4 pb-3 flex items-center gap-2 flex-wrap">
      <span
        v-for="s in plateforme.secteurs_servis.slice(0, 3)"
        :key="s"
        class="inline-block px-2 py-0.5 rounded-full text-xs"
        style="background: var(--nav-bg); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt);"
      >{{ secteurLabel(s) }}</span>
      <span
        v-if="plateforme.secteurs_servis.length > 3"
        class="text-xs"
        style="color: var(--nav-text-muted);"
      >+{{ plateforme.secteurs_servis.length - 3 }}</span>
      <span class="ml-auto text-xs font-medium" style="color: var(--nav-text-muted);">
        {{ coutLabel(plateforme.cout_entree) }}
      </span>
    </div>
  </button>
</template>

<script setup lang="ts">
import type { PlateformeTaff } from '~/types/plateforme-taff'

const props = defineProps<{ plateforme: PlateformeTaff }>()
defineEmits<{ open: [p: PlateformeTaff] }>()

const axes = [
  { id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
  { id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
  { id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
  { id: 'ecologie' as const, icon: '🌿', label: 'Écologie' },
  { id: 'matching' as const, icon: '🎯', label: 'Matching' },
]

const TAG_CONFIG = {
  'recommande':   { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)', text: '#3d5534', border: 'rgba(90,122,74,0.25)' },
  'sous-reserve': { emoji: '⚠️', label: 'Sous réserve',   accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a', border: 'rgba(196,164,114,0.35)' },
  'a-eviter':     { emoji: '❌', label: 'À éviter',       accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)', text: '#7a3322', border: 'rgba(168,93,62,0.25)' },
}

const tagConfig = computed(() => TAG_CONFIG[props.plateforme.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])
const tagEmoji = computed(() => tagConfig.value.emoji)
const tagLabel = computed(() => tagConfig.value.label)
const tagAccentColor = computed(() => tagConfig.value.accent)
const tagBgColor = computed(() => tagConfig.value.bg)
const tagTextColor = computed(() => tagConfig.value.text)
const tagBorderColor = computed(() => tagConfig.value.border)

function axeScoreBg(score: string | null) {
  if (score === '✅') return 'rgba(90,122,74,0.12)'
  if (score === '⚠️') return 'rgba(196,164,114,0.15)'
  if (score === '❌') return 'rgba(168,93,62,0.12)'
  return 'var(--nav-bg-alt)'
}

function axeScoreText(score: string | null) {
  if (score === '✅') return '#3d5534'
  if (score === '⚠️') return '#7a5f2a'
  if (score === '❌') return '#7a3322'
  return 'var(--nav-text-muted)'
}

const SECTEUR_LABELS: Record<string, string> = {
  'renovation': 'Rénovation',
  'construction-neuve': 'Neuf',
  'urbanisme': 'Urbanisme',
  'architecture-interieure': 'Archi intérieure',
  'paysage': 'Paysage',
  'mar-conseil': 'MAR/Conseil',
  'transversal': 'Transversal',
}

function secteurLabel(s: string) { return SECTEUR_LABELS[s] ?? s }

const COUT_LABELS: Record<string, string> = {
  'gratuit': 'Gratuit',
  'freemium': 'Freemium',
  'abonnement': 'Abonnement',
  'lead-paye': 'Lead payant',
  'commission': 'Commission',
}

function coutLabel(c: string) { return COUT_LABELS[c] ?? c }
</script>