<template>
  <IntelligenceShell
    view-name="reddit-pulse"
    label="Reddit Pulse"
    title="Reddit audience and objection evidence"
    subtitle="Shows the Reddit/social-listening evidence captured for this SKU or category. These are audience signals and objections, not approved product claims."
    count-key="pulses"
  >
    <template #default="{ data }">
      <section class="evidence-summary">
        <div class="summary-card">
          <span class="summary-label">Coverage</span>
          <strong>{{ human(data.coverage) }}</strong>
        </div>
        <div class="summary-card">
          <span class="summary-label">Signals captured</span>
          <strong>{{ data.n ?? data.pulses?.length ?? 0 }}</strong>
        </div>
      </section>

      <div class="pulse-grid">
        <article v-for="row in data.pulses" :key="row.rank" class="pulse-card">
          <span class="rank-pill">#{{ row.rank }}</span>
          <h2>{{ row.topic || row.theme }}</h2>
          <p class="evidence">{{ row.evidence || row.whyItMatters }}</p>
          <p v-if="row.contentUse" class="use"><strong>Use:</strong> {{ row.contentUse }}</p>
          <div v-if="row.expectedSubreddits?.length" class="subs">
            <span v-for="sub in row.expectedSubreddits" :key="sub">{{ sub }}</span>
          </div>
          <a v-if="row.sourceUrl" :href="row.sourceUrl" target="_blank" rel="noopener" class="source-link">Open source</a>
          <strong class="status" :class="row.status">{{ row.status }}</strong>
        </article>
      </div>
    </template>
  </IntelligenceShell>
</template>
<script setup>
import IntelligenceShell from './IntelligenceShell.vue'
function human(value) { return String(value || '').replace(/[-_]/g, ' ') }
</script>
<style scoped src="../views/view.css" />
<style scoped>
.evidence-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px}.summary-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px}.summary-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px}
.pulse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.pulse-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:8px}.rank-pill{font-size:11px;color:var(--accent);font-weight:700}.pulse-card h2{font-size:15px;margin:0}.evidence,.use{font-size:12px;line-height:1.5;color:var(--text-secondary);margin:0}.use{background:#f8fafc;border-radius:var(--radius);padding:8px}.subs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0}.subs span{font-size:11px;background:var(--accent-light);color:var(--accent);padding:3px 7px;border-radius:999px}.source-link{font-size:12px;color:var(--accent);font-weight:600}.status{align-self:flex-start;font-size:11px;border-radius:999px;padding:3px 8px;background:#fff7ed;color:#c2410c}.status.usable_as_audience_language,.status.ready_for_faq,.status.ready_for_image_brief,.status.ready_for_comparison{background:var(--positive-bg);color:var(--positive)}.status.compliance_guardrail,.status.market_objection{background:var(--negative-bg);color:var(--negative)}
</style>
