@php
    $seoToolContent = getContent('seo_tool.content', true);
    $seoToolElement = getContent('seo_tool.element', orderById: true);
    $responseSeoToolElement = $seoToolElement;
    $firstSeoElement = $seoToolElement->first();
    $lastSeoElement = $seoToolElement->last();
    $otherSeoElement = $seoToolElement->whereNotIn('id', [$firstSeoElement->id, $lastSeoElement->id])->chunk(2);
@endphp
<section class="integrations-section py-120 bg-img" data-background-image="{{ getImage(activeTemplate(true) . 'images/integrations/bg.png') }}">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="section-title text-center">
                    <span class="btn btn--base btn--section animate" data-direction="down">{{ __($seoToolContent?->data_values?->heading ?? '') }}</span>
                    <h2 class="main-title animate" data-direction="down">{{ __($seoToolContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down">{{ __($seoToolContent?->data_values?->short_details ?? '') }}</p>
                </div>
            </div>
        </div>
        <div class="row mt-60 d-none d-lg-flex">
            <div class="col-12">
                <div class="integrations-list">
                    <div class="integrations-list__box">
                        <div class="integrations-list__item animate">
                            <div>
                                <img src="{{ frontendImage('seo_tool', $firstSeoElement?->data_values?->image ?? '', '70x70') }}" alt="icons">
                                <h6>{{ __($firstSeoElement?->data_values?->title ?? '') }}</h6>
                            </div>
                        </div>
                    </div>

                    @foreach ($otherSeoElement as $seoToolElement)
                        <div class="integrations-list__box">
                            @foreach ($seoToolElement as $seo)
                                <div class="integrations-list__item animate">
                                    <div>
                                        <img src="{{ frontendImage('seo_tool', $seo?->data_values?->image ?? '', '70x70') }}" alt="icons">
                                        <h6>{{ __($seo?->data_values?->title ?? '') }}</h6>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach

                    <div class="integrations-list__box">
                        <div class="integrations-list__item animate">
                            <div>
                                <img src="{{ frontendImage('seo_tool', $lastSeoElement?->data_values?->image ?? '', '70x70') }}" alt="icons">
                                <h6>{{ __($lastSeoElement?->data_values?->title ?? '') }}</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-60 gy-4 justify-content-center d-lg-none">
            @foreach ($responseSeoToolElement as $seo)
                <div class="col-6 col-sm-4 col-md-3">
                    <div class="integrations-list__item animate">
                        <div>
                            <img src="{{ frontendImage('seo_tool', $seo?->data_values?->image ?? '', '70x70') }}" alt="icons">
                            <h6>{{ __($seo?->data_values?->title ?? '') }}</h6>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>