src/presentation/components/layout/WizardNavigation.vue

<template>
  <nav class="wizard-nav [ flex items-center justify-center ]">
    <div class="nav-container [ flex items-center justify-between ]">
      <div class="nav-steps-wrapper">
        <Steps 
          v-model:activeStep="activeStep" 
          :model="items" 
          class="custom-steps" 
          :readonly="false"
          @activeStepChange="onStepChange"
        />
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUIStore, useStoriesStore } from '@presentation/stores'
import Steps from 'primevue/steps'

const uiStore = useUIStore()
const storiesStore = useStoriesStore()

const items = [
  { label: 'SÉLECTION' },
  { label: 'VISUELS' },
  { label: 'NARRATION' },
  { label: 'MUSIQUE' },
  { label: 'MONTAGE' }
]

const activeStep = computed({
  get: () => uiStore.currentStep - 1,
  set: (val) => uiStore.setStep(val + 1)
})

function onStepChange(index: number) {
  uiStore.setStep(index + 1)
}
</script>

<style scoped>
.wizard-nav {
  background: rgba(5, 5, 5, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
  padding: 0.5rem 1.5rem;
  flex-shrink: 0;
}

.nav-container {
    width: 100%;
    max-width: 1200px;
}

.custom-steps {
  width: 100%;
  max-width: 800px;
}

:deep(.p-steps-item:before) {
  border-top: 2px solid #111 !important;
  top: 50% !important;
  margin-top: -12px !important;
}

:deep(.p-steps-item.p-steps-item-active:before) {
  border-top-color: var(--accent-red-glow) !important;
}

:deep(.p-steps-item-number) {
  background: #000 !important;
  border: 2px solid #1a1a1a !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 0.85rem !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

:deep(.p-steps-item-active .p-steps-item-number) {
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--accent-red-glow) !important;
  transform: scale(1.1);
}

:deep(.p-steps-item-label) {
  color: var(--text-muted) !important;
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2rem !important;
  margin-top: 1rem !important;
  transition: all 0.3s ease;
}

:deep(.p-steps-item-active .p-steps-item-label) {
  color: #fff !important;
  letter-spacing: 0.25rem !important;
}
</style>