@extends("frontend.includes.layout")

@section('useLegacyJquery', '0')

@section('links')
    @vite('resources/scss/offert.scss')
    <link async rel="stylesheet" href="/vendor/owlcarousel/assets/owl.carousel.min.css">
    <link async rel="stylesheet" href="/vendor/owlcarousel/assets/owl.theme.default.min.css">
    <script>
        window.__hubspotAutoLoad = true;
    </script>
    @include('frontend.includes.hubspot-lazy-init')

    @php
        $moduleAliases = [
            'cualidades' => 'cualidades-header',
        ];
        $desktopModules = array_values(array_filter(array_map('trim', explode(',', (string) $academic_offer->modules_desktop))));
        $mobileModules = array_values(array_filter(array_map('trim', explode(',', (string) $academic_offer->modules_mobile))));
        $desktopOrderBySection = [];
        foreach ($desktopModules as $position => $module) {
            $desktopOrderBySection[$moduleAliases[$module] ?? $module] = $position + 3;
        }
        $mobileOrderBySection = [];
        foreach ($mobileModules as $position => $module) {
            $mobileOrderBySection[$moduleAliases[$module] ?? $module] = $position + 3;
        }
        $highSchoolDesktopOrder = max(3, (int) ($desktopOrderBySection['contenido'] ?? 3) + 1);
        $highSchoolMobileOrder = max(3, (int) ($mobileOrderBySection['contenido'] ?? 3) + 1);
        $sanitizeSectionId = function ($id) {
            return preg_replace('/[^a-zA-Z0-9_-]/', '', (string) $id);
        };
        $desktopOrderCss = collect($desktopOrderBySection)->map(function ($order, $sectionId) use ($sanitizeSectionId) {
            $safeId = $sanitizeSectionId($sectionId);
            return "main.template_v2_ucg > section#{$safeId} { order: {$order}; }";
        })->implode("\n");
        $mobileOrderCss = collect($mobileOrderBySection)->map(function ($order, $sectionId) use ($sanitizeSectionId) {
            $safeId = $sanitizeSectionId($sectionId);
            return "main.template_v2_ucg > section#{$safeId} { order: {$order}; }";
        })->implode("\n");
        $advantagesWithContent = collect($academic_offer->advantages ?? [])->filter(function ($advantage) {
            $rawText = (string) ($advantage->text ?? '');
            return trim(strip_tags($rawText, '<img>')) !== '';
        })->values();
        $hasAdvantages = $advantagesWithContent->isNotEmpty();
    @endphp
    <style>
        main.template_v2_ucg {
            display: flex;
            flex-direction: column;
        }

        main.template_v2_ucg>* {
            order: 1000;
        }

        main.template_v2_ucg>section {
            order: 1000;
        }

        main.template_v2_ucg>.info-bar-container {
            order: 3;
        }

        main.template_v2_ucg>.sub-nav-sticky {
            order: 3;
        }

        {!! $desktopOrderCss !!}

        main.template_v2_ucg.is-bachillerato>section#high-school-advantages {
            order:
                {{ $highSchoolDesktopOrder }}
            ;
        }

        @media only screen and (max-width: 768px) {
            {!! $mobileOrderCss !!}

            main.template_v2_ucg.is-bachillerato>section#high-school-advantages {
                order:
                    {{ $highSchoolMobileOrder }}
                ;
            }
        }
    </style>
@endsection

@section('scripts')
    <script defer
        src="/js/academic-offer-v2.js?v={{ @filemtime(public_path('js/academic-offer-v2.js')) ?: time() }}"></script>
@endsection


@section('content')
    {{-- <!-- MAIN--> --}}
    @if ($academic_offer->show || ($isPreview ?? false))
        <main id="main" class="template_v2_ucg {{ $academic_offer->level === 'Bachillerato' ? 'is-bachillerato' : '' }}"">
                                            {{-- <!-- CUALIDADES / HERO --> --}}
                                            <section class=" section" id="cualidades-header">
            <div class="box_image" |
                style="background-image: url({{ $academic_offer->banner_uri ?? '/images/bg-video.png' }}); background-position: {{ $academic_offer->banner_position_x ?? 50 }}% {{ $academic_offer->banner_position_y ?? 50 }}%; background-repeat: no-repeat;">
                <div class="hero-inner">
                    <div class="hero-content">
                        <div class="hero-copy">
                            <span class="category-tag">{{ $academic_offer->level }}
                            </span>
                            <h1 class="text_on_image">
                                @if ($academic_offer->title_html)
                                    {{-- {!! wordwrap($academic_offer->title_html, 30, "<br>") !!} --}}
                                    {{ $academic_offer->title_html }}
                                @else
                                    {{-- {!! wordwrap($academic_offer->title, 30, "<br>") !!} --}}
                                    {{ $academic_offer->title }}
                                @endif
                            </h1>
                        </div>
                        <div class="hero-cta">
                            <p class="hero-cta-text">Inscríbete ahora</p>
                            <a href="{{ $primaryWhatsAppUrl }}"
                                target="_blank" rel="noopener" class="hero-whatsapp-btn">
                                <i class="fab fa-whatsapp"></i> WhatsApp
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            </section>

            {{-- <!-- INFO BAR --> --}}
            <div class="info-bar-container">
                @if ($academic_offer->duration)
                    <div class="av-IconDetailConteiner">
                        <i class="fas fa-clock"></i>
                        <div class="av-IconDetailTextContainer">
                            <div class="av-IconDetailTextName">Duración</div>
                            <div class="av-IconDetailTextValue">{{ $academic_offer->duration }}</div>
                        </div>
                    </div>
                @endif
                @if ($academic_offer->modality)
                    <div class="av-IconDetailConteiner">
                        <i class="fas fa-graduation-cap"></i>
                        <div class="av-IconDetailTextContainer">
                            <div class="av-IconDetailTextName">Modalidad</div>
                            <div class="av-IconDetailTextValue">{{ $academic_offer->modality }}</div>
                        </div>
                    </div>
                @endif
                @if ($academic_offer->begin)
                    <div class="av-IconDetailConteiner">
                        <i class="fas fa-calendar-alt"></i>
                        <div class="av-IconDetailTextContainer">
                            <div class="av-IconDetailTextName">Inicio</div>
                            <div class="av-IconDetailTextValue">{{ $academic_offer->begin }}</div>
                        </div>
                    </div>
                @endif
                @if ($academic_offer->rvoe)
                    <div class="av-IconDetailConteiner">
                        <i class="fas fa-id-card"></i>
                        <div class="av-IconDetailTextContainer">
                            <div class="av-IconDetailTextName">RVOE</div>
                            <div class="av-IconDetailTextValue">{{ $academic_offer->rvoe }}</div>
                        </div>
                    </div>
                @endif
            </div>

            {{-- <!-- SUB NAV STICKY --> --}}
            <div class="sub-nav-sticky">
                <div class="nav">
                    <a href="#contenido" class="nav-link">Descripción</a>
                    @if ($hasAdvantages)
                        <a href="#ventajas" class="nav-link">¿Por qué estudiar aquí?</a>
                    @endif
                    <a href="#plan-de-estudios" class="nav-link">Plan de estudios</a>
                    {{-- <a href="#visitanos" class="nav-link">Visítanos</a> --}}
                    <a href="{{ $primaryWhatsAppUrl }}"
                        target="_blank" class="cta-advisor-btn">
                        <i class="fab fa-whatsapp"></i> Habla con un asesor
                    </a>
                </div>
            </div>

            <!-- CONTENIDO -->
            <section class="section" id="contenido">
                <div class="container_v2">
                    <div class="content-main">
                        @if ($academic_offer->content)
                            <div class="ql-editor">
                                {!! $academic_offer->content !!}
                            </div>
                        @endif
                    </div>

                    <div class="offer-form-card">
                        @if ($academic_offer->img_form_1_uri)
                            <div class="form-cover-media">
                                <img class="lazyload" data-src="{{ $academic_offer->img_form_1_uri }}" alt="Portada">
                            </div>
                        @endif
                        {{-- @dd($academic_offer) --}}

                        <div class="form-content">
                            <h1><span>📚 Estudiar {{ $academic_offer->title }} </span>Es una inversión para ti y tu familia
                            </h1>

                            <ul class="benefits-list">
                                <li>El detalle de la colegiatura</li>
                                <li>Las opciones de beca disponibles</li>
                                <li>Plan de estudios personalizado</li>
                            </ul>

                            <div class="ucg-crm-hubspot">
                                @include('frontend.includes.forms.cliento.formColegiatura')
                                <div class="text-center">
                                    <a class="form-privacy-link" href="{{ route('notice_of_privacy') }}">
                                        Aviso de privacidad
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </section>

            {{-- @dd($academic_offer) --}}

            @if ($academic_offer->level === 'Bachillerato')
                @include("frontend.includes.high_school_advantages")
            @endif

            {{-- <!-- protagonistas --> --}}
            @if ($academic_offer->video_1_key || $academic_offer->video_2_key)
                <section class="section" id="conocenos">
                    <div class="text-center">
                        <div class="">
                            <h2 class="title-principal">Conoce a los protagonistas de Bachillerato</h2>
                        </div>
                        <div class="video-grid">
                            @if ($academic_offer->video_1_cover_uri)
                                @php
                                    $source = $academic_offer->video_1_source;
                                    $cover = $academic_offer->video_1_cover_uri;
                                    $key = $academic_offer->video_1_key;
                                    $column = $academic_offer->video_2_cover_uri ? 6 : 12;
                                @endphp
                                <div class="video-item" data-aos="fade-up" data-aos-delay="100">
                                    @include('frontend.includes.videoCliento')
                                </div>
                            @endif

                            @if ($academic_offer->video_2_cover_uri)
                                @php
                                    $source = $academic_offer->video_2_source;
                                    $cover = $academic_offer->video_2_cover_uri;
                                    $key = $academic_offer->video_2_key;
                                    $column = $academic_offer->video_1_cover_uri ? 6 : 12;
                                @endphp
                                <div class="video-item" data-aos="fade-up" data-aos-delay="200">
                                    @include('frontend.includes.videoCliento')
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            @endif

            {{-- <!-- VENTAJAS --> --}}
            @if ($hasAdvantages)
                <section class="section" id="ventajas">
                    <div class="">
                        <div class="text-center">
                            <div>
                                <h2 class="title-principal">
                                    @if ($academic_offer->title_advantajes)
                                        {!! $academic_offer->title_advantajes !!}
                                    @else
                                        Ventajas de estudiar en la UCG
                                    @endif
                                </h2>
                                @if ($academic_offer->subtitle_advantajes)
                                    <p class="ventajas-subtitle">
                                        {!! $academic_offer->subtitle_advantajes !!}
                                    </p>
                                @else
                                    <p class="ventajas-subtitle">
                                        Solo algunas de las múltiples ventajas que tiene estudiar el Bachillerato en la UCA:
                                    </p>
                                @endif
                            </div>
                        </div>

                        <div class="ventajas-grid" data-count="{{ $advantagesWithContent->count() }}">
                            @foreach ($advantagesWithContent as $index => $advantage)
                                <div class="ventajas-col">
                                    <div class="ventaja-item">
                                        @if ($advantage->icon_class || $advantage->icon_uri)
                                            <div class="ventaja-icon">
                                                @if ($advantage->icon_class)
                                                    <i class="{{ $advantage->icon_class }}" aria-hidden="true"></i>
                                                @elseif ($advantage->icon_uri)
                                                    <img class="lazyload" data-src="{{ $advantage->icon_uri }}"
                                                        src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                                                        alt="Icono ventaja {{ $index + 1 }}">
                                                @endif
                                            </div>
                                        @endif
                                        <div class="ventaja-content">
                                            <div class="ql-editor p-0">
                                                {!! $advantage->text !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            <!-- ACTIVIDADES -->
            @if (count($academic_offer->activities) > 0)

                <section class="section" id="actividades">
                    <div class="">
                        <div class=" text-center">
                            <h1 class="title-principal">
                                @if ($academic_offer->title_activities)
                                    {!! $academic_offer->title_activities !!}
                                @else
                                    Complementa tu formación académica
                                @endif
                            </h1>
                            @if ($academic_offer->subtitle_activities)
                                <p class="">
                                    {!! $academic_offer->subtitle_activities !!}
                                </p>
                            @endif
                        </div>

                        <div class="slick-wrap slick-project slick-wrap--media js-slick-wrapper " data-slick-xs="1"
                            data-slick-sm="1" data-slick-md="2" data-slick-lg="3" data-slick-xl="3" data-slick-dots="false"
                            data-slick-customnav="true" data-slick-autoplay="true" data-slick-autoplayspeed="3500">
                            <div class="slick-wrap-content">
                                <div class="slick-content js-slick-content">
                                    @foreach ($academic_offer->activities as $activity)
                                        <div class="slick-item">
                                            <a href="{{ $activity->path }}" target="_blank" rel="noopener"
                                                data-title="{{ $activity->title }}">
                                                <img class="lazyload" data-src="{{ $activity->path }}" alt="{{ $activity->title }}">
                                                <p>{{ $activity->title }}</p>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="slick__nav arrows-1">
                                <i class="slick-prev slick-arrow js-slick-prev ti-angle-left"></i>
                                <i class="slick-next slick-arrow js-slick-next ti-angle-right"></i>
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- <!-- CONOCE-CAMPUS --> --}}
            @php
                $normalizedCampusSource = strtolower(trim((string) ($academic_offer->video_campus_source ?? '')));
                $hasSpecificVideo = !empty($academic_offer->video_campus_key)
                    && in_array($normalizedCampusSource, ['youtube', 'wistia'], true);

                $hasText = !empty(trim(strip_tags((string) $academic_offer->advantage_campus)));

                // Fallback to home video if no specific video is set
                $fallbackVideoUrl = $homeVideo->video_uri ?? asset('video/index.mp4');
                $fallbackVideoPoster = $homeVideo->poster_uri ?? asset('images/bg-video.png');

                // Should we show the section at all?
                $showSection = $hasSpecificVideo || !empty($fallbackVideoUrl);
            @endphp

            @if ($showSection)
                <section class="section" id="conoce-campus">
                    <div>
                        <div class="text-center">
                            <h2 class="title-principal">
                                Conoce nuestro Campus
                            </h2>
                        </div>
                        <div
                            class="conoce-campus-content {{ $hasSpecificVideo ? 'has-video' : 'no-video' }} {{ !$hasText ? 'video-only' : '' }}">
                            @if ($hasText)
                                <div class="campus-col campus-col--text">
                                    <div class="campus-text-wrap">
                                        <div class="list list-dot list-text-blue ql-editor">
                                            {!! $academic_offer->advantage_campus !!}
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="campus-col campus-col--video">
                                @if ($hasSpecificVideo)
                                    @php
                                        $source = $academic_offer->video_campus_source;
                                        $cover = $academic_offer->video_campus_cover_uri;
                                        $key = $academic_offer->video_campus_key;
                                    @endphp
                                    <div class="video-item" data-aos="fade-up" data-aos-delay="100">
                                        @include('frontend.includes.videoCliento')
                                    </div>
                                @else
                                    {{-- Fallback Local Video --}}
                                    <div class="video-item" data-aos="fade-up" data-aos-delay="100">
                                        <div class="video-wrapper" id="campusVideoWrapper" role="button" tabindex="0"
                                            aria-label="Reproducir video de campus" style="cursor: pointer;">
                                            <div class="video-thumbnail">
                                                <img class="img-fluid" src="{{ $fallbackVideoPoster }}" alt="Poster video campus"
                                                    style="width: 100%; height: 100%; object-fit: cover;">
                                                <div class="video-overlay"></div>
                                                <div class="play-button">
                                                    <i class="fas fa-play"></i>
                                                </div>
                                            </div>
                                            <div class="video-caption">
                                                <span>VER VIDEO</span>
                                                <i class="fas fa-external-link-alt"></i>
                                            </div>
                                        </div>
                                    </div>

                                @endif
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            {{-- {{-- <!-- FORMULARIO VISITANOS --> --}}
            {{-- <section class="section section-form-visit" id="visitanos">
                <div class="">
                    <div class="row align-items-center">
                        <div class="col-lg-5 mb-4 mb-lg-0">
                            <h2 class="visit-title">Ven a conocernos</h2>
                            <p class="visit-copy mt-3">
                                Cada semana organizamos visitas al Campus con estudiantes como tú que quieren conocer la
                                Universidad.
                                <strong>¡Agenda tu cita ahora!</strong>
                            </p>
                            <div class="mt-4">
                                <a href="{{ $primaryWhatsAppUrl }}"
                                    class="btn btn-primary btn-whatsapp-visit">
                                    <i class="fab fa-whatsapp mr-2"></i> WhatsApp Directo
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-1"></div>
                        <div class="col-lg-1"></div>
                        <div class="col-lg-4">
                            <div class="offer-form-card offer-form-card--visit">
                                @if ($academic_offer->crm_key)
                                <div class="ucg-crm-hubspot">
                                    @include('frontend.includes.forms.cliento.formVisita')
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </section> --}}

            {{-- <!-- PRACTICAS PROFESIONALES --> --}}
            <section class="section" id="practicas-profesionales">
                @if ($academic_offer->video_3_key && $academic_offer->video_3_cover_uri)
                    <div class="space-section">
                        <div class="">
                            <div class="row my-5 text-center">
                                <div class="col-md-12">
                                    <h2 style="color: #22418b;">
                                        {!! $academic_offer->title_practice_professional !!}
                                    </h2>
                                    <p class="mt-2" style="color: #087af4;font-size: 18px">
                                        {!! $academic_offer->subtitle_practice_professional !!}
                                    </p>
                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-7">

                                    @if ($academic_offer->video_3_cover_uri)
                                        @php
                                            $source = $academic_offer->video_3_source;
                                            $cover = $academic_offer->video_3_cover_uri;
                                            $key = $academic_offer->video_3_key;
                                        @endphp
                                        @include('frontend.includes.videoCliento')
                                    @endif

                                </div>
                                <div class="col-md-5">
                                    <div class="mt-5">
                                        @if ($academic_offer->content_practice_professional)
                                            <div class="list list-dot list-text-blue ql-editor">
                                                {!! $academic_offer->content_practice_professional !!}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                @endif
            </section>

            {{-- <!-- MARCAS --> --}}
            @if (count($academic_offer->brands) > 0)
                <section class="section" id="marcas">
                    <div class="">
                        <div class="text-center">
                            <div class="">
                                <h2 class="title-principal">
                                    @if ($academic_offer->title_brands)
                                        {!! $academic_offer->title_brands !!}
                                    @else
                                        ¿Dónde trabajan nuestros egresados?
                                    @endif
                                </h2>
                                <p class="ventajas-subtitle">
                                    {!! $academic_offer->subtitle_brands !!}
                                </p>
                            </div>
                            <div class="marcas-grid">
                                @foreach ($academic_offer->brands as $brand)
                                    <img class="lazyload" data-src="{{ $brand->path }}" alt="ucg-marca-{{ $brand->id }}" />
                                @endforeach
                            </div>

                            {{-- <div class="only-mobile">
                                <div class="brands-mobile-grid">
                                    @foreach ($academic_offer->brands as $brand)
                                    <img class="lazyload" data-src="{{ $brand->path }}" alt="ucg-marca-{{ $brand->id }}" />
                                    @endforeach
                                </div>

                                @if ($academic_offer->brands_img_mobile)
                                <img class="lazyload p-3" data-src="{{ $academic_offer->brands_img_mobile_uri }}"
                                    alt="{{ $academic_offer->title }} - marcas">
                                @endif
                            </div> --}}
                            {{-- @if ($academic_offer->brands_img_desktop_uri)
                            <div class="d-none d-lg-block">
                                <img class="lazyload p-3" data-src="{{ $academic_offer->brands_img_desktop_uri }}"
                                    alt="{{ $academic_offer->title }} - marcas">
                            </div>
                            @endif --}}
                        </div>

                    </div>
                </section>
            @endif

            {{-- <!-- HERRAMIENTAS --> --}}
            <section class="section" id="herramientas">
                @if (count($academic_offer->tools) > 0)
                    <div class="container space-section">
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h2 style="color: #22418b;">
                                    @if ($academic_offer->title_tools)
                                        {!! $academic_offer->title_tools !!}
                                    @endif
                                </h2>
                                <p class="mt-2" style="color: #087af4;font-size: 18px">
                                    {!! $academic_offer->subtitle_tools !!}
                                </p>
                            </div>

                            <div class="col-md-12 mt-5">
                                <div class="only-desktop">
                                    @foreach ($academic_offer->tools as $tool)
                                        <img class="lazyload mx-5 my-3" data-src="{{ $tool->path }}"
                                            alt="ucg-herramienta-{{ $tool->id }}" />
                                    @endforeach
                                </div>

                                @if ($academic_offer->tools_img_mobile)
                                    <div class="only-mobile">
                                        <img class="lazyload p-3" data-src="{{ $academic_offer->tools_img_mobile_uri }}"
                                            alt="{{ $academic_offer->title }} - herramienta">
                                    </div>
                                @endif


                            </div>

                            {{-- @if ($academic_offer->brands_img_desktop_uri)
                            <div class="d-none d-lg-block">
                                <img class="lazyload p-3" data-src="{{ $academic_offer->brands_img_desktop_uri }}"
                                    alt="{{ $academic_offer->title }} - marcas">
                            </div>
                            @endif --}}
                        </div>

                    </div>
                @endif
            </section>

            {{-- <!-- VISITAS A --> --}}
            <section class="section" id="visitas-a">
                @if (count($academic_offer->visits) > 0)
                    <div class="container text-center space-section">
                        <div class="row">
                            <div class="col-md-12">
                                <h2 style="color: #22418b;">
                                    @if ($academic_offer->title_visits)
                                        {!! $academic_offer->title_visits !!}
                                    @endif
                                </h2>
                                <p class="mt-2" style="color: #087af4;font-size: 16px">
                                    {!! $academic_offer->subtitle_visits !!}

                                </p>
                            </div>
                        </div>
                        <div class="m-b-30"></div>

                        <div class="row m-3">
                            @foreach ($academic_offer->visits as $visit)
                                <div class="col-md-4">
                                    <img data-src="{{ $visit->path }}" alt="icon" class="lazyload m-3">
                                </div>
                            @endforeach
                        </div>

                    </div>
                    <div class="m-t-50"></div>
                @endif
            </section>

            <!-- PLAN DE ESTUDIOS -->
            @if (count($academic_offer->plans) > 0)
                <section class="section" id="plan-de-estudios">
                    <div class="">
                        <div class="text-center">
                            <h1 class="title-principal">Plan de estudios</h1>
                        </div>
                        <div class="slick-wrap slick-project slick-wrap--plans js-slick-wrapper" data-slick-xs="1" data-slick-sm="2"
                            data-slick-md="3" data-slick-lg="3" data-slick-xl="4" data-slick-dots="false"
                            data-slick-customnav="true" data-slick-autoplay="true">
                            <div class="slick-wrap-content">
                                <div class="slick-content js-slick-content">
                                    @foreach ($academic_offer->plans as $plan)
                                        <div class="slick-item">
                                            {{-- {{ dd($academic_offer) }} --}}
                                            <article
                                                class="plan-card {{ $academic_offer->uri === 'bachillerato-bicultural' ? 'plan-card--bachillerato-bicultural' : '' }} {{ $academic_offer->uri === 'bachillerato-general' ? 'plan-card--bachillerato' : '' }}">
                                                <p>{{ $plan->title }}</p>
                                                <div class="ql-editor w-100 p-0">
                                                    {!! $plan->content !!}
                                                </div>
                                            </article>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="slick__nav arrows-1">
                                <i class="slick-prev slick-arrow js-slick-prev ti-angle-left"></i>
                                <i class="slick-next slick-arrow js-slick-next ti-angle-right"></i>
                            </div>
                        </div>
                    </div>
                </section>
            @endif

            <!-- TRABAJOS -->
            @if (count($academic_offer->works) > 0)
                <section class="section" id="trabajos">
                    <div class="text-center">
                        <div>
                            <h2 class="title-principal">
                                @if ($academic_offer->title_works)
                                    {!! $academic_offer->title_works !!}
                                @endif
                            </h2>
                            <p class="ventajas-subtitle">
                                {!! $academic_offer->subtitle_works !!}
                            </p>
                        </div>

                        <div class="work-items {{ count($academic_offer->works) === 4 ? 'work-items--three' : '' }}">
                            @foreach ($academic_offer->works as $work)
                                @php
                                    $hasImage = !empty($work->icon_uri);
                                    $hasIconClass = !empty($work->icon_class);
                                    $hasText = !empty(trim(strip_tags($work->text)));
                                    $itemClass = 'work-item';

                                    if (($hasImage || $hasIconClass) && !$hasText) {
                                        $itemClass .= ' work-item-image-only';
                                    } elseif (!$hasImage && $hasText) {
                                        $itemClass .= ' work-item-text-only';
                                    }
                                @endphp

                                <div class="{{ $itemClass }}">
                                    @if ($hasIconClass || $hasImage)
                                        <div class="work-item-media">
                                            @if ($hasIconClass)
                                                <i class="{{ $work->icon_class }} work-item-icon" aria-hidden="true"></i>
                                            @elseif ($hasImage)
                                                <img class="lazyload" data-src="{{ $work->icon_uri }}"
                                                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E"
                                                    alt="Icono representativo" loading="lazy">
                                            @endif
                                        </div>
                                    @endif

                                    @if ($hasText)
                                        <p class="work-item-text">
                                            {!! $work->text !!}
                                        </p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            <!--PLATICA CON EL DIRECTOR -->
            @if ($academic_offer->img_form_3)
                <section class="section" id="platica-director">
                    <div class="container text-center space-section">
                        <div class="row">
                            <div class="col-md-12">
                                <h2 style="color: #22418b;">

                                    @if ($academic_offer->title_form_3)
                                        {!! $academic_offer->title_form_3 !!}
                                    @else
                                        Platica con el Director de la Carrera
                                    @endif
                                </h2>
                                <p class="mt-2" style="color: #087af4;font-size: 16px;line-height:1.2">
                                    {!! $academic_offer->subtitle_form_3 !!}
                                </p>
                            </div>
                        </div>
                        <div class="row m-5">
                            <div class="col-md-4">

                                @if ($academic_offer->img_form_3)
                                    <img class="lazyload p-3" data-src="{{ $academic_offer->img_form_3_uri }}"
                                        alt="{{ $academic_offer->title }} - director">
                                @endif
                            </div>
                            <div class="col-md-8">
                                <div class="ucg-crm-hubspot-with-titles offer-form-card offer-form-card--director">
                                    @include('frontend.includes.forms.cliento.formPlaticaDirector')
                                </div>
                            </div>

                        </div>
                    </div>
                </section>
            @endif

            <!--DOCENTES -->
            @if (count($academic_offer->teachers) > 0)
                <section class="section" id="docentes">
                    <div class="">
                        <div class="text-center">
                            <h2 class="title-principal"> Profesores destacados</h2>
                        </div>
                        <div class="docentes-container" data-count="{{ count($academic_offer->teachers) }}">
                            @foreach ($academic_offer->teachers as $teacher)
                                <div class="docente-item">
                                    <h4 class="docente-item__title">
                                        {{ $teacher->title }}
                                    </h4>

                                    <p class="docente-item__text">
                                        {{ $teacher->content }}
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            @endif

            {{-- <!--ULTIMA TECNOLOGIA --> --}}
            <section class="section space-section" id="ultima-tecnologia">
                @if ($academic_offer->img_last_technology_uri && $academic_offer->content_last_technology)
                    <div class="space-section">
                        <div class="">
                            <div class="row my-5 text-center">
                                <div class="col-md-12">
                                    <h2 style="color: #22418b;">
                                        Aprende mediante la última tecnolgia médica
                                    </h2>

                                </div>
                            </div>

                            <div class="row">

                                <div class="col-md-7">

                                    @if ($academic_offer->img_last_technology_uri)
                                        <img class="lazyload img-fluid" data-src="{{ $academic_offer->img_last_technology_uri }}" alt=""
                                            name="{{ $academic_offer->img_last_technology_uri }}" src="#">
                                    @endif

                                </div>
                                <div class="col-md-5">
                                    <div class="mt-5">
                                        @if ($academic_offer->content_last_technology)
                                            <div class="list list-dot list-text-blue ql-editor">
                                                {!! $academic_offer->content_last_technology !!}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                @endif
            </section>


            {{-- <!--CONVENIOS --> --}}
            <section class="section" id="convenios">
                @if ($academic_offer->agreement_img_uri && $academic_offer->agreement_text)
                    <div class="space-section">
                        <div class="">
                            <div class="row">
                                <div class="col-md-4">
                                    @if ($academic_offer->agreement_img_uri)
                                        <img class="lazyload img-fluid text-center mt-5"
                                            data-src="{{ $academic_offer->agreement_img_uri }}" alt=""
                                            name="{{ $academic_offer->agreement_img_uri }}" src="#">
                                    @endif
                                </div>
                                <div class="col-md-8">
                                    <div class="mt-5">
                                        @if ($academic_offer->agreement_text)
                                            <div class="list list-dot list-text-blue ql-editor">
                                                {!! $academic_offer->agreement_text !!}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </section>

            {{-- <!--Staff --> --}}
            <section class="section" id="personal-reconocido">
                @if (count($academic_offer->staff) > 0)
                    <div class="container  space-section text-center px-5">

                        <div class="col-md-12">
                            <div class="space-section">


                                <h2 style="color: #22418b;">
                                    @if ($academic_offer->title_staff)
                                        {!! $academic_offer->title_staff !!}
                                    @endif
                                </h2>
                                <p class="mt-2" style="color: #087af4;font-size: 16px;line-height:1.2">
                                    {!! $academic_offer->subtitle_staff !!}
                                </p>
                            </div>
                        </div>
                        <div class="row mb-5">
                            @foreach ($academic_offer->staff as $staff)
                                <div class="col-md-3">


                                    <div class="card no-border" style="width: 18rem;">
                                        <img class="card-img-top" src="{{ $staff->path }}" alt="Card image cap">
                                        <div class="card-body">
                                            <h5 class="card-title staff-title"> {!! $staff->title !!}</h5>
                                            <p class="card-text staff-content"> {!! $staff->content !!}</p>
                                        </div>
                                    </div>



                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </section>


            {{-- <!-- GALERIA --> --}}
            <section class="section" id="galeria">
                @if (count($academic_offer->gallery) > 0)
                    <div class="container space-section">
                        <div class="row text-center">
                            <div class="col-md-12">
                                <h2 style="color: #22418b;">
                                    Galería de fotos del Campus
                                </h2>
                            </div>

                            <div class="col-md-12 mt-5">
                                <div class="owl-carousel owl-carousel-gallery dotsTransparent angle-none">
                                    @foreach ($academic_offer->gallery as $gallery)
                                        <img class="item lazyload p-3" data-src="{{ $gallery->path }}"
                                            alt="ucg galeria {{ $gallery->id }}" />
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </section>

            <!-- Modal para videos embebidos (YouTube/Wistia trigger por .video-btn) -->
            <div class="modal fade" id="modalVideo" tabindex="-1" role="dialog" aria-labelledby="modal-video"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                                    allow="autoplay"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    if (window.__academicOfferVideoModalInit) return;
                    window.__academicOfferVideoModalInit = true;

                    const modal = document.getElementById('modalVideo');
                    const iframe = document.getElementById('video');
                    if (!modal || !iframe) return;
                    const closeBtn = modal.querySelector('.close');

                    let pendingSrc = '';

                    document.addEventListener('click', function (event) {
                        const button = event.target.closest('.video-btn');
                        if (!button) return;

                        pendingSrc = button.getAttribute('data-src') || '';
                        if (!pendingSrc) return;

                        if (window.bootstrap && window.bootstrap.Modal) {
                            window.bootstrap.Modal.getOrCreateInstance(modal).show();
                            return;
                        }

                        const joiner = pendingSrc.includes('?') ? '&' : '?';
                        iframe.setAttribute('src', pendingSrc + joiner + 'autoplay=1');
                        modal.classList.add('show');
                        modal.style.display = 'block';
                        modal.setAttribute('aria-modal', 'true');
                        modal.removeAttribute('aria-hidden');
                        document.body.classList.add('modal-open');
                    });

                    modal.addEventListener('shown.bs.modal', function () {
                        if (!pendingSrc) return;
                        const joiner = pendingSrc.includes('?') ? '&' : '?';
                        iframe.setAttribute('src', pendingSrc + joiner + 'autoplay=1');
                    });

                    modal.addEventListener('hide.bs.modal', function () {
                        iframe.setAttribute('src', '');
                    });

                    // Fallback close behavior when Bootstrap modal events are not available.
                    const closeModalManually = function () {
                        iframe.setAttribute('src', '');
                        modal.classList.remove('show');
                        modal.style.display = 'none';
                        modal.setAttribute('aria-hidden', 'true');
                        modal.removeAttribute('aria-modal');
                        document.body.classList.remove('modal-open');
                    };

                    if (closeBtn) {
                        closeBtn.addEventListener('click', function (event) {
                            event.preventDefault();
                            if (window.bootstrap && window.bootstrap.Modal) {
                                window.bootstrap.Modal.getOrCreateInstance(modal).hide();
                                return;
                            }
                            closeModalManually();
                        });
                    }

                    modal.addEventListener('click', function (event) {
                        if (event.target !== modal) return;
                        if (window.bootstrap && window.bootstrap.Modal) {
                            window.bootstrap.Modal.getOrCreateInstance(modal).hide();
                            return;
                        }
                        closeModalManually();
                    });
                });
            </script>

            @if (!$hasSpecificVideo && !empty($fallbackVideoUrl))
                <!-- Modal para video de respaldo -->
                <div class="modal fade video-modal" id="videoModalLocal" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                        <div class="modal-content">
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <div class="embed-responsive embed-responsive-16by9">
                                <video id="fallbackVideoPlayer" controls>
                                    <source src="{{ $fallbackVideoUrl }}">
                                </video>
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function () {
                        const wrapper = document.getElementById('campusVideoWrapper');
                        const modal = document.getElementById('videoModalLocal');
                        const video = document.getElementById('fallbackVideoPlayer');

                        if (!wrapper || !modal || !video) return;

                        const playModalVideo = function () {
                            const playPromise = video.play();
                            if (playPromise && typeof playPromise.catch === 'function') {
                                playPromise.catch(function () {
                                    // Some browsers block autoplay; keep controls available for manual play.
                                });
                            }
                        };

                        const resetModalVideo = function () {
                            video.pause();
                            video.currentTime = 0;
                        };

                        wrapper.addEventListener('click', function () {
                            if (window.bootstrap && window.bootstrap.Modal) {
                                window.bootstrap.Modal.getOrCreateInstance(modal).show();
                                return;
                            }

                            modal.classList.add('show');
                            modal.style.display = 'block';
                            modal.setAttribute('aria-modal', 'true');
                            modal.removeAttribute('aria-hidden');
                            document.body.classList.add('modal-open');
                            playModalVideo();
                        });

                        wrapper.addEventListener('keydown', function (event) {
                            if (event.key === 'Enter' || event.key === ' ') {
                                event.preventDefault();
                                wrapper.click();
                            }
                        });

                        modal.addEventListener('shown.bs.modal', playModalVideo);
                        modal.addEventListener('hidden.bs.modal', resetModalVideo);

                        const closeBtn = modal.querySelector('.close');
                        if (closeBtn) {
                            closeBtn.addEventListener('click', function () {
                                if (window.bootstrap && window.bootstrap.Modal) return;
                                resetModalVideo();
                                modal.classList.remove('show');
                                modal.style.display = 'none';
                                modal.setAttribute('aria-hidden', 'true');
                                modal.removeAttribute('aria-modal');
                                document.body.classList.remove('modal-open');
                            });
                        }
                    });
                </script>
            @endif

        </main>
    @else
        {{-- <main id="main">
            @include('frontend.includes.empty-state')
        </main> --}}
    @endif
    {{-- <!-- END MAIN--> --}}

@endsection