@if (isset($activeIncentive) && $activeIncentive)
    <div class="d-flex col-xl-12 align-items-stretch">
        <div class="w-100 mb-4 inc-dash-widget">

            {{-- Hero-Bild mit Overlay --}}
            @if ($activeIncentive->image)
                <div class="inc-dash-hero">
                    <img src="{{ asset('img/incentive/' . $activeIncentive->image) }}" alt="{{ $activeIncentive->name }}">
                    <div class="inc-dash-hero-overlay"></div>
                    <div class="inc-dash-hero-content">
                        <span class="inc-dash-badge">
                            <i class="ion ion-md-trophy mr-1"></i> Incentive VIP
                        </span>
                        <h4 class="inc-dash-title">
                            {{ $activeIncentive->getLang('name') ?: $activeIncentive->name }}
                        </h4>
                        @if ($activeIncentive->getLang('subtitle'))
                            <p class="inc-dash-subtitle">{{ $activeIncentive->getLang('subtitle') }}</p>
                        @endif
                    </div>
                </div>
            @else
                <div class="inc-dash-header-plain">
                    <span class="inc-dash-badge">
                        <i class="ion ion-md-trophy mr-1"></i> Incentive VIP
                    </span>
                    <h4 class="font-weight-bold mb-1">
                        {{ $activeIncentive->getLang('name') ?: $activeIncentive->name }}
                    </h4>
                    @if ($activeIncentive->getLang('subtitle'))
                        <p class="text-muted mb-0">{{ $activeIncentive->getLang('subtitle') }}</p>
                    @endif
                </div>
            @endif

            {{-- Inhaltsbereich --}}
            <div class="inc-dash-body">

                {{-- Status-Leiste (nur fuer Teilnehmer) --}}
                @if ($incentiveParticipant)
                    <div class="inc-dash-stats">
                        @if ($incentiveParticipant->rank)
                            <div class="inc-dash-stat">
                                <span class="inc-dash-stat-value">{{ $incentiveParticipant->rank }}</span>
                                <span class="inc-dash-stat-label">{{ __('incentive.your_rank') }}</span>
                            </div>
                        @endif
                        <div class="inc-dash-stat">
                            <span
                                class="inc-dash-stat-value">{{ number_format($incentiveParticipant->total_points, 0, ',', '.') }}</span>
                            <span class="inc-dash-stat-label">{{ __('incentive.points_short') }}</span>
                        </div>
                        <div class="inc-dash-stat">
                            @if ($incentiveParticipant->is_qualified)
                                <span class="inc-dash-qual-yes">{{ __('incentive.qualified') }}</span>
                            @else
                                <span class="inc-dash-qual-no">{{ __('incentive.open') }}</span>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Bilder-Leiste --}}
                @php
                    $dashGallery = [];
                    $galleryDir = public_path('img/incentive');
                    if (is_dir($galleryDir)) {
                        $galleryFiles = glob($galleryDir . '/*.{jpg,jpeg,png,webp}', GLOB_BRACE) ?: [];
                        $heroImg = $activeIncentive->image;
                        foreach ($galleryFiles as $gf) {
                            $bn = basename($gf);
                            if ($bn !== $heroImg) {
                                $dashGallery[] = 'img/incentive/' . $bn;
                            }
                        }
                        sort($dashGallery);
                        $dashGallery = array_slice($dashGallery, 0, 4);
                    }
                @endphp
                @if (count($dashGallery) > 0)
                    <div class="inc-dash-gallery">
                        @foreach ($dashGallery as $gi)
                            <div class="inc-dash-gallery-thumb">
                                <img src="{{ asset($gi) }}" alt="Impression" loading="lazy">
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- Buttons --}}
                <div class="inc-dash-actions">
                    <a href="{{ route('user_incentive_teaser', [$activeIncentive->slug]) }}"
                        class="btn inc-dash-btn-primary">
                        <i class="ion ion-md-trophy mr-1"></i>
                        {{ __('incentive.dashboard_btn_teaser') }}
                    </a>
                    <a href="{{ route('user_incentive_show', [$activeIncentive->slug]) }}"
                        class="btn inc-dash-btn-secondary">
                        <i class="ion ion-md-list mr-1"></i>
                        {{ __('incentive.dashboard_btn_ranking') }}
                    </a>
                </div>

            </div>

        </div>
    </div>

    <style>
        .inc-dash-widget {
            border-radius: .75rem;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
            background: #fff;
        }

        .inc-dash-hero {
            position: relative;
            height: 180px;
            overflow: hidden;
        }

        .inc-dash-hero img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .inc-dash-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.05) 0%,
                    rgba(0, 0, 0, 0.20) 40%,
                    rgba(0, 0, 0, 0.70) 100%);
        }

        .inc-dash-hero-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem 2rem;
            z-index: 2;
        }

        .inc-dash-badge {
            display: inline-block;
            background: rgba(215, 215, 0, 0.92);
            color: #333;
            font-weight: 700;
            padding: .25rem .8rem;
            border-radius: 50px;
            font-size: .75rem;
            letter-spacing: .04em;
            text-transform: uppercase;
            margin-bottom: .6rem;
        }

        .inc-dash-title {
            color: #fff;
            font-weight: 800;
            font-size: 1.6rem;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            margin: 0 0 .25rem 0;
            line-height: 1.2;
        }

        .inc-dash-subtitle {
            color: rgba(255, 255, 255, 0.88);
            font-size: .95rem;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
            margin: 0;
        }

        .inc-dash-header-plain {
            background: linear-gradient(135deg, #6b7758 0%, #4a5340 100%);
            color: #fff;
            padding: 1.5rem 2rem;
        }

        .inc-dash-header-plain h4 {
            color: #fff;
        }

        .inc-dash-body {
            padding: 1.2rem 1.5rem 1.5rem;
        }

        .inc-dash-stats {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: .8rem 1rem;
            margin-bottom: 1rem;
            background: #f4f5f0;
            border-radius: .5rem;
        }

        .inc-dash-stat {
            text-align: center;
        }

        .inc-dash-stat-value {
            display: block;
            font-size: 1.4rem;
            font-weight: 800;
            color: #6b7758;
            line-height: 1.1;
        }

        .inc-dash-stat-label {
            font-size: .7rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: #888;
        }

        .inc-dash-qual-yes {
            display: inline-block;
            background: linear-gradient(135deg, #b8b800, #d7d700);
            color: #333;
            font-weight: 700;
            padding: .3rem .8rem;
            border-radius: 50px;
            font-size: .78rem;
        }

        .inc-dash-qual-no {
            display: inline-block;
            background: #e8e8e8;
            color: #777;
            font-weight: 600;
            padding: .3rem .8rem;
            border-radius: 50px;
            font-size: .78rem;
        }

        .inc-dash-gallery {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: .4rem;
            margin-bottom: 1rem;
            border-radius: .5rem;
            overflow: hidden;
        }

        .inc-dash-gallery-thumb {
            aspect-ratio: 16/10;
            overflow: hidden;
        }

        .inc-dash-gallery-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .3s ease;
        }

        .inc-dash-gallery-thumb:hover img {
            transform: scale(1.06);
        }

        .inc-dash-actions {
            display: flex;
            gap: .6rem;
            flex-wrap: wrap;
        }

        .inc-dash-btn-primary {
            background: linear-gradient(135deg, #6b7758, #4a5340);
            color: #fff !important;
            border: none;
            border-radius: 50px;
            padding: .55rem 1.8rem;
            font-weight: 700;
            font-size: .9rem;
            transition: transform .2s, box-shadow .2s;
        }

        .inc-dash-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(107, 119, 88, 0.35);
            color: #fff !important;
        }

        .inc-dash-btn-secondary {
            background: transparent;
            color: #6b7758 !important;
            border: 2px solid #6b7758;
            border-radius: 50px;
            padding: .55rem 1.8rem;
            font-weight: 600;
            font-size: .9rem;
            transition: background .2s, color .2s;
        }

        .inc-dash-btn-secondary:hover {
            background: #6b7758;
            color: #fff !important;
        }

        @media (max-width: 575px) {
            .inc-dash-hero {
                height: 200px;
            }

            .inc-dash-hero-content {
                padding: 1rem 1.2rem;
            }

            .inc-dash-title {
                font-size: 1.2rem;
            }

            .inc-dash-gallery {
                grid-template-columns: repeat(2, 1fr);
            }

            .inc-dash-stats {
                gap: .8rem;
            }
        }
    </style>
@endif