<script setup lang="ts">
usePageTitle('Business Analytics')

const domains = [
  { id: 'production', label: 'Producción' },
  { id: 'claims', label: 'Siniestros' },
  { id: 'pipeline', label: 'Pipeline' },
  { id: 'service', label: 'Servicio' },
]

const activeDomain = ref('production')
</script>

<template>
  <div class="space-y-6">
    <div>
      <h1 class="text-2xl font-semibold text-[var(--text-primary)]">Business Analytics</h1>
      <p class="text-[var(--text-muted)] mt-1">Track production, claims, pipeline, and service metrics</p>
    </div>

    <!-- Domain tabs -->
    <div class="flex gap-2">
      <button
        v-for="domain in domains"
        :key="domain.id"
        type="button"
        class="px-4 py-2 rounded-lg font-medium transition-colors"
        :class="activeDomain === domain.id ? 'bg-[var(--brand)] text-white' : 'bg-[var(--surface)] text-[var(--text-muted)] hover:bg-[var(--card-border)]'"
        @click="activeDomain = domain.id"
      >
        {{ domain.label }}
      </button>
    </div>

    <!-- Empty state -->
    <div class="border border-[var(--card-border)] rounded-lg p-12 text-center">
      <UIcon name="i-heroicons-chart-bar" class="w-16 h-16 mx-auto text-[var(--text-muted)] mb-4" />
      <h3 class="text-lg font-medium text-[var(--text-primary)] mb-2">Analytics unavailable</h3>
      <p class="text-[var(--text-muted)]">Analytics data will be available once you have policies and quotes in the system.</p>
    </div>
  </div>
</template>
