{{-- Services index bespoke · demo-urban-development → "Amenities & estilo de vida" --}}

{{-- Intro --}}
<section class="ud-section ud-section--tight">
    <div class="ud-container ud-narrow" style="text-align:center;">
        <span class="ud-eyebrow ud-eyebrow--center">{{ __('Estilo de vida') }}</span>
        <h2 class="ud-display">{{ __('Todo lo que hace especial vivir acá') }}</h2>
        <p class="ud-lead">{{ __('Cada amenity fue pensado para que el día a día sea más simple, seguro y disfrutable — desde la seguridad permanente hasta los espacios verdes que rodean tu hogar.') }}</p>
    </div>
</section>

{{-- Grid de amenities --}}
<section class="ud-section ud-section--flush" style="padding-bottom:var(--ud-gap);">
    <div class="ud-container">
        @if(isset($services) && $services->count() > 0)
        <div class="ud-amenities ud-reveal">
            @foreach($services as $service)
            <a href="{{ route('frontend.services.detail', $service->slug) }}" class="ud-amenity" style="text-decoration:none; display:block;">
                <i class="ud-amenity__icon {{ $service->icon ?: 'fas fa-tree' }}"></i>
                <h3 class="ud-amenity__title">{{ $service->title }}</h3>
                <p class="ud-amenity__desc">{{ Str::limit(strip_tags($service->description ?? ''), 130) }}</p>
                <span class="ud-etapa__link" style="margin-top:1.1rem;">{{ __('Conocer más') }} <i class="fas fa-arrow-right"></i></span>
            </a>
            @endforeach
        </div>
        @else
        <p class="ud-lead" style="text-align:center;">{{ __('Pronto vamos a detallar todos los amenities del desarrollo.') }}</p>
        @endif
    </div>
</section>

{{-- CTA band --}}
<section class="ud-section ud-on-dark 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);">{{ __('Viví la experiencia') }}</span>
        <h2 class="ud-display ud-narrow" style="color:#fff;">{{ __('Conocé el barrio en una visita guiada') }}</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>
        </div>
    </div>
</section>