frontend/src/components/Quickstart.vue

<script setup>
import { 
  Database, 
  Brain, 
  Sparkles, 
  Zap, 
  CheckCircle2, 
  ArrowRight,
  RefreshCw,
  Activity
} from 'lucide-vue-next';

defineProps({
  universeCount: Number,
  readyFeatures: Number,
  totalFeatures: Number,
  modelCount: Number
});

defineEmits(['openUniverse', 'openTraining', 'openAgentic']);
</script>

<template>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-5 mb-8 md:mb-16">
    <!-- Step 1: Universe -->
    <div 
      @click="$emit('openUniverse', 'universe')"
      class="bg-slate-900/40 border-l-4 border-blue-500 p-4 md:p-6 rounded-2xl md:rounded-3xl hover:bg-slate-800/50 transition-all cursor-pointer group shadow-xl"
    >
      <div class="flex items-center justify-between mb-4">
        <div class="p-2 md:p-3 bg-blue-500/10 rounded-xl md:rounded-2xl">
          <Database class="w-5 h-5 md:w-6 md:h-6 text-blue-500" />
        </div>
        <span v-if="universeCount > 0" class="text-[9px] md:text-[10px] font-black text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded-lg flex items-center gap-1 uppercase tracking-widest">
          <CheckCircle2 class="w-3 h-3" /> {{ universeCount }} Loaded
        </span>
        <span v-else class="text-[9px] md:text-[10px] font-black text-amber-500 bg-amber-500/10 px-2 py-1 rounded-lg uppercase tracking-widest">PHASE 01</span>
      </div>
      <h3 class="font-bold text-white text-base md:text-lg mb-1 group-hover:text-blue-400 transition-colors tracking-tight">Stock Universe</h3>
      <p class="text-[10px] md:text-xs text-slate-500 leading-normal md:leading-relaxed font-medium">Provision stocks for high-frequency learning.</p>
    </div>

    <!-- Step 2: Data Sync -->
    <div 
      @click="$emit('openUniverse', 'sync')"
      class="bg-slate-900/40 border-l-4 border-indigo-500 p-4 md:p-6 rounded-2xl md:rounded-3xl hover:bg-slate-800/50 transition-all cursor-pointer group shadow-xl"
    >
      <div class="flex items-center justify-between mb-4">
        <div class="p-2 md:p-3 bg-indigo-500/10 rounded-xl md:rounded-2xl">
          <RefreshCw class="w-5 h-5 md:w-6 md:h-6 text-indigo-500" />
        </div>
        <div v-if="totalFeatures > 0" class="flex flex-col items-end">
           <span class="text-[9px] font-black text-indigo-400 uppercase tracking-widest">{{ readyFeatures }}/{{ totalFeatures }} VECTORS</span>
           <div class="w-12 h-1 bg-slate-800 rounded-full mt-1.5 overflow-hidden">
              <div class="bg-indigo-500 h-full transition-all duration-700" :style="{width: (readyFeatures/totalFeatures*100) + '%'}"></div>
           </div>
        </div>
        <span v-else class="text-[9px] md:text-[10px] font-black text-amber-500 bg-amber-500/10 px-2 py-1 rounded-lg uppercase tracking-widest">PHASE 02</span>
      </div>
      <h3 class="font-bold text-white text-base md:text-lg mb-1 group-hover:text-indigo-400 transition-colors tracking-tight">Sync Features</h3>
      <p class="text-[10px] md:text-xs text-slate-500 leading-normal md:leading-relaxed font-medium">Encrypt and cache features to the training vault.</p>
    </div>

    <!-- Step 3: Training -->
    <div 
      @click="$emit('openTraining', 'Tech')"
      class="bg-slate-900/40 border-l-4 border-purple-500 p-4 md:p-6 rounded-2xl md:rounded-3xl hover:bg-slate-800/50 transition-all cursor-pointer group shadow-xl"
    >
      <div class="flex items-center justify-between mb-4">
        <div class="p-2 md:p-3 bg-purple-500/10 rounded-xl md:rounded-2xl">
          <Brain class="w-5 h-5 md:w-6 md:h-6 text-purple-500" />
        </div>
        <span v-if="modelCount > 0" class="text-[9px] md:text-[10px] font-black text-emerald-400 bg-emerald-400/10 px-2 py-1 rounded-lg uppercase tracking-widest">
          {{ modelCount }} MODELS LIVE
        </span>
        <span v-else class="text-[9px] md:text-[10px] font-black text-amber-500 bg-amber-500/10 px-2 py-1 rounded-lg uppercase tracking-widest">PHASE 03</span>
      </div>
      <h3 class="font-bold text-white text-base md:text-lg mb-1 group-hover:text-purple-400 transition-colors tracking-tight">Model Builder</h3>
      <p class="text-[10px] md:text-xs text-slate-500 leading-normal md:leading-relaxed font-medium">Orchestrate training cycles across the quadrant.</p>
    </div>

    <!-- Architect -->
    <div 
      @click="$emit('openAgentic')"
      class="bg-slate-900/40 border-l-4 border-emerald-500 p-4 md:p-6 rounded-2xl md:rounded-3xl hover:bg-slate-800/50 transition-all cursor-pointer group shadow-xl"
    >
      <div class="flex items-center justify-between mb-4">
        <div class="p-2 md:p-3 bg-emerald-500/10 rounded-xl md:rounded-2xl">
          <Sparkles class="w-5 h-5 md:w-6 md:h-6 text-emerald-500" />
        </div>
        <div class="flex items-center gap-1.5">
          <div class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-ping"></div>
          <span class="text-[9px] md:text-[10px] font-black text-emerald-400 uppercase tracking-widest">Strategy OPS</span>
        </div>
      </div>
      <h3 class="font-bold text-white text-base md:text-lg mb-1 group-hover:text-emerald-400 transition-colors tracking-tight">Option Strategy Builder</h3>
      <p class="text-[10px] md:text-xs text-slate-500 leading-normal md:leading-relaxed font-medium">Multi-agent parsing for non-linear strategy discovery.</p>
    </div>
  </div>
</template>