ModalWindow(
    :isVisible="isVisible"
    @update:isVisible="$emit('update:isVisible', $event)"
    :title="event.title"
    :contentClass="'max-w-4xl'"
    :showFooter="false"
)
    template([body])
        div(class="event-detail")
            div(class="grid grid-cols-1 lg:grid-cols-2 gap-8")
                div(class="event-visual")
                    img(:src="event.image" :alt="event.title" class="w-full rounded-xl shadow-lg")
                    div(class="event-stats grid grid-cols-3 gap-4 mt-4 text-center")
                        div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
                            div(class="stat-value text-xl font-bold text-accent") {{ event.availableTickets }}
                            div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Осталось билетов
                        div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
                            div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.duration }}
                            div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Продолжительность
                        div(class="stat p-4 bg-gray-50 dark:bg-gray-700 rounded-lg")
                            div(class="stat-value text-xl font-bold text-gray-800 dark:text-white") {{ event.ageRestriction }}
                            div(class="stat-label text-sm text-gray-600 dark:text-gray-400") Возраст
                
                div(class="event-info")
                    div(class="info-grid space-y-6")
                        div(class="info-item flex items-start")
                            div(class="icon mr-4 mt-1")
                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
                            div(class="content")
                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Дата и время
                                div(class="value text-lg text-gray-800 dark:text-white") {{ formatDateTime(event.date, event.time) }}
                        
                        div(class="info-item flex items-start")
                            div(class="icon mr-4 mt-1")
                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z")
                            div(class="content")
                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Место проведения
                                div(class="value text-lg text-gray-800 dark:text-white") {{ event.venue }}
                                div(class="text-sm text-gray-600 dark:text-gray-400") Концертный зал "Кохи Борбад"
                        
                        div(class="info-item flex items-start")
                            div(class="icon mr-4 mt-1")
                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10")
                            div(class="content")
                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Категория
                                div(class="value")
                                    span(
                                        :class="getCategoryBadgeClass(event.category)"
                                        class="inline-block px-3 py-1 text-sm font-medium rounded-full"
                                    ) {{ getCategoryLabel(event.category) }}
                        
                        div(class="info-item flex items-start")
                            div(class="icon mr-4 mt-1")
                                svg(class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1")
                            div(class="content")
                                div(class="label font-semibold text-gray-700 dark:text-gray-300") Цена
                                div(class="value text-3xl font-bold text-accent") {{ event.price }}
                                    span(class="text-lg font-normal text-gray-600 dark:text-gray-400")  сомони
                        
                        div(class="info-item")
                            div(class="label font-semibold text-gray-700 dark:text-gray-300 mb-2") Описание мероприятия
                            div(class="value text-gray-600 dark:text-gray-400 leading-relaxed") {{ event.description }}
                    
                    div(class="action-buttons mt-8 flex flex-col sm:flex-row gap-4")
                        button(
                            @click="bookTickets"
                            class="bg-accent text-white px-8 py-4 rounded-lg font-medium hover:bg-yellow-600 transition-colors flex items-center justify-center flex-1"
                        )
                            svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z")
                            span Купить билеты
                        
                        button(
                            @click="addToCalendar"
                            class="border border-gray-300 text-gray-700 px-6 py-4 rounded-lg font-medium hover:bg-gray-50 transition-colors flex items-center justify-center flex-1 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
                        )
                            svg(class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24")
                                path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z")
                            span В календарь

    template([footer])
        div(class="flex justify-between items-center w-full")
            div(class="social-share flex space-x-2")
                button(
                    @click="shareOnFacebook"
                    class="p-3 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 transition-colors dark:bg-blue-900 dark:text-blue-300 dark:hover:bg-blue-800"
                    aria-label="Поделиться в Facebook"
                )
                    svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
                        path(d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z")
                button(
                    @click="shareOnTwitter"
                    class="p-3 rounded-full bg-blue-400 text-white hover:bg-blue-500 transition-colors"
                    aria-label="Поделиться в Twitter"
                )
                    svg(class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24")
                        path(d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z")
            div(class="close-section")
                button(
                    @click="$emit('update:isVisible', false)"
                    class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors"
                ) Закрыть
