<template>
  <IntelligenceShell
    view-name="audience-profile"
    label="Audience Profile"
    title="Who-it-is-for evidence"
    subtitle="Feefo-seeded customer segments that feed pdp.who_its_for. External Amazon/Reddit/Trustpilot validation is still tracked separately."
    count-key="profiles"
  >
    <template #default="{ data }">
      <div class="table-wrap"><table class="data-table"><thead><tr><th>#</th><th>Segment</th><th>Motivation</th><th>Customer language</th><th>Content use</th><th>Status</th></tr></thead><tbody><tr v-for="row in data.profiles" :key="row.rank"><td class="rank">{{ row.rank }}</td><td>{{ row.segment }}</td><td>{{ row.motivation }}</td><td>{{ row.customerLanguage }}</td><td>{{ row.contentUse }}</td><td><span class="status">{{ row.status }}</span></td></tr></tbody></table></div>
    </template>
  </IntelligenceShell>
</template>
<script setup>import IntelligenceShell from './IntelligenceShell.vue'</script>
<style scoped src="../views/view.css" />
<style scoped>.status{padding:2px 8px;border-radius:999px;font-size:11px;background:#fff7ed;color:#c2410c}</style>
