@section('page-title', __('language.home'))
{{-- @section('page-description', $detail->description) --}}
@section('page-image', asset($detail->image ?? 'site/img/default.png'))
@extends('site.master')

@section('main-content')
    @php
        $currentLanguage = app()->getLocale();
    @endphp

<section class="bg-light py-5 position-relative overflow-hidden
    ">
    <div class="img-benifits position-absolute opacity-50 w-100 h-100" style="
    z-index: 0;
    top: 0;
    right:0;
">
        <img src="{{ asset('site/img/map-section-bg-1.png') }}" alt="">
    </div>
    <div class="container py-5 my-5 position-relative zindex-1">
        <div class="row">
            <div class="col d-flex">
                <h3 class="col-lg-6 col-9 fwc-600 fs-4">
                    Guided by Instinct, Knowledge, and Imagination <span class="text-danger"> Navigating Through
                        Uncertainty with Confidence</span>
                </h3>

            </div>
        </div>
        <div class="row py-5">

            <div class="col-lg-7 ">
                <div class="d-flex row row-cols-3 gap-4 mb-5">
                    @foreach ($record as $key => $item)
                        @php
                            $words = explode(' ', $item->title); // Split title into words
                            $lastWord = array_pop($words); // Extract the last word
                            $titleWithoutLastWord = implode(' ', $words); // Reconstruct the title without the last word
                        @endphp
                        <div class="py-3 flex-grow-1 px-0 rounded" data-aos="fade-up"
                            data-aos-delay="{{ $key * 75 }}">
                            <div class="d-flex align-items-start flex-column gap-2">
                                <div class="px-4 d-flex align-items-start justify-content-start w-100">
                                    <i class="{{ $item->icon }} fs-3 me-3"></i>
                                    <h3 class="fs-7 fw-bold text-uppercase mb-0">
                                        {{ $titleWithoutLastWord }}
                                        @if ($lastWord)
                                            <span class="d-block text-danger">
                                                {{ $lastWord }} <!-- Display the last word in red -->
                                            </span>
                                        @endif
                                    </h3>
                                </div>
                                <div class="px-4">

                                    <div>
                                        {{ $item->shrtsummary }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row row-cols-3 gap-lg-4 gap-2 w-100 g-0 g-lg-1 mt-5 d-none">
                    @foreach ($stats as $key => $item)
                        <div class="cols has-border d-flex gap-3 flex-grow-1 flex-grow-lg-0 mb-4 mb-lg-0"
                            data-aos="fade-up" data-aos-delay="{{ $key * 100 }}">
                            <div class="icon"><i class="{{ $item->icons }} text-danger fs-3"></i></div>
                            <div class="content w-75">
                                <h4 class="fw-bold text-primary-custom mb-0">
                                    <span class="countdown" data-target="{{ $item->count }}">{{ $item->count }}</span>
                                    {{ $item->unit }}
                                </h4>
                                <small>{{ $item->title }}</small>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-lg-4 offset-lg-1 d-flex justify-content-center">
                <img src="{{ asset('site/img/titlepic-1-1.png') }}" alt="benifits"
                    style="height: 671px !important;object-fit: contain;" data-aos="fade-right" data-aos-delay="100">
            </div>

        </div>
    </div>
</section>
@endsection