<section class="modellen-sectie py-5 bg-secondary w-100">
    <div class="container px-lg-5">
        <div class="mb-5">
            <h6 class="text-primary">{{ .Params.modellen_subtitle | default "Onze mantelzorgwoningen" }}</h6>
            <h2 class="display-5 fw-bold">{{ .Params.modellen_title | default "Samen leven, zelfstandig wonen" }}</h2>
        </div>
        
        <div class="row g-4 justify-content-center">
            {{ $modellen := (where .Site.RegularPages "Section" "modellen") }}
            {{ range $modellen.ByWeight }}
            <div class="col-md-6 col-lg-4">
                <div class="model-card position-relative shadow-sm overflow-hidden hero-rounded-img h-100">
                    
                    {{ with .Params.image }}
                    <div class="model-card-bg" style="background-image: url('{{ . | relURL }}');"></div>
                    {{ end }}

                    <div class="model-card-overlay d-flex flex-column justify-content-between p-4">
                        <div class="price-badge">
                            <span class="d-block small text-uppercase">Vanaf</span>
                            <span class="h4 fw-bold">€ {{ lang.FormatNumber 0 .Params.price }}</span>
                        </div>
                        
                        <div class="model-info mt-auto">
                            <h3 class="h4 fw-bold text-white mb-1">{{ .Title }}</h3>
                            <p class="text-white-50 small mb-0">{{ .Params.subtitle }}</p>
                            
                            <a href="{{ .RelPermalink }}" class="stretched-link" aria-label="Bekijk {{ .Title }}"></a>
                        </div>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</section>