<template>
  <IntelligenceShell
    view-name="flavor-intelligence"
    label="Flavor Intelligence"
    title="Collagen NPD flavor signal"
    subtitle="Phase 1 surface for chalkiness, sweetness, aftertaste, mixability, and final flavour recommendations. Non-collagen SKUs show why they are out of scope."
    count-key="flavorSignals"
  >
    <template #default="{ data }">
      <div class="table-wrap"><table class="data-table"><thead><tr><th>#</th><th>Flavor</th><th>Chalkiness</th><th>Sweetness</th><th>Aftertaste</th><th>Mixability</th><th>Recommendation</th><th>Status</th></tr></thead><tbody><tr v-for="row in data.flavorSignals" :key="row.rank"><td class="rank">{{ row.rank }}</td><td class="flavor">{{ row.flavor }}</td><td>{{ row.chalkiness }}</td><td>{{ row.sweetness }}</td><td>{{ row.aftertaste }}</td><td>{{ row.mixability }}</td><td>{{ row.recommendation }}</td><td><span class="status">{{ row.status }}</span></td></tr></tbody></table></div>
      <section v-if="data.evidenceGaps?.length" class="gaps"><h2>Evidence gaps before recommendation</h2><ul><li v-for="gap in data.evidenceGaps" :key="gap">{{ gap }}</li></ul></section>
    </template>
  </IntelligenceShell>
</template>
<script setup>import IntelligenceShell from './IntelligenceShell.vue'</script>
<style scoped src="../views/view.css" />
<style scoped>.flavor{font-weight:600}.status{padding:2px 8px;border-radius:999px;font-size:11px;background:#fff7ed;color:#c2410c}.gaps{margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}.gaps h2{font-size:16px;margin:0 0 8px}.gaps li{font-size:13px;margin:6px 0}</style>
