@props([
    'events' => null,
])

@php
    $events ??= [
        ['day' => 'Heute', 'date' => '06. Mai', 'type' => 'Quartalszahlen', 'company' => 'SAP SE', 'time' => '07:00', 'note' => 'Q1 2026', 'today' => true, 'highlighted' => true],
        ['day' => 'Heute', 'date' => '06. Mai', 'type' => 'Hauptversammlung', 'company' => 'Allianz SE', 'time' => '10:00', 'note' => 'München', 'today' => true],
        ['day' => 'Morgen', 'date' => '07. Mai', 'type' => 'Pressekonferenz', 'company' => 'Volkswagen AG', 'time' => '09:30', 'note' => 'Strategie 2030', 'highlighted' => true],
        ['day' => 'Morgen', 'date' => '07. Mai', 'type' => 'Quartalszahlen', 'company' => 'Deutsche Telekom', 'time' => '07:00', 'note' => 'Q1 2026'],
        ['day' => 'Do', 'date' => '08. Mai', 'type' => 'Konferenz', 'company' => 'Hannover Messe', 'time' => 'Ganztägig', 'note' => 'Industrie 4.0', 'ad' => true],
        ['day' => 'Fr', 'date' => '09. Mai', 'type' => 'Hauptversammlung', 'company' => 'BMW Group', 'time' => '10:00', 'note' => 'München'],
        ['day' => 'Mo', 'date' => '12. Mai', 'type' => 'Quartalszahlen', 'company' => 'Siemens AG', 'time' => '07:00', 'note' => 'Q2 2026', 'highlighted' => true],
    ];
@endphp

<section class="max-w-layout mx-auto px-8 mt-16">
    <header class="flex items-baseline justify-between mb-4 flex-wrap gap-3">
        <div class="flex items-baseline gap-3.5 flex-wrap">
            <h2 class="font-serif text-[28px] font-semibold m-0 tracking-[-0.3px] text-ink">Termine &amp; Events</h2>
            <span class="eyebrow muted">Diese Woche im Überblick</span>
        </div>
        <div class="flex items-center gap-4 text-[12px] flex-wrap">
            <button type="button" class="inline-flex items-center gap-1.5 text-ink-2 cursor-pointer hover:text-ink transition-colors">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <path d="M3 7h18M3 12h18M3 17h12" stroke="currentColor" stroke-width="2" />
                </svg>
                Alle Branchen
            </button>
            <a href="#" class="inline-flex items-center gap-1.5 text-ink-2 cursor-pointer hover:text-ink transition-colors">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2" />
                    <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="2" />
                </svg>
                iCal abonnieren
            </a>
            <a href="{{ route('kategorien') }}#termine" class="text-brand font-semibold cursor-pointer hover:text-brand-deep transition-colors">Alle Termine →</a>
        </div>
    </header>
    <hr class="rule-strong">

    <div class="grid border-b border-bg-rule grid-cols-2 md:grid-cols-4 lg:grid-cols-7">
        @foreach ($events as $idx => $event)
            @php
                $isLastInRow = ($idx + 1) % 7 === 0;
            @endphp
            <a href="#"
                class="block p-4 pb-[18px] relative border-b lg:border-b-0 border-bg-rule {{ $isLastInRow ? '' : 'border-r' }} cursor-pointer hover:bg-bg-elev transition-colors group"
                @if($event['highlighted'] ?? false) style="background:rgba(204,55,51,0.025);" @endif>
                @if ($event['highlighted'] ?? false)
                    <span class="absolute top-3.5 right-3.5 w-1.5 h-1.5 rounded-full bg-brand pulse-dot"></span>
                @endif
                <div class="flex items-baseline gap-1.5 mb-2.5 flex-wrap">
                    @if ($event['today'] ?? false)
                        <span class="eyebrow font-bold">{{ $event['day'] }}</span>
                    @else
                        <span class="text-[11px] font-bold tracking-[0.12em] uppercase text-ink-3">{{ $event['day'] }}</span>
                    @endif
                    <span class="text-[10.5px] text-ink-3 font-mono">{{ $event['date'] }}</span>
                </div>
                <div class="text-[10.5px] tracking-[0.06em] uppercase font-bold text-ink-2 mb-1.5">{{ $event['type'] }}</div>
                <div class="font-serif text-[15px] font-semibold leading-[1.25] mb-2 text-ink group-hover:text-brand transition-colors">{{ $event['company'] }}</div>
                <div class="flex items-center gap-1.5 text-[11px] text-ink-3 flex-wrap">
                    <span class="font-mono">{{ $event['time'] }}</span>
                    @if ($event['note'] ?? null)
                        <span aria-hidden="true">·</span>
                        <span>{{ $event['note'] }}</span>
                    @endif
                </div>
                @if ($event['ad'] ?? false)
                    <div class="mt-2 text-[9.5px] tracking-[0.08em] uppercase font-semibold text-ink-4">Anzeige</div>
                @endif
            </a>
        @endforeach
    </div>
</section>