@php
    $dayData = $this->calendarDays->firstWhere('key', $date->format('Y-m-d')) ?? [];

    $day = $dayData['date'] ?? $date;
    $key = $dayData['key'] ?? $date->format('Y-m-d');

    $allDayEvents = collect($dayData['allDay'] ?? []);
    $timedEvents  = collect($dayData['timed'] ?? []);

    $hourHeight = 64;
@endphp

<div
    class="border border-border bg-[radial-gradient(circle_at_top,rgba(99,102,241,0.06),transparent)] rounded-xl overflow-hidden">

    {{-- HEADER --}}
    <div class="p-4 border-b border-border">
        <h3 class="text-lg font-semibold">
            {{ $day->translatedFormat('l, d. F Y') }}
        </h3>
    </div>

    {{-- ALL DAY --}}
    @if($allDayEvents->isNotEmpty())
        <div class="px-4 py-2 border-b border-border flex flex-wrap gap-2 bg-background">

            @foreach($allDayEvents as $event)
                <div class="bg-primary/20 text-primary text-xs px-2 py-1 rounded-lg">
                    {{ $event->title }}
                </div>
            @endforeach

        </div>
    @endif

    {{-- TIMELINE --}}
    <div class="relative flex">

        {{-- 🔥 ZEITSPALTE --}}
        <div class="w-[80px] border-r border-border bg-background">

            @for($h = 0; $h < 24; $h++)
                <div class="h-16 text-xs text-text-muted px-2 flex items-start justify-end">
                    {{ str_pad($h, 2, '0', STR_PAD_LEFT) }}:00
                </div>
            @endfor

        </div>

        {{-- 🔥 GRID + EVENTS --}}
        <div
            class="flex-1 relative"
            data-day-column
            data-date="{{ $key }}"
        >

            {{-- GRID --}}
            @for($h = 0; $h < 24; $h++)
                <div class="h-16 border-b border-border"></div>
            @endfor

            {{-- EVENTS --}}
            @foreach($timedEvents as $event)

                @php
                    $gap = 6;
                    $width = 100 / $event['count'];
                @endphp

                <div
                    wire:key="day-event-{{ $event['id'] }}"
                    data-id="{{ $event['id'] }}"
                    class="calendar-event absolute bg-primary text-white rounded-lg px-3 py-1.5 shadow cursor-pointer overflow-hidden"

                    style="
                    top: {{ $event['top'] }}px;
                    height: {{ max($event['height'] - 4, 24) }}px;

                    left: calc({{ $width }}% * {{ $event['index'] }} + 4px);
                    width: calc({{ $width }}% - {{ $gap }}px);
                "
                >
                    <div class="text-[10px] opacity-80">
                        {{ $event['start']->format('H:i') }}
                        @if($event['end'])
                            – {{ $event['end']->format('H:i') }}
                        @endif
                    </div>

                    <div class="font-medium text-sm truncate">
                        {{ $event['title'] }}
                    </div>

                </div>

            @endforeach

        </div>

    </div>
</div>
