// Estrutura de componentes modular e reutilizável
components/
├── licitacoes/
│   ├── LicitacaoCard.vue        // Card individual
│   ├── LicitacaoList.vue        // Lista virtualizada
│   ├── LicitacaoFilters.vue     // Filtros avançados
│   ├── LicitacaoDetails.vue     // Modal detalhes
│   └── LicitacaoMetrics.vue     // KPIs dashboard
│
├── propostas/
│   ├── PropostaForm.vue         // Formulário principal
│   ├── PropostaItemRow.vue      // Linha de item
│   ├── PropostaPricing.vue      // Calculadora preços
│   ├── PropostaSummary.vue      // Resumo lateral
│   └── PropostaSuccess.vue      // Tela sucesso
│
└── shared/
    ├── LoadingState.vue          // Estados de loading
    ├── EmptyState.vue           // Estados vazios
    ├── ErrorBoundary.vue        // Tratamento erros
    └── VirtualScroller.vue      // Lista virtual

// stores/licitacoes.ts
export const useLicitacoesStore = defineStore('licitacoes', {
  state: () => ({
    items: [] as Licitacao[],
    filters: {} as FilterOptions,
    loading: false,
    error: null,
    pagination: {
      page: 1,
      perPage: 20,
      total: 0
    }
  }),

  getters: {
    filteredItems: (state) => {
      // Filtragem otimizada com memoização
    },
    urgentItems: (state) => {
      // Licitações próximas do prazo
    }
  },

  actions: {
    async fetchLicitacoes(filters?: FilterOptions) {
      // Implementação com cache e debounce
    },
    async submitProposta(data: PropostaData) {
      // Envio com retry e offline queue
    }
  }
})

<template>
  <article class="licitacao-card" :class="urgencyClass">
    <!-- Badge de Urgência -->
    <div v-if="isUrgent" class="urgency-badge animate-pulse">
      ⏰ Encerra em {{ hoursLeft }}h
    </div>

    <!-- Header -->
    <header class="card-header">
      <h3 class="title">{{ licitacao.titulo }}</h3>
      <button @click="toggleFavorite" class="favorite-btn">
        <HeartIcon :filled="isFavorite" />
      </button>
    </header>

    <!-- Métricas Principais -->
    <div class="metrics-grid">
      <div class="metric">
        <span class="label">Produtos</span>
        <span class="value">{{ totalItems }}</span>
      </div>
      <div class="metric">
        <span class="label">Volume Total</span>
        <span class="value">{{ formatVolume(totalVolume) }}</span>
      </div>
      <div class="metric">
        <span class="label">Distância</span>
        <span class="value">{{ distance }} km</span>
      </div>
    </div>

    <!-- Progress Bar (tempo restante) -->
    <div class="time-progress">
      <div class="progress-bar" :style="{ width: timeProgress + '%' }"></div>
      <span class="time-label">{{ daysLeft }} dias restantes</span>
    </div>

    <!-- Actions -->
    <footer class="card-actions">
      <button @click="viewDetails" class="btn-secondary">
        Ver Detalhes
      </button>
      <button @click="startProposal" class="btn-primary">
        Enviar Proposta →
      </button>
    </footer>
  </article>
</template>

<style scoped>
/* Design tokens e animações */
.urgency-badge {
  @apply bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold;
  animation: pulse 2s infinite;
}

.time-progress {
  @apply relative h-2 bg-gray-200 rounded-full overflow-hidden;
}

.progress-bar {
  @apply absolute h-full bg-gradient-to-r from-green-400 to-green-600;
  transition: width 0.3s ease;
}
</style>

<template>
  <div class="proposta-container">
    <!-- Sidebar Fixa com Resumo -->
    <aside class="proposta-sidebar">
      <div class="sticky top-4">
        <!-- Info da Licitação -->
        <div class="licitacao-info">
          <h3>{{ licitacao.titulo }}</h3>
          <p class="text-sm text-gray-600">
            Produtor: {{ licitacao.produtor.nome }}
          </p>
        </div>

        <!-- Resumo em Tempo Real -->
        <div class="summary-card">
          <h4>Resumo da Proposta</h4>

          <div class="summary-items">
            <div v-for="item in proposalItems" :key="item.id" class="summary-item">
              <span>{{ item.produto }}</span>
              <span class="font-bold">{{ formatCurrency(item.subtotal) }}</span>
            </div>
          </div>

          <div class="summary-total">
            <span>Total Geral</span>
            <span class="text-2xl font-bold text-green-600">
              {{ formatCurrency(totalGeral) }}
            </span>
          </div>

          <!-- Indicadores de Competitividade -->
          <div class="competitiveness">
            <div class="indicator" :class="competitivenessClass">
              {{ competitivenessLabel }}
            </div>
            <p class="text-xs text-gray-500 mt-1">
              Baseado em {{ totalPropostas }} propostas anteriores
            </p>
          </div>
        </div>

        <!-- Botões de Ação -->
        <div class="sidebar-actions">
          <button @click="saveDraft" class="btn-secondary w-full">
            💾 Salvar Rascunho
          </button>
          <button @click="submitProposal" class="btn-primary w-full">
            ✅ Enviar Proposta
          </button>
        </div>
      </div>
    </aside>

    <!-- Formulário Principal -->
    <main class="proposta-form">
      <!-- Progress Steps -->
      <div class="progress-steps">
        <div v-for="(step, index) in steps" :key="step.id"
             class="step" :class="{ active: currentStep === index }">
          <div class="step-number">{{ index + 1 }}</div>
          <span class="step-label">{{ step.label }}</span>
        </div>
      </div>

      <!-- Step 1: Itens e Preços -->
      <section v-if="currentStep === 0" class="form-section">
        <h2>Produtos e Preços</h2>

        <div class="items-table">
          <table class="w-full">
            <thead>
              <tr>
                <th>Produto</th>
                <th>Quantidade</th>
                <th>Unidade</th>
                <th>Preço Unit.</th>
                <th>Subtotal</th>
                <th>Ações</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in items" :key="item.id" class="item-row">
                <td>
                  <div class="product-info">
                    <span class="font-medium">{{ item.produto.nome }}</span>
                    <span class="text-xs text-gray-500">{{ item.produto.marca }}</span>
                  </div>
                </td>
                <td>{{ formatNumber(item.quantidade) }}</td>
                <td>{{ item.unidade }}</td>
                <td>
                  <div class="price-input-group">
                    <span class="currency">R$</span>
                    <input
                      v-model.number="item.preco_unitario"
                      @input="calculateSubtotal(item)"
                      type="number"
                      step="0.01"
                      class="price-input"
                      :class="{ 'has-suggestion': item.hasSuggestion }"
                    />
                    <!-- Sugestão de Preço IA -->
                    <button v-if="item.hasSuggestion"
                            @click="applySuggestion(item)"
                            class="suggestion-btn"
                            title="Preço sugerido pela IA">
                      🤖 {{ formatCurrency(item.suggestedPrice) }}
                    </button>
                  </div>
                </td>
                <td class="subtotal">
                  {{ formatCurrency(item.subtotal) }}
                </td>
                <td>
                  <button @click="toggleItemDetails(item)" class="btn-icon">
                    <InfoIcon />
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Auto-save Indicator -->
        <div v-if="autoSaving" class="auto-save-indicator">
          <LoadingSpinner size="small" />
          Salvando automaticamente...
        </div>
      </section>

      <!-- Step 2: Condições Comerciais -->
      <section v-if="currentStep === 1" class="form-section">
        <h2>Condições Comerciais</h2>

        <div class="form-grid">
          <!-- Prazo de Entrega -->
          <div class="form-group">
            <label>Prazo de Entrega</label>
            <div class="input-group">
              <input v-model.number="condicoes.prazo_entrega"
                     type="number"
                     min="1"
                     class="form-input">
              <select v-model="condicoes.prazo_unidade" class="form-select">
                <option value="dias">Dias</option>
                <option value="semanas">Semanas</option>
              </select>
            </div>
          </div>

          <!-- Forma de Pagamento -->
          <div class="form-group">
            <label>Forma de Pagamento</label>
            <select v-model="condicoes.forma_pagamento" class="form-select">
              <option value="avista">À Vista</option>
              <option value="30dias">30 dias</option>
              <option value="30-60dias">30/60 dias</option>
              <option value="30-60-90dias">30/60/90 dias</option>
              <option value="safra">Pagamento na Safra</option>
            </select>
          </div>

          <!-- Validade da Proposta -->
          <div class="form-group">
            <label>Validade da Proposta</label>
            <div class="input-group">
              <input v-model.number="condicoes.validade_proposta"
                     type="number"
                     min="1"
                     class="form-input">
              <span class="input-addon">dias</span>
            </div>
          </div>
        </div>

        <!-- Observações -->
        <div class="form-group">
          <label>Observações Gerais</label>
          <textarea v-model="condicoes.observacoes"
                    rows="4"
                    class="form-textarea"
                    placeholder="Adicione informações relevantes sobre a proposta...">
          </textarea>
          <p class="char-counter">{{ condicoes.observacoes.length }}/500</p>
        </div>
      </section>

      <!-- Navigation -->
      <div class="form-navigation">
        <button v-if="currentStep > 0" @click="previousStep" class="btn-outline">
          ← Anterior
        </button>
        <button v-if="currentStep < steps.length - 1" @click="nextStep" class="btn-primary">
          Próximo →
        </button>
      </div>
    </main>
  </div>
</template>

// Tasks:
- [ ] Configurar Pinia stores
- [ ] Implementar composables base
- [ ] Setup error handling global
- [ ] Configurar interceptors API

// Deliverables:
- Store de licitações funcional
- Sistema de notificações toast
- Error boundaries implementados

// Tasks:
- [ ] Integrar API getDashboard()
- [ ] Implementar cards de métricas
- [ ] Adicionar gráficos (Chart.js)
- [ ] Loading e error states

// Deliverables:
- Dashboard com dados reais
- Métricas atualizando real-time
- Gráficos interativos

// Tasks:
- [ ] Virtual scrolling
- [ ] Filtros server-side
- [ ] Paginação infinita
- [ ] Favoritos local storage

// Deliverables:
- Lista performática
- Filtros funcionais
- Sistema de favoritos

// Tasks:
- [ ] Estrutura multi-step
- [ ] Validação com Yup
- [ ] Auto-save drafts
- [ ] Calculadora de preços

// Deliverables:
- Form wizard funcional
- Validação robusta
- Rascunhos automáticos

// Tasks:
- [ ] Upload de documentos
- [ ] Preview de arquivos
- [ ] Compressão client-side
- [ ] Progress indicators

// Deliverables:
- Upload drag-and-drop
- Preview inline
- Barra de progresso

// Tasks:
- [ ] Unit tests (Vitest)
- [ ] E2E tests (Playwright)
- [ ] Performance audit
- [ ] Acessibilidade (WCAG)

// Deliverables:
- Coverage > 80%
- Lighthouse > 90
- WCAG AA compliance

// composables/useDashboardMetrics.ts
export const useDashboardMetrics = () => {
  const api = useFornecedorApi()
  const { $pusher } = useNuxtApp() // WebSocket

  const metrics = ref<DashboardMetrics>({
    licitacoesAtivas: 0,
    propostasEnviadas: 0,
    taxaConversao: 0,
    valorTotal: 0
  })

  const isLoading = ref(false)
  const error = ref<Error | null>(null)

  // Fetch inicial
  const fetchMetrics = async () => {
    isLoading.value = true
    try {
      const { data } = await api.getDashboard()
      metrics.value = data.metricas

      // Animar números (count-up effect)
      animateNumbers(metrics.value)
    } catch (e) {
      error.value = e as Error
      // Toast de erro
      useToast().error('Erro ao carregar métricas')
    } finally {
      isLoading.value = false
    }
  }

  // Real-time updates
  const subscribeToUpdates = () => {
    $pusher.subscribe('fornecedor.${userId}')
      .bind('metrics.updated', (data: DashboardMetrics) => {
        // Merge com animação suave
        Object.keys(data).forEach(key => {
          animateValue(metrics.value[key], data[key])
        })
      })
  }

  // Animação de números
  const animateValue = (start: number, end: number, duration = 1000) => {
    const range = end - start
    const increment = range / (duration / 16) // 60 FPS
    let current = start

    const timer = setInterval(() => {
      current += increment
      if ((increment > 0 && current >= end) || (increment < 0 && current <= end)) {
        current = end
        clearInterval(timer)
      }
      // Atualizar valor reativo
    }, 16)
  }

  onMounted(() => {
    fetchMetrics()
    subscribeToUpdates()
  })

  return {
    metrics,
    isLoading,
    error,
    refresh: fetchMetrics
  }
}

<!-- components/dashboard/MetricCard.vue -->
<template>
  <div class="metric-card" :class="[variantClass, { 'is-loading': loading }]">
    <!-- Skeleton Loading -->
    <template v-if="loading">
      <div class="skeleton skeleton-title"></div>
      <div class="skeleton skeleton-value"></div>
      <div class="skeleton skeleton-trend"></div>
    </template>

    <!-- Conteúdo Real -->
    <template v-else>
      <!-- Ícone e Título -->
      <div class="metric-header">
        <component :is="icon" class="metric-icon" />
        <h3 class="metric-title">{{ title }}</h3>

        <!-- Info Tooltip -->
        <Tooltip v-if="tooltip">
          <InfoIcon class="w-4 h-4 text-gray-400" />
          <template #content>
            {{ tooltip }}
          </template>
        </Tooltip>
      </div>

      <!-- Valor Principal -->
      <div class="metric-value">
        <AnimatedNumber
          :value="value"
          :format="format"
          :duration="1000"
          class="text-3xl font-bold"
        />
      </div>

      <!-- Trend Indicator -->
      <div v-if="trend" class="metric-trend" :class="trendClass">
        <TrendIcon :direction="trend.direction" />
        <span>{{ trend.value }}%</span>
        <span class="text-xs text-gray-500">vs {{ trend.period }}</span>
      </div>

      <!-- Mini Gráfico -->
      <div v-if="sparkline" class="metric-sparkline">
        <Sparkline :data="sparkline" :color="color" />
      </div>

      <!-- Call to Action -->
      <button v-if="action" @click="action.handler" class="metric-action">
        {{ action.label }}
        <ArrowRightIcon class="w-4 h-4" />
      </button>
    </template>
  </div>
</template>

<script setup lang="ts">
// Props com defaults inteligentes
interface Props {
  title: string
  value: number
  format?: 'number' | 'currency' | 'percentage'
  icon?: Component
  color?: 'primary' | 'success' | 'warning' | 'danger'
  trend?: {
    value: number
    direction: 'up' | 'down' | 'stable'
    period: string
  }
  sparkline?: number[]
  tooltip?: string
  action?: {
    label: string
    handler: () => void
  }
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  format: 'number',
  color: 'primary',
  loading: false
})

// Computed classes
const variantClass = computed(() => `metric-card--${props.color}`)
const trendClass = computed(() => ({
  'text-green-600': props.trend?.direction === 'up' && props.trend.value > 0,
  'text-red-600': props.trend?.direction === 'down' && props.trend.value < 0,
  'text-gray-600': props.trend?.direction === 'stable'
}))
</script>

// composables/usePropostaForm.ts
export const usePropostaForm = (licitacaoId: string) => {
  const api = useFornecedorApi()
  const storage = useLocalStorage(`proposta-draft-${licitacaoId}`, {})

  // Estado do formulário
  const form = reactive({
    items: [] as PropostaItem[],
    condicoes: {
      prazo_entrega: 7,
      prazo_unidade: 'dias',
      forma_pagamento: 'avista',
      validade_proposta: 30,
      observacoes: ''
    },
    documentos: [] as File[]
  })

  // Validação com Yup
  const schema = yup.object().shape({
    items: yup.array().of(
      yup.object().shape({
        produto_id: yup.number().required(),
        preco_unitario: yup.number().positive().required('Preço é obrigatório'),
        quantidade: yup.number().positive().required()
      })
    ).min(1, 'Adicione pelo menos um item'),
    condicoes: yup.object().shape({
      prazo_entrega: yup.number().positive().required(),
      forma_pagamento: yup.string().required()
    })
  })

  // Auto-save com debounce
  const { pause, resume } = useIntervalFn(() => {
    saveDraft()
  }, 30000) // A cada 30 segundos

  watch(form, useDebounceFn(() => {
    saveDraft()
  }, 2000), { deep: true }) // Ou 2s após mudanças

  const saveDraft = async () => {
    storage.value = toRaw(form)

    // Visual feedback
    const toast = useToast()
    toast.info('Rascunho salvo automaticamente', {
      duration: 1000,
      icon: '💾'
    })
  }

  // Cálculos em tempo real
  const totals = computed(() => {
    return form.items.reduce((acc, item) => {
      const subtotal = item.preco_unitario * item.quantidade
      return {
        items: acc.items + 1,
        quantidade: acc.quantidade + item.quantidade,
        valor: acc.valor + subtotal
      }
    }, { items: 0, quantidade: 0, valor: 0 })
  })

  // Sugestão de preços com IA
  const getSuggestedPrice = async (item: PropostaItem) => {
    try {
      const { data } = await api.post('/ai/price-suggestion', {
        produto_id: item.produto_id,
        quantidade: item.quantidade,
        regiao: form.regiao
      })

      return data.suggested_price
    } catch (error) {
      console.error('Erro ao obter sugestão:', error)
      return null
    }
  }

  // Submit com validação
  const submit = async () => {
    try {
      // Validar
      await schema.validate(form, { abortEarly: false })

      // Confirmar envio
      const confirmed = await useConfirm({
        title: 'Confirmar Envio da Proposta',
        message: `Valor total: ${formatCurrency(totals.value.valor)}`,
        confirmText: 'Enviar Proposta',
        type: 'success'
      })

      if (!confirmed) return

      // Enviar
      const { data, error } = await api.criarProposta({
        licitacao_id: licitacaoId,
        ...form
      })

      if (error) throw error

      // Limpar draft
      storage.value = null

      // Feedback de sucesso
      await useSuccess({
        title: 'Proposta Enviada!',
        message: 'Sua proposta foi enviada com sucesso.',
        actions: [
          {
            label: 'Ver Proposta',
            handler: () => navigateTo(`/propostas/${data.id}`)
          },
          {
            label: 'Voltar às Licitações',
            handler: () => navigateTo('/licitacoes')
          }
        ]
      })

    } catch (error) {
      if (error instanceof yup.ValidationError) {
        // Mostrar erros de validação
        error.errors.forEach(err => {
          useToast().error(err)
        })
      } else {
        useToast().error('Erro ao enviar proposta')
      }
    }
  }

  return {
    form,
    totals,
    saveDraft,
    getSuggestedPrice,
    submit
  }
}

<!-- components/proposta/PriceInput.vue -->
<template>
  <div class="price-input-container">
    <!-- Input Principal -->
    <div class="price-input-wrapper">
      <span class="currency-symbol">R$</span>
      <input
        v-model.number="modelValue"
        @input="handleInput"
        @focus="showSuggestion = true"
        type="number"
        step="0.01"
        :min="0"
        class="price-input"
        :class="{
          'has-suggestion': hasSuggestion,
          'is-competitive': isCompetitive,
          'is-expensive': isExpensive
        }"
      />

      <!-- Indicador de Competitividade -->
      <div v-if="modelValue" class="competitiveness-indicator">
        <div class="indicator-bar">
          <div class="indicator-fill" :style="{ width: competitivenessScore + '%' }"></div>
          <div class="indicator-marker" :style="{ left: competitivenessScore + '%' }"></div>
        </div>
        <span class="indicator-label">{{ competitivenessLabel }}</span>
      </div>
    </div>

    <!-- Sugestão IA -->
    <Transition name="slide">
      <div v-if="showSuggestion && suggestion" class="suggestion-box">
        <div class="suggestion-header">
          <RobotIcon class="w-5 h-5 text-blue-500" />
          <span>Sugestão IA</span>
        </div>

        <div class="suggestion-content">
          <div class="suggested-price">
            {{ formatCurrency(suggestion.price) }}
            <button @click="applySuggestion" class="apply-btn">
              Aplicar
            </button>
          </div>

          <div class="suggestion-details">
            <p class="text-xs text-gray-600">
              Baseado em {{ suggestion.samples }} cotações similares
            </p>
            <p class="text-xs">
              Faixa: {{ formatCurrency(suggestion.min) }} - {{ formatCurrency(suggestion.max) }}
            </p>
          </div>

          <!-- Insights -->
          <div class="suggestion-insights">
            <div v-for="insight in suggestion.insights" :key="insight.id"
                 class="insight" :class="insight.type">
              <component :is="insight.icon" class="w-4 h-4" />
              <span>{{ insight.message }}</span>
            </div>
          </div>
        </div>
      </div>
    </Transition>

    <!-- Histórico de Preços (Gráfico Mini) -->
    <div v-if="showHistory" class="price-history">
      <MiniChart
        :data="priceHistory"
        :current="modelValue"
        height="60"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
interface Suggestion {
  price: number
  min: number
  max: number
  samples: number
  confidence: number
  insights: Array<{
    id: string
    type: 'info' | 'warning' | 'success'
    icon: Component
    message: string
  }>
}

const props = defineProps<{
  modelValue: number
  productId: number
  quantity: number
}>()

const emit = defineEmits<{
  'update:modelValue': [value: number]
}>()

// Estado
const showSuggestion = ref(false)
const suggestion = ref<Suggestion | null>(null)
const priceHistory = ref<number[]>([])
const loading = ref(false)

// Buscar sugestão
const fetchSuggestion = async () => {
  loading.value = true
  try {
    const { data } = await useFornecedorApi().getSuggestedPrice({
      product_id: props.productId,
      quantity: props.quantity
    })

    suggestion.value = data

    // Adicionar insights contextuais
    suggestion.value.insights = generateInsights(data)
  } finally {
    loading.value = false
  }
}

// Gerar insights inteligentes
const generateInsights = (data: Suggestion) => {
  const insights = []

  // Comparação com média
  if (props.modelValue && data.price) {
    const diff = ((props.modelValue - data.price) / data.price) * 100

    if (Math.abs(diff) < 5) {
      insights.push({
        type: 'success',
        icon: CheckCircleIcon,
        message: 'Preço alinhado com o mercado'
      })
    } else if (diff > 15) {
      insights.push({
        type: 'warning',
        icon: AlertCircleIcon,
        message: 'Preço acima da média do mercado'
      })
    } else if (diff < -15) {
      insights.push({
        type: 'info',
        icon: InfoCircleIcon,
        message: 'Preço muito competitivo'
      })
    }
  }

  // Volume
  if (props.quantity > 1000) {
    insights.push({
      type: 'info',
      icon: TruckIcon,
      message: 'Volume alto pode justificar desconto'
    })
  }

  return insights
}

// Competitividade
const competitivenessScore = computed(() => {
  if (!props.modelValue || !suggestion.value) return 50

  const { min, max } = suggestion.value
  const range = max - min
  const position = props.modelValue - min

  return Math.max(0, Math.min(100, (position / range) * 100))
})

const competitivenessLabel = computed(() => {
  const score = competitivenessScore.value
  if (score < 30) return '💚 Muito Competitivo'
  if (score < 50) return '👍 Competitivo'
  if (score < 70) return '⚡ Na Média'
  if (score < 85) return '⚠️ Acima da Média'
  return '🔴 Caro'
})

// Aplicar sugestão
const applySuggestion = () => {
  if (!suggestion.value) return

  // Animar mudança
  animateValue(props.modelValue, suggestion.value.price, 500)
  emit('update:modelValue', suggestion.value.price)

  // Feedback
  useToast().success('Preço sugerido aplicado')
  showSuggestion.value = false
}

// Carregar sugestão ao montar
onMounted(() => {
  fetchSuggestion()
})
</script>

Performance:
  First Input Delay (FID): < 100ms
  Largest Contentful Paint (LCP): < 2.5s
  Cumulative Layout Shift (CLS): < 0.1
  Time to First Byte (TTFB): < 600ms

Qualidade:
  Test Coverage: > 85%
  Code Complexity: < 10 (Cyclomatic)
  Bundle Size: < 250kb gzipped
  Accessibility Score: > 95 (axe-core)

Confiabilidade:
  Error Rate: < 0.1%
  Uptime: 99.95%
  API Response Time: < 200ms p95
  Crash-free Sessions: > 99.9%

Conversão:
  Taxa de Conclusão de Proposta: > 80%
  Tempo Médio para Enviar Proposta: < 5 min
  Taxa de Rejeição: < 20%
  Propostas por Fornecedor/Mês: > 10

Engajamento:
  Daily Active Users (DAU): > 60%
  Sessions per User: > 3/dia
  Feature Adoption Rate: > 70%
  Net Promoter Score (NPS): > 50

Frontend Developer Senior: 160h x R$150 = R$24.000
Backend Developer: 80h x R$120 = R$9.600
UX Designer: 40h x R$100 = R$4.000
QA Engineer: 40h x R$80 = R$3.200
DevOps: 20h x R$120 = R$2.400

Total RH: R$43.200

Vercel (Frontend): R$0 (Free tier)
AWS/GCP (Backend): R$500/mês
Monitoring (Sentry): R$100/mês
Analytics: R$200/mês
CI/CD: R$50/mês

Total Infra (3 meses): R$2.550

Aumento de Fornecedores Ativos: +50% (R$100k/mês em taxas)
Redução de Suporte: -30% (R$15k/mês economia)
Aumento de Conversão: +25% (R$50k/mês adicional)

Payback: < 2 meses
ROI 12 meses: 400%+