{{-- Projects index bespoke · demo-urban-development → "Etapas & disponibilidad" --}}
@php
    $estados = ['disponible' => __('Disponible'), 'reservado' => __('Pre-venta'), 'vendido' => __('Agotada')];
    $imgBase = 'cd-project/img/demos/urban-development';
    $totalEtapas = method_exists($projects, 'total') ? $projects->total() : $projects->count();
    $disponibles = $projects->filter(fn($p) => ($p->status ?? 'disponible') === 'disponible')->count();
@endphp

{{-- Intro --}}
<section class="ud-section ud-section--tight">
    <div class="ud-container">
        <div class="ud-split ud-reveal" style="align-items:flex-end;">
            <div>
                <span class="ud-eyebrow">{{ __('Disponibilidad') }}</span>
                <h2 class="ud-display" style="margin-bottom:1rem;">{{ config('site.modules.projects.page_header.title', __('Etapas & lotes')) }}</h2>
                <p class="ud-lead" style="margin-bottom:0;">{{ config('site.modules.projects.page_header.subtitle', __('Cada etapa fue proyectada como parte de un todo. Explorá la disponibilidad, conocé el estado de cada sector y reservá tu lugar en el barrio.')) }}</p>
            </div>
            <div class="ud-stats" style="border:0; padding:0; grid-template-columns:repeat(2,auto); gap:2.5rem; justify-content:flex-end;">
                <div class="ud-stat"><span class="ud-stat__num">{{ $totalEtapas }}</span><span class="ud-stat__label">{{ __('Etapas') }}</span></div>
                <div class="ud-stat"><span class="ud-stat__num">{{ $disponibles }}</span><span class="ud-stat__label">{{ __('Con disponibilidad') }}</span></div>
            </div>
        </div>

        @if(isset($categories) && $categories->count() > 0)
        <div class="ud-pills ud-reveal" style="margin-top:2.5rem;">
            <a href="{{ route('frontend.projects.index') }}" class="ud-pill"><i class="fas fa-layer-group"></i> {{ __('Todas') }}</a>
            @foreach($categories as $cat)
            <a href="{{ route('frontend.projects.category', $cat->slug) }}" class="ud-pill">{{ $cat->name }}</a>
            @endforeach
        </div>
        @endif
    </div>
</section>

{{-- Grid de etapas --}}
<section class="ud-section ud-section--flush ud-on-stone" style="padding-bottom:var(--ud-gap); padding-top:clamp(2rem,3vw,3rem);">
    <div class="ud-container">
        @if(isset($projects) && $projects->count() > 0)
        <div class="ud-etapas">
            @foreach($projects as $project)
            @php
                $stKey = in_array($project->status ?? '', ['disponible','reservado','vendido']) ? $project->status : 'disponible';
                $projImg = $project->image
                    ? (filter_var($project->image, FILTER_VALIDATE_URL) ? $project->image : asset($project->image))
                    : asset($imgBase.'/listing/listing-'.(($loop->index % 6) + 1).'-thumb.jpg');
            @endphp
            <article class="ud-etapa ud-reveal">
                <a href="{{ route('frontend.projects.show', $project->slug) }}" class="ud-etapa__media ud-zoom d-block">
                    <span class="ud-status ud-status--{{ $stKey }}">{{ $estados[$stKey] }}</span>
                    <img src="{{ $projImg }}" alt="{{ $project->title }}">
                </a>
                <div class="ud-etapa__body">
                    <h3 class="ud-etapa__name">{{ $project->title }}</h3>
                    <p class="ud-etapa__desc">{{ Str::limit(strip_tags($project->description ?? ''), 140) }}</p>
                    <div class="ud-etapa__foot">
                        @if($project->categories && $project->categories->count())
                            <span class="ud-stat__label" style="margin:0;">{{ $project->categories->first()->name }}</span>
                        @else
                            <span class="ud-status ud-status--{{ $stKey }}">{{ $estados[$stKey] }}</span>
                        @endif
                        <a href="{{ route('frontend.projects.show', $project->slug) }}" class="ud-etapa__link">{{ __('Ver etapa') }} <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </article>
            @endforeach
        </div>

        @if(method_exists($projects, 'hasPages') && $projects->hasPages())
        <div class="ud-reveal" style="margin-top:3rem; display:flex; justify-content:center;">
            {{ $projects->onEachSide(1)->links('pagination::simple-bootstrap-4') }}
        </div>
        @endif
        @else
        <p class="ud-lead" style="text-align:center;">{{ __('Pronto vamos a publicar las etapas del desarrollo.') }}</p>
        @endif
    </div>
</section>

{{-- CTA band --}}
<section class="ud-section ud-on-green ud-cta" style="text-align:center;">
    <div class="ud-container ud-cta__inner">
        <span class="ud-eyebrow ud-eyebrow--center" style="color:var(--ud-gold);">{{ __('¿Te interesó una etapa?') }}</span>
        <h2 class="ud-display ud-narrow" style="color:#fff;">{{ __('Reservá tu lote, directo del dueño') }}</h2>
        <div class="ud-hero__cta" style="justify-content:center;">
            <a href="{{ route('front.contact') }}" class="ud-btn ud-btn--gold">{{ __('Agendá tu visita') }} <i class="fas fa-arrow-right"></i></a>
            <a href="{{ route('front.contact') }}" class="ud-btn ud-btn--light">{{ __('Hablá con el dueño') }}</a>
        </div>
    </div>
</section>