@push('head')
<style>
    .hero {
        background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
            url('https://picsum.photos/1600/900?blur=3') center/cover;
        color: #fff;
        height: 85vh;
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        border: 0;
    }

    .icon-bubble {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #f0ad4e;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px auto;
    }
</style>
@endpush

<div class="content-wrapper orverflow-hidden">
    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="container">
            <div class="text-wrape">
                <i class="fad fa-rocket fa-5x fa-fw"></i>
                <h1 class="display-4 fw-bold mb-3">Wujudkan Ide Anda Jadi Aplikasi Hebat</h1>
                <p class="lead mb-4">Kami membantu bisnis membangun aplikasi web & mobile dengan performa tinggi dan
                    desain modern.</p>
                <a href="#contact" class="btn btn-primary btn-lg px-4">Diskusi Sekarang</a>
            </div>
        </div>
    </section>

    <!-- SECTION: WEB APLIKASI -->
    <section class="py-5" id="web-aplikasi" wire:ignore>
        <div class="container py-4">
            <div class="text-center mb-3">
                <h2 class="fw-bold">Web Aplikasi</h2>
                <p class="fw-light">Solusi website modern untuk kebutuhan bisnismu</p>
            </div>

            <div class="owl-services owl-carousel owl-theme owl-loaded owl-drag owl-grab">
                <div class="owl-stage-outer">
                    <div class="owl-stage d-flex align-self-stretch py-3">

                        @foreach ($website->data as $index => $item)
                            <div class="owl-item">
                                <div class="card product-card">
                                    <img src="{{ config('api.base_url')  .'/'. $item->media[0]->path }}" alt="{{$item->name}}" style="width: 64px; height: 64px;" class="object-fit-cove mx-auto mb-3">
                                    <div class="card-head text-center">
                                        <h4 class="fw-bold">{{ $item->name }}</h4>
                                        <p class="text-muted" style="height: 45px">{{ $item->description_short }}</p>
                                        <span class="badge bg-warning text-dark fs-6 px-5 py-2">Mulai {{rtrim(rtrim(number_format($item->price / 1000000, 1), '0'), '.')}} Jt</span>
                                    </div>
                                    <div class="card-description">
                                        <hr class="soft my-4">
                                        <ul style="list-style: none" class="px-2">
                                            @foreach ($item->description_list as $items)
                                                <li class="d-flex mb-2">
                                                    <i class="fas fa-check text-success me-3" aria-hidden="true"></i>
                                                    <span class="mb-0">{{ $items }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                         @foreach ($custom->data as $index => $item)
                            <div class="owl-item">
                                <div class="card product-card">
                                    <img src="{{ config('api.base_url')  .'/'. $item->media[0]->path }}" alt="{{$item->name}}" style="width: 64px; height: 64px;" class="object-fit-cove mx-auto mb-3">
                                    <div class="card-head text-center">
                                        <h4 class="fw-bold">{{ $item->name }}</h4>
                                        <p class="text-muted" style="height: 45px">{{ $item->description_short }}</p>
                                        <span class="badge bg-warning text-dark fs-6 px-5 py-2">Custome</span>
                                    </div>
                                    <div class="card-description">
                                        <hr class="soft my-4">
                                        <ul style="list-style: none" class="px-2">
                                            @foreach ($item->description_list as $items)
                                                <li class="d-flex mb-2">
                                                    <i class="fas fa-check text-success me-3" aria-hidden="true"></i>
                                                    <span class="mb-0">{{ $items }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach

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

        </div>
    </section>



    <!-- SECTION: MOBILE APLIKASI -->
    <section class="linear-gradient-theme-2 text-white py-5" id="mobile-aplikasi" wire:ignore>
        <div class="container pt-3 pb-5">
            <div class="text-center mb-5">
                <h2 class="fw-bold">Layanan Mobile Aplikasi</h2>
                <p class="fw-light">Bangun aplikasi Android/iOS yang cepat, aman, dan responsif</p>
            </div>

            <div class="owl-services owl-carousel owl-theme owl-loaded">
                <div class="owl-stage-outer">
                    <div class="owl-stage d-flex align-self-stretch py-3">

                         @foreach ($mobile->data as $index => $item)
                            <div class="owl-item">
                                <div class="card product-card">
                                    <img src="{{ config('api.base_url')  .'/'. $item->media[0]->path }}" alt="{{$item->name}}" style="width: 46px; height: 64px;" class="object-fit-cove mx-auto mb-3">
                                    <div class="card-head text-center">
                                        <h4 class="fw-bold">{{ $item->name }}</h4>
                                        <p class="text-muted" style="height: 45px">{{ $item->description_short }}</p>
                                        <span class="badge bg-warning text-dark fs-6 px-5 py-2">Custome</span>
                                    </div>
                                    <div class="card-description">
                                        <hr class="soft my-4">
                                        <ul style="list-style: none" class="px-2">
                                            @foreach ($item->description_list as $items)
                                                <li class="d-flex mb-2">
                                                    <i class="fas fa-check text-success me-3" aria-hidden="true"></i>
                                                    <span class="mb-0">{{ $items }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                         @foreach ($custom->data as $index => $item)
                            <div class="owl-item">
                                <div class="card product-card">
                                    <img src="{{ config('api.base_url')  .'/'. $item->media[0]->path }}" alt="{{$item->name}}" style="width: 64px; height: 64px;" class="object-fit-cove mx-auto mb-3">
                                    <div class="card-head text-center">
                                        <h4 class="fw-bold">{{ $item->name }}</h4>
                                        <p class="text-muted" style="height: 45px">{{ $item->description_short }}</p>
                                        <span class="badge bg-warning text-dark fs-6 px-5 py-2">Custome</span>
                                    </div>
                                    <div class="card-description">
                                        <hr class="soft my-4">
                                        <ul style="list-style: none" class="px-2">
                                            @foreach ($item->description_list as $items)
                                                <li class="d-flex mb-2">
                                                    <i class="fas fa-check text-success me-3" aria-hidden="true"></i>
                                                    <span class="mb-0">{{ $items }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        @endforeach

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

        </div>
    </section>


    <!-- SECTION: KUSTOM APLIKASI -->
    <section class="py-5" id="kustom-aplikasi">
        <div class="container pt-3 pb-5">
            <div class="text-center mb-5">
                <h2 class="fw-bold">Kustom Aplikasi</h2>
                <p class="fw-light">Solusi aplikasi sesuai kebutuhan unik bisnismu</p>
            </div>

            <div class="row g-0 justify-content-center">
                <div class="col-md-8">
                    <div class="card service-card shadow-lg p-5 text-center">
                        <div class="icon-bubble text-white">
                            <i class="fa-solid fa-gears fa-2x"></i>
                        </div>
                        <h4 class="fw-bold">Kustom Aplikasi</h4>
                        <p class="text-muted">Kami menyediakan pembuatan aplikasi full kustom sesuai request, termasuk
                            ERP, CRM, POS, Dashboard Analitik, dan sistem internal lainnya.</p>
                        <div class="mt-3">
                            <span class="badge bg-warning text-dark fs-6 px-4 py-2">Harga Menyesuaikan
                                Spesifikasi</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>


</div>

@push('scripts')
<script src="{{ asset('/assets/dist/js/owl-custom.js') }}"></script>
@endpush