src/App.svelte

<script lang="ts">
  import Sidebar from './components/SidebarClean.svelte'
  import Header from './components/Header.svelte'
  import UploadCurrentRFP from './components/UploadCurrentRFP.svelte'
  import QuestionsList from './components/QuestionsList.svelte'
  import AnswerReview from './components/AnswerReview.svelte'
  import FinalDownload from './components/FinalDownload.svelte'
  import RFPManager from './components/RFPManager.svelte'
  import { currentStep, referenceDocuments, questions, answers } from './stores/appStore'
  
  // New components for steps 2 and 3
  import AddQuestions from './components/AddQuestions.svelte'
  
  let showRFPManager = false
</script>

<div class="min-h-screen bg-black flex">
  <!-- Sidebar -->
  <Sidebar />
  
  <!-- Main Content Area -->
  <div class="flex-1 flex flex-col min-h-screen">
    <!-- Header -->
    <Header onShowRFPManager={() => showRFPManager = true} />
    
    <!-- Main Content -->
    <main class="flex-1 bg-black overflow-y-auto">
      <!-- Step 1: Upload Current RFP -->
      {#if $currentStep === 1}
        <div class="p-8">
          <div class="max-w-5xl mx-auto">
            <!-- Upload Section -->
            <div class="bg-gray-800 border border-gray-600 rounded-3xl shadow-2xl p-8">
              <UploadCurrentRFP />
            </div>
            
            <!-- Info Section -->
            <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
              <div class="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-6 text-white shadow-xl border border-blue-500/30">
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-blue-100 text-sm font-medium">Current Step</p>
                    <p class="text-2xl font-bold">Upload RFP Document</p>
                    <p class="text-blue-200 text-sm mt-1">Extract questions automatically</p>
                  </div>
                </div>
              </div>
              
              <div class="bg-gradient-to-r from-gray-700 to-gray-800 rounded-2xl p-6 text-white shadow-xl border border-gray-600/30">
                <div class="flex items-center justify-between">
                  <div>
                    <p class="text-gray-300 text-sm font-medium">Reference Documents</p>
                    <p class="text-2xl font-bold">{$referenceDocuments.length}</p>
                    <p class="text-gray-400 text-sm mt-1">Available for reference</p>
                  </div>
                  <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" clip-rule="evenodd"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {/if}
      
      <!-- Step 2: Add Questions -->
      {#if $currentStep === 2}
        <div class="p-8">
          <div class="max-w-5xl mx-auto">
            <!-- Step Header -->
            <div class="text-center mb-8">
              <p class="text-gray-400 text-lg max-w-2xl mx-auto leading-relaxed">
                Add the questions you need to answer. You can paste them directly or upload a document containing the RFP questions.
              </p>
            </div>
            
            <!-- Add Questions Component -->
            <div class="bg-gray-800 border border-gray-600 rounded-3xl shadow-2xl p-8">
              <AddQuestions />
            </div>
          </div>
        </div>
      {/if}
      
      <!-- Step 3: AI Processing -->
      {#if $currentStep === 3}
        <div class="p-8">
          <div class="max-w-5xl mx-auto">
            <!-- Questions List Component -->
            <div class="bg-gray-800 border border-gray-600 rounded-3xl shadow-2xl p-8">
              <QuestionsList />
            </div>
          </div>
        </div>
      {/if}
      
      <!-- Step 4: Review & Edit -->
      {#if $currentStep === 4}
        <div class="p-8">
          <div class="max-w-5xl mx-auto">
            <!-- Answer Review Component -->
            <div class="bg-gray-800 border border-gray-600 rounded-3xl shadow-2xl p-8">
              <AnswerReview />
            </div>
          </div>
        </div>
      {/if}
      
      <!-- Step 5: Export Document -->
      {#if $currentStep === 5}
        <div class="p-8">
          <div class="max-w-5xl mx-auto">
            <!-- Final Download Component -->
            <div class="bg-gray-800 border border-gray-600 rounded-3xl shadow-2xl p-8">
              <FinalDownload />
            </div>
          </div>
        </div>
      {/if}
    </main>
  </div>
  
  <!-- RFP Manager -->
  <RFPManager bind:visible={showRFPManager} />
</div>

<style>
  :global(.animation-delay-2000) {
    animation-delay: 2s;
  }
  
  :global(.animation-delay-4000) {
    animation-delay: 4s;
  }
  
  :global(body) {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }
  
  :global(*) {
    box-sizing: border-box;
  }
</style>