@push('head')
    <link rel="stylesheet" href="{{ asset('/assets/dist/css/home.css') }}">
@endpush

<div>
    {{-- Banner --}}
    <div class="owl-container position-relative">
        <div id="owl-banner" class="owl-carousel owl-theme overflow-hidden">
            @foreach ($banners->data as $index => $item)
                <div class="item">
                    {{-- DESKTOP MODE --}}
                    <div class="ratio ratio-21x9 overflow-hidden d-none d-lg-block">
                        <img src="{{ config('api.base_url') .'/'. $item->image_path . $item->image_desktop }}"
                            alt="{{ $item->title }}" class="object-fit">
                        <div class="d-flex w-100 h-100">
                            <div class="container">
                                <div class="d-flex h-100 align-items-center"
                                    style="justify-content: {{ $item->text_position }};">
                                    <div class="d-block w-40"
                                        style="color: {{ $item->text_color }}; text-align: {{ $item->text_position }};">

                                        <div class="mb-2 fs-1 lh-1 fw-bold">
                                            {{ $item->title }}
                                        </div>

                                        <div class="mb-3 fs-4 fw-light mb-4">
                                            {{ $item->description }}
                                        </div>

                                        @if ($item->link)
                                            <a href="{{ $item->link }}" class="btn btn-lg px-4"
                                                style="border: 1px solid {{ $item->text_color }}; color: {{ $item->text_color }};">
                                                {{ $item->link_text }}
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- MOBILE MODE --}}
                    <div class="ratio ratio-1x1 overflow-hidden d-block d-lg-none">
                        <img src="{{ config('api.base_url') .'/'. $item->image_path . $item->image_mobile }}"
                            alt="{{ $item->title }}" class="object-fit">
                        <div class="d-flex align-items-end justify-content-center pb-5">
                            <div class="text-center px-2" style="color: {{ $item->text_color }}">
                                <p class="mb-0 fw-bold">{{ $item->title }}</p>
                                <p class="mb-0">{{ $item->description }}</p>
                            </div>
                        </div>
                        @if ($item->link)
                            <a href="{{ $item->link }}" class="stretched-link"></a>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- BUTTON NAVIGATION --}}
        <div class="customPrevBanner btn btn-owl" style="left: 4%">
            <i class="fad fa-angle-left fa-fw"></i>
        </div>
        <div class="customNextBanner btn btn-owl" style="right: 4%">
            <i class="fad fa-angle-right fa-fw"></i>
        </div>
    </div>

    <!-- Layanan -->
    <section class="py-5" wire:ignore>
        <div class="container py-4">
            <div class="d-block text-center mb-4">
                <h2 class="fw-bold mb-0">Pake Layanan</h2>
                <h4 class="fw-light mb-0">Paket terbaik untuk mendukung kebutuhan pengembangan Anda</h4>
            </div>

            <div id="owl-one" class="owl-carousel owl-theme owl-loaded">
                <div class="owl-stage-outer d-flex align-items-stretch">
                    <div class="owl-stage py-3 d-flex align-items-stretch">

                        @foreach ($products->data as $index => $item)
                        
                            <div class="owl-item d-flex align-items-stretch">
                                <div class="card product-card">
                                    <div class="d-flex flex-column align-items-center">
                                        <img src="{{ config('api.base_url')  .'/'. $item->media[0]->path }}" alt="{{ $item->name }}" class="mb-4 pt-4 pb-3" style="width: 160px;">
                                        <div class="text-center">
                                            <h4 class="fw-bold text-warning text-capitalize mb-0">{{$item->name}}</h4>
                                            <p>{{$item->description_short}}</p>
                                            @if($item->price > 0)
                                            <div class="d-flex align-items-baseline justify-content-center mb-4">
                                                <h2 class="m-0"> {{number_format($item->price, 0, ',', '.')}}</h2>
                                                <small class="fw-bold">/IDR</small>
                                            </div>
                                            @else
                                                <div class="d-flex align-items-baseline justify-content-center mb-4">
                                                <h2 class="m-0"> Custom</h2>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-outline-warning w-100">Pilih paket</button>
                                    <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>
                        @endforeach

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

        </div>
    </section>

    {{-- Future --}}
    <section class="linear-gradient-theme-2 py-5" id="fitur">
        <div class="container py-4">
            <div class="row g-4 align-items-center">

                <div class="col-lg-6 text-center animate-fade">
                    <div class="ratio ratio-4x3">
                        <img src="https://img.freepik.com/free-photo/young-handsome-man-working-laptop-office_1303-28668.jpg"
                            alt="Orang memegang laptop" class="img-fluid rounded-4 shadow-lg object-fit">
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="row gy-5 gx-4">

                        <div class="col-12">
                            <h2 class="fw-bold gradient-text">FITUR UNGGULAN</h2>
                            <h5 class="fw-semibold">Dapatkan Semua Fitur Ini Secara Gratis!</h5>
                            <p class="text-muted">Inilah yang Anda dapatkan dari layanan pembuatan aplikasi di
                                <strong>PERONIT</strong>
                            </p>
                        </div>

                        <div class="col-6 animate-fade">
                            <div class="position-relative p-4 bg-white rounded-4 shadow-sm h-100">
                                <span class="budge-circle-theme linear-gradient-theme ms-3"
                                    style="width: 50px; height: 50px;">
                                    <i class="fa-solid fa-palette text-white fs-4"></i>
                                </span>
                                <div class="pt-4">
                                    <h6 class="fw-bold">Free Logo & Banner</h6>
                                    <p class="text-muted small mb-0">Desain logo dan banner kreatif yang memperkuat
                                        identitas bisnis Anda.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-6 animate-fade">
                            <div class="position-relative p-4 bg-white rounded-4 shadow-sm h-100">
                                <span class="budge-circle-theme linear-gradient-theme ms-3"
                                    style="width: 50px; height: 50px;">
                                    <i class="fa-solid fa-pen-nib text-white fs-4"></i>
                                </span>
                                <div class="pt-4">
                                    <h6 class="fw-bold">Free 3 Artikel</h6>
                                    <p class="text-muted small mb-0">Konten original & SEO-friendly dari tim ahli kami
                                        untuk mendukung branding Anda.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-6 animate-fade">
                            <div class="position-relative p-4 bg-white rounded-4 shadow-sm h-100">
                                <span class="budge-circle-theme linear-gradient-theme ms-3"
                                    style="width: 50px; height: 50px;">
                                    <i class="fa-solid fa-list-check text-white fs-4"></i>
                                </span>
                                <div class="pt-4">
                                    <h6 class="fw-bold">Free Listing</h6>
                                    <p class="text-muted small mb-0">Gratis listing aplikasi Anda di katalog online
                                        untuk meningkatkan visibilitas.</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-6 animate-fade">
                            <div class="position-relative p-4 bg-white rounded-4 shadow-sm h-100">
                                <span class="budge-circle-theme linear-gradient-theme ms-3"
                                    style="width: 50px; height: 50px;">
                                    <i class="fa-solid fa-headset text-white fs-4"></i>
                                </span>
                                <div class="pt-4">
                                    <h6 class="fw-bold">Free Support 1 Bulan</h6>
                                    <p class="text-muted small mb-0">Dukungan teknis dan konsultasi pasca-deploy agar
                                        sistem Anda tetap optimal.</p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

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

    <!-- Services -->
    <section id="services" class="py-5">
        <div class="container text-center py-5">
            <div class="text-center mb-5">
                <h2 class="fw-bold">Layanan Kami</h2>
                <h4 class="fw-light">Layanan profesional untuk membantu Anda membangun aplikasi modern dan berkualitas
                </h4>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="service-card p-4 shadow rounded-4 h-100">
                        <i class="fad fa-laptop fa-5x fa-fw text-warning mb-3"></i>
                        <h5 class="fw-semibold">Aplikasi Web</h5>
                        <p>Membangun aplikasi web cepat, aman, dan responsif dengan teknologi modern seperti Laravel
                            &
                            Vue.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="service-card p-4 shadow rounded-4 h-100">
                        <i class="fad fa-mobile-alt fa-5x fa-fw text-warning mb-3"></i>
                        <h5 class="fw-semibold">Aplikasi Mobile</h5>
                        <p>Pembuatan aplikasi Android/iOS native maupun hybrid, fokus pada UX dan performa terbaik.
                        </p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="service-card p-4 shadow rounded-4 h-100">
                        <i class="fad fa-cogs fa-5x fa-fw text-warning mb-3"></i>
                        <h5 class="fw-semibold">Sistem Terintegrasi</h5>
                        <p>Menghubungkan sistem bisnis Anda lewat API, integrasi ERP, atau dashboard custom.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow -->
    <section class="linear-gradient-theme-2 py-5 overflow-hidden" id="alur-kerja">
        <div class="container pt-4 pb-5">
            <div class="text-white text-center mb-5">
                <h2 class="fw-bold">Alur Kerja</h2>
                <h4 class="fw-light">Yuk, cari tau terlebih dahulu sebelum memulai</h4>
            </div>
            <div class="horizontal-sm-scroll">
                <div class="position-relative" style="min-width: 576px">
                    <div class="row">
                        <div class="col-4 col-lg-4">
                            <div class="position-relative mx-auto w-75">
                                <div class="d-block text-center w-100">
                                    <i class="fad fa-comments text-white fa-3x mb-2"></i>
                                    <p class="px-3 py-2 m-0 rounded-pill bg-white">Konsultasi</p>
                                </div>
                                <div class="d-block bg-white mx-auto" style="width: 4px; height: 2rem"></div>
                                <div class="position-absolute top-100 start-50 translate-middle rounded-circle bg-white"
                                    style="width: 14px; height: 14px"></div>
                            </div>
                        </div>
                        <div class="col-4 col-lg-4">
                            <div class="position-relative mx-auto w-75">
                                <div class="d-block text-center w-100">
                                    <i class="fad fa-code text-white fa-3x mb-2"></i>
                                    <p class="px-3 py-2 m-0 rounded-pill bg-white">Development</p>
                                </div>
                                <div class="d-block bg-white mx-auto" style="width: 4px; height: 2rem"></div>
                                <div class="position-absolute top-100 start-50 translate-middle rounded-circle bg-white"
                                    style="width: 14px; height: 14px"></div>
                            </div>
                        </div>
                        <div class="col-4 col-lg-4">
                            <div class="position-relative mx-auto w-75">
                                <div class="d-block text-center w-100">
                                    <i class="fad fa-server text-white fa-3x mb-2"></i>
                                    <p class="px-3 py-2 m-0 rounded-pill bg-white">Deploy</p>
                                </div>
                                <div class="d-block bg-white mx-auto" style="width: 4px; height: 2rem"></div>
                                <div class="position-absolute top-100 start-50 translate-middle rounded-circle bg-white"
                                    style="width: 14px; height: 14px"></div>
                            </div>
                        </div>
                    </div>
                    <div class="position-absolute top-50 start-50 translate-middle bg-white w-100"
                        style="height: 2px">
                    </div>
                    <div class="row">
                        <div class="col-4 col-lg-4 offset-2">
                            <div class="position-relative mx-auto w-75">
                                <div class="d-block bg-white mx-auto" style="width: 4px; height: 2rem"></div>
                                <div class="position-absolute top-0 start-50 translate-middle rounded-circle bg-white"
                                    style="width: 14px; height: 14px"></div>
                                <div class="d-block text-center w-100">
                                    <p class="px-3 py-2 m-0 rounded-pill bg-white">Desain</p>
                                    <i class="fad fa-pen-nib text-white fa-3x mt-2"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 col-lg-4">
                            <div class="position-relative mx-auto w-75">
                                <div class="d-block bg-white mx-auto" style="width: 4px; height: 2rem"></div>
                                <div class="position-absolute top-0 start-50 translate-middle rounded-circle bg-white"
                                    style="width: 14px; height: 14px"></div>
                                <div class="d-block text-center w-100">
                                    <p class="px-3 py-2 m-0 rounded-pill bg-white">Testing</p>
                                    <i class="fad fa-vial text-white fa-3x mt-2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <!-- ====== FAQ SECTION ====== -->
    <section class="py-5">
        <div class="container py-5">
            <h2 class="text-center mb-4 fw-bold">FAQ</h2>
            <div class="accordion" id="faqAccordion">
                @foreach ($faq->data as $index => $item)
                    
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button @if($index != 0) collapsed @endif" type="button" data-bs-toggle="collapse"
                        data-bs-target="#faq{{$index}}">{{ $item->question }}</button>
                    </h2>
                    <div id="faq{{$index}}" class="accordion-collapse collapse @if($index == 0) show @endif" data-bs-parent="#faqAccordion">
                        <div class="accordion-body">{{ $item->answer }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- ====== CONTACT SECTION ====== -->
    <section id="contact" class="py-5 bg-body-tertiary">
        <div class="container pt-4 pb-5">
            <div class="row g-4">
                <div class="col-12 col-lg-6">
                    <img src="{{ url('/images/other/contactme.png') }}" alt="contact us"
                        class="img-fluid object-fit">
                </div>
                <div class="col-12 col-lg-6">
                    <div class="mb-5">
                        <h2 class="fw-bold">Hubungi Kami</h2>
                        <h4 class="fw-light">Dapatkan penawaran menarik bersama PeronIT</h4>
                        <hr class="soft" style="width: 120px">
                    </div>
                    <form class="row g-3">
                        <div class="col-12">
                            <input type="text" class="form-control" placeholder="Nama Anda" />
                        </div>
                        <div class="col-12">
                            <input type="email" class="form-control" placeholder="Email" />
                        </div>
                        <div class="col-12">
                            <textarea class="form-control" rows="5" placeholder="Deskripsi Project"></textarea>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-warning text-white px-5">Kirim</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>


</div>

@push('script')
@endpush