@php
    $mac = ($app['kind'] ?? '') === 'mac';
    $pf = $app['price_formatted'] ?? '';
    $free = ($pf === 'Gratis' || str_starts_with($pf, '0,00'));
    $priceClass = $free ? 'free' : 'paid';
    $genre = $app['genre'] ?? '';
    $genreLabel = $mac ? trim($genre . ' · Mac') : $genre;
    $relText = !empty($app['updated']) ? $rel($app['updated']) : '';
    $detailUrl = !empty($app['slug']) ? (new \App\Support\SubdomainRegistry())->url('ios', ($lp ?? '') . $app['slug']) : null;
    $nameLower = \Illuminate\Support\Str::lower($app['name'] ?? '');
    // Geräte: iOS-Apps sind universal (iPhone + iPad), Mac-Apps nur Mac.
    $devices = $mac ? 'mac' : 'iphone ipad';
    // Geräte-spezifische Screenshot-Reihen (iPhone + iPad getrennt; Mac eigene).
    $iphoneShots = $mac ? collect() : collect($app['screenshots'] ?? []);
    $ipadShots   = $mac ? collect() : collect($app['screenshots_ipad'] ?? []);
    $macShots    = $mac ? collect($app['screenshots'] ?? []) : collect();
@endphp
<article class="ax-card reveal" data-name="{{ $nameLower }}" data-devices="{{ $devices }}" data-cat="{{ $genre }}">
    <div class="ax-card-head">
        <a class="ax-cardlink" @if($detailUrl) href="{{ $detailUrl }}" @endif>
            @if(!empty($app['icon']))
                <img class="ax-icon" src="{{ $app['icon'] }}" width="64" height="64" loading="lazy" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} Icon">
            @endif
            <span class="ax-id">
                <h3>{{ $app['name'] ?? '' }}</h3>
                <span class="ax-genre">{{ $genreLabel }}</span>
            </span>
        </a>
        @if($pf !== '')
            <span class="ax-price {{ $priceClass }}">{{ $pf }}</span>
        @endif
    </div>
    <div class="ax-metarow">
        @if(!empty($app['version']))
            <span class="ax-chip ax-chip--ver">v{{ $app['version'] }}</span>
        @endif
        @if($relText !== '')
            <span class="ax-chip ax-chip--upd">{{ $relText }}</span>
        @endif
        @if($detailUrl)
            <a class="ax-btn ax-btn--ghost" href="{{ $detailUrl }}" style="margin-left:auto;">Details ›</a>
        @endif
        @if(!empty($app['url']))
            <a class="ax-btn" href="{{ $app['url'] }}" target="_blank" rel="noopener"><i class="fa-brands fa-apple"></i> App Store</a>
        @endif
    </div>
    @if($iphoneShots->isNotEmpty())
        <div class="ax-rail" data-rail="iphone" aria-hidden="true">
            @foreach($iphoneShots->take(6) as $s)
                <a class="ax-shotlink" @if($detailUrl) href="{{ $detailUrl }}" @endif tabindex="-1">
                    <img class="ax-shot ax-shot--ios" src="{{ $s }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} iPhone Screenshot">
                </a>
            @endforeach
        </div>
    @endif
    @if($ipadShots->isNotEmpty())
        <div class="ax-rail" data-rail="ipad" aria-hidden="true">
            @foreach($ipadShots->take(6) as $s)
                <a class="ax-shotlink" @if($detailUrl) href="{{ $detailUrl }}" @endif tabindex="-1">
                    <img class="ax-shot ax-shot--ipad" src="{{ $s }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} iPad Screenshot">
                </a>
            @endforeach
        </div>
    @endif
    @if($macShots->isNotEmpty())
        <div class="ax-rail" data-rail="mac" aria-hidden="true">
            @foreach($macShots->take(6) as $s)
                <a class="ax-shotlink" @if($detailUrl) href="{{ $detailUrl }}" @endif tabindex="-1">
                    <img class="ax-shot ax-shot--mac" src="{{ $s }}" loading="lazy" decoding="async" referrerpolicy="no-referrer" alt="{{ $app['name'] ?? '' }} Mac Screenshot">
                </a>
            @endforeach
        </div>
    @endif
</article>