@php
    /** @var array{
     *     overall: array{label: string, color: string, icon: string|null},
     *     reason: string,
     *     impact: string,
     *     recommended_action: string,
     *     dominant_dimensions: list<array{label: string, color: string, icon: string|null}>,
     *     window_label: string
     * } $decision */
@endphp

<x-filament::section>
    <x-slot name="heading">
        Customer health decision
    </x-slot>

    <x-slot name="description">
        Decision-first summary. Operational stability, review-pack readiness, and engagement freshness honor {{ $decision['window_label'] }}.
    </x-slot>

    <div class="space-y-5">
        <div class="flex flex-wrap items-center gap-3">
            <div>
                <p class="text-sm font-medium text-gray-950 dark:text-white">Overall health</p>
            </div>

            <x-filament::badge :color="$decision['overall']['color']" :icon="$decision['overall']['icon']">
                {{ $decision['overall']['label'] }}
            </x-filament::badge>
        </div>

        <div class="space-y-2">
            <p class="text-sm font-medium text-gray-950 dark:text-white">Reason</p>
            <p class="text-sm leading-6 text-gray-600 dark:text-gray-300">{{ $decision['reason'] }}</p>

            @if ($decision['dominant_dimensions'] !== [])
                <div class="flex flex-wrap gap-2">
                    @foreach ($decision['dominant_dimensions'] as $dimension)
                        <x-filament::badge :color="$dimension['color']" :icon="$dimension['icon']">
                            {{ $dimension['label'] }}
                        </x-filament::badge>
                    @endforeach
                </div>
            @endif
        </div>

        <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
            <div class="space-y-2">
                <p class="text-sm font-medium text-gray-950 dark:text-white">Impact</p>
                <p class="text-sm leading-6 text-gray-600 dark:text-gray-300">{{ $decision['impact'] }}</p>
            </div>

            <div class="space-y-2">
                <p class="text-sm font-medium text-gray-950 dark:text-white">Recommended next action</p>
                <p class="text-sm leading-6 text-gray-600 dark:text-gray-300">{{ $decision['recommended_action'] }}</p>
            </div>
        </div>
    </div>
</x-filament::section>