{{ $hero := .Params.hero }}

{{ if $hero.image }}
    <div class="hero-image-model mb-5" data-aos="fade-up" data-aos-delay="400"
        style="background-image: url('{{ $hero.image | relURL }}');">
    </div>
{{ end }}

<div class="col-md-11 mx-auto">
    {{ if $hero.eyebrow }}
        <p class="h6 text-primary" data-aos="fade-in" data-aos-delay="600">{{ $hero.eyebrow | markdownify }}</p>
    {{ end }}
    
    <h1 class="h1 display-3 mb-lg-3" data-aos="fade-in" data-aos-delay="100">
        {{ $hero.title | default .Title | markdownify }}
    </h1>
    
    {{ if $hero.paragraph }}
        <p class="" data-aos="fade-in" data-aos-delay="200">{{ $hero.paragraph | markdownify }}</p>
    {{ end }}

    {{ if $hero.summary }}
        <div id="model-eigenschappen" class="row g-3 mt-2">
            {{ range $index, $element := $hero.summary }}
            {{ $delay := add 200 (mul $index 100) }}
            
            <div class="col-sm-12 col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $delay }}">
                <div class="d-flex align-items-center p-3 border rounded-4 bg-light h-100">
                    <div class="icon-box me-3 text-primary">
                        <i class="bi {{ .icon | default "bi-info-circle" }}"></i>
                    </div>
                    <div>
                        <span class="d-block">
                            {{ .property }}
                        </span>
                        <span class="fw-bold d-block">{{ .value }}</span>
                    </div>
                </div>
            </div>
            {{ end }}
        </div>
    {{ end }}
</div>