@isset($servicios)
    @foreach ($servicios as $servicio)
        @if ($servicio->detalles->count() > 0)
            <section id="features-{{ $servicio->id }}" class="features section">
                <div class="container">
                    <ul class="nav nav-tabs row d-flex" data-aos="fade-up" data-aos-delay="100">
                        @foreach ($servicio->detalles as $index => $detalle)
                            <li class="nav-item col mt-2">
                                <a class="nav-link {{ $index === 0 ? 'active show' : '' }}" data-bs-toggle="tab" data-bs-target="#features-tab-{{ $servicio->id }}-{{ $index + 1 }}">
                                    <i class="{{ $detalle->icono }}"></i>
                                    <h4 class="d-none d-lg-block">{{ $detalle->titulo }}</h4>
                                </a>
                            </li>
                        @endforeach
                    </ul><!-- End Tab Nav -->

                    <div class="tab-content" data-aos="fade-up" data-aos-delay="200">
                        @foreach ($servicio->detalles as $index => $detalle)
                            <div class="tab-pane fade {{ $index === 0 ? 'active show' : '' }}" id="features-tab-{{ $servicio->id }}-{{ $index + 1 }}">
                                <div class="row">
                                    <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0">
                                        <h3>{{ $detalle->titulo }}</h3>
                                        <ul>
                                            @if(isset($detalle->contenido) && count($detalle->contenido) > 0)
                                                @foreach($detalle->contenido as $contenido)
                                                    <li><i class="bi bi-check2-all"></i> <span>{{ $contenido }}</span></li>
                                                @endforeach
                                            @else
                                                <li><i class="bi bi-check2-all"></i>
                                                    <span>{{ $detalle->descripcion ?? 'Descripción no disponible' }}</span>
                                                </li>
                                            @endif
                                        </ul>
                                    </div>
                                    <div class="col-lg-6 order-1 order-lg-2 text-center">
                                        <img src="{{ asset('/img/detalle_servicio/' . $detalle->imagen) }}" alt="" class="img-fluid">
                                    </div>
                                </div>
                            </div><!-- End Tab Content Item -->
                        @endforeach
                    </div>
                </div>
            </section>
        @endif
    @endforeach
@endisset