@extends('layout.front.main')
@section('title')
    @lang('about.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%">
            <h1 class="display-5 fw-bold">Merjay</h1>
            <div class="col-lg-6 mx-auto">
            </div>
        </div>
    </section> --}}
    <section class="py-3">
        <div class="container d-flex align-items-center">
            <div class="row">
                <div class="col-12 col-lg-6 d-flex flex-column justify-content-center text-center">
                    <h2 class="text-merjay" style="color: #133e87">@lang('about.partner_heading')</h2>
                    <br>
                    <p style="color: black">@lang('about.partner_subheading')</p>
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <img src="{{ asset('images/Logo/LOGO MERJAY.png') }}" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_counter_wrapper">
        <div class="container">
            <h2 class="text-white text-center">@lang('about.about_merjay_heading')</h2>
            <div class="row">
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <p class="text-white" style="text-align: justify">@lang('about.about_merjay_paragraph')</p>
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <img src="{{ asset('images/Tentang Merjay/Phooto - Jeep - Tentang Merjay.webp') }}"
                        class="img-fluid w-75" alt="">
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <img src="{{ asset('images/Tentang Merjay/Photo - Logo Jeep Willys .webp') }}" class="img-fluid w-75"
                        alt="">
                </div>
                <div class="col-12 col-lg-6 d-flex justify-content-center align-items-center">
                    <p class="text-white" style="text-align: justify">
                        @lang('about.about_merjay_paragraph2')
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <h2 class="text-merjay text-center">@lang('about.merjay_value_heading')</h2>
            <div class="row">
                <div class="col-12 col-lg-4">
                    <div class="card d-flex h-100">
                        <div class="card-body text-center d-flex flex-column justify-content-between">
                            <h2>@lang('about.merjay_value_integrity')</h2>
                            <p class="mt-auto">@lang('about.merjay_value_integrity_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="card d-flex h-100">
                        <div class="card-body text-center d-flex flex-column justify-content-between">
                            <h2>@lang('about.merjay_value_excellence')</h2>
                            <p class="mt-auto">@lang('about.merjay_value_excellence_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="card d-flex h-100">
                        <div class="card-body text-center d-flex flex-column justify-content-between">
                            <h2>@lang('about.merjay_value_relevance')</h2>
                            <p class="mt-auto">@lang('about.merjay_value_relevance_desc')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="text-center">
                <h2 class="text-merjay">@lang('about.merjay_advantage_heading')</h2>
                <p>@lang('about.merjay_advantage_subheading')</p>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow"
                                style="width: 70px; height: 70px; padding: 5px; display: flex; justify-content: center; align-items: center;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Mudah.webp') }}" class="img-fluid"
                                    alt=""
                                    style="object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%;">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_easy')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_easy_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow"
                                style="width: 70px; height: 70px; padding: 5px; display: flex; justify-content: center; align-items: center;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Cepat.webp') }}" class="img-fluid"
                                    alt=""
                                    style="object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%;">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_fast')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_fast_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow"
                                style="width: 70px; height: 70px; padding: 5px; display: flex; justify-content: center; align-items: center;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Aman dan Terpercaya.webp') }}"
                                    class="img-fluid" alt=""
                                    style="object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%;">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_safe')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_safe_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow"
                                style="width: 70px; height: 70px; padding: 5px; display: flex; justify-content: center; align-items: center;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Banyak Promonya.webp') }}"
                                    class="img-fluid" alt=""
                                    style="object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%;">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_promotion')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_promotion_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow"
                                style="width: 70px; height: 70px; padding: 5px; display: flex; justify-content: center; align-items: center;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Jaminan uang kembali.webp') }}"
                                    class="img-fluid" alt=""
                                    style="object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%;">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_moneyback')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_moneyback_desc')</p>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <div class="row">
                        <div class="col-2 d-flex justify-content-center align-items-center">
                            <div class="border rounded shadow"
                                style="width: 70px; height: 70px; padding: 5px; display: flex; justify-content: center; align-items: center;">
                                <img src="{{ asset('images/Tentang Merjay/Icon - Layanan 24 jam.webp') }}"
                                    class="img-fluid" alt=""
                                    style="object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-height: 100%;">
                            </div>
                        </div>
                        <div class="col-10">
                            <h4>@lang('about.merjay_advantage_24_7')</h4>
                            <p style="text-align: justify">@lang('about.merjay_advantage_24_7_desc')</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    {{-- <section class="d2c_about_me_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center">
                    <h4>@lang('about.h4about')</h4>
                    <h2>@lang('about.h2about')</h2>
                    <p>@lang('about.pabout')</p>
                </div>
                <div class="d2c_img_wrapper">
                    <img src="{{ asset('') }}template/assets/images/about_me_img.jpg" class="w-100 h-100"
                        alt="About Me Image">
                </div>
                <div class="col-lg-10 offset-lg-1 text-center">
                    <p class="mb-0">@lang('about.p2about')</p>
                </div>
            </div>
        </div>
    </section>

    <section class="d2c_mission_wrapper d2c_props_bg position-relative">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 mb-4 mb-lg-0">
                    <div class="d2c_content_container pe-4">
                        <h2>Merjay Jeep Merapi</h2>
                        <p style="text-align: justify">@lang('about.p3about')</p>
                        <ul>
                            @lang('about.listabout')
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <img src="{{ asset('') }}template/assets/images/about_me_img.jpg" class="w-100 h-100"
                        alt="About Me Image">
                    <a href="https://www.youtube.com/@designtocodes" target="_blank" class="d2c_video_wrapper">
                        <i class="far fa-play-circle"></i>
                        <h6 class="mb-0">@lang('about.babout')</h6>
                    </a>
                </div>
            </div>
        </div>
    </section> --}}

    <section class="d2c_testimonial_wrapper">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 offset-lg-2 text-center">
                    <h4 class="d2c_sub_title">@lang('index.h4testi')</h4>
                    <h2 class="d2c_title mb-3">@lang('index.h2testi')</h2>
                </div>
            </div>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
            <style>
                .star-rating {
                    font-size: 1.5rem;
                    color: #f8d64f;
                }
            </style>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.min.js"></script>
            <div class="row d2c_testimonial_slider">
                @foreach ($testi as $t)
                    <div class="col">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <h3>{!! $t->deskripsi !!}</h3>
                                <h4>{{ $t->nama }}</h4>
                                <div class="star-rating">
                                    @for ($i = 1; $i <= 5; $i++)
                                        @if ($i <= $t->star)
                                            <span class="bi bi-star-fill"></span>
                                        @else
                                            <span class="bi bi-star"></span>
                                        @endif
                                    @endfor
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection