<template>
  <IntelligenceShell
    view-name="competitor-comparison"
    label="Competitor Intel"
    title="Competitor whitespace"
    subtitle="The useful competitor view only: who is covered, where the gaps are, and what that means for our PDP direction."
    count-key="competitors"
  >
    <template #default="{ data }">
      <section class="grid">
        <article v-for="row in data.competitors" :key="row.brand" class="competitor-card">
          <div class="card-top">
            <div>
              <span class="eyebrow">#{{ row.rank }}</span>
              <h2>{{ row.brand }}</h2>
            </div>
            <span class="status">{{ row.status }}</span>
          </div>
          <p class="domain">{{ row.domain }}</p>
          <div class="detail-block">
            <span>Coverage</span>
            <strong>{{ row.sourceCoverage }}</strong>
          </div>
          <div class="detail-block">
            <span>Whitespace / next move</span>
            <p>{{ row.whitespace }}</p>
          </div>
        </article>
      </section>

      <section class="signals" v-if="data.jvSignals?.length">
        <h2>JV signals to compare against</h2>
        <div class="signal-list">
          <div v-for="signal in data.jvSignals" :key="signal.rank" class="signal-row">
            <strong>{{ signal.signal }}</strong>
            <small>{{ signal.source }}</small>
          </div>
        </div>
      </section>
    </template>
  </IntelligenceShell>
</template>

<script setup>
import IntelligenceShell from './IntelligenceShell.vue'
</script>

<style scoped src="../views/view.css" />
<style scoped>
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.competitor-card,.signals{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-sm)}.card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);display:block;margin-bottom:4px}.competitor-card h2,.signals h2{font-size:16px;margin:0}.status{padding:3px 8px;border-radius:999px;font-size:11px;background:var(--negative-bg);color:var(--negative);white-space:nowrap}.domain{font-size:12px;color:var(--text-secondary);margin:6px 0 14px}.detail-block + .detail-block{margin-top:12px}.detail-block span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:4px}.detail-block strong{font-size:13px}.detail-block p{font-size:13px;line-height:1.55;color:var(--text-secondary)}.signals{margin-top:14px}.signal-list{display:grid;gap:10px;margin-top:10px}.signal-row{border:1px solid var(--border);border-radius:var(--radius);padding:12px;background:#fafaf9}.signal-row strong{display:block;font-size:13px}.signal-row small{display:block;margin-top:4px;color:var(--text-muted)}@media(max-width:1000px){.grid{grid-template-columns:1fr}}
</style>
