src/components/Header.svelte

<script lang="ts">
  import { currentStep } from '../stores/appStore'
  
  export let onShowRFPManager: () => void = () => {}
  
  const stepTitles = [
    'Upload Current RFP',
    'Add RFP Questions', 
    'AI Processing',
    'Review & Edit',
    'Export Document'
  ]
</script>

<header class="bg-black border-b border-gray-700">
  <div class="flex items-center justify-between px-8 py-4">
    <!-- SEDNA Logo -->
    <div class="flex items-center space-x-6">
      <img src="/sedna-logo.png" alt="SEDNA" class="h-12" />
      <div class="h-8 w-px bg-gray-600"></div>
      <div class="text-gray-300 font-semibold">RFP Management System</div>
    </div>
    
    <!-- Current Step Info -->
    <div class="flex items-center space-x-4">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg flex items-center justify-center text-white font-semibold">
          {$currentStep}
        </div>
        <div>
          <h2 class="text-lg font-semibold text-white">
            Step {$currentStep}: {stepTitles[$currentStep - 1]}
          </h2>
          <p class="text-gray-400 text-sm">
            {#if $currentStep === 1}
              Upload the RFP document you are responding to
            {:else if $currentStep === 2}
              Add questions by pasting text or uploading documents
            {:else if $currentStep === 3}
              Select and prioritize questions for processing
            {:else if $currentStep === 4}
              AI is generating intelligent responses with citations
            {:else if $currentStep === 5}
              Review and edit AI-generated responses
            {:else if $currentStep === 6}
              Export your professional RFP response document
            {/if}
          </p>
        </div>
      </div>
    </div>
    
    <!-- Simple Progress Indicator -->
    <div class="flex items-center space-x-3">
      <span class="text-sm text-gray-400">Progress</span>
      <div class="w-24 bg-gray-700 rounded-full h-2">
        <div 
          class="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-300"
          style="width: {($currentStep / 5) * 100}%"
        ></div>
      </div>
      <span class="text-sm font-medium text-gray-300">{Math.round(($currentStep / 5) * 100)}%</span>
    </div>
  </div>
</header>