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

@php
    // Map industry to Heroicon
    $industryIcons = [
        'IT & Digitalisierung' => 'cpu-chip',
        'Industrie & Technik' => 'cog-6-tooth',
        'Finanzen & Versicherungen' => 'currency-dollar',
        'Handel & E-Commerce' => 'shopping-cart',
        'Bauen & Immobilien' => 'building-office',
        'Mobilität & Logistik' => 'truck',
        'Energie & Umwelt' => 'bolt',
        'Medizin & Gesundheit' => 'heart',
        'Personal & HR' => 'user-group',
        'Marketing, PR & Medien' => 'megaphone',
        'Recht & Steuern' => 'scale',
        'Politik, Verbände & NGOs' => 'flag',
        'Wissenschaft & Forschung' => 'beaker',
        'Lifestyle' => 'sparkles',
        'Tourismus & Kultur' => 'globe-alt',
    ];

    $iconName = $industryIcons[$industry] ?? 'building-office';
    $iconPath = "/heroicons/optimized/24/outline/{$iconName}.svg";

    // Content Type Badge Classes
    $contentTypeClasses = match ($contentType) {
        'ANALYSE' => 'bg-[var(--color-primary)] text-white',
        'INTERVIEW' => 'bg-[var(--color-secondary)] text-white',
        default => 'bg-white/95 text-[var(--color-primary)] border border-[var(--color-primary)]/20',
    };

    $badgeExtraClasses = $imageUrl ? 'shadow-md backdrop-blur-sm' : 'shadow-sm';
@endphp

<a href="/release/{{ $slug }}" class="group block">
    <article
        class="bg-gradient-to-br from-[var(--color-zinc-100)]/50 to-[var(--color-zinc-100)]/25 dark:from-[var(--color-zinc-800)] dark:to-[var(--color-zinc-800)]/50 rounded-xl border border-[var(--color-primary)]/20 dark:border-zinc-800 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-[var(--color-primary)]/30 hover:translate-y-[-2px] shadow-sm h-full flex flex-col">

        @if ($imageUrl)
            {{-- Card mit Bild --}}
            <div
                class="relative h-46 bg-gradient-to-br from-zinc-100 to-zinc-50 dark:from-zinc-800 dark:to-zinc-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 --}}
                <div class="absolute top-4 left-4">

                    <span
                        class="inline-block text-[10px] font-bold tracking-widest uppercase px-3 py-1.5 {{ $contentTypeClasses }} {{ $badgeExtraClasses }} rounded">
                        {{ $contentType }}
                    </span>
                </div>
            </div>

            {{-- Content --}}
            <div class="p-7 flex flex-col flex-grow">
                {{-- Meta Info --}}
                <div class="flex items-center justify-between gap-2 mb-4 text-xs text-zinc-500 dark:text-zinc-400">
                    <div class="flex items-center gap-2">
                        <div class="industry-icon-badge">
                            <img src="{{ $iconPath }}" alt="{{ $industry }}" class="h-4 w-4" />
                        </div>
                        <span class="font-medium text-zinc-700 dark:text-zinc-300">{{ $industry }}</span>
                    </div>
                    <time datetime="{{ $date }}"
                        class="text-zinc-600 dark:text-zinc-400">{{ $date }}</time>
                </div>

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

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

                {{-- Company Footer --}}
                <div class="flex items-center justify-between pt-5 border-t border-[var(--color-primary)]/10">
                    <div class="flex items-center gap-2">
                        <svg class="h-4 w-4 text-zinc-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-zinc-700 dark:text-zinc-300">{{ $company }}</span>
                    </div>
                    <svg class="h-5 w-5 transition-transform group-hover:translate-x-1" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
            </div>
        @else
            {{-- Card ohne Bild - Textbasiert mit farbigem Hintergrund --}}
            <div class="relative p-8 flex flex-col h-full">

                {{-- Content Type Label --}}
                <div class="mb-6 mt-0">
                    <span
                        class="inline-block text-[10px] font-bold tracking-widest uppercase px-3 py-1.5 {{ $contentTypeClasses }} {{ $badgeExtraClasses }} rounded">
                        {{ $contentType }}
                    </span>
                </div>

                {{-- Meta Info --}}
                <div class="flex items-center justify-between gap-2 mb-5 text-xs text-zinc-500 dark:text-zinc-400">
                    <div class="flex items-center gap-2">
                        <div class="industry-icon-badge">
                            <img src="{{ $iconPath }}" alt="{{ $industry }}" class="h-4 w-4" />
                        </div>
                        <span class="font-medium text-zinc-700 dark:text-zinc-300">{{ $industry }}</span>
                    </div>
                    <time datetime="{{ $date }}"
                        class="text-zinc-600 dark:text-zinc-400">{{ $date }}</time>
                </div>

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

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

                {{-- Company Footer --}}
                <div class="flex items-center justify-between pt-5 border-t border-[var(--color-primary)]/10">
                    <div class="flex items-center gap-2">
                        <svg class="h-4 w-4 text-zinc-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-zinc-700 dark:text-zinc-300">{{ $company }}</span>
                    </div>
                    <svg class="h-5 w-5 transition-transform group-hover:translate-x-1" fill="none"
                        stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </div>
            </div>
        @endif
    </article>
</a>