<script setup lang="ts">
usePageTitle('Providers · Settings')

const bullets = [
  'Create and maintain carrier legal identity, contacts, and RUC for reporting.',
  'Upload solicitation PDF templates per policy type — fields are discovered after upload.',
  'Activate or pause a carrier when you pause quoting or renew credential rotation.'
] as const
</script>

<template>
  <div class="mx-auto max-w-4xl space-y-8">
    <div>
      <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">
        Providers &amp; carriers
      </h1>
      <p class="mt-2 max-w-2xl text-[14px] leading-relaxed text-[var(--text-muted)]">
        Operational directory for insurance carriers. This is the same provider list used across quotes,
        onboarding, and policy book — configure templates and status per carrier from detail pages.
      </p>
    </div>

    <UAlert
      color="primary"
      variant="soft"
      icon="i-heroicons-information-circle"
      title="Brokerage-wide carrier setup"
      description="Provider records are shared across the workspace. Changes here affect new business, renewals, and form routing."
    />

    <div class="grid gap-4 sm:grid-cols-2">
      <NuxtLink
        to="/providers"
        class="group rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-5 shadow-sm ring-1 ring-[var(--card-border)]/40 transition hover:border-[var(--brand)]/30 hover:shadow-md"
      >
        <div class="flex items-start gap-3">
          <div class="inline-flex rounded-lg bg-[var(--brand-faint)] p-2 text-[var(--brand)] ring-1 ring-[var(--brand)]/10">
            <UIcon name="i-heroicons-building-office-2" class="h-6 w-6" />
          </div>
          <div>
            <p class="font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)]">Browse providers</p>
            <p class="mt-1 text-sm text-[var(--text-muted)]">Search, filter, and open a carrier profile.</p>
          </div>
        </div>
      </NuxtLink>
      <NuxtLink
        to="/providers/new"
        class="group rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-5 shadow-sm ring-1 ring-[var(--card-border)]/40 transition hover:border-[var(--brand)]/30 hover:shadow-md"
      >
        <div class="flex items-start gap-3">
          <div class="inline-flex rounded-lg bg-emerald-50 p-2 text-emerald-700 ring-1 ring-emerald-100/80">
            <UIcon name="i-heroicons-plus-circle" class="h-6 w-6" />
          </div>
          <div>
            <p class="font-semibold text-[var(--text-primary)] group-hover:text-[var(--brand)]">New provider</p>
            <p class="mt-1 text-sm text-[var(--text-muted)]">Add a carrier before attaching templates or quotes.</p>
          </div>
        </div>
      </NuxtLink>
    </div>

    <div class="rounded-xl border border-[var(--card-border)] bg-[var(--surface)] p-6 shadow-sm ring-1 ring-[var(--card-border)]/40">
      <h2 class="text-sm font-semibold text-[var(--text-primary)]">What you configure per carrier</h2>
      <ul class="mt-4 list-inside list-disc space-y-2 text-sm text-[var(--text-muted)]">
        <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
      </ul>
      <p class="mt-4 text-sm text-[var(--text-muted)]">
        Open any provider from the list to manage templates, credentials, and activity — the detail view is
        the operational control surface.
      </p>
    </div>
  </div>
</template>
