<template>
  <nav class="sidebar">
    <div v-for="section in nav" :key="section.label" class="section">
      <div class="section-label">{{ section.label }}</div>
      <router-link
        v-for="item in section.items"
        :key="item.view"
        :to="activeSku ? `/product/${activeSku}/${item.view}` : '/catalog'"
        class="nav-item"
        :class="{ active: activeView === item.view }"
      >
        <span class="nav-icon">{{ item.icon }}</span>
        <span class="nav-text">{{ item.label }}</span>
      </router-link>
    </div>
  </nav>
</template>

<script setup>
defineProps({ activeSku: String, activeView: String })

const nav = [
  {
    label: 'Understand Customer',
    items: [
      { view: 'review-insights', icon: '★', label: 'Review Insights' },
      { view: 'conversion-driver', icon: '⬆', label: 'Conversion Driver' },
    ]
  },
  {
    label: 'Improve Product',
    items: [
      { view: 'strengths-weaknesses', icon: '◎', label: 'Strengths & Weaknesses' },
      { view: 'improvements', icon: '⚙', label: 'Product Improvements' },
    ]
  },
  {
    label: 'Optimize Marketing',
    items: [
      { view: 'image-audit', icon: '▣', label: 'Image Audit' },
      { view: 'conversion-blockers', icon: '⊘', label: 'Conversion Blockers' },
      { view: 'competitor-analysis', icon: '◈', label: 'Competitor Analysis' },
    ]
  }
]
</script>

<style scoped>
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px 0;
  flex-shrink: 0;
}

.section { margin-bottom: 4px; }

.section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 16px 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  border-left: 3px solid transparent;
  margin: 1px 0;
  cursor: pointer;
}
.nav-item:hover { background: var(--neutral-bg); color: var(--text-primary); }
.nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}

.nav-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.nav-text { line-height: 1.3; }
</style>
