@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
@endphp

<section class="tv-process-section bg-light position-relative">
    <div class="p-top-center z-1 wow slideInTop">
        <img src="{{ $assetPath('images/process/hm1-shape01.png') }}" alt="">
    </div>
    <div class="process-inner bg-theme3 mx-30 ml-mx-0 br_bl-30 br_br-30 ml-br-0 space overflow-hidden xxl-br-0 position-relative">
        <div class="container position-relative">
            <div class="row">
                <div class="col-lg-12">
                    <div class="process-title mt--25">
                        <h2 class="text-white text-center">PR<span class="text-theme">O</span>CESS</h2>
                    </div>
                </div>
            </div>
            <div class="row gy-30">
                @foreach([
                    ['STEP 01', 'hm1-icon1.webp', 'Consult & Understand', 'We map the business process, users, data, and operational goals.'],
                    ['STEP 02', 'hm1-icon2.webp', 'Plan & Architect', 'We define modules, integrations, permissions, milestones, and rollout priorities.'],
                    ['STEP 03', 'hm1-icon3.webp', 'Build & Deploy', 'We develop, test, migrate data, deploy, and train teams for adoption.'],
                    ['STEP 04', 'hm1-icon4.webp', 'Support & Improve', 'We provide support, maintenance, reporting improvements, and future enhancements.'],
                ] as $step)
                    <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
                        <div class="tv-process-item wow fadeInRightBig" data-wow-delay=".{{ $loop->iteration + 1 }}s">
                            <h4 class="title-text">{{ $step[0] }}</h4>
                            <div class="process-box">
                                <div class="icon"><img src="{{ $assetPath('images/process/' . $step[1]) }}" alt=""></div>
                                <h3 class="title">{{ $step[2] }}</h3>
                                <p>{{ $step[3] }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- Pricing plans intentionally hidden for now. --}}

<section class="tv-cta-section inner bg-light">
    <div class="container border-top">
        <div class="row gy-30 align-items-center">
            <div class="col-lg-6">
                <div class="cta-content-wrapper">
                    <div class="title-wrap three">
                        <div class="sub-title-2 text-theme"><i class="fa-solid fa-circle-check"></i>Get In Touch</div>
                        <h2 class="sec-title">Let's Build Your Next System</h2>
                        <p>Talk to Ndarama Technologies about software, ERP, mobile apps, automation, and support for your organization.</p>
                    </div>
                    <a href="{{ route('frontend.contact') }}" class="theme-btn">
                        <span class="link-effect"><span class="effect-1">Contact with Us</span><span class="effect-1">Contact with Us</span></span>
                        <span class="arrow-all"><i><svg width="16" height="19" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 6H10M10 6L6 2M10 6L6 10" stroke="#050505" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg><svg width="16" height="19" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 6H10M10 6L6 2M10 6L6 10" stroke="#050505" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></i></span>
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="image-grid">
                    <div class="lines">@for($i = 0; $i < 12; $i++)<span></span>@endfor</div>
                    <div class="lines2">@for($i = 0; $i < 14; $i++)<span></span>@endfor</div>
                    <div class="image-box">
                        <div class="image-item"><img src="{{ asset('storage/uploads/generated/ndarama-collaboration.png') }}" alt="Digital solutions"></div>
                        <div class="image-item"><div class="icon"><i class="icon-handshake"></i></div></div>
                        <div class="image-item"><img src="{{ asset('storage/uploads/generated/ndarama-engineer.png') }}" alt="System planning"></div>
                        <div class="image-item"><img src="{{ asset('storage/uploads/generated/ndarama-support.png') }}" alt="Software delivery"></div>
                        <div class="image-item"><img src="{{ asset('storage/uploads/generated/ndarama-collaboration.png') }}" alt="Client support"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>