<script setup lang="ts">
usePageTitle('Facturación')
</script>

<template>
  <div class="fac-page">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Facturación</h1>
        <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
          Invoicing workflow for the brokerage. Generate, track, and manage invoices tied to policies, commissions, and client accounts. Integrates with carrier billing and AR to keep financials in sync.
        </p>
      </div>
      <span
        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
      >Coming soon</span>
    </div>

    <!-- Feature preview -->
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div class="fac-card">
        <div class="fac-icon" style="background: rgba(1,105,111,0.08); color: #01696f;">
          <UIcon name="i-heroicons-document-text" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="fac-card-title">Invoice generation</h3>
        <p class="fac-card-desc">Create invoices from bound policies, endorsements, or manual entries. Auto-populate client data, premium breakdowns, and tax fields.</p>
      </div>

      <div class="fac-card">
        <div class="fac-icon" style="background: rgba(124,58,237,0.08); color: #7c3aed;">
          <UIcon name="i-heroicons-arrow-path" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="fac-card-title">Recurring billing</h3>
        <p class="fac-card-desc">Schedule monthly, quarterly, or annual invoices for policies with installment plans. Automatic reminders on upcoming due dates.</p>
      </div>

      <div class="fac-card">
        <div class="fac-icon" style="background: rgba(194,123,26,0.08); color: #c27b1a;">
          <UIcon name="i-heroicons-banknotes" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="fac-card-title">Payment tracking</h3>
        <p class="fac-card-desc">Record payments against invoices, mark partial payments, and flag overdue balances. Ties into the collections workstation.</p>
      </div>

      <div class="fac-card">
        <div class="fac-icon" style="background: rgba(15,123,95,0.08); color: #0f7b5f;">
          <UIcon name="i-heroicons-building-office-2" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="fac-card-title">Carrier reconciliation</h3>
        <p class="fac-card-desc">Match brokerage invoices to carrier statements. Surface discrepancies between what was billed and what was remitted.</p>
      </div>

      <div class="fac-card">
        <div class="fac-icon" style="background: rgba(193,56,56,0.08); color: #c13838;">
          <UIcon name="i-heroicons-document-arrow-down" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="fac-card-title">PDF & export</h3>
        <p class="fac-card-desc">Generate branded PDF invoices, export batches to CSV for accounting software, or integrate via API with ERP systems.</p>
      </div>

      <div class="fac-card">
        <div class="fac-icon" style="background: rgba(190,24,93,0.08); color: #be185d;">
          <UIcon name="i-heroicons-chart-bar" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="fac-card-title">Billing analytics</h3>
        <p class="fac-card-desc">Aging reports, collection rates by client segment, revenue recognition dashboards, and commission payout summaries.</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fac-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 64rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.fac-card {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 200ms ease;
}
.fac-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(1,105,111,0.15);
}
.fac-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
}
.fac-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.fac-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
</style>
