@php
    $featureContent = getContent('feature.content', true);
    $query = App\Models\Domain::active();
    $latestDomains = (clone $query)->limit(4)->get();
    $auctionEndSoonDomains = (clone $query)->orderBy('end_time', 'asc')->limit(4)->get();
    $maxPriceDomains = (clone $query)->orderBy('price', 'desc')->limit(4)->get();
@endphp

<section class="feature-domain my-120">
    <div class="container">
        <div class="section-heading">
            <span class="section-heading__tagline" data-aos="fade-up" data-aos-duration="1500"
                  data-aos-delay="100">{{ __($featureContent?->data_values?->title ?? '') }}</span>
            <h2 class="section-heading__title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="200">
                {{ __($featureContent?->data_values?->heading ?? '') }}
            </h2>
            <p class="section-heading__desc" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                {{ __($featureContent?->data_values?->subheading ?? '') }}
            </p>
        </div>
        <div class="feature-domain-tab tab-active" role="tablist" data-aos="fade-up" data-aos-duration="1500"
             data-aos-delay="400">
            <span class="tab-active__shape"></span>
            <button class="feature-domain-tab__btn active" data-bs-toggle="tab"
                    data-bs-target="#feature-domain-tab-pane-1" type="button" role="tab"
                    aria-controls="feature-domain-tab-pane-1" aria-selected="true">
                @lang('New Domains')
            </button>
            <button class="feature-domain-tab__btn" data-bs-toggle="tab" data-bs-target="#feature-domain-tab-pane-2"
                    type="button" role="tab" aria-controls="feature-domain-tab-pane-2" aria-selected="false">
                @lang('Auction Ending Soon')
            </button>
            <button class="feature-domain-tab__btn" data-bs-toggle="tab" data-bs-target="#feature-domain-tab-pane-3"
                    type="button" role="tab" aria-controls="feature-domain-tab-pane-3" aria-selected="false">
                @lang('High Rated Domains')
            </button>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="feature-domain-tab-pane-1" role="tabpanel" tabindex="0">
                <div class="row gy-4">
                    @include('Template::domain.partials.domain_list', [
                        'domains' => $latestDomains,
                        'layout' => 'col-xl-3',
                    ])
                </div>
            </div>
            <div class="tab-pane fade" id="feature-domain-tab-pane-2" role="tabpanel" tabindex="0">
                <div class="row gy-4">
                    @include('Template::domain.partials.domain_list', [
                        'domains' => $auctionEndSoonDomains,
                        'layout' => 'col-xl-3',
                    ])
                </div>
            </div>
            <div class="tab-pane fade" id="feature-domain-tab-pane-3" role="tabpanel" tabindex="0">
                <div class="row gy-4">
                    @include('Template::domain.partials.domain_list', [
                        'domains' => $maxPriceDomains,
                        'layout' => 'col-xl-3',
                    ])
                </div>
            </div>
        </div>
        @if ($query->count() > 0)
            <div class="mt-4 mt-sm-5 text-center" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="400">
                <a class="btn btn--base" href="{{ url($featureContent?->data_values?->button_url ?? '') }}">
                    <span class="btn__text">{{ __($featureContent?->data_values?->button_text ?? '') }}</span>
                    <span class="btn__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
                            <path d="M7 7h10v10"></path>
                            <path d="M7 17 17 7"></path>
                        </svg>
                    </span>
                </a>
            </div>
        @endif
    </div>
</section>
