@extends('layouts.auth')
@php
    $categories = fetchCategories();
@endphp


@section('title')
    How Ambayo Work | {{ config('app.name') }}
@endsection
@section('description')
    {{ config('app.name') }} is the safest digital property marketplace. If you want to buy or sell a product.
@endsection
<link
      href="https://fonts.googleapis.com/css2?family=ADLaM+Display&family=Alice&family=Comfortaa:wght@300..700&family=Fustat:wght@200..800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
<style>
    .font-urbanist {
        font-family: "Urbanist", sans-serif;
    }
    .disabled-button{
        pointer-events: none;
        opacity: 0.6;
        cursor: not-allowed;
    }

    .intro-section {
        background-color: #fff;
    }

    .subhead {
        font-size: 36px;
        line-height: 40px;
        font-weight: 700;
        color: #613D3C;
    }

    .faq-accordian .accordion-button img{
        width: auto !important;
        margin-right: 0 !important;
    }

    .body-text {
        font-size: 18px;
        line-height: normal;
        font-weight: 500;
        color: #9b9b9b;
        margin-bottom: 50px;
        margin-top: 10px;
    }

    .text-underline {
        background: #E63C2F;
        height: 3px;
        margin: 0 auto;
        width: 130px;
        border-radius: 10px;

    }

    .padding {
        padding-bottom: 74px;
        padding-top: 50px;
    }

    .intro-section h1 {
        font-size: 60px;
        line-height: 72px;
        color: #613D3C;
    }

    .intro-section p {
        font-size: 24px;
        line-height: 32px;
        color: #9B9B9B;
        font-weight: 600;
    }

    .banner-content {
        max-width: 645px;
        margin: 0 auto;
        padding-top: 50px;
    }

    .banner-video {
        border-radius: 8px;
    }

    .video-placeholder {
        position: relative;
    }

    .video-placeholder::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 98%;
        /* background-color: rgba(230, 60, 47, 0.2);  */
        pointer-events: none;
        border-radius: 8px;
    }

    .play {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        width: 90px;
        height: 90px;
        background-color: #E63C2F;
        opacity: 30%;
    }

    .arrow-icon {
        right: -5%;
        top: 3px;
    }

    .video-banner {
        margin-top: 70px;
        z-index: 99;
        position: relative;
    }

    /* Fix dropdown z-index to appear above video */
    .submenus.dropdown-menu {
        z-index: 9999 !important;
        position: relative;
    }

    /* Ensure header dropdown is above all other elements */
    .navbar .dropdown-menu {
        z-index: 9999 !important;
    }

    /* Ensure the header itself has proper z-index */
    .navbar {
        z-index: 1000;
        position: relative;
    }

    .intro-section .small-info,
    .see-action .small-info {
        font-size: 18px;
        line-height: 32px;
        color: #613D3C;
        font-weight: 500;
        margin-top: 10px;
    }

    .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 100%;
        width: 70px;
        height: 70px;
        background-color: #E63C2F;
        /* display: flex; */
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .play-btn img {
        position: relative;
        right: -3px;
        width: 28px;
        height: 38px;
    }

    .play-btn:hover,
    .play-btn:active,
    .play-btn:focus {
        background-color: #fff;
    }

    .play-btn:hover img,
    .play-btn:active img,
    .play-btn:focus img {
        filter: invert(70%) sepia(89%) saturate(1827%) hue-rotate(343deg) brightness(95%) contrast(97%)
    }


    /* how it works */
    .left-card {
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        border: 1px solid #E2E8F0;
        width: 576px;
    }

    .how-it-works img {
        border-radius: 10px;
    }


    .earn-crypto .card {
        border: none;
        background: white;
        border-radius: 10px;
    }


    .why-ambayo .shadow-sm {
        background: #fff5f5;
    }


    .final-cta {
        background: url("{{ asset('images/howAmbayoWorks/bannerimg-bottom.png') }}") no-repeat center/cover;
        /* background: url('images/howAmbayoWorks/bannerimg-bottom.png') no-repeat center/cover; */
        color: white;
        padding: 160px 0px;
    }

    .dollarexchange {
        top: 1%;
        right: 16%;
    }

    .star_one {
        top: 22%;
        right: 21%;
    }

    .globalmarketplace {
        top: 36%;
        right: 14%;
    }

    .star_two {
        top: 56%;
        right: 9%;
    }

    .chat {
        right: 12%;
        bottom: 22%;
    }

    .star_three {
        right: 31%;
        bottom: 10%;
    }

    .star_four {
        top: 7%;
        left: 43%;
    }

    .cart {
        top: 1%;
        left: 12%;
    }

    .moneybag {
        bottom: 50%;
        left: 12%;
    }

    .star_five {
        bottom: 45%;
        left: 30%;
    }

    .postads {
        bottom: 15%;
        left: 10%;
    }

    .star_six {
        bottom: 7%;
        left: 27%;
    }

    .steps-icon {
        background-color: #613D3C;
        border-radius: 100%;
        width: 56px;
        height: 56px;
    }

    .step-text {
        padding: 1px 10px;
        border-radius: 20px;
        border: 1px solid #613D3C;
        color: #613D3C;
        font-weight: 700;
        font-size: 16px;
    }

    .left-card h4 {
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
        color: #613D3C;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .left-card p {
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        color: #9b9b9b;
    }

    .video-section {
        width: 512px !important;
        height: 300px !important;
        object-fit: cover !important;
        object-position: 20% 34% !important;
    }

    .video-section.sellsafe {
        object-position: 33% 67% !important;
    }

    .ready-to-tryout {
        margin-top: 50px;
    }

    .ready-to-tryout h5 {
        font-weight: 600;
        font-size: 30px;
        line-height: 32px;
        color: #613D3C;
    }

    .earn-usdt {
        font-weight: 600;
        font-size: 18px;
        line-height: normal;
        color: #613D3C;
        border: 1px solid #FFE39C;
        background-color: #FFF3D7;
        border-radius: 20px;
        display: inline-block;
        padding: 11px 20px;
        margin-bottom: 26px;
    }

    .earn-usdt-title {
        font-weight: 700;
        font-size: 36px;
        line-height: 40px;
        color: #613D3C;
    }

    .posting {
        font-weight: 600;
        font-size: 19px;
        line-height: 28px;
        color: #9b9b9b;
    }

    .crpto-blk {
        width: 585px;
        margin: 0 auto;
        gap: 32px;
        margin-bottom: 65px;
        margin-top: 40px;
    }

    .crypto-boxes {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        width: 175px;
        height: 100px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .crypto-boxes div {
        color: #E63C2F;
        font-size: 24px;
        line-height: 32px;
        font-weight: 700;
    }

    .crypto-boxes div span {
        color: #613D3C;
        font-size: 14px;
        line-height: 28px;
        font-weight: 600;
    }

    .progress-cards {
        border-radius: 8px;
        border: 1px solid #E2E8F0;
        background-color: #fff;
        height: 270px;
    }

    .usdt-digit {
        background: linear-gradient(#F8C630, #F99624);
        display: inline-block;
        border-radius: 10px;
        padding: 4px 10px;
        font-size: 14px;
        line-height: 16px;
        font-weight: 700;
        color: #fff;
    }

    .post-ad-title {
        font-size: 20px;
        line-height: 24px;
        font-weight: 600;
        color: #613D3C;

    }

    .post-ads {
        margin-bottom: 20px;
    }

    .progress-cards .progress-bar {
        --bs-progress-bar-bg: linear-gradient(to right,
                #FFBE2B 0%,
                #F99523 50%,
                #EF4328 100%) !important;
        background: var(--bs-progress-bar-bg) !important;
        border-radius: 20px;
    }

    .crypto-text {
        text-align: left !important;
    }

    .btn-inactive {
        background-color: #EDF0F4 !important;
        color: #999999 !important;
    }

    .btn-inactive:active,
    .btn-inactive:hover,
    .btn-inactive:focus {
        background-color: #EDF0F4 !important;
        color: #999999 !important;
        border-color: transparent !important;

    }

    .progress-title,
    .progress-digit {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #613D3C;
    }

    .crypto-text {
        font-size: 16px;
        font-weight: 600;
        color: #613D3C;
    }

    .progress-title.bonus-text {
        text-align: left !important;
    }

    .video-header {
        font-size: 16px;
        font-weight: 600;
        line-height: 28px;
        color: #613D3C;
    }

    .earn-crypto .video-banner {
        max-width: 800px;
        margin: 0 auto;
    }

    .language-text {
        font-size: 18px;
        font-weight: 500;
        line-height: 24px;
        color: #9b9b9b;
    }

    .dropdown-block select {
        background-image: unset !important;
        width: 212px;
        padding: 10px;
        border-radius: 10px;
        outline: none;
        border: 1px solid #E63C2F;
    }

    .see-action .video-banner {
        width: 800px;
        margin: 0 auto;
    }

    .features-box {
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        height: 220px;
    }

    .features-box h5 {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: #613D3C;
    }

    .features-box p {
        font-size: 15px;
        line-height: 20px;
        font-weight: 600;
        color: #9B9B9B;
    }

    .user-testimonials {
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 26px;
        line-height: 32px;
        font-weight: 700;
        color: #613D3C;
    }

    .user-testimonials-box {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        background-color: #fff;
        border-radius: 10px;
        padding: 22px;
        height: 200px;
    }

    .testimonials-section .swiper {
        padding: 20px;
    }

    .user-name,
    .user-testimonials-box p {
        text-align: left !important;
    }

    .user-testimonials-box .user-name {
        font-size: 20px;
        line-height: 24px;
        color: #613D3C;
        font-weight: 600;

    }

    .user-testimonials-box p {
        margin-top: 22px !important;
        font-weight: 500;
        font-style: italic;
        font-size: 20px;
        line-height: 24px;
        color: #613D3C;
    }

    .testimonials-section .swiper-wrapper {
        padding: 40px;
        height: 12em;
    }

    .testimonials-section .swiper .swiper-pagination {
        margin-top: 50px !important;
    }

    .testimonials-section .swiper-pagination-bullet-active {
        background-color: #E63C2F;
    }

    .trusted-section {
        background: linear-gradient(to right, #663F34, #8E2A23);
        padding: 50px;
    }

    .social-box-icon {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 100%;
        padding: 21px;
        background-color: #fff;
        height: 75px;
        width: 75px;
    }

    .social-proof-boxes p {
        font-weight: 500;
        font-size: 20px;
        line-height: normal;
        color: #fff;
    }

    .social-proof-boxes {
        width: 250px;
    }


    .faq-section .accordion-item:first-of-type .accordion-button {
        border-radius: 0px !important;
    }

    .faq-section .accordion-button:focus,
    .faq-section .accordion-button:active,
    .faq-section .accordion-button:hover {
        box-shadow: none !important;
        border: 1px solid #E63C2F;
        background: #fff;
    }

    .faq-section .accordion-button:focus span img,
    .faq-section .accordion-button:active span img,
    .faq-section .accordion-button:hover span img {
        filter: invert(27%) sepia(89%) saturate(1827%) hue-rotate(343deg) brightness(95%) contrast(97%)
    }

    .faq-section .accordion-button:not(.collapsed) span img {
        filter: invert(27%) sepia(89%) saturate(1827%) hue-rotate(343deg) brightness(95%) contrast(97%)
    }

    .faq-section .accordion-button:not(.collapsed) {
        background-color: #fff !important;
        color: #E63C2F;
        border: 1px solid #E63C2F;
    }

    .faq-section .accordion-button {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        color: #613D3C;
        justify-content: space-between;
    }

    .faq-section .accordion-button:not(.collapsed)::after,
    .faq-section .accordion-button::after {
        display: none;
    }

    .faq-section .accordion-button .chev-down {
        transform: rotate(180deg) !important
    }

    .faq-section .accordion-button.collapsed .chev-down {
        transform: rotate(0deg) !important
    }

    .faq-section .accordion-button:not(.collapsed) .chev-down img {
        filter: invert(27%) sepia(89%) saturate(1827%) hue-rotate(343deg) brightness(95%) contrast(97%) !important;

    }

    .faq-section .accordion-button.collapsed:hover div,
    .faq-section .accordion-button.collapsed:focus div,
    .faq-section .accordion-button.collapsed:active div {
        color: #E63C2F;
    }

    .faq-section .accordion-button.collapsed:hover .chev-down img,
    .faq-section .accordion-button.collapsed:focus .chev-down img,
    .faq-section .accordion-button.collapsed:active .chev-down img {
        filter: invert(27%) sepia(89%) saturate(1827%) hue-rotate(343deg) brightness(95%) contrast(97%) !important;

    }

    .faq-section .accordion {
        width: 672px;
        margin: 0 auto;
    }

    .faq-section .accordion-body {
        text-align: left;
        color: #613D3C;
    }

    .final-cta .btn-white-outline {
        background-color: #83807E;
        border: 1px solid #fff;
        color: #fff;
    }

    .final-cta h3 {
        font-size: 50px;
        line-height: 48px;
    }

    .final-cta p {
        font-size: 24px;
        line-height: 32px;
        font-weight: 300;
        margin-top: 20px;
        margin-bottom: 44px;
    }

    /* buttons */
    .orange-btn {
        width: 300px;
        background-color: #E63C2F;
        border: 1px solid #E63C2F;
        color: #fff;
        display: block ;
        font-weight: 500;
        font-size: 18px;
        padding: 5px 20px;
        border-radius: 50px;
        text-decoration: none !important;
        transition: 0.3s ease;
    }

    .orange-btn:hover,
    .orange-btn:focus,
    .orange-btn:active {
        opacity: 0.8;
        color:white !important;
    }



    .btn-white-outline {
        width: 300px;
        background-color: #fff;
        border: 1px solid #E63C2F;
        color: #E63C2F;
        display: block;
        font-weight: 500;
        font-size: 18px;
        padding: 5px 20px;
        border-radius: 50px;
        text-decoration: none;
        transition: 0.3s ease;

    }

    .btn-white-outline:hover,
    .btn-white-outline:focus,
    .btn-white-outline:active {
        background-color: #E63C2F;
        color: #fff;
    }


    .btn-white-outline:hover .orange-chevron,
    .btn-white-outline:focus .orange-chevron,
    .btn-white-outline:active .orange-chevron {
        filter: brightness(0) invert(1);
    }

    .order-5 {
        order: 5;
    }

    .order-6 {
        order: 6;
    }

    .order-7 {
        order: 7;
    }

    .order-8 {
        order: 8;

    }

    .order-9 {
        order: 9;
    }

    .order-10 {
        order: 10;

    }


    /* media-query */
    @media (max-width:1300px) {
        section.intro-section {
            width: auto;
        }
    }

    @media (max-width:991.98px) {
        .progress-cards {
            height: 320px;
        }

        .see-action .video-banner {
            width: 100%;
        }
    }

    @media (max-width:768px) {
        .order-md-7 {
            order: 7;
        }

        .order-md-8 {
            order: 8;

        }
    }

    @media (max-width:767.98px) {
        .btn-block {
            flex-direction: column;
        }

        .banner-content {
            max-width: 100%;
        }

        .intro-section h1 {
            font-size: 40px;
            line-height: 52px;
            color: #613D3C;
        }

        .crpto-blk {
            width: 100%;
            gap: 10px;
        }

        .progress-cards {
            height: 100%;
        }

        .post-ad-title {
            font-size: 16px;
            text-align: left !important;
            line-height: 20px;
        }

        .social-proof-boxes {
            width: 100%;
        }

        .social-proof-boxes p {
            font-size: 16px;
        }

        .faq-section .accordion {
            width: 100%;
        }

        .btn-bottom {
            flex-direction: column;
        }

        .final-cta {
            padding: 80px 0px;
        }
    }


    @media (max-width:676px) {
        .trusted-boxes {
            flex-direction: column;
        }
    }


    @media (max-width:576.98px) {
        .intro-section h1 {
            font-size: 30px;
            line-height: 38px;
            color: #613D3C;
        }

        .intro-section p {
            font-size: 16px;
            line-height: normal;
        }

        .moneybag,
        .globalmarketplace,
        .arrow-icon {
            display: none;
        }

        .video-banner {
            margin-top: 20px;
        }


        .intro-section .small-info,
        .see-action .small-info {
            font-size: 15px;
            line-height: 15px;
        }

        .crpto-blk {
            flex-direction: column;
        }

        .usdt-digit {
            padding: 4px;
            font-size: 11px;
            line-height: 13px;
            font-weight: 600;
        }

        .progress-cards {
            padding: 12px !important;
        }

        .progress-title,
        .progress-digit {
            font-size: 15px !important;

        }

        .crypto-text {
            font-size: 14px;
        }

        .video-header {
            line-height: 22px;
        }

        .language-dropdown {
            flex-direction: column;
        }

        .dropdown-block select {
            width: 150px;
            padding: 8px;
        }

        .user-testimonials {
            margin-top: 30px;
            margin-bottom: 0px;
        }

        .testimonials-section .swiper-wrapper {
            padding-top: 10px;
        }

        .faq-section .accordion-button {
            font-size: 14px;
            line-height: 16px;
            gap: 10px;
        }

        .faq-section .accordion-body {
            font-size: 14px;
        }

        .final-cta h3 {
            font-size: 40px;
            line-height: normal;
        }

        .final-cta .orange-btn {
            margin-right: 0px !important;
        }

        .final-cta p {
            font-size: 20px;
            line-height: 24px;
        }
    }
</style>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

@section('content')
<section class="intro-section text-center font-urbanist position-relative padding ">
    <div class="container">
        <div class="banner-content">
            <h1 class="fw-bold">
                {{ __('howAmbayoWorks.Ambayo - The Free Marketplace Where You Can Buy, Sell & Earn') }}
            </h1>
            <p class="mt-3">
                {{ __('howAmbayoWorks.Post in seconds. Chat directly. Earn crypto rewards. 100% free forever!') }}
            </p>
            <div class="mt-4 d-flex align-items-center gap-3 justify-content-center position-relative btn-block">
                <div>
                    <a href="{{ route('advertisment.create.get') }}" class="orange-btn d-flex align-items-center gap-2 justify-content-center">
                        <div>{{ __('howAmbayoWorks.Post Your First Ad - It’s free') }}</div>
                        <div><img src="{{ asset('images/howAmbayoWorks/arrows.png') }}" alt="chevron-right" /></div>
                    </a>
                </div>
                <div>
                    <a href="javascript:void(0)" class="btn-white-outline d-flex align-items-center gap-2 justify-content-center" onclick="scrollToVideo()">
                        <div>{{ __('howAmbayoWorks.Watch How it Works') }}</div>
                        <div>
                            <div>
                                <img src="{{ asset('images/howAmbayoWorks/arrows-orange.png') }}" alt="chevron-orange" class="orange-chevron" />
                            </div>
                        </div>
                    </a>
                </div>
                <div class="arrow-icon position-absolute">
                    <img src="{{ asset('images/howAmbayoWorks/arrow.png') }}" alt="" />
                </div>
            </div>
            <div class="video-banner" id="how-it-works-video">
                <div class="video-placeholder mx-auto">
                    {{-- <video autoplay muted loop playsinline class="w-100 banner-video">
                        <source src="{{ asset('images/howAmbayoWorks/banner-video.mp4') }}" type="video/mp4" />
                        Your browser does not support the video tag.
                    </video> --}}
                    <iframe id="videoFrame" width="100%" height="400"
                    src="https://www.youtube.com/embed/9hO-BNsgNRQ?autoplay=1&mute=1&loop=1&playlist=9hO-BNsgNRQ&rel=0&modestbranding=1&showinfo=0&controls=0&fs=0&iv_load_policy=3&disablekb=1&cc_load_policy=1"
                    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                    <div class="play"></div>
                    <div class="play-btn">
                        <img src="{{ asset('images/howAmbayoWorks/playbtn.png') }}" alt="playbtn" />
                    </div>
                </div>
                <p class="small-info">{{ __('howAmbayoWorks.How Ambayo Works in 60 Seconds') }}</p>
            </div>
        </div>
    </div>
    <div class="dollarexchange position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/dollarexchange.png') }}" alt="" />
    </div>
    <div class="star_one position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/star-one.png') }}" alt="" />
    </div>
    <div class="globalmarketplace position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/globalmarketplace.png') }}" alt="" />
    </div>
    <div class="star_two position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/star-one.png') }}" alt="" />
    </div>
    <div class="chat position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/chat.png') }}" alt="" />
    </div>
    <div class="star_three position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/star-two.png') }}" alt="" />
    </div>
    <div class="star_four position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/star-two.png') }}" alt="" />
    </div>
    <div class="cart position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/cart.png') }}" alt="" />
    </div>
    <div class="moneybag position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/moneybag.png') }}" alt="" />
    </div>
    <div class="star_five position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/star-two.png') }}" alt="" />
    </div>
    <div class="postads position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/post.png') }}" alt="" />
    </div>
    <div class="star_six position-absolute">
        <img src="{{ asset('images/howAmbayoWorks/star-two.png') }}" alt="" />
    </div>
</section>

<section class="how-it-works font-urbanist padding bg-light">
    <div class="container">
        <h2 class="text-center fw-bold subhead">{{ __('howAmbayoWorks.How It Works') }}</h2>
        <div class="text-underline"></div>
        <p class="posting text-center mt-2 mb-5">
            {{ __('howAmbayoWorks.Get started in 5 simple steps') }}
        </p>
        <div class="row g-4">
            <div class="col-md-6 d-flex align-items-center justify-content-end order-1 order-md-1">
                <div class="left-card">
                    <div class="d-flex align-items-center gap-3">
                        <div class="steps-icon d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/howAmbayoWorks/createacc.png') }}" alt="createacc" />
                        </div>
                        <div class="step-text">{{ __('howAmbayoWorks.Step 1') }}</div>
                    </div>
                    <h4>{{ __('howAmbayoWorks.Create Your Free Account') }}</h4>
                    <p>{{ __('howAmbayoWorks.Sign up with email or social login. Verified accounts build trust.') }}</p>
                </div>
            </div>
            <div class="col-md-6 order-2 order-md-2">
                <video autoplay muted loop playsinline class="img-fluid rounded shadow video-section">
                    <source src="{{ asset('images/howAmbayoWorks/video01.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            </div>
            <div class="col-md-6 justify-content-end d-flex order-4 order-md-3">
                <video autoplay muted loop playsinline class="img-fluid rounded shadow video-section">
                    <source src="{{ asset('images/howAmbayoWorks/video02.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-start order-3 order-md-4">
                <div class="left-card">
                    <div class="d-flex align-items-center gap-3">
                        <div class="steps-icon d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/howAmbayoWorks/postad.png') }}" alt="postad" />
                        </div>
                        <div class="step-text">{{ __('howAmbayoWorks.Step 2') }}</div>
                    </div>
                    <h4>{{ __('howAmbayoWorks.Post Your Ad in Seconds') }}</h4>
                    <p>{{ __('howAmbayoWorks.Our smart system suggests category, auto-translates, and saves drafts.') }}</p>
                </div>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-end order-5 order-md-5">
                <div class="left-card">
                    <div class="d-flex align-items-center gap-3">
                        <div class="steps-icon d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/howAmbayoWorks/getviews.png') }}" alt="getviews" />
                        </div>
                        <div class="step-text">{{ __('howAmbayoWorks.Step 3') }}</div>
                    </div>
                    <h4>{{ __('howAmbayoWorks.Get Views & Messages') }}</h4>
                    <p>{{ __('howAmbayoWorks.Buyers can message you directly - fast, private, and free.') }}</p>
                </div>
            </div>
            <div class="col-md-6 order-6 order-md-6">
                <video autoplay muted loop playsinline class="img-fluid rounded shadow video-section">
                    <source src="{{ asset('images/howAmbayoWorks/video03.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            </div>
            <div class="col-md-6 justify-content-end d-flex order-7 order-md-8">
                <video autoplay muted loop playsinline class="img-fluid rounded shadow video-section">
                    <source src="{{ asset('images/howAmbayoWorks/video04.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-start order-8 order-md-7">
                <div class="left-card">
                    <div class="d-flex align-items-center gap-3">
                        <div class="steps-icon d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/howAmbayoWorks/promoteearncrypto.png') }}" alt="promote" />
                        </div>
                        <div class="step-text">{{ __('howAmbayoWorks.Step 4') }}</div>
                    </div>
                    <h4>{{ __('howAmbayoWorks.Promote & Earn Crypto') }}</h4>
                    <p>{{ __('howAmbayoWorks.Promote your ad to reach more buyers using your wallet balance. Complete simple tasks like posting or referring to earn real crypto — fast and secure.') }}</p>
                </div>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-end order-9 order-md-9">
                <div class="left-card">
                    <div class="d-flex align-items-center gap-3">
                        <div class="steps-icon d-flex align-items-center justify-content-center">
                            <img src="{{ asset('images/howAmbayoWorks/sellsafely.png') }}" alt="sellsafely" />
                        </div>
                        <div class="step-text">{{ __('howAmbayoWorks.Step 5') }}</div>
                    </div>
                    <h4>{{ __('howAmbayoWorks.Sell Safely') }}</h4>
                    <p>{{ __('howAmbayoWorks.Talk directly. Build trust. Report issues easily.') }}</p>
                </div>
            </div>
            <div class="col-md-6 order-10 order-md-10">
                <video autoplay muted loop playsinline class="img-fluid rounded shadow video-section sellsafe">
                    <source src="{{ asset('images/howAmbayoWorks/video05.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video>
            </div>
        </div>
        <div class="text-center ready-to-tryout">
            <h5 class="mb-3">{{ __('howAmbayoWorks.Ready to try it out?') }}</h5>
            <div class="d-flex justify-content-center">
                <a href="{{ route('advertisment.create.get') }}" class="orange-btn me-2 d-flex align-items-center gap-2 justify-content-center">
                    <div>{{ __('howAmbayoWorks.Post Your First Ad – It’s Free') }}</div>
                    <div><img src="{{ asset('images/howAmbayoWorks/arrows.png') }}" alt="chevron-right" /></div>
                </a>
            </div>
        </div>
    </div>
</section>

<section class="earn-crypto padding text-center font-urbanist">
    <div class="container">
        <div class="earn-usdt gap-2 text-center">
            <div class="d-flex align-items-center justify-content-center gap-2">
                <div>
                    <img src="{{ asset('images/howAmbayoWorks/earn-coins.png') }}" alt="earn-usdt-img" />
                </div>
                <div class="">{{ __('howAmbayoWorks.Earn USDT for Every Action') }}</div>
            </div>
        </div>
        <h3 class="fw-bold earn-usdt-title mb-0">{{ __('howAmbayoWorks.Earn Crypto While You Use Ambayo') }}</h3>
        <div class="text-underline mt-2"></div>
        <p class="mt-3 posting">{{ __('howAmbayoWorks.Get up to $20+ of cryptocurrency just by signing up & posting.') }}</p>
        <div class="crpto-blk d-flex align-items-center justify-content-center">
            <div class="crypto-boxes">
                <div>{{ __('howAmbayoWorks.$50K+') }}<span class="d-block">{{ __('howAmbayoWorks.USDT Distributed') }}</span></div>
            </div>
            <div class="crypto-boxes">
                <div>{{ __('howAmbayoWorks.25K+') }}<span class="d-block">{{ __('howAmbayoWorks.Active Users') }}</span></div>
            </div>
            <div class="crypto-boxes">
                <div>{{ __('howAmbayoWorks.100K+') }}<span class="d-block">{{ __('howAmbayoWorks.Ads Posted') }}</span></div>
            </div>
        </div>
        <div class="row mt-5 g-4 mb-5">
            <div class="col-md-6">
                <div class="progress-cards p-4 d-flex flex-column justify-content-between">
                    <div>
                        <div class="post-ads d-flex justify-content-between align-items-center">
                            <div class="post-text d-flex gap-2 align-items-center">
                                <div>
                                    <img src="{{ asset('images/howAmbayoWorks/money-bags.svg') }}" alt="money bag" />
                                </div>
                                <div class="post-ad-title">{{ __('howAmbayoWorks.Post 1 Ad — Earn $5') }}</div>
                            </div>
                            <div class="usdt-digit">
                                {{ __('howAmbayoWorks.USDT $5') }}
                            </div>
                        </div>
                        <div class="progress-blk d-flex align-items-center justify-content-between">
                            <div class="progress-title">{{ __('howAmbayoWorks.Progress') }}</div>
                            <div class="progress-digit">{{ __('howAmbayoWorks.22%') }}</div>
                        </div>
                        <div class="progress mt-2 mb-2" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: 22%"></div>
                        </div>
                        <div class="crypto-text">{{ __('howAmbayoWorks.You’ve earned $5. Post 2 more ads to unlock $10 more.') }}</div>
                    </div>
                    <button type="button" class="btn btn-inactive w-100 mt-3">{{ __('howAmbayoWorks.Claim Reward') }}</button>
                </div>
            </div>
            <div class="col-md-6">
                <div class="progress-cards p-4 d-flex flex-column justify-content-between">
                    <div>
                        <div class="post-ads d-flex justify-content-between align-items-center">
                            <div class="post-text d-flex gap-2 align-items-center">
                                <div>
                                    <img src="{{ asset('images/howAmbayoWorks/money-bags.svg') }}" alt="money bag" />
                                </div>
                                <div class="post-ad-title">{{ __('howAmbayoWorks.Post 3 Ads — Earn $10 More') }}</div>
                            </div>
                            <div class="usdt-digit">
                                {{ __('howAmbayoWorks.USDT $10') }}
                            </div>
                        </div>
                        <div class="progress-blk d-flex align-items-center justify-content-between">
                            <div class="progress-title">{{ __('howAmbayoWorks.Progress') }}</div>
                            <div class="progress-digit">{{ __('howAmbayoWorks.66%') }}</div>
                        </div>
                        <div class="progress mt-2 mb-2" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: 66%"></div>
                        </div>
                        <div class="crypto-text">{{ __("howAmbayoWorks.Post 3 ads in total to earn an extra $10. You've already earned $5.") }}</div>
                    </div>
                    <button type="button" class="btn btn-inactive w-100 mt-3">{{ __('howAmbayoWorks.Claim Reward') }}</button>
                </div>
            </div>
            <div class="col-md-6">
                <div class="progress-cards p-4 d-flex flex-column justify-content-between">
                    <div>
                        <div class="post-ads d-flex justify-content-between align-items-center">
                            <div class="post-text d-flex gap-2 align-items-center">
                                <div>
                                    <img src="{{ asset('images/howAmbayoWorks/money-bags.svg') }}" alt="money bag" />
                                </div>
                                <div class="post-ad-title">{{ __('howAmbayoWorks.Refer a Friend — Earn $5') }}</div>
                            </div>
                            <div class="usdt-digit">
                                {{ __('howAmbayoWorks.USDT $5') }}
                            </div>
                        </div>
                        <div class="progress-blk d-flex align-items-center justify-content-between">
                            <div class="progress-title">{{ __('howAmbayoWorks.Progress') }}</div>
                            <div class="progress-digit">{{ __('howAmbayoWorks.100%') }}</div>
                        </div>
                        <div class="progress mt-2 mb-2" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar" style="width: 100%"></div>
                        </div>
                        <div class="crypto-text">{{ __('howAmbayoWorks.You’ve earned $5 for referring a friend who posted 3 ads.') }}</div>
                        <div class="crypto-text">{{ __('howAmbayoWorks.Invite more friends to earn more rewards.') }}</div>
                    </div>
                    <button type="button" class="btn btn-success w-100 mt-3">{{ __('howAmbayoWorks.Claim Reward') }}</button>
                </div>
            </div>
            <div class="col-md-6">
                <div class="progress-cards p-4 d-flex flex-column justify-content-between">
                    <div class="post-ads d-flex justify-content-between align-items-center">
                        <div class="post-text d-flex gap-2 align-items-center">
                            <div>
                                <img src="{{ asset('images/howAmbayoWorks/rocket-img.svg') }}" alt="money bag" />
                            </div>
                            <div class="post-ad-title">{{ __('howAmbayoWorks.Auto-promote') }}</div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div class="bonus-blk d-flex align-items-center justify-content-between">
                                <div class="progress-blk">
                                    <div class="progress-title bonus-text">{{ __('howAmbayoWorks.Unlock Bonus Exposure') }}</div>
                                    <div class="progress-title bonus-text">{{ __('howAmbayoWorks.Congratulations! You have unlocked the Bonus') }}</div>
                                </div>
                                <div class="bonus-gift">
                                    <img src="{{ asset('images/howAmbayoWorks/giftbox.png') }}" alt="bonus-gift" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-inactive w-100 mt-3">{{ __('howAmbayoWorks.Claim Bonus') }}</button>
                </div>
            </div>
        </div>
        <p class="mb-2 video-header">{{ __('howAmbayoWorks.Turn simple actions into real crypto. No tricks, no limits – just real rewards for real users.') }}</p>
        <div class="video-banner mt-0">
            <div class="video-placeholder mx-auto">
                {{-- <video autoplay muted loop playsinline class="w-100 banner-video">
                    <source src="{{ asset('images/howAmbayoWorks/banner-video.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video> --}}
                <iframe id="videoFrame" width="100%" height="500"
                src="https://www.youtube.com/embed/9hO-BNsgNRQ?autoplay=1&mute=1&loop=1&playlist=9hO-BNsgNRQ&rel=0&modestbranding=1&showinfo=0&controls=0&fs=0&iv_load_policy=3&disablekb=1&cc_load_policy=1"
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                <div class="play"></div>
                <div class="play-btn">
                    <img src="{{ asset('images/howAmbayoWorks/playbtn.png') }}" alt="playbtn" />
                </div>
            </div>
        </div>
    </div>
</section>

<section class="see-action padding font-urbanist text-center bg-light">
    <div class="container">
        <h3 class="fw-bold earn-usdt-title mb-0">{{ __('howAmbayoWorks.See It in Action') }}</h3>
        <div class="text-underline mt-2"></div>
        <div class="language-dropdown d-flex align-items-center gap-3 justify-content-center mt-4 mb-4">
            <div class="language-text">{{ __('howAmbayoWorks.Watch in Your Language:') }}</div>
            <div class="dropdown-block">
            {{-- @php
            $list = \App\Models\User::countryListWithLanguage();
            @endphp
                <select id="fruit" name="fruit" disabled>
                    <option value="">{{ __('howAmbayoWorks.Select') }}</option>
                    @foreach (getLanguageList() as $key => $value)
                      @php
                        $code = strtolower(array_search ($key, $list));
                        $code = !empty($code) ? $code : $key;
                      @endphp
                        <option value="{{$key}}" {{session()->get('locale') == $key ? "selected=''" : ""}} data-code="{{$code}}"> {{$value}}</option>

                    @endforeach
                </select> --}}
            </div>
        </div>
        <div class="video-banner">
            <div class="video-placeholder mx-auto">
                {{-- <video autoplay muted loop playsinline class="w-100 banner-video">
                    <source src="{{ asset('images/howAmbayoWorks/banner-video.mp4') }}" type="video/mp4" />
                    Your browser does not support the video tag.
                </video> --}}
                <iframe id="videoFrame" width="100%" height="500"
                src="https://www.youtube.com/embed/9hO-BNsgNRQ?autoplay=1&mute=1&loop=1&playlist=9hO-BNsgNRQ&rel=0&modestbranding=1&showinfo=0&controls=0&fs=0&iv_load_policy=3&disablekb=1&cc_load_policy=1"
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                <div class="play"></div>
                <div class="play-btn">
                    <img src="{{ asset('images/howAmbayoWorks/playbtn.png') }}" alt="playbtn" />
                </div>
            </div>
            <p class="small-info">
                <span class="me-2"><img src="{{ asset('images/howAmbayoWorks/worldwide.png') }}" alt="" /></span>{{ __('howAmbayoWorks.Already watched by 75,000+ users worldwide') }}
            </p>
        </div>
    </div>
</section>

<section class="why-ambayo padding font-urbanist">
    <div class="container text-center">
        <h3 class="fw-bold earn-usdt-title mb-0">{{ __('howAmbayoWorks.Why Ambayo?') }}</h3>
        <div class="text-underline mt-2"></div>
        <p class="posting text-center mt-3 mb-5">{{ __('howAmbayoWorks.Unique features that set us apart') }}</p>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="p-4 features-box">
                    <div class="features-icon">
                        <img src="{{ asset('images/howAmbayoWorks/lock.png') }}" alt="lock" />
                    </div>
                    <h5 class="mt-4 mb-2">{{ __('howAmbayoWorks.100% Free. No Commissions. Ever.') }}</h5>
                    <p class="mb-0">{{ __('howAmbayoWorks.Keep all your earnings') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 features-box">
                    <div class="features-icon">
                        <img src="{{ asset('images/howAmbayoWorks/smartposting.png') }}" alt="smart-posting" />
                    </div>
                    <h5 class="mt-4 mb-2">{{ __('howAmbayoWorks.Smart Posting with Auto-Categorization') }}</h5>
                    <p class="mb-0">{{ __('howAmbayoWorks.AI helps you post faster') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 features-box">
                    <div class="features-icon">
                        <img src="{{ asset('images/howAmbayoWorks/translation.png') }}" alt="translations" />
                    </div>
                    <h5 class="mt-4 mb-2">{{ __('howAmbayoWorks.Multilingual Listings & Translations') }}</h5>
                    <p class="mb-0">{{ __('howAmbayoWorks.Reach global audiences') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 features-box">
                    <div class="features-icon">
                        <img src="{{ asset('images/howAmbayoWorks/instantmsgs.png') }}" alt="instant-messages" />
                    </div>
                    <h5 class="mt-4 mb-2">{{ __('howAmbayoWorks.Instant Messaging, No App Needed') }}</h5>
                    <p class="mb-0">{{ __('howAmbayoWorks.Chat directly in browser') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 features-box">
                    <div class="features-icon">
                        <img src="{{ asset('images/howAmbayoWorks/earncrypto.png') }}" alt="earncrypto" />
                    </div>
                    <h5 class="mt-4 mb-2">{{ __('howAmbayoWorks.Earn Crypto with Every Action') }}</h5>
                    <p class="mb-0">{{ __('howAmbayoWorks.Get rewarded for participation') }}</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="p-4 features-box">
                    <div class="features-icon">
                        <img src="{{ asset('images/howAmbayoWorks/trustedcommunity.png') }}" alt="trustedcommunity" />
                    </div>
                    <h5 class="mt-4 mb-2">{{ __('howAmbayoWorks.Trusted Community & Safe Reporting') }}</h5>
                    <p class="mb-0">{{ __('howAmbayoWorks.Protected marketplace') }}</p>
                </div>
            </div>
        </div>
        <div class="user-testimonials">{{ __('howAmbayoWorks.User Testimonials') }}</div>
        <div class="testimonials-section">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="user-testimonials-box">
                            <div class="user-box d-flex align-items-center gap-2">
                                <div class="user-icon">
                                    <img src="{{ asset('images/howAmbayoWorks/usertest_one.png') }}" alt="user-one" />
                                </div>
                                <div class="user-name text-left">
                                    {{ __('howAmbayoWorks.Sarah M') }}
                                    <div class="d-flex align-items-center gap-1">
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="m-0">{{ __('howAmbayoWorks.I posted my first ad in 30 seconds and earned $10!') }}</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="user-testimonials-box">
                            <div class="user-box d-flex align-items-center gap-2">
                                <div class="user-icon">
                                    <img src="{{ asset('images/howAmbayoWorks/usertest_two.png') }}" alt="user-two" />
                                </div>
                                <div class="user-name text-left">
                                    {{ __('howAmbayoWorks.Alex R.') }}
                                    <div class="d-flex align-items-center gap-1">
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="m-0">{{ __('howAmbayoWorks.The auto-translation feature helped me reach buyers worldwide.') }}</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="user-testimonials-box">
                            <div class="user-box d-flex align-items-center gap-2">
                                <div class="user-icon">
                                    <img src="{{ asset('images/howAmbayoWorks/usertest_three.png') }}" alt="user-three" />
                                </div>
                                <div class="user-name text-left">
                                    {{ __('howAmbayoWorks.Amy L.') }}
                                    <div class="d-flex align-items-center gap-1">
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="m-0">{{ __('howAmbayoWorks.Finally, a marketplace that actually rewards users!') }}</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="user-testimonials-box">
                            <div class="user-box d-flex align-items-center gap-2">
                                <div class="user-icon">
                                    <img src="{{ asset('images/howAmbayoWorks/usertest_one.png') }}" alt="user-one" />
                                </div>
                                <div class="user-name text-left">
                                    {{ __('howAmbayoWorks.Sarah M') }}
                                    <div class="d-flex align-items-center gap-1">
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="m-0">{{ __('howAmbayoWorks.I posted my first ad in 30 seconds and earned $10!') }}</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="user-testimonials-box">
                            <div class="user-box d-flex align-items-center gap-2">
                                <div class="user-icon">
                                    <img src="{{ asset('images/howAmbayoWorks/usertest_two.png') }}" alt="user-two" />
                                </div>
                                <div class="user-name text-left">
                                    {{ __('howAmbayoWorks.Alex R.') }}
                                    <div class="d-flex align-items-center gap-1">
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                        <div>
                                            <img src="{{ asset('images/howAmbayoWorks/starrate.png') }}" alt="star_rating" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="m-0">{{ __('howAmbayoWorks.The auto-translation feature helped me reach buyers worldwide.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination mt-5"></div>
            </div>
        </div>
    </div>
</section>

<section class="trusted-section font-urbanist">
    <div class="container">
        <div class="trusted-boxes d-flex align-items-center justify-content-center gap-5">
            <div class="social-proof-boxes d-flex align-items-center justify-content-center flex-column">
                <div class="social-box-icon">
                    <img src="{{ asset('images/howAmbayoWorks/trophy.png') }}" alt="" />
                </div>
                <p class="mt-3 text-center">{{ __('howAmbayoWorks.4.9/5 Average Rating') }}</p>
            </div>
            <div class="social-proof-boxes d-flex align-items-center justify-content-center flex-column">
                <div class="social-box-icon">
                    <img src="{{ asset('images/howAmbayoWorks/globe.png') }}" alt="" />
                </div>
                <p class="mt-3 text-center">{{ __('howAmbayoWorks.Trusted by users in 30+ countries') }}</p>
            </div>
            <div class="social-proof-boxes d-flex align-items-center justify-content-center flex-column">
                <div class="social-box-icon">
                    <img src="{{ asset('images/howAmbayoWorks/messaging.png') }}" alt="" />
                </div>
                <p class="mt-3 text-center">{{ __('howAmbayoWorks.Over 100,000 successful listings posted') }}</p>
            </div>
        </div>
    </div>
</section>

<section class="faq-section padding bg-light font-urbanist">
    <div class="container text-center">
        <h3 class="fw-bold earn-usdt-title mb-0">{{ __('howAmbayoWorks.Still Have Questions?') }}</h3>
        <div class="text-underline mt-2"></div>
        <p class="posting text-center mt-3 mb-5">{{ __('howAmbayoWorks.Quick answers to common questions') }}</p>
        <div class="accordion d-flex flex-column gap-2 faq-accordian" id="faqAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button d-flex justify-content-between align-items-center"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                        <div class="d-flex align-items-center">
                            <span class="me-2">
                                <img src="{{ asset('images/howAmbayoWorks/faq-one.png') }}" alt="post_ad" width="24" height="24">
                            </span>
                            <span>{{ __('howAmbayoWorks.How do I post my first ad in seconds?') }}</span>
                        </div>
                        <div class="chev-down ms-2">
                            <img src="{{ asset('images/howAmbayoWorks/chevron-down.png') }}" alt="chevron-down" width="16">
                        </div>
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        <p class="mb-3">
                            <strong>{{ __('howAmbayoWorks.Posting your first ad on Ambayo is fast and easy — and it’s') }}
                                {{ __('howAmbayoWorks.100% free') }}</strong>.
                        </p>
                        <ol class="ps-3 mb-3">
                            <li class="mb-2">{{ __('howAmbayoWorks.Click') }} {{ __('howAmbayoWorks.Post Ad') }} {{ __('howAmbayoWorks.at the top of the page.') }}</li>
                            <li class="mb-2">{{ __('howAmbayoWorks.Add a title, description, and images — our smart AI helps auto-fill the right category.') }}</li>
                            <li class="mb-2">{{ __('howAmbayoWorks.Set the location and price.') }}</li>
                            <li>{{ __('howAmbayoWorks.Click') }} {{ __('howAmbayoWorks.Submit') }} {{ __('howAmbayoWorks.— your ad goes live in seconds!') }}</li>
                        </ol>
                        <p class="mb-3">
                            <strong>{{ __('howAmbayoWorks.You’ll instantly start earning crypto rewards (optional) and reaching real buyers.') }}</strong>
                        </p>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed d-flex justify-content-between align-items-center"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                        <div class="d-flex align-items-center">
                            <span class="me-2">
                                <img src="{{ asset('images/howAmbayoWorks/faq-two.png') }}" alt="free_crypto" width="24" height="24">
                            </span>
                            <span>{{ __('howAmbayoWorks.How does Ambayo reward me with free crypto?') }}</span>
                        </div>
                        <div class="chev-down ms-2">
                            <img src="{{ asset('images/howAmbayoWorks/chevron-down.png') }}" alt="chevron-down" width="16">
                        </div>
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        <p class="mb-3">
                            <strong>{{ __('howAmbayoWorks.Ambayo rewards you with free crypto for simply using the platform.')}}</strong> {{ __('howAmbayoWorks.Here’s how it works:') }}
                        </p>
                        <ul class="ps-3 mb-3 ul-class">
                            <li class="mb-2"><strong>{{ __('howAmbayoWorks.Post your first real ad') }}</strong> —
                                {{ __('howAmbayoWorks.Get') }}
                                <strong>{{ __('howAmbayoWorks.$5 in USDT') }}</strong>
                                {{ __('howAmbayoWorks.instantly.') }}
                            </li>
                            <li class="mb-2">
                                <strong>{{ __('howAmbayoWorks.Post 3 real ads') }}</strong> —
                                 {{ __('howAmbayoWorks.Earn an') }}
                                <strong>{{ __('howAmbayoWorks.extra $10') }}</strong>
                                ({{ __('howAmbayoWorks.that’s $15 total') }}).</li>
                            <li class="mb-2">
                                <strong>{{ __('howAmbayoWorks.Refer a friend') }}</strong> —
                                {{ __('howAmbayoWorks.When they post 3 ads, you get') }}
                                <strong>{{ __('howAmbayoWorks.$5 more.') }}</strong></li>
                        </ul>
                        <p class="mb-2">
                            {{ __('howAmbayoWorks.All rewards are paid in') }}
                            {{ __('howAmbayoWorks.USDT (crypto)') }}
                            {{ __('howAmbayoWorks.to your wallet') }} —
                            <strong>{{ __('howAmbayoWorks.100% free, no fees.') }}</strong>
                        </p>
                        <p class="mb-3">
                            {{ __('howAmbayoWorks.💡 You must be verified (email, phone, and wallet address) to qualify for rewards.') }}
                        </p>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed d-flex justify-content-between align-items-center"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                        <div class="d-flex align-items-center">
                            <span class="me-2">
                                <img src="{{ asset('images/howAmbayoWorks/faq-three.png') }}" alt="boost" width="24" height="24">
                            </span>
                            <span>{{ __('howAmbayoWorks.How do I boost my ad for more views?') }}</span>
                        </div>
                        <div class="chev-down ms-2">
                            <img src="{{ asset('images/howAmbayoWorks/chevron-down.png') }}" alt="chevron-down" width="16">
                        </div>
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        <p class="mb-3">
                            <strong>{{ __('howAmbayoWorks.Want more views? Ambayo offers powerful promotion tools to make your ad stand out.') }}</strong>
                        </p>
                        <p class="mb-3">
                            {{ __('howAmbayoWorks.Once your ad is approved, you can activate one of our') }}
                            <strong>{{ __('howAmbayoWorks.paid promotional services') }}</strong>
                            {{ __('howAmbayoWorks.to instantly increase visibility and attract more real buyers — locally or internationally.') }}
                        </p>
                        <p class="fw-bold mb-2">{{ __('howAmbayoWorks.Here’s how:') }}</p>
                        <ol class="ps-3 mb-3">
                            <li class="mb-3">
                                {{ __('howAmbayoWorks.Go to your ad and click') }} <strong>{{ __('howAmbayoWorks.Promote') }}</strong> {{ __('howAmbayoWorks.next to your ad.') }}
                            </li>
                            <li class="mb-3">
                                {{ __('howAmbayoWorks.Choose a promotion type:') }}
                                <ul class="ps-3 mt-2 ul-class">
                                    <li class="mb-2"><strong>{{ __('howAmbayoWorks.Local Homepage') }}</strong> {{ __('howAmbayoWorks.– Feature your ad on the homepage for users in your country. Up to') }} <em><strong>{{ __('howAmbayoWorks.25× more views.') }}</strong></em></li>
                                    <li class="mb-2"><strong>{{ __('howAmbayoWorks.International Homepage') }}</strong> {{ __('howAmbayoWorks.– Show your ad across all languages and countries. Up to ') }} <em><strong>{{ __('howAmbayoWorks.100× more views.') }}</strong></em></li>
                                    <li class="mb-2"><strong>{{ __('howAmbayoWorks.Top Local Category') }}</strong> {{ __('howAmbayoWorks.– Keep your ad at the top of your category for local users. Up to') }} <em><strong>{{ __('howAmbayoWorks.4× more views.') }}</strong></em></li>
                                    <li><strong>{{ __('howAmbayoWorks.Top International Category') }}</strong> {{ __('howAmbayoWorks.– Appear at the top in all languages. Up to') }} <em><strong>{{ __('howAmbayoWorks.16× more views.') }}</strong></em></li>
                                </ul>
                            </li>
                            <li class="mb-3">
                                {{ __('howAmbayoWorks.Pay securely with') }} <strong>{{ __('howAmbayoWorks.Ambayo Wallet') }}</strong>, <strong>{{ __('howAmbayoWorks.Stripe') }}</strong>, {{ __('howAmbayoWorks.or') }} <strong>{{ __('howAmbayoWorks.CoinGate') }}</strong>.
                            </li>
                        </ol>
                        <p class="mb-3">
                            {{ __('howAmbayoWorks.Your promoted ad will get a special badge like') }} <em><strong>“{{ __('howAmbayoWorks.Promoted') }}”</strong></em> {{ __('howAmbayoWorks.or') }} <em><strong>“{{ __('howAmbayoWorks.Top') }}”</strong></em>, {{ __('howAmbayoWorks.and it will rotate in premium spots to catch attention before users even search.') }}
                        </p>
                        <p class="fw-bold mb-2">{{ __('howAmbayoWorks.⚠️ Note:') }}</p>
                        <ul class="ps-3 mb-3 ul-class">
                            <li>{{ __('howAmbayoWorks.Promotions apply to one listing at a time.') }}</li>
                            <li>{{ __('howAmbayoWorks.Only minor edits (price & location) are allowed after promotion.') }}</li>
                            <li>{{ __('howAmbayoWorks.Ads in adult categories can’t be promoted on the homepage.') }}</li>
                        </ul>
                        <p class="mb-3">{{ __('howAmbayoWorks.Promoting your ad can also') }} <strong>{{ __('howAmbayoWorks.extend its visibility') }}</strong>
                        {{ __('howAmbayoWorks.if your original listing was close to expiring.') }}</p>
                        <p class="mb-3">
                            <strong>{{ __('howAmbayoWorks.Boost your ad now and get seen by the right buyers — faster.') }}</strong>
                        </p>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFour">
                    <button class="accordion-button collapsed d-flex justify-content-between align-items-center"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour">
                        <div class="d-flex align-items-center">
                            <span class="me-2">
                                <img src="{{ asset('images/howAmbayoWorks/faq-four.png') }}" alt="free_crypto" width="24" height="24">
                            </span>
                            <span>{{ __('howAmbayoWorks.Is it really free to post and earn on Ambayo?') }}</span>
                        </div>
                        <div class="chev-down ms-2">
                            <img src="{{ asset('images/howAmbayoWorks/chevron-down.png') }}" alt="chevron-down" width="16">
                        </div>
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        <p><strong>{{ __('howAmbayoWorks.Yes — using Ambayo is completely free for regular users, and you keep 100% of your earnings.') }}</strong></p>
                        <ul class="mb-3 ul-class">
                            <li><strong>{{ __('howAmbayoWorks.Post ads for free') }}</strong> {{ __('howAmbayoWorks.— whether you\'re offering a product or a service.') }}</li>
                            <li><strong>{{ __('howAmbayoWorks.Keep all your profits') }}</strong> {{ __('howAmbayoWorks.— Ambayo doesn’t charge commission.') }}</li>
                            <li><strong>{{ __('howAmbayoWorks.Earn crypto rewards') }}</strong> {{ __('howAmbayoWorks.— just by posting and referring others, no fees required.') }}</li>
                        </ul>
                        <p><strong>{{ __('howAmbayoWorks.You’ll only pay if you choose:') }}</strong></p>
                        <ul class="mb-3 ul-class">
                            <li><strong>{{ __('howAmbayoWorks.To promote your ad') }}</strong> {{ __('howAmbayoWorks.for more visibility (optional)') }}</li>
                            <li><strong>{{ __('howAmbayoWorks.To become a Verified Seller') }}</strong> {{ __('howAmbayoWorks.(optional, for added trust and buyer confidence)') }}</li>
                        </ul>
                        <p>{{ __('howAmbayoWorks.So yes') }} — <strong>{{ __('howAmbayoWorks.you can use Ambayo 100% free.') }}</strong> {{ __('howAmbayoWorks.Only power users and sellers looking for extra reach or trust features may choose paid options.') }}</p>
                    </div>
                </div>
            </div>

            <div class="accordion-item">
                <h2 class="accordion-header" id="headingFive">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive">
                        <div>
                            <span class="me-2"><img src="{{ asset('images/howAmbayoWorks/faq-five.png') }}" alt="free_crypto"></span>{{ __('howAmbayoWorks.What can I list on Ambayo — products, services, or both?') }}
                        </div>
                        <div class="chev-down"><img src="{{ asset('images/howAmbayoWorks/chevron-down.png') }}" alt="chevron-down"></div>
                    </button>
                </h2>
                <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                    <div class="accordion-body">
                        <p><strong>{{ __('howAmbayoWorks.You can list both!') }} {{ __('howAmbayoWorks.Ambayo is a global marketplace for anything you offer.') }}</strong></p>
                        <ul class="mb-3 ul-class">
                            <li><strong>{{ __('howAmbayoWorks.Products') }}</strong> — {{ __('howAmbayoWorks.Sell physical items like electronics, fashion, furniture, collectibles, and more.') }}</li>
                            <li><strong>{{ __('howAmbayoWorks.Services') }}</strong> — {{ __('howAmbayoWorks.Offer local or online services like tutoring, design, delivery, repairs, freelancing, and more.') }}</li>
                        </ul>
                        <p>{{ __('howAmbayoWorks.You’ll find dozens of categories to choose from — whether you\'re shipping a product, meeting locally, or providing digital services.') }}</p>
                        <p>💡 {{ __('howAmbayoWorks.Tip:') }} {{ __('howAmbayoWorks.Use clear photos and honest descriptions to attract more buyers. Ambayo auto-suggests categories to make posting faster.') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-4 d-flex align-items-center justify-content-center">
            <a aria-disabled="true" href="#" class="disabled-button orange-btn me-2 d-flex align-items-center gap-2 justify-content-center">
                <div>{{ __('howAmbayoWorks.View all FAQs') }}</div>
                <div><img src="{{ asset('images/howAmbayoWorks/arrows.png') }}" alt="chevron-right" /></div>
            </a>
        </div>
    </div>
</section>

<section class="final-cta padding font-urbanist text-center">
    <div class="container">
        <h3 class="fw-bold">{{ __('howAmbayoWorks.Ready to Post, Sell, and Earn?') }}</h3>
        <p>{{ __('howAmbayoWorks.Join thousands of users posting ads every day and earning crypto rewards for free.') }}</p>
        <div class="mt-4 d-flex align-items-center gap-3 justify-content-center position-relative btn-bottom">
            <div>
                <a href="{{ route('advertisment.create.get') }}" class="orange-btn me-2 d-flex align-items-center gap-2 justify-content-center">
                    <div>{{ __('howAmbayoWorks.Post Your First Ad - It’s free') }}</div>
                    <div><img src="{{ asset('images/howAmbayoWorks/arrows.png') }}" alt="chevron-right" /></div>
                </a>
            </div>
            <div>
                <a href="{{ route('category.list', ['id' => encrypt($categories[0]->id)]) }}" class="btn-white-outline d-flex align-items-center gap-2 justify-content-center">
                    <div>{{ __('howAmbayoWorks.Explore Listings') }}</div>
                    <div>
                        <div>
                            <img src="{{ asset('images/howAmbayoWorks/arrows.png') }}" alt="chevron-orange" class="orange-chevron" />
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

@endsection
@push('page_script')
    <script>
        var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1, // default for mobile
            spaceBetween: 20,
            pagination: {
            el: ".swiper-pagination",
            clickable: true,
            },
            breakpoints: {
            640: {
                // screens >= 640px
                slidesPerView: 2,
                spaceBetween: 20,
            },
            1024: {
                // screens >= 1024px
                slidesPerView: 3,
                spaceBetween: 30,
            },
            },
        });

        // Ensure Bootstrap dropdown is properly initialized
        document.addEventListener('DOMContentLoaded', function() {
            // Check if Bootstrap is loaded
            if (typeof bootstrap !== 'undefined') {
                console.log('Bootstrap is loaded successfully');

                // Initialize dropdowns manually if needed
                var dropdownElementList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
                var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
                    return new bootstrap.Dropdown(dropdownToggleEl);
                });
            } else {
                console.error('Bootstrap is not loaded');
            }
        });

        function scrollToVideo() {
            const videoBanner = document.getElementById("how-it-works-video");
            if (videoBanner) {
                videoBanner.scrollIntoView({ behavior: "smooth" });
            }
        }

    </script>
@endpush