@php
            $items = \App\Models\Backend\ContentCalendar::with(['translations' => function($q) use ($lang) { $q->where('calendar_translation_language', $lang); }])->where('calendar_status', 'ACTIVE')->orderBy('calendar_date_start')->get();
            $categories = \App\Models\Backend\Ref::where('cat', 'CALENDAR_CATEGORY')->pluck('descr', 'code');
            $types = \App\Models\Backend\Ref::where('cat', 'CALENDAR_TYPE')->pluck('descr', 'code');
            @endphp
            @if($items->count())
            <section class="cal-section"><div class="container">
            <div class="cal-header">
            <span class="cal-badge">Kalendar</span>
            <h1 class="cal-title">Kalendar Aktiviti</h1>
            <p class="cal-subtitle">Senarai aktiviti, mesyuarat dan program yang akan datang.</p>
            </div>
            <div class="cal-list">
            @foreach($items as $item)
            @php $t = $item->translations->first(); @endphp
            <div class="cal-item">
            <div class="cal-date-box">
            <span class="cal-date-day">{{ date('d', strtotime($item->calendar_date_start)) }}</span>
            <span class="cal-date-month">{{ date('M', strtotime($item->calendar_date_start)) }}</span>
            </div>
            <div class="cal-info">
            @if($t)<h3 class="cal-title-text">{{ $t->calendar_translation_title }}</h3>@endif
            <div class="cal-meta">
            <span class="cal-cat">{{ $categories[$item->calendar_category] ?? $item->calendar_category }}</span>
            <span class="cal-type">{{ $types[$item->calendar_type] ?? $item->calendar_type }}</span>
            </div>
            @if($t && $t->calendar_translation_location)<span class="cal-location"><i class="fas fa-map-marker-alt"></i> {{ $t->calendar_translation_location }}</span>@endif
            @if($t && $t->calendar_translation_content)<p class="cal-desc">{{ Str::limit($t->calendar_translation_content, 120) }}</p>@endif
            </div>
            <div class="cal-time-box">
            @if($item->calendar_time_start)<span class="cal-time">{{ substr($item->calendar_time_start, 0, 5) }}</span>@endif
            @if($item->calendar_time_end)<span class="cal-time-sep">-</span><span class="cal-time">{{ substr($item->calendar_time_end, 0, 5) }}</span>@endif
            </div>
            </div>
            @endforeach
            </div>
            </div></section>
            <style>
            .cal-section{padding:60px 0 80px;background:var(--gray-50);min-height:60vh;}
            .cal-header{text-align:center;margin-bottom:50px;}
            .cal-badge{display:inline-block;background:var(--accent-light);color:var(--accent);padding:6px 16px;border-radius:999px;font-size:.75rem;font-weight:600;margin-bottom:16px;}
            .cal-title{font-size:2rem;font-weight:700;color:var(--gray-900);margin:0 0 12px;}
            .cal-subtitle{color:var(--gray-400);font-size:1rem;margin:0;}
            .cal-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
            .cal-item{display:flex;align-items:flex-start;gap:16px;background:var(--white);padding:18px 22px;border-radius:14px;border:1px solid var(--gray-200);transition:box-shadow .2s;}
            .cal-item:hover{box-shadow:var(--shadow-lg);}
            .cal-date-box{width:60px;text-align:center;flex-shrink:0;padding-top:4px;}
            .cal-date-day{display:block;font-size:1.4rem;font-weight:700;color:var(--accent);line-height:1.2;}
            .cal-date-month{display:block;font-size:.7rem;font-weight:600;color:var(--gray-400);text-transform:uppercase;}
            .cal-info{flex:1;min-width:0;}
            .cal-title-text{font-size:.95rem;font-weight:600;color:var(--gray-900);margin:0 0 6px;}
            .cal-meta{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
            .cal-cat{font-size:.7rem;background:var(--gray-100);color:var(--gray-500);padding:2px 10px;border-radius:999px;font-weight:500;}
            .cal-type{font-size:.7rem;color:var(--gray-400);}
            .cal-location{display:block;font-size:.8rem;color:var(--gray-500);margin-bottom:4px;}
            .cal-location i{font-size:.7rem;margin-right:4px;}
            .cal-desc{font-size:.82rem;color:var(--gray-400);margin:4px 0 0;line-height:1.5;}
            .cal-time-box{text-align:center;flex-shrink:0;min-width:60px;padding-top:4px;}
            .cal-time{display:block;font-size:.78rem;color:var(--gray-500);font-weight:500;}
            .cal-time-sep{display:none;}
            @media(max-width:768px){.cal-section{padding:30px 0 50px;}.cal-title{font-size:1.4rem;}.cal-item{padding:14px 16px;gap:12px;}.cal-date-day{font-size:1.1rem;}}
            @media(max-width:480px){.cal-title{font-size:1.2rem;}.cal-item{flex-wrap:wrap;}.cal-time-box{width:100%;text-align:left;padding-left:76px;}}
            </style>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;"><div class="container"><i class="fas fa-calendar-check" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i><h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Tiada Aktiviti</h2><p style="color:var(--gray-400);margin:10px 0 30px;">Tiada aktiviti berjadual buat masa ini.</p><a href="/{{ $siteSlug }}" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:.85rem;"><i class="fas fa-arrow-left"></i> Kembali</a></div></section>
            @endif
            