@php
    /** @var array $data */
    $title    = $data['title'] ?? 'Agenda Executiva';
    $months   = $data['months'] ?? [];
    $upcoming = $data['upcoming_events'] ?? [];
    $eventsByDate = $data['events_by_date'] ?? [];
    $now = \Carbon\Carbon::now();
    $today = $now->format('Y-m-d');
    $dayNames = ['DOM', 'SEG', 'TER', 'QUA', 'QUI', 'SEX', 'SÁB'];
    $monthNamesPt = [
        1 => 'Janeiro', 2 => 'Fevereiro', 3 => 'Março', 4 => 'Abril',
        5 => 'Maio', 6 => 'Junho', 7 => 'Julho', 8 => 'Agosto',
        9 => 'Setembro', 10 => 'Outubro', 11 => 'Novembro', 12 => 'Dezembro',
    ];
@endphp

@if(!empty($months))
<section class="service-section section-padding fix section-bg" aria-label="Agenda Executiva">
    <div class="container">
        {{-- HEADING --}}
        <div class="section-title text-center">
            <h2 class="wow fadeInUp">{{ $title }}</h2>
        </div>

        <div class="row g-4 mt-2">
            {{-- LEFT: CALENDAR --}}
            <div class="col-lg-5">
                <div class="agenda-calendar-card">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                        <div class="card-body p-4">
                            @if(count($months) > 1)
                            <ul class="nav nav-pills nav-fill gap-2 mb-4 agenda-month-tabs" role="tablist">
                                @foreach($months as $mIdx => $month)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link agenda-month-btn {{ $mIdx === 0 ? 'active' : '' }}"
                                            id="month-tab-{{ $month['month_key'] }}"
                                            data-bs-toggle="tab"
                                            data-bs-target="#month-pane-{{ $month['month_key'] }}"
                                            type="button" role="tab"
                                            aria-selected="{{ $mIdx === 0 ? 'true' : 'false' }}">
                                        <span class="d-block fw-bold" style="font-size:0.95rem;">{{ $monthNamesPt[$month['month']] ?? $month['name'] }}</span>
                                        <small class="d-block fw-normal text-muted" style="font-size:0.7rem;">{{ $month['year'] }}</small>
                                    </button>
                                </li>
                                @endforeach
                            </ul>
                            @endif

                            <div class="tab-content">
                                @foreach($months as $mIdx => $month)
                                @php
                                    $monthKey = $month['month_key'];
                                    $firstDow = $month['first_day_of_week'];
                                    $daysInMonth = $month['days_in_month'];
                                    $eventDates = $month['event_dates'] ?? [];
                                    $eventDatesFlat = [];
                                    foreach ($eventDates as $ed) {
                                        $eventDatesFlat[$ed] = true;
                                    }
                                    $monthNum = $month['month'];
                                    $monthYear = $month['year'];
                                @endphp
                                <div class="tab-pane fade {{ $mIdx === 0 ? 'show active' : '' }}"
                                     id="month-pane-{{ $monthKey }}"
                                     role="tabpanel"
                                     aria-labelledby="month-tab-{{ $monthKey }}">
                                    <div class="calendar-grid">
                                        @foreach($dayNames as $dName)
                                        <div class="calendar-day-head">{{ $dName }}</div>
                                        @endforeach

                                        @for($i = 0; $i < $firstDow; $i++)
                                        <div class="calendar-day empty"></div>
                                        @endfor

                                        @for($day = 1; $day <= $daysInMonth; $day++)
                                        @php
                                            $dateStr = sprintf('%04d-%02d-%02d', $monthYear, $monthNum, $day);
                                            $isToday = ($dateStr === $today);
                                            $hasEvent = isset($eventDatesFlat[$dateStr]);
                                        @endphp
                                        <div class="calendar-day{{ $isToday ? ' is-today' : '' }}{{ $hasEvent ? ' has-event' : '' }}"
                                             data-date="{{ $dateStr }}">
                                            @if($hasEvent)
                                            <a href="/agenda?date={{ $dateStr }}" class="calendar-day-link"
                                               title="Eventos neste dia"
                                               aria-label="{{ $day }} — {{ count($eventsByDate[$dateStr] ?? []) }} evento(s)">
                                                {{ $day }}
                                            </a>
                                            @else
                                            <span class="calendar-day-number">{{ $day }}</span>
                                            @endif
                                        </div>
                                        @endfor
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT: UPCOMING EVENTS --}}
            <div class="col-lg-7">
                @if(!empty($upcoming))
                <div class="agenda-events-list">
                    @foreach($upcoming as $event)
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-3 agenda-event-card wow fadeInUp"
                         data-wow-delay=".{{ ($loop->index + 1) * 2 }}s">
                        <a href="{{ $event['url'] ?? '#' }}" class="text-decoration-none text-dark">
                            <div class="row g-0 align-items-center">
                                <div class="col-md-4 col-4">
                                    <div class="agenda-event-thumb">
                                        @if(!empty($event['image']))
                                         <img src="{{ v2_storage_url($event['image']) }}"
                                             alt="{{ $event['title'] ?? '' }}"
                                             class="img-fluid h-100 w-100"
                                             style="object-fit:cover; min-height:120px;"
                                             loading="lazy"
                                             decoding="async">
                                        @else
                                        <div class="agenda-event-thumb-placeholder d-flex align-items-center justify-content-center"
                                             style="min-height:120px; background:var(--bs-light);">
                                            <i class="bi bi-calendar3 fs-1 text-secondary"></i>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-8 col-8">
                                    <div class="card-body py-3 px-3 px-md-4">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="agenda-event-date-badge d-inline-flex align-items-center gap-1">
                                                <i class="bi bi-calendar3"></i>
                                                @php
                                                    $evtDate = \Carbon\Carbon::parse($event['date'] ?? $today);
                                                @endphp
                                                <time datetime="{{ $event['date'] ?? '' }}">
                                                    {{ $evtDate->format('d/m/Y') }}
                                                </time>
                                            </span>
                                            @if(!empty($event['time']) && $event['time'] !== '00:00')
                                            <span class="agenda-event-time-badge d-inline-flex align-items-center gap-1">
                                                <i class="bi bi-clock"></i>
                                                {{ $event['time'] }}
                                            </span>
                                            @endif
                                        </div>
                                        <h5 class="fw-bold mb-1 agenda-event-title">
                                            {{ $event['title'] ?? '' }}
                                        </h5>
                                        @if(!empty($event['location']))
                                        <p class="mb-0 text-muted small">
                                            <i class="bi bi-geo-alt me-1"></i>
                                            {{ $event['location'] }}
                                        </p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-5">
                    <i class="bi bi-calendar-check display-4 text-muted d-block mb-3"></i>
                    <h4 class="fw-bold text-muted">Nenhum evento agendado</h4>
                    <p class="text-muted">Em breve divulgaremos nossa agenda de eventos.</p>
                </div>
                @endif

                <div class="text-center mt-3">
                    <a href="{{ url('/agenda') }}"
                       class="btn btn-primary btn-lg px-5 rounded-pill fw-semibold"
                       aria-label="Ver todos os eventos da agenda">
                        <i class="bi bi-calendar-event me-2"></i>
                        Ver todos os eventos
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .agenda-calendar-card .card { border: none; background: #fff; }
    .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
    .calendar-day-head { font-size: 0.65rem; font-weight: 700; color: #999; padding-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
    .calendar-day { font-size: 0.95rem; padding: 6px 0; position: relative; display: flex; align-items: center; justify-content: center; color: #333; min-height: 36px; }
    .calendar-day.empty { visibility: hidden; }
    .calendar-day .calendar-day-number { display: block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; color: #555; font-weight: 400; }
    .calendar-day .calendar-day-link { color: inherit; text-decoration: none; display: block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; transition: all 0.2s ease; font-weight: 600; }
    .calendar-day.has-event .calendar-day-link { color: var(--tenant-primary, #1075ad); font-weight: 700; }
    .calendar-day.has-event::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background: var(--tenant-primary, #ed1c24); border-radius: 50%; }
    .calendar-day.is-today .calendar-day-number, .calendar-day.is-today .calendar-day-link { background: var(--tenant-primary, #1075ad); color: #fff; font-weight: 700; }
    .calendar-day .calendar-day-link:hover { background: rgba(16, 117, 173, 0.12); color: var(--tenant-primary, #1075ad); }
    .agenda-month-tabs .nav-link { border-radius: 50px; font-weight: 600; font-size: 0.95rem; color: #444; background: #f1f3f5; padding: 10px 20px; transition: all 0.2s; border: none; }
    .agenda-month-tabs .nav-link:hover { background: #e9ecef; color: #222; }
    .agenda-month-tabs .nav-link.active { background: var(--tenant-primary, #1075ad); color: #fff; }
    .agenda-event-card { transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(0,0,0,0.04); }
    .agenda-event-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important; }
    .agenda-event-title { color: var(--tenant-primary, #1075ad); font-size: 1.05rem; line-height: 1.3; }
    .agenda-event-date-badge { background: rgba(16, 117, 173, 0.08); color: var(--tenant-primary, #1075ad); font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; }
    .agenda-event-time-badge { background: #f1f3f5; color: #666; font-size: 0.78rem; font-weight: 500; padding: 3px 10px; border-radius: 50px; }
    .agenda-event-thumb img { border-radius: 0; }
    .agenda-event-thumb-placeholder { border-radius: 0; }
    .btn-primary.rounded-pill { padding: 12px 40px; font-size: 1rem; }
    @media (max-width: 991.98px) { .agenda-calendar-card { margin-bottom: 1.5rem; } .calendar-day { font-size: 0.85rem; min-height: 32px; padding: 4px 0; } .calendar-day .calendar-day-number, .calendar-day .calendar-day-link { width: 26px; height: 26px; line-height: 26px; } }
    @media (max-width: 575.98px) { .agenda-month-tabs .nav-link { font-size: 0.75rem; padding: 6px 10px; } }
</style>
@endif