@extends('layout.front.main')
@section('title')
    @lang('destinasi.title')
@endsection
@section('content')
    {{-- <section class="d2c_entro_launch_bg">
        <div class="px-4 py-5 my-5 text-center">
            <img class="" src="{{ asset('') }}template/assets/img/logo.png" alt="" style="width: 5%">
            <h2 class="display-5 fw-bold">Merjay</h2>
            <div class="col-lg-6 mx-auto">
            </div>
        </div>
    </section> --}}

    <section class="">
        <div class="container">
            <div class="row align-items-center justify-content-center">
                <div class="col-12 col-lg-6 text-center text-lg-start">
                    <h2>@lang('destinasi.destinasi')</h2>
                    <p style="text-align: justify">@lang('destinasi.pdestinasi')</p>
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center">
                    <img src="{{ asset('images/Daftar Wisata/Photo - Heading - Daftar Wisata.webp') }}" class="w-100 h-100"
                        alt="About Me Image">
                </div>
            </div>
            <style>
                .equal-height-container {
                    display: flex;
                    align-items: stretch;
                    justify-content: center;
                }

                .equal-height {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    width: 100%;
                }

                .equal-height img {
                    width: 100%;
                    height: 250px;
                    /* Sesuaikan tinggi sesuai kebutuhan */
                    object-fit: cover;
                    /* Agar gambar tidak terdistorsi */
                    border-radius: 10px;
                    /* Opsional: Membuat sudut lebih halus */
                    margin-bottom: 5px;
                    /* Mengurangi jarak antara gambar dan teks */
                }

                .equal-height h5 {
                    margin-top: 0;
                    /* Hilangkan margin atas default */
                    font-size: 1.1rem;
                    /* Sesuaikan ukuran teks */
                }
            </style>
            <h2 class="text-center mt-4">@lang('destinasi.pilihan')</h2>
            <div class="row equal-height-container">
                <div class="col-6 col-lg-3 d-flex">
                    <div class="equal-height">
                        <img src="{{ asset('images/Daftar Wisata/Photo - Museum mini sisa hartaku.webp') }}"
                            style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);" alt="">
                        <h5>Museum Mini Sisa Hartaku</h5>
                    </div>
                </div>
                <div class="col-6 col-lg-3 d-flex">
                    <div class="equal-height">
                        <img src="{{ asset('images/Daftar Wisata/Photo - Bunker Kaliadem.webp') }}"
                            style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);" alt="">
                        <h5>Bunker Kali Adem</h5>
                    </div>
                </div>
                <div class="col-6 col-lg-3 d-flex">
                    <div class="equal-height">
                        <img src="{{ asset('images/Daftar Wisata/Photo - Fun Offroad Kalikuning.webp') }}"
                            style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);" alt="">
                        <h5>Fun Offroad Kalikuning</h5>
                    </div>
                </div>
                <div class="col-6 col-lg-3 d-flex">
                    <div class="equal-height">
                        <img src="{{ asset('images/Daftar Wisata/Photo - Spot Sunrise.webp') }}"
                            style="box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);" alt="">
                        <h5>Spot Sunrise</h5>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_about_me_wrapper d2c_props_bg position-relative">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 d-flex flex-column align-items-center justify-content-center text-center">
                    <h2>Bunker Kali Adem</h2>
                    <p style="text-align: justify">
                        @lang('destinasi.kaliadem')
                    </p>
                    <img src="{{ asset('images/Daftar Wisata/Photo - Bunker Kaliadem.webp') }}" class="img-fluid"
                        alt="">
                </div>
                <div class="col-12 col-lg-6 d-flex flex-column align-items-center justify-content-center text-center">
                    <img src="{{ asset('images/Daftar Wisata/Photo - Spot Sunrise.webp') }}" class="img-fluid"
                        alt="">
                    <h2>Spot Sunrise</h2>
                    <p style="text-align: justify">
                        @lang('destinasi.sunrise')
                    </p>
                </div>
                <div class="col-12 col-lg-5 d-flex flex-column justify-content-center">
                    <h2>Batu Alien</h2>
                    <p style="text-align: justify">
                        @lang('destinasi.alien')
                    </p>
                </div>
                <div class="col-12 col-lg-7 d-flex align-items-center justify-content-center">
                    <img src="{{ asset('images/Daftar Wisata/Photo - Batu Alien.webp') }}" class="img-fluid" alt="">
                </div>
                <div class="col-12 col-lg-7 d-flex align-items-center justify-content-center">
                    <img src="{{ asset('images/Daftar Wisata/Photo - Museum Mini Sisa Hartaku.webp') }}" class="img-fluid"
                        alt="">
                </div>
                <div class="col-12 col-lg-5 d-flex flex-column justify-content-center">
                    <h2>Museum Mini Sisa Hartaku</h2>
                    <p style="text-align: justify">
                        @lang('destinasi.museum')
                    </p>
                </div>
                <div class="col-12 col-lg-5 d-flex flex-column justify-content-center">
                    <h2>Museum Petilasan Mbah Maridjan</h2>
                    <p style="text-align: justify">
                        @lang('destinasi.marijan')
                    </p>
                </div>
                <div class="col-12 col-lg-7 d-flex align-items-center justify-content-center">
                    <img src="{{ asset('images/Daftar Wisata/Photo - Rumah Mbah Maridjan.webp') }}" class="img-fluid"
                        alt="">
                </div>
            </div>
            {{-- <style>
                .img-container {
                    position: relative;
                    overflow: hidden;
                }

                .img-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: rgba(0, 0, 0, 0.5);
                    color: white;
                    opacity: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    transition: opacity 0.3s ease-in-out;
                }

                .img-container:hover .img-overlay {
                    opacity: 1;
                }

                .overlay-text {
                    text-align: center;
                }
            </style>
            <div class="row">
                <div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
                    <div class="img-container">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
                            class="w-100 shadow-1-strong rounded mb-4" alt="Boat on Calm Water" />
                        <div class="img-overlay">
                            <div class="overlay-text">
                                <h5>Boat on Calm Water</h5>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal1">Lihat
                                    Deskripsi</button>
                            </div>
                        </div>
                    </div>

                    <div class="img-container">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp"
                            class="w-100 shadow-1-strong rounded mb-4" alt="Wintry Mountain Landscape" />
                        <div class="img-overlay">
                            <div class="overlay-text">
                                <h5>Wintry Mountain Landscape</h5>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal2">Lihat
                                    Deskripsi</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="img-container">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
                            class="w-100 shadow-1-strong rounded mb-4" alt="Mountains in the Clouds" />
                        <div class="img-overlay">
                            <div class="overlay-text">
                                <h5>Mountains in the Clouds</h5>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal3">Lihat
                                    Deskripsi</button>
                            </div>
                        </div>
                    </div>

                    <div class="img-container">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
                            class="w-100 shadow-1-strong rounded mb-4" alt="Boat on Calm Water" />
                        <div class="img-overlay">
                            <div class="overlay-text">
                                <h5>Boat on Calm Water</h5>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal4">Lihat
                                    Deskripsi</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="img-container">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
                            class="w-100 shadow-1-strong rounded mb-4" alt="Waves at Sea" />
                        <div class="img-overlay">
                            <div class="overlay-text">
                                <h5>Waves at Sea</h5>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal5">Lihat
                                    Deskripsi</button>
                            </div>
                        </div>
                    </div>

                    <div class="img-container">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
                            class="w-100 shadow-1-strong rounded mb-4" alt="Yosemite National Park" />
                        <div class="img-overlay">
                            <div class="overlay-text">
                                <h5>Yosemite National Park</h5>
                                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#modal6">Lihat
                                    Deskripsi</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="modal1" tabindex="-1" aria-labelledby="modal1Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modal1Label">Deskripsi Boat on Calm Water</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Ini adalah gambar kapal yang berlayar di atas air yang tenang di suatu danau yang indah.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal2" tabindex="-1" aria-labelledby="modal2Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modal2Label">Deskripsi Wintry Mountain Landscape</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Gambar ini menunjukkan pemandangan gunung yang tertutup salju dengan langit yang cerah di
                                musim dingin.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal3" tabindex="-1" aria-labelledby="modal3Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modal3Label">Deskripsi Mountains in the Clouds</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Gambar ini menunjukkan pemandangan pegunungan yang tinggi dengan awan yang menyelimuti
                                puncaknya.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal4" tabindex="-1" aria-labelledby="modal4Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modal4Label">Deskripsi Boat on Calm Water</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Ini adalah gambar kapal yang berlayar di atas air yang tenang di suatu danau yang indah.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal5" tabindex="-1" aria-labelledby="modal5Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modal5Label">Deskripsi Waves at Sea</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Gambar ini menunjukkan gelombang yang besar di laut yang menggulung ke pantai dengan
                                keindahan alamnya.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal6" tabindex="-1" aria-labelledby="modal6Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modal6Label">Deskripsi Yosemite National Park</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>Ini adalah gambar Yosemite National Park, terkenal dengan tebing granit dan air terjun yang
                                spektakuler.</p>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
    </section>

    <section class="d2c_counter_wrapper">
        <div class="container">
            <style>
                .equal-height {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                }

                .equal-height img {
                    width: 100%;
                    height: 350px;
                    /* Sesuaikan tinggi sesuai kebutuhan */
                    object-fit: cover;
                    /* Pastikan gambar tidak terdistorsi */
                }

                .row.align-items-stretch {
                    display: flex;
                    align-items: stretch;
                }
            </style>

            <div class="row align-items-stretch">
                <!-- The Lost World Park -->
                <div class="col-12 col-lg-6 text-center mb-4 mb-lg-0 d-flex">
                    <div class="equal-height">
                        <h2 class="text-white">The Lost World Park</h2>
                        <p class="text-white" style="text-align: justify">
                            @lang('destinasi.lostWorld')
                        </p>
                        <img src="{{ asset('images/Daftar Wisata/Photo - The Lost World.webp') }}" class="img-fluid"
                            alt="" style="border-radius: 15px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);">
                    </div>
                </div>

                <!-- Fun Off-road Kalikuning -->
                <div class="col-12 col-lg-6 text-center mb-4 mb-lg-0 d-flex">
                    <div class="equal-height">
                        <h2 class="text-white">Fun Off-road Kalikuning</h2>
                        <p class="text-white" style="text-align: justify">
                            @lang('destinasi.kalikuning')
                        </p>
                        <img src="{{ asset('images/Daftar Wisata/Photo - Fun Offroad Kalikuning.webp') }}"
                            class="img-fluid" alt=""
                            style="border-radius: 15px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);">
                    </div>
                </div>
            </div>

        </div>
    </section>

    <section class="d2c_pricing_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    {{-- <h4 class="d2c_sub_title">Pricing</h4> --}}
                    <h2 class="d2c_title" style="color: #133e87">@lang('index.h2wisata')</h2>
                    <p class="d2c_title_content">@lang('index.pwisata')</p>
                </div>
                <div class="row">
                    <div class="col-12 col-md-6 col-lg-3 mb-2">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>Short</h3>
                                <p class="text-muted">@lang('index.pshort')</p>
                                {{-- <div class="price-original">Rp 89.900</div>
                                <div class="discount-badge">DISKON 86%</div> --}}
                                <div class="price-current">
                                    Rp 400.000
                                </div>
                            </div>
                            <a href="{{ url(App::getLocale() . '/reservasi/' . Crypt::encryptString('Short', 'merapinihbos')) }}"
                                class="btn btn-select w-100">@lang('index.pbutton')</a>
                            {{-- <div class="renewal-price">Rp 29.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                @lang('index.lshort')
                            </ul>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3 mb-2">
                        <div class="price-card highlight">
                            <div class="text-center">
                                <div class="popular-badge">@lang('index.plaris')</div>
                                <h3>Medium</h3>
                                <p class="text-muted">@lang('index.pmedium')</p>
                                {{-- <div class="price-original">Rp 119.000</div>
                                <div class="discount-badge">DISKON 80%</div> --}}
                                <div class="price-current">
                                    Rp 500.000
                                </div>
                            </div>
                            <a href="{{ url(App::getLocale() . '/reservasi/' . Crypt::encryptString('Medium', 'merapinihbos')) }}"
                                class="btn btn-select w-100">@lang('index.pbutton')</a>
                            {{-- <div class="bonus-text">+3 bulan gratis</div> --}}
                            {{-- <div class="renewal-price">Rp 49.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                @lang('index.lmedium')
                            </ul>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3 mb-2">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>Long</h3>
                                <p class="text-muted">@lang('index.plong')</p>
                                {{-- <div class="price-original">Rp 139.900</div>
                                <div class="discount-badge">DISKON 69%</div> --}}
                                <div class="price-current">
                                    Rp 600.000
                                </div>
                            </div>
                            <a href="{{ url(App::getLocale() . '/reservasi/' . Crypt::encryptString('Long', 'merapinihbos')) }}"
                                class="btn btn-select w-100">@lang('index.pbutton')</a>
                            {{-- <div class="bonus-text">+3 bulan gratis</div> --}}
                            {{-- <div class="renewal-price">Rp 93.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                @lang('index.llong')
                            </ul>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-3 mb-2">
                        <div class="price-card">
                            <div class="text-center">
                                <h3>Sunrise</h3>
                                <p class="text-muted">@lang('index.psunrise')</p>
                                {{-- <div class="price-original">Rp 312.900</div>
                                <div class="discount-badge">DISKON 59%</div> --}}
                                <div class="price-current">
                                    Rp 500.000
                                </div>
                            </div>
                            <a href="{{ url(App::getLocale() . '/reservasi/' . Crypt::encryptString('Sunrise', 'merapinihbos')) }}"
                                class="btn btn-select w-100">@lang('index.pbutton')</a>
                            {{-- <div class="bonus-text">+3 bulan gratis</div> --}}
                            {{-- <div class="renewal-price">Rp 235.900/bln saat perpanjang layanan</div> --}}
                            <ul class="feature-list">
                                @lang('index.lsunrise')
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection