@extends('layouts.public')
@section('title', 'Niveles')

@section('content')
@include('partials.page-header', ['title' => $settings?->levels_title ?: 'Niveles Educativos', 'subtitle' => $settings?->levels_subtitle])

<section class="section">
    <div class="container">
        <div class="row g-4">
            @forelse($levels as $level)
                <div class="col-md-4">
                    <div class="card card-hover h-100 shadow-sm level-card">
                        <div class="level-img-wrapper">
                            @if($level->image)
                                <img src="{{ image_url($level->image) }}" class="card-img-cover" alt="{{ $level->name }}">
                            @endif
                            @if($level->image2)
                                <div class="level-avatar">
                                    <img src="{{ image_url($level->image2) }}" alt="{{ $level->name }}">
                                </div>
                            @endif
                        </div>
                        <div class="card-body p-4" style="{{ $level->image2 ? 'padding-top: 72px;' : '' }}">
                            <h5 class="fw-bold">{{ $level->name }}</h5>
                            <p class="text-muted small mb-3">{!! Str::limit(strip_tags($level->description ?? ''), 120) !!}</p>
                            <a href="{{ route('levels.show', $level->slug) }}" class="fw-bold text-decoration-none" style="color:var(--primary);">Ver detalles <i class="bi bi-arrow-right"></i></a>
                        </div>
                        <a href="{{ route('levels.show', $level->slug) }}" class="level-overlay" aria-label="Ver {{ $level->name }}">
                            <i class="bi bi-hand-index"></i>
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center text-muted py-5">No hay niveles disponibles.</div>
            @endforelse
        </div>
    </div>
</section>
@endsection