{{--
    Partial: renderiza una sección dinámica del congreso según su tipo.
    Variables: $seccion (CongresoSeccion), $congreso (Congreso)
--}}
@php
    $bgStyle = '';
    if ($seccion->imagen_fondo) {
        $bgStyle = "background-image:url('" . asset('storage/' . $seccion->imagen_fondo) . "');background-size:cover;background-position:center;";
    } elseif ($seccion->color_fondo) {
        $bgStyle = "background-color:{$seccion->color_fondo};";
    }
    $textStyle = $seccion->color_texto ? "color:{$seccion->color_texto};" : '';
@endphp

<section
    id="{{ $seccion->slug ?: 'seccion-' . $seccion->id }}"
    class="congreso-seccion seccion-tipo-{{ $seccion->tipo }} py-5"
    style="{{ $bgStyle }}{{ $textStyle }}"
>
    <div class="container{{ $seccion->layout === 'full' ? '-fluid' : '' }}">

        {{-- Encabezado de la sección --}}
        @if($seccion->titulo || $seccion->subtitulo)
            <div class="text-center mb-4">
                @if($seccion->titulo)
                    <h2 class="seccion-titulo">{{ $seccion->titulo }}</h2>
                @endif
                @if($seccion->subtitulo)
                    <p class="seccion-subtitulo lead text-muted">{{ $seccion->subtitulo }}</p>
                @endif
                <hr class="mx-auto" style="max-width:60px;border-width:3px">
            </div>
        @endif

        {{-- ── CONTENIDO SEGÚN TIPO ──────────────────────────────────── --}}

        @if($seccion->tipo === 'texto')
            <div class="seccion-contenido {{ $seccion->layout === 'centrado' ? 'mx-auto' : '' }}" style="{{ $seccion->layout === 'centrado' ? 'max-width:800px' : '' }}">
                {!! $seccion->contenido !!}
            </div>

        @elseif($seccion->tipo === 'imagen')
            @if($seccion->imagen)
                <div class="text-center">
                    <img src="{{ asset('storage/' . $seccion->imagen) }}"
                         class="img-fluid rounded shadow-sm"
                         alt="{{ $seccion->titulo }}">
                </div>
            @endif
            @if($seccion->contenido)
                <div class="mt-3">{!! $seccion->contenido !!}</div>
            @endif

        @elseif($seccion->tipo === 'video')
            @php
                $videoUrl = $seccion->video_url ?? '';
                // Convertir URL normal de YouTube a embed
                if (str_contains($videoUrl, 'youtube.com/watch')) {
                    parse_str(parse_url($videoUrl, PHP_URL_QUERY), $params);
                    $videoUrl = 'https://www.youtube.com/embed/' . ($params['v'] ?? '');
                } elseif (str_contains($videoUrl, 'youtu.be/')) {
                    $videoUrl = 'https://www.youtube.com/embed/' . substr(parse_url($videoUrl, PHP_URL_PATH), 1);
                } elseif (str_contains($videoUrl, 'vimeo.com/')) {
                    $videoId = basename(parse_url($videoUrl, PHP_URL_PATH));
                    $videoUrl = "https://player.vimeo.com/video/{$videoId}";
                }
            @endphp
            @if($videoUrl)
                <div class="ratio ratio-16x9 shadow-sm rounded overflow-hidden mx-auto" style="max-width:900px">
                    <iframe src="{{ $videoUrl }}" allowfullscreen></iframe>
                </div>
            @endif

        @elseif($seccion->tipo === 'mapa')
            @php $embedUrl = $seccion->mapa_embed_generado; @endphp
            <div class="{{ $seccion->layout === 'dos_columnas' ? 'row align-items-center g-4' : '' }}">
                @if($seccion->layout === 'dos_columnas' && ($seccion->contenido || $seccion->mapa_direccion))
                    <div class="col-md-5">
                        @if($seccion->mapa_direccion)
                            <p><i class="bi bi-geo-alt-fill text-danger me-2"></i>{{ $seccion->mapa_direccion }}</p>
                        @endif
                        @if($seccion->contenido)
                            {!! $seccion->contenido !!}
                        @endif
                        @if($embedUrl)
                            <a href="https://maps.google.com/maps?q={{ $seccion->mapa_lat }},{{ $seccion->mapa_lng }}"
                               target="_blank" class="btn btn-outline-primary btn-sm mt-2">
                                <i class="bi bi-map me-1"></i> Ver en Google Maps
                            </a>
                        @endif
                    </div>
                    <div class="col-md-7">
                @endif
                @if($embedUrl)
                    <div class="rounded overflow-hidden shadow-sm" style="height:400px">
                        <iframe src="{{ $embedUrl }}" width="100%" height="100%"
                                frameborder="0" style="border:0" allowfullscreen
                                loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <i class="bi bi-map display-4"></i>
                        <p>@if($seccion->mapa_direccion) {{ $seccion->mapa_direccion }} @else Mapa no configurado @endif</p>
                    </div>
                @endif
                @if($seccion->layout === 'dos_columnas' && ($seccion->contenido || $seccion->mapa_direccion))
                    </div>
                </div>
                @endif

                @if($seccion->layout !== 'dos_columnas' && $seccion->mapa_direccion)
                    <p class="text-center mt-3">
                        <i class="bi bi-geo-alt-fill text-danger me-1"></i>
                        {{ $seccion->mapa_direccion }}
                        @if($seccion->mapa_lat)
                            <a href="https://maps.google.com/maps?q={{ $seccion->mapa_lat }},{{ $seccion->mapa_lng }}"
                               target="_blank" class="ms-2 btn btn-sm btn-outline-secondary">
                                <i class="bi bi-map me-1"></i>Ver en Maps
                            </a>
                        @endif
                    </p>
                @endif

        @elseif($seccion->tipo === 'descargables')
            @php
                $materiales = $congreso->materiales()->activos()->publicos()->get();
            @endphp
            @if($materiales->isNotEmpty())
                <div class="row g-3 justify-content-center">
                    @foreach($materiales as $mat)
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <div class="card h-100 text-center shadow-sm">
                            <div class="card-body">
                                <i class="bi {{ $mat->icono }} display-5 mb-2"></i>
                                <h6 class="card-title">{{ $mat->titulo }}</h6>
                                @if($mat->descripcion)
                                    <p class="card-text text-muted small">{{ $mat->descripcion }}</p>
                                @endif
                                <div class="text-muted small mb-3">{{ $mat->tamanio_formateado }}</div>
                            </div>
                            <div class="card-footer bg-transparent border-0 pb-3">
                                <a href="{{ route('admin.materiales.descargar', $mat) }}" class="btn btn-primary btn-sm">
                                    <i class="bi bi-download me-1"></i> Descargar
                                </a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            @else
                <p class="text-center text-muted">No hay material disponible aún.</p>
            @endif

        @elseif($seccion->tipo === 'contador')
            @if(isset($congreso->fecha_inicio))
            <div class="text-center" id="contador-{{ $seccion->id }}">
                <div class="d-flex justify-content-center gap-4">
                    @foreach(['dias'=>'Días','horas'=>'Horas','minutos'=>'Minutos','segundos'=>'Segundos'] as $key=>$lbl)
                    <div>
                        <div class="display-4 fw-bold contador-num" data-unit="{{ $key }}">--</div>
                        <div class="text-muted small">{{ $lbl }}</div>
                    </div>
                    @endforeach
                </div>
            </div>
            <script>
            (function(){
                const target = new Date("{{ $congreso->fecha_inicio }}").getTime();
                const wrap   = document.getElementById('contador-{{ $seccion->id }}');
                function update(){
                    const diff = target - Date.now();
                    if(diff <= 0){ wrap.innerHTML = '<p class="lead">¡El evento ha comenzado!</p>'; return; }
                    const d=Math.floor(diff/86400000), h=Math.floor((diff%86400000)/3600000),
                          m=Math.floor((diff%3600000)/60000), s=Math.floor((diff%60000)/1000);
                    wrap.querySelector('[data-unit=dias]').textContent    = String(d).padStart(2,'0');
                    wrap.querySelector('[data-unit=horas]').textContent   = String(h).padStart(2,'0');
                    wrap.querySelector('[data-unit=minutos]').textContent = String(m).padStart(2,'0');
                    wrap.querySelector('[data-unit=segundos]').textContent= String(s).padStart(2,'0');
                }
                update(); setInterval(update, 1000);
            })();
            </script>
            @endif

        @else
            {{-- Tipo genérico: simplemente mostrar contenido --}}
            @if($seccion->contenido)
                <div class="seccion-contenido">{!! $seccion->contenido !!}</div>
            @endif
        @endif

    </div>
</section>