<x-Guest-layout>

    <!-- Main -->
    <main class="min-h-screen space-y-16">
        <!-- BreadCrumbs -->
        <section class="h-[139px] bg-[url(image/breadcrumbs/breadcrumbs.jpg)] bg-cover bg-center">
            <!-- overlay -->
            <div class="h-full w-full bg-black bg-opacity-80">
                <div
                    class="container mx-auto flex h-full items-center justify-between px-2 md:px-[20px] lg:px-[100px] xl:px-[169px]">
                    <!-- content -->
                    <div class="">
                        <h1 class="text-[20px] font-semibold uppercase text-white">
                            Services
                        </h1>
                        <p class="text-[10px] font-medium text-white">
                            <a href="index.html" class="text-[#F06728]">Home</a> / Services
                        </p>
                    </div>
                    <p class="hidden max-w-[462px] text-end text-[17px] font-medium text-white sm:block">
                        We freight to all over the world The best logistic company, first
                        and Safely
                    </p>
                </div>
            </div>
        </section>

        <!-- Service Details -->
        <section
            class="container relative mx-auto flex flex-col-reverse gap-4 px-2 text-[#424242] md:flex-row md:px-[20px] lg:px-[100px] xl:px-[169px]">
            <!-- Sidebar -->
            <div class="top-0 h-fit space-y-4 md:sticky md:w-[280px]">
                <!-- Services -->
                <div class="space-y-4 rounded-md bg-[#f0f0f0] px-4 py-3">
                    <h1 class="text-lg font-bold">Services</h1>
                    <ul class="space-y-3">
                        <!-- Service -->
                        @foreach ($allService as $view)
                            <li>
                                <a href="{{ route('service-view', $view->id) }}"
                                    class="flex items-center justify-between border border-gray-300 bg-[#f6f6f6] px-4 py-3 transition-colors hover:border-gray-400">
                                    <h1 class="font-semibold">{{ $view->title }}</h1>
                                    <span><i class="fa-solid fa-arrow-right"></i></span>
                                </a>
                            </li>
                        @endforeach



                    </ul>
                </div>
                <!-- Contact -->

            </div>

            <!-- Service Details -->
            <div class="flex-1 space-y-6 text-[#424242]">
                <!-- Road Transport -->
                <section class="space-y-4">
                    <div>
                        <img src="{{ asset('images/' . $service->image) }}" alt="trucks"
                            class="h-[350px] w-full object-cover object-center" />
                    </div>
                    <div>
                        <h1 class="text-[22px] font-bold">{{ $service->title }}</h1>
                        <p class="text-[14px]">
                            {{ $service->short_des }}
                        </p>
                        <div>
                            {!! $service->content !!}
                        </div>
                    </div>
                </section>

            </div>
        </section>
    </main>
</x-Guest-layout>
