@props(['highlight'])

@php
    // Map industry to Heroicon
    $industryIcons = [
        'IT & Digitalisierung' => 'cpu-chip',
        'KI & Innovation' => '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[$highlight['industry']] ?? 'building-office';
    $iconPath = "/heroicons/optimized/24/outline/{$iconName}.svg";
@endphp

<a href="#" class="highlight-card-link">
    <article class="highlight-card">
        <div class="grid md:grid-cols-2">
            <!-- Image -->
            <div class="highlight-card-image">
                <img src="{{ $highlight['image'] }}" alt="{{ $highlight['title'] }}"
                    class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute top-4 left-4">
                    <span class="highlight-badge badge badge-{{ $highlight['badgeType'] }}">
                        {{ $highlight['badge'] }}
                    </span>
                </div>
            </div>

            <!-- Content -->
            <div class="highlight-card-content">
                <div>
                    {{-- Meta Info --}}
                    <div class="highlight-meta">
                        <div class="flex items-center gap-2">
                            <div class="industry-icon-badge">
                                <img src="{{ $iconPath }}" alt="{{ $highlight['industry'] }}" class="h-4 w-4" />
                            </div>
                            <span
                                class="font-medium text-zinc-700 dark:text-zinc-300">{{ $highlight['industry'] }}</span>
                        </div>
                        <time datetime="{{ $highlight['date'] }}"
                            class="text-zinc-600 dark:text-zinc-400">{{ $highlight['date'] }}</time>
                    </div>

                    {{-- Title --}}
                    <h3 class="highlight-title">
                        {{ $highlight['title'] }}
                    </h3>

                    {{-- Teaser --}}
                    <p class="highlight-text">
                        {{ $highlight['text'] }}
                    </p>
                </div>

                {{-- Footer --}}
                <div class="highlight-footer">
                    <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">{{ $highlight['author'] }}</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>
        </div>
    </article>
</a>