{{-- Greyscale Stripe emblem + copy: use wherever money connects (treasury, payouts, wires, ledger). --}}
@php
    $variant = $variant ?? 'light';
    $class = $class ?? '';
    $tagline = $tagline ?? match ($variant) {
        'dark' => 'Ledger signals and balances in this rail mirror the Stripe Treasury patterns operators already know from modern finance products.',
        'compact' => '',
        default => 'Connecting transactions, payouts, and internal transfers are shown on Stripe Treasury rails — a live, familiar finance stack.',
    };
@endphp
@if ($variant === 'compact')
    <div class="inline-flex items-center gap-1.5 rounded-lg border border-[#E8E8EF] bg-[#F6F7F9] px-2 py-1 {{ $class }}" role="note" aria-label="Powered by Stripe">
        <img
            src="{{ asset('images/stripe-emblem.png') }}"
            alt=""
            width="16"
            height="16"
            class="h-4 w-4 shrink-0 rounded-full object-cover grayscale"
            loading="lazy"
            decoding="async"
            aria-hidden="true"
        >
        <span class="text-[10px] text-[#5A5A5A] leading-none">Powered by <span class="font-semibold text-[#2D2D2D]">Stripe</span></span>
    </div>
@elseif ($variant === 'dark')
    <div class="rounded-xl border border-white/12 bg-white/[0.06] px-2.5 py-2 {{ $class }}" role="note" aria-label="Powered by Stripe">
        <div class="flex items-start gap-2">
            <img
                src="{{ asset('images/stripe-emblem.png') }}"
                alt=""
                width="28"
                height="28"
                class="h-7 w-7 shrink-0 rounded-full object-cover grayscale brightness-125 contrast-95"
                loading="lazy"
                decoding="async"
                aria-hidden="true"
            >
            <div class="min-w-0">
                <p class="text-[11px] font-semibold text-white/90">Powered by Stripe</p>
                <p class="text-[10px] mt-0.5 leading-snug text-white/60">{{ $tagline }}</p>
            </div>
        </div>
    </div>
@else
    <div class="rounded-xl border border-[#E8E8EF] bg-gradient-to-br from-[#FAFAFB] to-[#F0F1F4] px-3 py-2.5 shadow-sm {{ $class }}" role="note" aria-label="Powered by Stripe">
        <div class="flex items-start gap-2.5">
            <img
                src="{{ asset('images/stripe-emblem.png') }}"
                alt=""
                width="32"
                height="32"
                class="h-8 w-8 shrink-0 rounded-full object-cover grayscale"
                loading="lazy"
                decoding="async"
                aria-hidden="true"
            >
            <div class="min-w-0">
                <p class="text-[11px] font-semibold text-[#2D2D2D]">Powered by Stripe</p>
                <p class="text-[10px] mt-0.5 leading-snug text-[#6F6F6F]">{{ $tagline }}</p>
            </div>
        </div>
    </div>
@endif