@php

    $trustItems = \App\Services\TrustBarSettingsService::activeItems($homepageSettings ?? ($hp ?? []));

    $colClass = $colClass ?? 'col-6 col-md-3';

@endphp

@if(count($trustItems) > 0)

<link rel="stylesheet" href="{{ asset('css/trust-bar-effects.css') }}?v={{ filemtime(public_path('css/trust-bar-effects.css')) }}">

<div class="trust-bar trust-bar--animated" data-section="trust-bar">

    <div class="container">

        <div class="row g-2 text-center">

            @foreach($trustItems as $item)

            <div class="{{ $colClass }}">

                <div class="trust-item">

                    <div class="t-icon"><i class="fas {{ $item['icon'] }}"></i></div>

                    <div class="t-title">{{ $item['title'] }}</div>

                    @if(!empty($item['subtitle']))

                    <div class="t-sub">{{ $item['subtitle'] }}</div>

                    @endif

                </div>

            </div>

            @endforeach

        </div>

    </div>

</div>

<script>

(function () {

    document.querySelectorAll('.trust-bar--animated .trust-item').forEach(function (el) {

        el.addEventListener('click', function () {

            el.classList.remove('is-tap');

            void el.offsetWidth;

            el.classList.add('is-tap');

            window.setTimeout(function () { el.classList.remove('is-tap'); }, 450);

        });

    });

})();

</script>

@endif