@props([
    'industries' => null,
])

@php
    $industries = $industries ?? \App\Support\CategoryNavigation::items(8)
        ->map(fn (array $category): array => [
            'name' => $category['label'],
            'count' => 0,
            'delta' => 0,
            'href' => $category['href'],
        ])
        ->all();

    $maxCount = max(1, collect($industries)->max('count'));
    $industries = array_slice($industries, 0, 8);
@endphp

<section class="max-w-layout mx-auto px-8 mt-16">
    <header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
        <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">Branchen-Index</h2>
        <span class="eyebrow muted">Letzte 7 Tage</span>
    </header>
    <hr class="rule-strong">

    <div class="grid border-b border-bg-rule grid-cols-2 md:grid-cols-4">
        @foreach ($industries as $idx => $industry)
            @php
                $delta = (int) ($industry['delta'] ?? 0);
                $direction = $delta > 0 ? 'gain' : ($delta < 0 ? 'loss' : 'flat');
                $percent = max(20, (int) round(($industry['count'] ?? 0) / $maxCount * 100));
                $isTopRow = $idx < 4;
                $isLastInRow = ($idx + 1) % 4 === 0;
                $barClass = $delta < 0 ? 'bg-brand' : 'bg-gain';
            @endphp
            <a href="{{ $industry['href'] ?? route('web.home') }}"
                class="block px-5 py-[18px] {{ $isLastInRow ? '' : 'md:border-r border-bg-rule' }} {{ $isTopRow ? '' : 'border-t border-bg-rule' }} cursor-pointer hover:bg-bg-elev transition-colors group">
                <div class="flex justify-between items-baseline mb-2 gap-2">
                    <span class="text-[14px] font-semibold text-ink group-hover:text-brand transition-colors">{{ $industry['name'] }}</span>
                    <span class="font-mono text-[12px] font-semibold
                        @if ($direction === 'gain') text-gain
                        @elseif ($direction === 'loss') text-loss
                        @else text-ink-3 @endif">
                        @if ($delta > 0) +{{ $delta }}
                        @elseif ($delta < 0) {{ $delta }}
                        @else ±0
                        @endif
                    </span>
                </div>
                <div class="flex items-baseline gap-2 mb-2">
                    <span class="font-serif text-[22px] font-semibold tracking-[-0.3px] text-ink">{{ $industry['count'] }}</span>
                    <span class="text-[11px] text-ink-3">Meldungen</span>
                </div>
                <div class="h-[3px] bg-bg-rule">
                    <div class="h-full {{ $barClass }}" style="width: {{ $percent }}%;"></div>
                </div>
            </a>
        @endforeach
    </div>
</section>