src/components/Sidebar.svelte

<script lang="ts">
  import { currentStep, nextStep, prevStep } from '../stores/appStore'
  
  const steps = [
    { 
      id: 1, 
      title: 'Upload Previous RFPs', 
      subtitle: 'Historical responses',
      icon: '�',
      description: 'Upload reference documents for AI analysis',
      color: 'from-blue-500 to-blue-600'
    },
    { 
      id: 2, 
      title: 'Add Questions', 
      subtitle: 'Paste RFP questions',
      icon: '�',
      description: 'Add questions manually or upload document',
      color: 'from-indigo-500 to-indigo-600'
    },
    { 
      id: 3, 
      title: 'Select Questions', 
      subtitle: 'Choose questions',
      icon: '✅',
      description: 'Select which questions to process',
      color: 'from-purple-500 to-purple-600'
    },
    { 
      id: 4, 
      title: 'AI Processing', 
      subtitle: 'Generate answers',
      icon: '🤖',
      description: 'AI creates responses with citations',
      color: 'from-pink-500 to-pink-600'
    },
    { 
      id: 5, 
      title: 'Review & Edit', 
      subtitle: 'Finalize responses',
      icon: '✏️',
      description: 'Review and edit AI-generated answers',
      color: 'from-orange-500 to-orange-600'
    },
    { 
      id: 6, 
      title: 'Export Document', 
      subtitle: 'Download RFP',
      icon: '📄',
      description: 'Export professional Word document',
      color: 'from-green-500 to-green-600'
    }
  ]
  
  function goToStep(stepId: number) {
    if (stepId <= $currentStep + 1) {
      currentStep.set(stepId)
    }
  }
</script>

<div class="w-96 bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 text-white flex flex-col shadow-2xl relative overflow-hidden">
  <!-- Animated Background -->
  <div class="absolute inset-0 bg-gradient-to-br from-blue-600/10 via-purple-600/5 to-indigo-600/10"></div>
  <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500"></div>
  
  <!-- Logo Section -->
  <div class="relative p-8 border-b border-slate-700/50">
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-16 h-12 bg-black rounded-lg overflow-hidden shadow-lg">
        <img src="/sedna-logo.svg" alt="SEDNA Consulting Group" class="w-full h-full object-contain" />
      </div>
      <div>
        <h1 class="text-2xl font-bold text-white">SEDNA</h1>
        <p class="text-slate-400 text-sm">Consulting Group</p>
      </div>
    </div>
    
    <div class="bg-gradient-to-r from-blue-600/20 to-indigo-600/20 backdrop-blur-sm rounded-xl p-5 border border-blue-500/20">
      <h2 class="text-xl font-bold text-white mb-2">RFP Management</h2>
      <p class="text-blue-200 text-sm leading-relaxed">AI-Powered Response Generation System</p>
      <div class="flex items-center mt-3 space-x-2">
        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        <span class="text-green-300 text-xs font-medium">System Active</span>
      </div>
    </div>
  </div>
  
  <!-- Steps Navigation -->
  <div class="flex-1 p-6 space-y-4 overflow-y-auto">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-slate-300 text-sm font-bold uppercase tracking-wider">Workflow Steps</h3>
      <div class="text-xs text-slate-400 bg-slate-800/50 px-2 py-1 rounded-full">
        {$currentStep} of {steps.length}
      </div>
    </div>
    
    {#each steps as step, index}
      <button 
        class="w-full text-left group relative overflow-hidden transition-all duration-300 {
          $currentStep === step.id 
            ? 'transform scale-105' 
            : 'hover:transform hover:scale-102'
        }"
        on:click={() => goToStep(step.id)}
        disabled={step.id > $currentStep + 1}
      >
        <div class="relative p-5 rounded-2xl transition-all duration-300 {
          $currentStep === step.id 
            ? `bg-gradient-to-r ${step.color} shadow-xl shadow-blue-500/25` 
            : $currentStep > step.id 
              ? 'bg-gradient-to-r from-green-600/20 to-emerald-600/20 border border-green-500/30 hover:from-green-600/30 hover:to-emerald-600/30' 
              : 'bg-slate-800/40 border border-slate-700/50 hover:bg-slate-800/60 hover:border-slate-600'
        }">
          
          <!-- Background Pattern -->
          {#if $currentStep === step.id}
            <div class="absolute inset-0 bg-white/5 opacity-50"></div>
          {/if}
          
          <div class="relative flex items-start space-x-4">
            <!-- Icon -->
            <div class="relative">
              <div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl transition-transform duration-300 {
                $currentStep === step.id 
                  ? 'bg-white/20 scale-110 animate-pulse' 
                  : $currentStep > step.id 
                    ? 'bg-green-500/20 text-green-300'
                    : 'bg-slate-700/50 group-hover:bg-slate-600/50'
              }">
                {#if $currentStep > step.id}
                  ✅
                {:else}
                  {step.icon}
                {/if}
              </div>
              
              <!-- Step Number Badge -->
              <div class="absolute -top-1 -right-1 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold {
                $currentStep === step.id 
                  ? 'bg-white text-blue-600' 
                  : $currentStep > step.id 
                    ? 'bg-green-500 text-white'
                    : 'bg-slate-600 text-slate-300'
              }">
                {step.id}
              </div>
            </div>
            
            <!-- Content -->
            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between mb-1">
                <h4 class="font-bold text-white group-hover:text-blue-200 transition-colors leading-tight {
                  $currentStep === step.id ? 'text-white' : ''
                }">
                  {step.title}
                </h4>
                
                <!-- Status Indicator -->
                {#if $currentStep === step.id}
                  <div class="flex items-center space-x-1">
                    <div class="w-2 h-2 bg-white rounded-full animate-ping"></div>
                    <div class="w-2 h-2 bg-white rounded-full"></div>
                  </div>
                {:else if $currentStep > step.id}
                  <svg class="w-5 h-5 text-green-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                  </svg>
                {/if}
              </div>
              
              <p class="text-sm font-medium mb-2 {
                $currentStep === step.id 
                  ? 'text-blue-100' 
                  : $currentStep > step.id 
                    ? 'text-green-200'
                    : 'text-slate-400'
              }">
                {step.subtitle}
              </p>
              
              <p class="text-xs leading-relaxed {
                $currentStep === step.id 
                  ? 'text-blue-200' 
                  : $currentStep > step.id 
                    ? 'text-green-300'
                    : 'text-slate-500'
              }">
                {step.description}
              </p>
            </div>
          </div>
          
          <!-- Progress Line -->
          {#if index < steps.length - 1}
            <div class="absolute left-11 bottom-0 w-0.5 h-4 {
              $currentStep > step.id 
                ? 'bg-green-400' 
                : $currentStep === step.id 
                  ? 'bg-blue-400'
                  : 'bg-slate-600'
            }"></div>
          {/if}
        </div>
      </button>
    {/each}
  </div>
  
  <!-- Progress Section -->
  <div class="p-6 border-t border-slate-700/50 bg-slate-800/50">
    <div class="mb-4">
      <div class="flex justify-between items-center mb-3">
        <span class="text-slate-300 text-sm font-medium">Overall Progress</span>
        <span class="text-white font-bold text-lg">{Math.round(($currentStep / steps.length) * 100)}%</span>
      </div>
      
      <!-- Progress Bar -->
      <div class="relative w-full bg-slate-700 rounded-full h-3 overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-slate-700 to-slate-600"></div>
        <div 
          class="relative h-full bg-gradient-to-r from-blue-500 via-purple-500 to-indigo-500 rounded-full transition-all duration-700 ease-out shadow-lg"
          style="width: {($currentStep / steps.length) * 100}%"
        >
          <div class="absolute inset-0 bg-white/20 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>
    
    <!-- Stats -->
    <div class="grid grid-cols-3 gap-3 mb-4">
      <div class="text-center p-2 bg-slate-800/50 rounded-lg">
        <div class="text-blue-400 font-bold text-lg">{$currentStep}</div>
        <div class="text-slate-400 text-xs">Current</div>
      </div>
      <div class="text-center p-2 bg-slate-800/50 rounded-lg">
        <div class="text-green-400 font-bold text-lg">{$currentStep - 1}</div>
        <div class="text-slate-400 text-xs">Complete</div>
      </div>
      <div class="text-center p-2 bg-slate-800/50 rounded-lg">
        <div class="text-orange-400 font-bold text-lg">{steps.length - $currentStep}</div>
        <div class="text-slate-400 text-xs">Remaining</div>
      </div>
    </div>
    
    <p class="text-xs text-slate-400 leading-relaxed text-center">
      Follow each step to create professional RFP responses with AI assistance and accurate citations.
    </p>
  </div>
</div>
  
  <!-- Steps Navigation -->
  <div class="flex-1 p-6 space-y-3">
    <h3 class="text-slate-300 text-sm font-medium uppercase tracking-wider mb-4">Workflow Steps</h3>
    
    {#each steps as step}
      <button 
        class="w-full text-left p-4 rounded-xl transition-all duration-200 group {
          $currentStep === step.id 
            ? 'bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg' 
            : $currentStep > step.id 
              ? 'bg-green-600/20 border border-green-500/30 hover:bg-green-600/30' 
              : 'bg-slate-800/50 border border-slate-700 hover:bg-slate-800'
        }"
        on:click={() => goToStep(step.id)}
        disabled={step.id > $currentStep + 1}
      >
        <div class="flex items-start space-x-3">
          <div class="text-2xl mt-1 {
            $currentStep === step.id ? 'animate-pulse' : ''
          }">
            {#if $currentStep > step.id}
              ✅
            {:else}
              {step.icon}
            {/if}
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-center justify-between">
              <h4 class="font-semibold text-white group-hover:text-blue-200 transition-colors truncate">
                {step.title}
              </h4>
              <div class="text-xs px-2 py-1 rounded-full {
                $currentStep === step.id 
                  ? 'bg-white/20 text-white' 
                  : $currentStep > step.id 
                    ? 'bg-green-500/20 text-green-300'
                    : 'bg-slate-700 text-slate-400'
              }">
                {step.id}
              </div>
            </div>
            <p class="text-sm {
              $currentStep === step.id 
                ? 'text-blue-100' 
                : $currentStep > step.id 
                  ? 'text-green-200'
                  : 'text-slate-400'
            } group-hover:text-slate-300 transition-colors">
              {step.subtitle}
            </p>
            <p class="text-xs {
              $currentStep === step.id 
                ? 'text-blue-200' 
                : 'text-slate-500'
            } mt-1 leading-relaxed">
              {step.description}
            </p>
          </div>
        </div>
      </button>
    {/each}
  </div>
  
  <!-- Progress Indicator -->
  <div class="p-6 border-t border-slate-700">
    <div class="mb-3">
      <div class="flex justify-between text-sm">
        <span class="text-slate-400">Progress</span>
        <span class="text-white font-medium">{Math.round(($currentStep / steps.length) * 100)}%</span>
      </div>
      <div class="w-full bg-slate-700 rounded-full h-2 mt-2">
        <div 
          class="bg-gradient-to-r from-blue-500 to-indigo-500 h-2 rounded-full transition-all duration-500 ease-out"
          style="width: {($currentStep / steps.length) * 100}%"
        ></div>
      </div>
    </div>
    <p class="text-xs text-slate-400 leading-relaxed">
      Complete each step to build your professional RFP response with AI assistance and proper citations.
    </p>
</div>