@php
    $wrapperClass = $wrapperClass ?? 'bg-white border border-[#ECECEC] rounded-2xl p-4 w-full min-w-0 self-start shadow-sm';
    $onTreasuryPage = $onTreasuryPage ?? false;
@endphp
<article class="{{ $wrapperClass }} @container min-w-0">
    <div class="flex items-start justify-between gap-2 min-w-0">
        <div class="min-w-0 flex-1">
            <h2 class="font-semibold text-[#111111]">Company Treasury Summary</h2>
            @if ($onTreasuryPage)
                <p class="text-[11px] text-[#7B7B7B] mt-0.5">Same headline figures as on Accounts &amp; Earnings; detail and movement history follow below.</p>
            @endif
        </div>
        <button type="button" @click="showInfo('treasury')" class="h-6 w-6 shrink-0 rounded-full border border-[#ECECEC] text-xs font-medium text-[#012169] hover:bg-[#FAFBFE]" title="About this summary">i</button>
    </div>
    <p class="mt-3 text-xl sm:text-2xl font-bold text-[#012169] tabular-nums tracking-tight break-words" x-text="money(treasury.operational_reserve)"></p>
    <p class="text-xs text-[#7B7B7B] mt-2 leading-relaxed">Firm treasury base from your routed deals, settlements, and linked reserve throughput. Your mandate accrual is <span class="font-semibold text-[#4A4A4A]" x-text="treasury.participation_rate_label || '3%'"></span> of this base — <span class="font-semibold text-[#4A4A4A] break-words" x-text="money(treasury.your_earnings_share_usd)"></span> cumulative participation attribution (not your remaining mandate cash balance; see <strong class="font-medium text-[#4A4A4A]">Current mandate balance</strong> on the mandate snapshot).</p>
    <p class="text-xs text-[#7B7B7B] mt-1.5">Exposure: <span class="font-medium text-[#4A4A4A]" x-text="money(treasury.active_exposure)"></span></p>
    <p class="text-xs text-emerald-700 mt-1.5 font-medium">Settlement activity: <span x-text="treasury.settlement_indicator"></span> in last 24h</p>
    @include('partials.stripe-powered-financial-rail', ['variant' => 'compact', 'class' => 'mt-3'])
    <div class="mt-4 flex flex-wrap gap-2">
        @if ($onTreasuryPage)
            <a href="{{ route('accounts') }}" class="h-9 px-3 rounded-lg border border-[#ECECEC] bg-[#FAFBFE] text-xs font-medium text-[#012169] grid place-items-center hover:border-[#012169]/35 transition-colors">Accounts overview</a>
        @else
            <a href="{{ route('treasury') }}" class="h-9 px-3 rounded-lg border border-[#ECECEC] bg-[#FAFBFE] text-xs font-medium text-[#012169] grid place-items-center hover:border-[#012169]/35 transition-colors">View Treasury</a>
        @endif
        <a href="{{ route('settlements') }}" class="h-9 px-3 rounded-lg border border-[#ECECEC] bg-[#FAFBFE] text-xs font-medium text-[#012169] grid place-items-center hover:border-[#012169]/35 transition-colors">View Settlements</a>
    </div>
    <div class="mt-5 pt-4 border-t border-[#ECECEC]">
        <div class="flex items-start justify-between gap-2">
            <div>
                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-amber-800">Spotlight — top 5 payments</h3>
                <p class="text-[10px] text-[#7B7B7B] mt-0.5 leading-snug max-w-md">Largest executed ledger movements by amount. Stars mark relative rank.</p>
            </div>
            <span class="text-amber-400 text-lg leading-none select-none shrink-0" title="Top performers" aria-hidden="true">★</span>
        </div>
        <ol class="mt-3 space-y-2.5 shrink-0">
            <template x-for="row in (treasury.top_payments || [])" :key="row.rank + '-' + row.detail">
                <li class="rounded-xl border border-amber-100/90 bg-gradient-to-br from-amber-50/90 to-white px-3 py-2.5 flex flex-col gap-2 @md:flex-row @md:items-start @md:gap-3">
                    <div class="flex items-start gap-3 min-w-0 flex-1">
                    <div class="flex flex-col items-center shrink-0 pt-0.5">
                        <span class="inline-flex h-7 min-w-[1.75rem] px-1.5 items-center justify-center rounded-lg bg-amber-500 text-white text-xs font-bold" x-text="'#' + row.rank"></span>
                        <span class="mt-1 text-amber-500 text-xs leading-none tracking-tight" :title="'Rank ' + row.rank + ' of your largest movements'" x-text="treasuryRankStars(row.rank)"></span>
                    </div>
                    <div class="min-w-0 flex-1">
                        <p class="text-xs font-semibold text-[#111111] leading-snug break-words" x-text="row.label"></p>
                        <p class="text-[10px] text-[#7B7B7B] mt-0.5 font-mono break-all" x-text="row.detail"></p>
                        <p class="text-[10px] text-[#9A9A9A] mt-0.5" x-text="row.executed"></p>
                    </div>
                    </div>
                    <p class="text-xs font-bold text-emerald-800 tabular-nums pl-10 @md:pl-0 @md:shrink-0 @md:text-right" x-text="money(row.amount)"></p>
                </li>
            </template>
        </ol>
        <p class="text-[11px] text-[#7B7B7B] mt-3" x-show="!(treasury.top_payments && treasury.top_payments.length)">No executed payments on file yet — treasury totals will still reflect configured exposure.</p>
    </div>
    <div class="mt-5 pt-4 border-t border-[#ECECEC]" x-show="(treasury.recent_ledger_credits_to_reserve || []).length" x-cloak>
        <div class="flex items-start justify-between gap-2">
            <div>
                <h3 class="text-[11px] font-semibold uppercase tracking-wide text-[#6F6F6F]">Latest credits to Company Treasury</h3>
                <p class="text-[10px] text-[#7B7B7B] mt-0.5 leading-snug max-w-md">Executed ledger credits <strong class="font-medium text-[#4A4A4A]">into</strong> your {{ strtolower(\App\Support\LinkedReserveConfig::displayName()) }} (linked reserve). Mandate headline accruals post on the mandate card, not here.</p>
            </div>
        </div>
        <ul class="mt-2 space-y-1.5 list-none p-0 m-0">
            <template x-for="c in (treasury.recent_ledger_credits_to_reserve || [])" :key="String(c.posted_at_iso) + '-' + String(c.amount_usd) + '-' + String(c.context_label)">
                <li class="text-xs text-[#4A4A4A] flex flex-col gap-0.5 @md:flex-row @md:flex-wrap @md:gap-x-1.5 @md:gap-y-0.5 @md:items-baseline">
                    <span class="font-semibold text-[#012169] tabular-nums" x-text="money(c.amount_usd)"></span>
                    <span class="text-[#7B7B7B]">·</span>
                    <span class="min-w-0" x-text="c.context_label"></span>
                    <span class="text-[#7B7B7B]">·</span>
                    <span class="text-[#7B7B7B]" x-text="formatWhen(c.posted_at_iso)"></span>
                </li>
            </template>
        </ul>
    </div>
</article>