@php
    $howItWorkContent = getContent('how_it_work.content', true);
    // Sri Lanka specific steps
    $sriLankaSteps = [
        [
            'title' => 'Choose Your Sri Lanka Destination',
            'description' => 'Select from Cultural Triangle, Kandy, Ella, Yala, or customize your Sri Lanka adventure',
            'icon' => '<i class="fa-solid fa-location-dot fs--32 text--base"></i>'
        ],
        [
            'title' => 'Plan Your Sri Lankan Journey',
            'description' => 'Tell us your travel dates and preferences for the perfect Sri Lanka experience',
            'icon' => '<i class="fa-solid fa-calendar-days fs--32 text--base"></i>'
        ],
        [
            'title' => 'Book Your Sri Lanka Adventure',
            'description' => 'Secure your Sri Lanka trip with instant confirmation and expert local support',
            'icon' => '<i class="fa-solid fa-check-circle fs--32 text--base"></i>'
        ]
    ];
@endphp

<section class="how-it--work section--bg py-100 position-relative">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-content mb-50">
                    <div class="title-wrap">
                        <h6 class="heading third--font text-center fs--32 fw--700 text--base mb-0 scroll-animate">How It Works</h6>
                        <h2 class="title text-center mb-3 fs--40 fw--800 splite-text scroll-animate" data-splitting
                            >Sri Lanka Hassle Free Booking, Plan in Minutes</h2>
                            <p class="subtitle text-center fs-16 fw--400 scroll-animate">A Simple Guide to Your Seamless Sri Lanka Journey – Follow These Easy Steps to Book Your Next Sri Lankan Adventure!</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-center justify-content-lg-between gy-4 position-relative">
            <div class="air--line position-absolute">
                <img class="w--100 h-auto" src="{{asset($activeTemplateTrue . 'images/shape/air-line.png')}}" alt="image">
            </div>

            @foreach ($sriLankaSteps as $index => $item)

            <div class="col-lg-4 col-md-6">
                <div class="how-work--box d-flex flex-column justify-content-center align-items-center position-relative">
                    <div class="icon-wrap d-flex justify-content-center align-items-center flex-shrink-0 position-relative">
                        {!! $item['icon'] !!}

                        <span class="steps position-absolute fs--14 fw--500 text--white">Step {{ $index + 1 }}</span>
                    </div>
                    <div class="content-wrap">
                        <h6 class="title fs--24 text-center fw--600 mb-1">{{ $item['title'] }}</h6>
                        <p class="text-center">{{ $item['description'] }}</p>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
    </div>
</section>