@props([
    'title',
    'teaser',
    'company',
    'industry',
    'region',
    'date',
    'contentType' => 'FACHMELDUNG', // ANALYSE, INTERVIEW, FACHMELDUNG
    'slug',
    'imageUrl' => null,
])

<a href="/release/{{ $slug }}" class="group block">
    <article class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-[var(--color-primary)]/30 shadow-sm h-full flex flex-col">

        @if($imageUrl)
            <!-- Card mit Bild -->
            <!-- Image Preview -->
            <div class="relative h-52 bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 overflow-hidden">
                <img
                    src="{{ $imageUrl }}"
                    alt="{{ $title }}"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    loading="lazy"
                />

                <!-- Content Type Label - Positioned on Image -->
                <div class="absolute top-4 left-4">
                    <span class="inline-block text-[10px] font-bold tracking-widest uppercase px-3 py-1.5
                        @if($contentType === 'ANALYSE')
                            bg-[var(--color-primary)] text-white
                        @elseif($contentType === 'INTERVIEW')
                            bg-[var(--color-secondary)] text-white
                        @else
                            bg-white/95 text-[var(--color-primary)] border border-[var(--color-primary)]/20
                        @endif
                        shadow-lg backdrop-blur-sm rounded">
                        {{ $contentType }}
                    </span>
                </div>
            </div>

            <!-- Content with increased padding -->
            <div class="p-7 flex flex-col flex-grow">
                <!-- Meta Info - More spacing -->
                <div class="flex items-center gap-3 mb-4 text-xs text-gray-500 dark:text-gray-500">
                    <span class="font-medium text-gray-700 dark:text-gray-300">{{ $industry }}</span>
                    <span class="text-gray-300 dark:text-gray-700">•</span>
                    <time datetime="{{ $date }}" class="text-gray-600 dark:text-gray-400">{{ $date }}</time>
                </div>

                <!-- Title - Larger, more space -->
                <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 line-clamp-2 mb-4 group-hover:text-[var(--color-primary)] transition-colors leading-tight">
                    {{ $title }}
                </h3>

                <!-- Teaser - More generous line-height -->
                <p class="text-[15px] leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 mb-5 flex-grow">
                    {{ $teaser }}
                </p>

                <!-- Company at bottom -->
                <div class="flex items-center gap-2 pt-4 border-t border-gray-100 dark:border-gray-800">
                    <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $company }}</span>
                </div>
            </div>
        @else
            <!-- Card ohne Bild - Textbasiert mit farbigem Hintergrund -->
            <div class="relative bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-secondary)]/5 to-[var(--color-primary)]/10 dark:from-[var(--color-primary)]/10 dark:via-[var(--color-secondary)]/10 dark:to-[var(--color-primary)]/20 p-8 flex flex-col min-h-[400px]">

                <!-- Content Type Label - Top -->
                <div class="mb-6">
                    <span class="inline-block text-[10px] font-bold tracking-widest uppercase px-3 py-1.5
                        @if($contentType === 'ANALYSE')
                            bg-[var(--color-primary)] text-white
                        @elseif($contentType === 'INTERVIEW')
                            bg-[var(--color-secondary)] text-white
                        @else
                            bg-white text-[var(--color-primary)] border border-[var(--color-primary)]/20
                        @endif
                        shadow-sm rounded">
                        {{ $contentType }}
                    </span>
                </div>

                <!-- Meta Info -->
                <div class="flex items-center gap-3 mb-5 text-xs text-gray-500 dark:text-gray-400">
                    <span class="font-medium text-gray-700 dark:text-gray-300">{{ $industry }}</span>
                    <span class="text-gray-300 dark:text-gray-600">•</span>
                    <time datetime="{{ $date }}" class="text-gray-600 dark:text-gray-400">{{ $date }}</time>
                </div>

                <!-- Title - Prominenter ohne Bild -->
                <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-5 group-hover:text-[var(--color-primary)] transition-colors leading-tight">
                    {{ $title }}
                </h3>

                <!-- Teaser as Quote/Highlight - Mehr Zeilen ohne Bild -->
                <blockquote class="text-base leading-relaxed text-gray-700 dark:text-gray-300 line-clamp-5 mb-6 flex-grow italic border-l-4 border-[var(--color-primary)] pl-4">
                    {{ $teaser }}
                </blockquote>

                <!-- Company at bottom -->
                <div class="flex items-center gap-2 pt-5 border-t border-[var(--color-primary)]/10">
                    <svg class="h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $company }}</span>
                </div>
            </div>
        @endif
    </article>
</a>