<div class="space-y-6">
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <h2 class="text-lg font-bold text-slate-900">Billing Readiness</h2>
    <p class="mt-1 text-sm text-slate-500">Read-only view of existing platform billing and firm billing setup readiness.</p>
    {% if not billing.available %}<div class="mt-4 rounded-2xl border border-amber-100 bg-amber-50 p-4 text-sm font-semibold text-amber-800">{{ billing.message }}</div>{% endif %}
  </div>
  <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Platform Plans</div><div class="mt-2 text-2xl font-bold">{{ billing.plan_count }}</div><div class="text-xs text-slate-500">{{ billing.active_plan_count }} active</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Firm Accounts</div><div class="mt-2 text-2xl font-bold">{{ billing.audit_firm_account_count }}</div><div class="text-xs text-slate-500">{{ billing.firms_without_account }} firms without account</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Subscriptions</div><div class="mt-2 text-2xl font-bold text-emerald-700">{{ billing.active_subscription_count }}</div><div class="text-xs text-slate-500">{{ billing.expired_subscription_count }} expired/suspended/cancelled</div></div>
    <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Firm Billing Settings</div><div class="mt-2 text-2xl font-bold">{{ billing.firm_billing_settings }}</div><div class="text-xs text-slate-500">{{ billing.firms_without_billing_settings }} firms pending</div></div>
  </div>
  <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
    <h3 class="font-bold text-slate-900">Actions</h3>
    <div class="mt-4 flex flex-wrap gap-2"><a href="/platform-billing" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Open Platform Billing</a><a href="/billing/settings" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Open Firm Billing Settings</a></div>
  </div>
</div>