@extends('layouts.landing-page.index', ['title' => 'Beranda'])

@section('main')
    <!-- AGE WARNING MODAL -->
    <div class="modal fade" id="autoModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">

                <div class="modal-body text-center p-4">
                    <div class="mb-3">
                        <i class="bi bi-exclamation-triangle-fill text-danger fs-1"></i>
                    </div>

                    <h4 class="fw-bold mb-2">Peringatan Usia</h4>
                    <p class="text-muted mb-4">
                        Konten ini mengandung produk tembakau.<br>
                        Pastikan Anda berusia <b>18 tahun atau lebih</b> untuk melanjutkan.
                    </p>

                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" id="confirmAge">
                            Saya Berusia 18+
                        </button>

                        <a href="https://www.google.com" class="btn btn-outline-primary">
                            Saya Belum Cukup Umur
                        </a>
                    </div>
                </div>

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

    <!-- Hero Section -->
    <section id="hero" class="hero-section dark-background p-0 fade-up">

        <div class="swiper heroSwiper">
            <div class="swiper-wrapper">

                @foreach ($sliders as $slider)
                    <div class="swiper-slide hero-slide">
                        <video class="hero-video" autoplay muted loop playsinline>
                            <source src="{{ asset('storage/' . $slider->media_path) }}" type="video/mp4">
                        </video>

                        <div class="hero-content"></div>
                    </div>
                @endforeach



            </div>

            <div class="swiper-pagination"></div>
        </div>

    </section>

    <!-- About Section -->
    <section id="about" class="about section">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-4">
                <div class="col-lg-6 order-1 order-lg-2">
                    <div class="img-about">
                        <img src="{{ asset('storage') }}/{{ $profile->office_photo ?? '' }}" class="img-fluid"
                            alt="">
                    </div>
                </div>
                <div class="col-lg-6 order-2 order-lg-1 content">
                    <h3 class="notranslate">{{ $profile->company_name ?? 'Nama Perusahaan' }}</h3>
                    <p class="fst-italic">
                        {!! $profile->short_description ?? 'Deskripsi Perusahaan' !!}
                    </p>
                </div>
            </div>

        </div>

    </section><!-- /About Section -->

    <!-- Stats Section -->
    <section id="stats" class="stats section bg-light">

        <div class="container" data-aos="fade-up" data-aos-delay="100">

            <div class="row gy-4 align-items-center justify-content-between">

                <div class="col-lg-5">
                    <div class="img-stars">
                        <img src="{{ asset('assets-landing-page/img/why-choose-us.png') }}"
                            alt="" class="img-fluid">
                    </div>
                </div>

                <div class="col-lg-6">

                    <h3 class="fw-bold fs-2 mb-3">Kenapa Harus <span class="notranslate"> Indo Jaya Tobacco </span> ?</h3>
                    <p>
                        Indo Jaya Tobacco adalah mitra terpercaya dalam pengolahan tembakau berkualitas. Dengan pengalaman
                        bertahun-tahun, kami memastikan setiap proses mulai dari pemilihan daun, pengeringan, hingga
                        penyimpanan dilakukan secara teliti dan sesuai standar. Komitmen kami adalah menghadirkan produk
                        tembakau terbaik dengan kualitas yang konsisten dan dapat diandalkan.
                    </p>

                    <div class="row gy-4">

                        <div class="col-lg-6">
                            <div class="stats-item d-flex">
                                <i class="bi bi-emoji-smile flex-shrink-0"></i>
                                <div>
                                    <span data-purecounter-start="0" data-purecounter-end="232"
                                        data-purecounter-duration="1" class="purecounter"></span>
                                    <p><strong>Klien & Mitra</strong> <span>Kepercayaan dari para petani dan pelanggan
                                            adalah bukti kualitas dan konsistensi produk kami. </span></p>
                                </div>
                            </div>
                        </div><!-- End Stats Item -->

                        <div class="col-lg-6">
                            <div class="stats-item d-flex">
                                <i class="bi bi-journal-richtext flex-shrink-0"></i>
                                <div>
                                    <span data-purecounter-start="0" data-purecounter-end="521"
                                        data-purecounter-duration="1" class="purecounter"></span>
                                    <p><strong>Pengiriman Tembakau Setiap Tahun</strong> <span>Setiap tahun kami
                                            mendistribusikan tembakau berkualitas ke berbagai wilayah dan industri.</span>
                                    </p>
                                </div>
                            </div>
                        </div><!-- End Stats Item -->

                        <div class="col-lg-6">
                            <div class="stats-item d-flex">
                                <i class="bi bi-headset flex-shrink-0"></i>
                                <div>
                                    <span data-purecounter-start="0" data-purecounter-end="24" data-purecounter-duration="1"
                                        class="purecounter"></span>
                                    <p><strong>Jam Dukungan Operasional</strong> <span>Tim kami selalu siap membantu dan
                                            memastikan kelancaran proses produksi dan pengiriman.</span></p>
                                </div>
                            </div>
                        </div><!-- End Stats Item -->

                        <div class="col-lg-6">
                            <div class="stats-item d-flex">
                                <i class="bi bi-people flex-shrink-0"></i>
                                <div>
                                    <span data-purecounter-start="0" data-purecounter-end="32" data-purecounter-duration="1"
                                        class="purecounter"></span>
                                    <p><strong>Tenaga Ahli Berpengalaman</strong> <span>Didukung oleh pekerja berpengalaman
                                            yang memahami standar pengolahan tembakau dari awal hingga akhir.</span></p>
                                </div>
                            </div>
                        </div><!-- End Stats Item -->

                    </div>

                </div>

            </div>

        </div>

    </section><!-- /Stats Section -->

    <!-- Services Section -->
    <section id="services" class="services section">

        <!-- Section Title -->
        <div class="container section-title pb-0" data-aos="fade-up">
            <h2>Produk</h2>
            <p>Kategori Produk</p>
        </div><!-- End Section Title -->

        <div class="container">

            <div class="row gy-4">

                @if (count($categories) > 0)
                    <div class="swiper categori-catalog-Swiper">
                        <div class="swiper-wrapper">
                            @foreach ($categories ?? [] as $category)
                                <div class="col-lg-4 col-md-6 swiper-slide" data-aos="fade-up" data-aos-delay="100">
                                    <div class="service-item position-relative service-bg shadow"
                                        style="background-size: cover !important; background: url('{{ asset('storage') }}/{{ $category->image_path }}')">
                                        <div class="text-category-catalog w-100 text-center">
                                            <div class="mb-3">
                                                <a href="service-details.html" class="stretched-link">
                                                    <h2 class="text-white"><b>{{ $category->name }}</b></h2>
                                                </a>
                                                {{-- <p>{{ $category->name }}</p> --}}
                                            </div>
                                            <div class="mb-3">
                                                <form action="{{ route('product.search') }}" method="GET">
                                                    <input type="hidden" value="{{ $category->name }}"
                                                        name="categories[]">
                                                    <button type="submit" class="btn btn-outline-light">Belanja
                                                        Sekarang</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>

                        <div class="swiper-pagination"></div>

                    </div>
                @else
                    <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
                        Belum ada data
                    </div>
                @endisset

        </div>

    </div>
    <div class="container section-title pb-0" data-aos="fade-up">
        <h2>Peta</h2>
        <p>Peta Distribusi</p>
    </div>
    @isset($profile->distribution_photo)
        <div class="text-center mt-5">
            <img src="{{ asset('storage') }}/{{ $profile->distribution_photo }}" class="w-75 rounded border shadow"
                alt="">
        </div>
    @else
        <div class="text-center font-medium" data-aos="fade-up" style="opacity: 50%;">
            Belum ada data
        </div>
    @endisset
</section><!-- /Services Section -->

<!-- Call To Action Section -->
<section id="call-to-action" class="call-to-action section dark-background">

    <img src="https://plus.unsplash.com/premium_photo-1678655852198-9af5cf9da524?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8dG9iYWNjb3xlbnwwfHwwfHx8MA%3D%3D"
        alt="">

    <div class="container">
        <div class="row justify-content-center" data-aos="zoom-in" data-aos-delay="100">
            <div class="col-xl-10">
                <div class="text-center">
                    <h3>Temukan Varian Tembakau Premium Kami</h3>
                    <p>Nikmati kualitas tembakau iris beraroma dengan lebih dari 120 varian aroma unggulan. Diproduksi
                        melalui proses modern dan konsisten, produk kami telah dipercaya distributor di seluruh
                        Indonesia.</p>
                    <a class="cta-btn" href="{{ route('contact') }}">Hubungi Kami</a>
                </div>
            </div>
        </div>
    </div>

</section><!-- /Call To Action Section -->

<!-- Contact Section -->
<section id="contact" class="contact section">

    <!-- Section Title -->
    <div class="container section-title" data-aos="fade-up">
        <h2>Kontak</h2>
        <p>Hubungi Kami</p>
    </div><!-- End Section Title -->

    <div class="container" data-aos="fade-up" data-aos-delay="100">

        <div class="row gy-4">

            <div class="col-lg-4">
                <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="300">
                    <i class="bi bi-geo-alt flex-shrink-0"></i>
                    <div>
                        <h3>Alamat</h3>
                        <p class="notranslate">{{ $profile->address ?? 'Alamat Perusahaan' }}</p>
                    </div>
                </div><!-- End Info Item -->
            </div>

            <div class="col-lg-4">
                <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="400">
                    <i class="bi bi-telephone flex-shrink-0"></i>
                    <div>
                        <h3>No. Telepon</h3>
                        <p>{{ $profile->phone ?? 'Telepon Perusahaan' }}</p>
                    </div>
                </div><!-- End Info Item -->
            </div>

            <div class="col-lg-4">
                <div class="info-item d-flex" data-aos="fade-up" data-aos-delay="500">
                    <i class="bi bi-envelope flex-shrink-0"></i>
                    <div>
                        <h3>Email</h3>
                        <p class="notranslate">{{ $profile->email ?? 'Email Perusahaan' }}</p>
                    </div>
                </div><!-- End Info Item -->

            </div>
        </div>

    </div>

</section><!-- /Contact Section -->
@endsection

@push('styles')
<style>
    .hero-slide {
        position: relative;
        width: 100%;
        height: 100vh;
        /* full screen */
        overflow: hidden;
    }

    .hero-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* IMPORTANT */
    }

    .hero-section {
        width: 100%;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    .hero-section:before {
        content: "";
        /* background: color-mix(in srgb, var(--background-color), transparent 70%); */
        position: absolute;
        inset: 0;
        z-index: 2;
    }

    .hero-slide {
        width: 100%;
        height: 100vh;
        position: relative;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Biar full tanpa ketarik */
    }

    .hero-content {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 10;
    }

    .hero-content h1 {
        font-size: 3rem;
        color: #fff;
        text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
    }

    /* SWIPPER */
    .swiper-pagination-bullet {
        background: #d7d7d7;
        opacity: 0.7;
    }

    .swiper-pagination-bullet-active {
        background: #a1a1a1;
        opacity: 1;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 44px;
        height: 44px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        color: #fff;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 18px;
        font-weight: bold;
    }

    /* posisi agak ke tengah vertikal */
    .swiper-button-next,
    .swiper-button-prev {
        top: 50%;
        transform: translateY(-50%);
    }

    /* END SWIPPER  */

    .categori-catalog-Swiper {
        width: 100%;
        padding: 60px 0;
    }

    .categori-catalog-Swiper .swiper-slide {
        width: 420px;
        transition: all 0.4s ease;
    }

    .service-item {
        height: 260px;
        background-size: cover;
        background-position: center;
        border-radius: 6px;
        position: relative;
        overflow: hidden;
    }

    /* overlay gelap */
    .service-item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1;
    }

    /* konten tengah */
    .overlay-content {
        position: absolute;
        z-index: 2;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
    }

    .overlay-content h3 {
        font-size: 22px;
        font-weight: 600;
    }

    .overlay-content p {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 12px;
    }

    /* slide aktif lebih terang & besar */
    .swiper-slide-active .service-item::before {
        background: rgba(0, 0, 0, 0.2);
    }

    .swiper-slide-active {
        transform: scale(1.05);
    }

    .text-category-catalog {
        position: absolute !important;
        bottom: 20px;
        left: 0;
    }

    /* END SWIPPER */

    .img-about {
        width: 100%;
        height: 350px;
        /* atau bebas sesuai kebutuhan */
        overflow: hidden;
    }

    .img-about img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* bikin foto cover rapih */
        object-position: center;
        /* posisi tengah */
        display: block;
    }

    .img-about video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* bikin foto cover rapih */
        object-position: center;
        /* posisi tengah */
        display: block;
    }

    @media (max-width: 576px) {
        .img-about {
            height: 300px !important;
        }
    }

    .img-stars {
        width: 100%;
        height: 100%;
        /* atau bebas sesuai kebutuhan */
        overflow: hidden;
    }

    .img-stars img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* bikin foto cover rapih */
        object-position: center;
        /* posisi tengah */
        display: block;
    }

    @media (max-width: 576px) {
        .img-stars {
            height: 300px !important;
        }
    }

    .service-bg {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 30px;
        border-radius: 12px;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    /* Tambahkan overlay agar teks tetap terbaca */
    .service-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        /* bisa digelapkan lagi */
        border-radius: 12px;
    }

    .service-bg * {
        position: relative;
        z-index: 2;
    }
</style>
@endpush

@push('scripts')
{{-- <script>
        const swiper = new Swiper('.swiper', {
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
        });
    </script> --}}
<!-- Swiper Init -->
<script>
    var swiper = new Swiper(".heroSwiper", {
        loop: true,
        grabCursor: true,
        autoplay: false,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            type: "bullets",
        },
        autoplay: {
            delay: 10000,
            disableOnInteraction: false,
        },
        effect: "fade",
        speed: 800
    });

    var swiper = new Swiper(".categori-catalog-Swiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 3,
        loop: true,
        coverflowEffect: {
            rotate: 0,
            stretch: 80,
            depth: 200,
            modifier: 1,
            slideShadows: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        breakpoints: {
            320: {
                slidesPerView: 1, // HP 1 kotak
            },
            768: {
                slidesPerView: 2, // Tablet 2 kotak
            },
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var myModal = new bootstrap.Modal(document.getElementById('autoModal'));
        myModal.show();
    });

    document.addEventListener("DOMContentLoaded", function() {

        if (!localStorage.getItem('ageVerified')) {
            var myModal = new bootstrap.Modal(document.getElementById('autoModal'));
            myModal.show();
        }

        document.getElementById('confirmAge').addEventListener('click', function() {
            localStorage.setItem('ageVerified', true);
            bootstrap.Modal.getInstance(document.getElementById('autoModal')).hide();
        });

    });
</script>
@endpush