@extends('home.layout.app')

@section('title', 'Home')

@section('content')

    <main>
        <!-- hero -->
        <section class="ark__hero--main">

            <div class="ark__hero--banner-img">
                @if ($hero && $hero->image)
                    <img src="{{ asset('storage/' . $hero->image) }}" alt="Hero Banner">
                @else
                    <img src="{{ asset('frontend/images/default-hero.jpg') }}" alt="Hero Banner">
                @endif
            </div>

            <div class="container">
                <div class="ark__hero--content">

                    <h1>
                        ArkAnu <br>
                        @if (!empty($hero->title))
                            {!! nl2br(e($hero->title)) !!}
                        @else
                            <span class="ark_block">Where Logistics Meets Simplicity.</span>
                        @endif

                    </h1>

                    <p class="ark__hero--subcontent">
                        {{ $hero->subtitle ?? 'Partner with us for efficient, scalable, and cost-effective logistics solutions!' }}
                    </p>

                    @if ($hero && $hero->button_text)
                        <div class="create-path">
                            <a class="ark__btn" href="{{ $hero->button_link ?? '#' }}">
                                <span class="ark__btn-text">{{ $hero->button_text }}</span>
                                <span class="ark__btn-icon">
                                    <img src="{{ asset('assets/images/btn-arrow.svg') }}" alt="icon">
                                </span>
                            </a>
                        </div>
                    @endif

                </div>
            </div>
        </section>
        <!-- about us -->
        <section class="ark__AboutUs--section section-padding--main">
            <div class="container">
                <div class="ark__about__inner">
                    <h1 id="about-title" class="ark__about__title ark__btm--spacing">About Us</h1>
                    @php
                        $about = $about ?? null;
                    @endphp

                    <div class="ark__about__hero">

                        <div class="ark__about__hero-left">
                            <div class="ark__about--Forwarder-main">

                                <div class="ark__about__heading">
                                    <h3>
                                        <span class="ark__brick--red">
                                            {{ $about?->title_red ?? 'ArkAnu Freight' }}
                                        </span>
                                        <span class="ark_block">
                                            {{ $about?->title_black ?? 'Forwarder' }}
                                        </span>
                                    </h3>

                                    <p class="ark__about__subheading">
                                        {{ $about?->subtitle ?? 'US E-commerce Fulfillment Specialist' }}
                                    </p>
                                </div>

                                <div class="ark__about__thumbs" aria-hidden="true">
                                    @php
                                        $thumbs = [];

                                        if (!empty($about?->gallery_images)) {
                                            $thumbImages = is_array($about->gallery_images)
                                                ? $about->gallery_images
                                                : json_decode($about->gallery_images, true);

                                            $thumbs = collect($thumbImages)
                                                ->map(fn($img) => asset('storage/' . $img))
                                                ->toArray();
                                        } else {
                                            $thumbs = [
                                                asset('assets/images/aboutus03.jpg'),
                                                asset('assets/images/aboutus02.jpg'),
                                            ];
                                        }
                                    @endphp

                                    @foreach ($thumbs as $thumb)
                                        <div class="ark__about__thumb">
                                            <img src="{{ $thumb }}" alt="">
                                            <span class="ark__about__thumb-overlay"></span>
                                        </div>
                                    @endforeach
                                </div>


                            </div>

                            <a class="ark__btn" href="{{ $about?->button_link ?? '#' }}">
                                <span class="ark__btn-text">
                                    {{ $about?->button_text ?? 'QUOTE' }}
                                </span>
                                <span class="ark__btn-icon">
                                    <img src="{{ asset('assets/images/btn-arrow.svg') }}" alt="icon">
                                </span>
                            </a>
                        </div>

                        <div class="ark__about__hero-right">
                            <div class="ark__about__hero-image">
                                <img src="{{ $about?->main_image ? asset('storage/' . $about->main_image) : asset('images/aboutus01.jpg') }}"
                                    alt="Warehouse interior">
                                <span class="ark__about__image-overlay"></span>
                            </div>

                            <p class="ark__about__description">
                                {{ $about?->description ??
                                    'ArkAnu Freight Forwarder is located in Ontario, part of the Greater Los Angeles area,
                                                                                                    and has a modern e-commerce logistics center of 80,000 square feet. We focus on
                                                                                                    providing direct-to-consumer fulfillment services for cross-border e-commerce clients,
                                                                                                    covering major platforms and delivery to end consumers such as Amazon FBA, Tiktok Shop,
                                                                                                    self-operated sites, Temu, and more.' }}
                            </p>
                        </div>

                    </div>

                    <div class="ark__about__divider" aria-hidden="true"></div>

                    <div class="ark__about__services" aria-label="Logistics services">
                        @foreach ($aboutServices as $service)
                            <article class="ark__card ark__card--service">
                                <div class="ark__card__media">
                                    @if ($service->image)
                                        <img src="{{ asset('storage/' . $service->image) }}" alt="{{ $service->title }}">
                                    @else
                                        {{-- Fallback placeholder image if no image uploaded --}}
                                        <img src="{{ asset('assets/images/placeholder-service.jpg') }}"
                                            alt="{{ $service->title }}">
                                    @endif
                                    <span class="ark__card__overlay"></span>
                                </div>
                                <div class="ark__card__body">
                                    <h2 class="ark__card__title">{{ $service->title }}</h2>
                                    <div class="ark__card__underline" aria-hidden="true"></div>
                                    @if (is_array($service->list_items) && count($service->list_items) > 0)
                                        <ul class="ark__card__list">
                                            @foreach ($service->list_items as $item)
                                                <li class="ark__card__list-item">{{ $item }}</li>
                                            @endforeach
                                        </ul>
                                    @endif
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
        <!-- Warehouse 3PL Advantage -->
        <section class="ark__warehouse--advantage section-padding--main">
            <div class="container">
                <div class="ark__warehouse--main">
                    <div class="ark__warehouse--wrap">
                        <div class="ark__about__heading">
                            <h3>
                                <span class="ark__brick--red">ArkAnu Overseas Warehouse</span>
                                <span class="ark_block">3PL Advantage</span>
                            </h3>
                        </div>
                        <a class="ark__btn" href="#">
                            <span class="ark__btn-text">QUOTE</span>
                            <span class="ark__btn-icon">
                                <img src="{{ asset('assets/images/btn-arrow.svg') }}" alt="icon">
                            </span>
                        </a>
                    </div>

                    @forelse($advantages as $index => $advantage)
                        <div class="ark__warehouse-item">
                            <div class="ark__warehouse-item-image">
                                <img src="{{ $advantage->image
                                    ? asset('storage/' . $advantage->image)
                                    : asset('assets/images/warehouse0' . (($index % 3) + 1) . '.jpg') }}"
                                    alt="{{ $advantage->title_red }} {{ $advantage->title_black }}" />
                            </div>

                            <div class="ark__warehouse-item-content">
                                <h4 class="ark__warehouse-item-title">
                                    <span class="ark__brick--red">{{ $advantage->title_red }}</span>
                                    <span class="ark_block">{{ $advantage->title_black }}</span>
                                </h4>

                                <p class="ark__warehouse-item-desc">
                                    {{ $advantage->description }}
                                </p>
                            </div>
                        </div>

                        @if (!$loop->last)
                            <div class="ark__about__divider" aria-hidden="true"></div>
                        @endif
                    @empty
                        <div class="text-center py-10">
                            <p class="text-gray-600">No 3PL advantages available at the moment.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </section>

        <!-- Start Our Services -->
        <section class="ark__ourServices section-padding--main">
            <div class="container">
                <h1 class="ark__about__title ark__btm--spacing">Our Services</h1>
                @if ($services && $services->count() > 0)
                    <div class="ark__services--main-wrap">
                        @foreach ($services as $service)
                            <div class="ark__service-item">
                                <div class="ark__service-item-image">
                                    @if ($service->image)
                                        <img src="{{ asset('storage/' . $service->image) }}"
                                            alt="{{ $service->title }} Service" />
                                    @else
                                        <img src="{{ asset('assets/images/our-services01.jpg') }}"
                                            alt="{{ $service->title }} Service" />
                                    @endif
                                    <span class="ark__card__overlay"></span>
                                </div>

                                <div class="ark__service-item-content">
                                    <div class="ark__service-item-text">
                                        <h6 class="ark__service-item-title ark__brick--red">
                                            {{ $service->title }}
                                        </h6>
                                        <p class="ark__service-item-desc">
                                            {{ $service->subtitle }}
                                        </p>
                                    </div>

                                    <a class="ark__btn" href="{{ $service->button_link ?? '#' }}">
                                        <span class="ark__btn-text">
                                            {{ $service->button_text ?? 'QUOTE' }}
                                        </span>
                                        <span class="ark__btn-icon">
                                            <img src="{{ asset('assets/images/btn-arrow.svg') }}" alt="icon">
                                        </span>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-10">
                        <p class="text-gray-600">No services available at the moment.</p>
                    </div>
                @endif
            </div>
        </section>
        <!-- End Our Services -->
    
        {{-- <section class="ark__clientTestimonials section-padding--main">
            <div class="container">
                <h1 class="ark__about__title ark__btm--spacing">Client Testimonials</h1>

                <div class="ark__testimonial-wrapper">

                    <!-- Swiper -->
                    <div class="swiper ark__testimonial-swiper">
                        <div class="swiper-wrapper">

                            <!-- Slide 01 -->
                            <div class="swiper-slide ark__testimonial-card">
                                <p class="ark__testimonial-text">
                                    “Reliable and fast! Since switching to their fulfillment service, our order accuracy
                                    has improved significantly, and shipments go out on time, every time.”
                                </p>

                                <div class="ark__testimonial-user">
                                    <img src="{{ asset('assets/images/client-img.jpg') }}"
                                        class="ark__testimonial-img" />
                                    <div>
                                        <h6 class="ark__testimonial-name">Jason Lin</h6>
                                        <p class="ark__testimonial-role">Temu Seller</p>
                                    </div>
                                </div>
                                <img class="ark__quote--img" src="{{ asset('assets/images/quote.svg') }}"
                                    alt="">
                                <img class="ark__quote--img-two" src="{{ asset('assets/images/quote.svg') }}"
                                    alt="">
                            </div>

                            <!-- Slide 02 -->
                            <div class="swiper-slide ark__testimonial-card">
                                <p class="ark__testimonial-text">
                                    “Their WMS System Makes Inventory Management Seamless. We Never Have
                                    To Worry About Inventory Discrepancies, And The Picking Process Is Very Efficient.”
                                </p>

                                <div class="ark__testimonial-user">
                                    <img src="{{ asset('assets/images/client-img2.jpg') }}"
                                        class="ark__testimonial-img" />
                                    <div>
                                        <h6 class="ark__testimonial-name">Emma Chen</h6>
                                        <p class="ark__testimonial-role">Sounor Online Retailer</p>
                                    </div>
                                </div>
                                <img class="ark__quote--img" src="{{ asset('assets/images/quote.svg') }}"
                                    alt="">
                                <img class="ark__quote--img-two" src="{{ asset('assets/images/quote.svg') }}"
                                    alt="">
                            </div>
                            <!-- Slide 02 -->
                            <div class="swiper-slide ark__testimonial-card">
                                <p class="ark__testimonial-text">
                                    “Their WMS System Makes Inventory Management Seamless. We Never Have
                                    To Worry About Inventory Discrepancies, And The Picking Process Is Very Efficient.”
                                </p>

                                <div class="ark__testimonial-user">
                                    <img src="{{ asset('assets/images/client-img2.jpg') }}"
                                        class="ark__testimonial-img" />
                                    <div>
                                        <h6 class="ark__testimonial-name">Emma Chen</h6>
                                        <p class="ark__testimonial-role">Sounor Online Retailer</p>
                                    </div>
                                </div>
                                <img class="ark__quote--img" src="{{ asset('assets/images/quote.svg') }}"
                                    alt="">
                                <img class="ark__quote--img-two" src="{{ asset('assets/images/quote.svg') }}"
                                    alt="">
                            </div>

                        </div>
                    </div>

                    <!-- OUTSIDE BUTTONS (Right Side) -->
                    <div class="ark__testimonial-buttons">
                        <div class="swiper-button-prev ark__testimonial-prev"></div>
                        <div class="swiper-button-next ark__testimonial-next"></div>
                    </div>

                </div>

            </div> --}}
        </section>
    </main>

@endsection