@php
    $preview = $statutoryPreview ?? [];
    $previewGross = (float) ($statutoryPreviewGross ?? 50000);
@endphp

<div class="mt-5 grid gap-5 lg:grid-cols-2">
    <div class="rounded-xl border border-slate-200 bg-slate-50 p-5 text-sm text-slate-700">
        <p class="font-medium text-slate-900">How these rates are used</p>
        <p class="mt-2 text-xs leading-relaxed text-slate-600">
            Set once for the organisation. Payroll generation writes NSSF, SHIF, Housing Levy, and PAYE onto each period line.
            Payslips, disbursement, and GL posting copy those stored figures — they do not recalculate rates.
        </p>
        <ol class="mt-3 list-decimal list-inside space-y-1.5 text-xs leading-relaxed">
            <li>Gross = basic salary + allowances + incentives on the employee record.</li>
            <li>NSSF = employee % of pensionable gross (capped at the upper limit; Tier I up to the lower limit, Tier II above it).</li>
            <li>SHIF = employee % of gross, then the monthly minimum if higher.</li>
            <li>Housing Levy = employee % of gross.</li>
            <li>Taxable pay = gross − NSSF − SHIF − Housing Levy.</li>
            <li>PAYE from the bands below, minus personal relief (floored at zero).</li>
        </ol>
        <p class="mt-3 text-xs leading-relaxed text-slate-500">
            HELB, pension, welfare, advances, and other named cuts are not statutory rates.
            Configure them on <a href="{{ route('loan.accounting.payroll.settings.other_deductions') }}" class="font-semibold text-teal-800 hover:underline">Other deductions</a>
            and the employee salary record. Who appears on a run is <strong>Include in HR payroll</strong> on the employee.
        </p>
    </div>

    <div class="rounded-xl border border-slate-200 bg-white p-5 text-sm text-slate-700">
        <p class="font-medium text-slate-900">Worked example</p>
        <p class="mt-1 text-xs text-slate-500">Same calculator as payroll generation. Sample gross KES {{ number_format($previewGross, 0) }} (basic only, no extras).</p>
        <dl class="mt-3 space-y-1.5 text-xs tabular-nums">
            <div class="flex justify-between gap-3"><dt class="text-slate-500">NSSF</dt><dd class="font-semibold">KES {{ number_format((float) ($preview['nssf'] ?? 0), 2) }}</dd></div>
            <div class="flex justify-between gap-3"><dt class="text-slate-500">SHIF</dt><dd class="font-semibold">KES {{ number_format((float) ($preview['shif'] ?? 0), 2) }}</dd></div>
            <div class="flex justify-between gap-3"><dt class="text-slate-500">Housing Levy</dt><dd class="font-semibold">KES {{ number_format((float) ($preview['housing_levy'] ?? 0), 2) }}</dd></div>
            <div class="flex justify-between gap-3"><dt class="text-slate-500">Taxable pay</dt><dd class="font-semibold">KES {{ number_format((float) ($preview['taxable_pay'] ?? 0), 2) }}</dd></div>
            <div class="flex justify-between gap-3"><dt class="text-slate-500">PAYE after relief</dt><dd class="font-semibold">KES {{ number_format((float) ($preview['paye'] ?? 0), 2) }}</dd></div>
            <div class="flex justify-between gap-3 border-t border-slate-100 pt-1.5"><dt class="text-slate-700">Total statutory</dt><dd class="font-bold text-slate-900">KES {{ number_format((float) ($preview['total_statutory_deductions'] ?? 0), 2) }}</dd></div>
        </dl>
    </div>
</div>