@extends('layouts.auth')


@section('title')
    About Us | {{ 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

<style>
    .hero-section {
        background: url('https://via.placeholder.com/1920x600') center/cover no-repeat;
        min-height: 400px;
        color: white;
        padding: 80px 0;
    }
    .disabled-button{
        pointer-events: none;
        opacity: 0.6;
    }
    
    .sub-text{
        text-align: end !important;
    }

    .crypto-world {
        background: url('https://via.placeholder.com/1920x500') center/cover no-repeat;
        min-height: 300px;
    }


    .font-urbanist {
        font-family: "Urbanist", sans-serif;
    }


    .hero {
        position: relative;
        height: 800px;
        overflow: hidden;
        z-index: 0;

    }

    .hero video {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .overlay-black,
    .overlay-accent {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }


    .overlay-black {
        background: rgba(0, 0, 0, 0.3);
        z-index: 1;
    }


    .overlay-accent {
        background: rgba(230, 60, 47, 0.2);
        z-index: 2;
    }


    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        color: #fff;
    }
    .shadow-card{
        height:250px !important;
    }

    .howitallbegan .card{
        height:370px !important;
    }

    .howambayoworks .card{
        height:270px !important;
    }

    .prob-sol-boxes .card{
        height:330px !important;
    }

    /* 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;
    }

    .btn-orange {
        background-color: #E63C2F;
        color: #fff;
        border: none;
        padding: 10px 33px;
        border-radius: 50px;
        font-size: 18px;
        font-weight: 600;

    }

    .btn-orange:hover,
    .btn-orange:active {
        background-color: #c7362a !important;
        color: #fff;
    }


    .lead {
        font-size: 24px;
        line-height: 32px;
        font-weight: 600;
        margin: 20px 0px;
    }

    h1.heading {
        font-size: 60px;
    }

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

    }

    .subheading {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 20px;
        line-height: normal;
        font-weight: 600;
        color: #613d3c;
        ;
    }

    .heading-two {
        font-weight: 600;
        color: #613d3c;
        ;
        font-size: 40px;

    }

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

    .whyexist {
        margin-bottom: 50px;
    }

    .boxes {
        gap: 23px;
    }

    .sub-text{
        text-align: end !important;
    }

    .shadow-card{
        height:250px !important;
    }

    .howitallbegan .card{
        height:370px !important;
    }

    .howambayoworks .card{
        height:270px !important;
    }

    .prob-sol-boxes .card{
        height:330px !important;
    }

    .shadow-card {
        width: 251px;
        height: 200px;
        border: none;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        background-color: #fff;
    }

    .title-whywe {
        margin-top: 8px;
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #613d3c;
        ;

    }

    .whyweexist-block .shadow-card p {
        color: #9b9b9b;
        font-size: 14px;
        line-height: 20px;
        font-weight: 300;
    }

    .howitallbegan .card {
        box-shadow:
            0px 10px 15px -3px rgba(0, 0, 0, 0.10),
            0px 4px 6px -4px rgba(0, 0, 0, 0.10);
        border: none;
        overflow: hidden;
        border-radius: 14px;
        height: 330px;
    }

    .howitallbegan .card-title {
        color: #613d3c;
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
    }

    .howitallbegan .card-text {
        color: #9b9b9b;
        font-size: 16px;
        line-height: 26px;
        font-weight: 400;
    }

    .prob-sol-boxes {
        margin-top: 50px !important;
    }

    .prob-sol-boxes .card {
        height: 270px;
    }

    .prob-sol-boxes .card h6 {
        font-size: 18px;
        line-height: normal;
        font-weight: 500;
        color: #613d3c;

    }

    .prob-sol-boxes .card p {
        font-size: 14px;
        line-height: normal;
        font-weight: 400;
        color: #9b9b9b;

    }

    .believe-block {
        max-width: 845px;
        margin: 0 auto;
    }

    .whatwebelieve .card {
        background-color: #F8F9FA;
        border: 1px solid #EDF1F5;
    }

    .whatwebelieve h5 {
        font-size: 24px;
        line-height: 32px;
        font-weight: 600;
        color: #613d3c;

    }

    .whatwebelieve p {
        font-size: 18px;
        line-height: normal;
        font-weight: 400;
        color: #212529;
    }

    .crypto-world {
        padding-top: 50px;
    }

    .crypto-banner {
        margin-top: 50px;
        background-image: url("{{ asset('images/cryptoworld.png') }}");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 150px 70px;
        margin: 70px auto;
        border-radius: 20px;
    }

    .overlay-texts p {
        font-size: 36px;
        line-height: 40px;
        font-weight: 400;
        color: #fff;
    }

    .howambayoworks .card {
        height: 230px !important;
    }

    .howambayoworks .prob-sol-boxes .card h6 {
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        color: #613d3c;

    }

    .howambayoworks p {
        font-size: 16px !important;

    }

    .ready-to-trade {
        /* background-image: url("{{ asset('images/readytotradebanner.png') }}"); */
        background-repeat: no-repeat;
        background-size: cover;
        padding: 120px 0px;
        background-position: center;
    }

    .ready-to-trade h1,
    .ready-to-trade p {
        color: #fff;
    }

    .right-abstract {
        right: 0;
        top: 0;
    }

    .left-abstract {
        left: 0;
        bottom: 0;
    }

    .whatusersay {
        font-size: 26px;
        line-height: 32px;
        font-weight: 700;
        color: #613d3c;
        margin-bottom: 10px;
    }

    .realpeople-text {
        font-size: 18px;
        line-height: normal;
        font-weight: 500;
        color: #9b9b9b;
        margin-bottom: 40px;
    }

    .info {
        margin-top: 40px;
    }

    .swiper-wrapper .user-box {
        box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25);
        padding: 20px;
        border: none;
        background-color: #fff;
        border-radius: 10px;
        height: 250px;
    }

    .usersratingblock {
        padding: 20px !important;
        height: 340px;
    }

    .usersratingblock .swiper-pagination {
        bottom: 0px !important;
    }

    .usersratingblock .swiper-wrapper {
        margin-bottom: 30px;
    }

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

    .usersratingblock p {
        color: #9b9b9b !important;
        font-style: italic;
        font-weight: 500;
        margin: 20px 0px;
    }

    .user-avatar img {
        width: 37px;
        height: 37px;
        border-radius: 100%;
    }

    .user-details {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: #613d3c;
    }

    .user-details span {
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        color: #9b9b9b;
    }

    .social-proof {
        color: #613d3c;
    }

    /* divider css */
    .icon-box {
        background-color: rgba(230, 60, 47, 0.1) !important;
        color: #E63C2F !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important;
    }

    .divider {
        width: 2px !important;
        background: repeating-linear-gradient(to bottom,
                #ccc,
                #ccc 4px,
                transparent 4px,
                transparent 8px) !important;
        height: 100% !important;
    }

    .left-list {
        margin-bottom: 128px;
    }

    .smart-crypto {
        margin-top: 64px;
    }

    .community-reviews,
    .privacy-respecting {
        margin-top: 128px;
    }

    .divider-listing {
        margin: 70px 0px;
    }

    .prob-sol-boxes-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .prob-sol-box {
        flex: 1 1 100%;
    }

    .sub-text,
    .listing-heading {
        color: #613d3c;
    }

    .ready-to-trade .lead {
        font-weight: 400;
    }



    @media (min-width: 1199.98px) {
        .prob-sol-boxes .card {
            height: 280px;
        }
    }


    @media (min-width: 992px) {
        .prob-sol-box {
            flex: 1 1 calc(33.333% - 1.5rem);
            /* 3 per row on desktops */
        }
    }
    @media (max-width:768px){

        .howitallbegan .card{
            height: auto !important;
        }
    }
    @media (max-width:767.98px) {
        .heading {
            font-size: 40px !important;
            line-height: 42px !important;
        }

        .lead {
            font-size: 18px;
            line-height: 24px;
        }

        .boxes {
            flex-direction: column;
            gap: 0;
        }

        .howitallbegan .card {
            height: auto;
        }

        .heading-two {
            font-size: 30px;
        }

        .prob-sol-boxes .card {
            height: auto;
        }

        .whatwebelieve .card {
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 5px;
        }

        .whatwebelieve h5 {
            font-size: 20px;
            margin-bottom: 0;
        }

        .howambayoworks .card {
            height: 270px !important;
        }
    }

    @media (min-width: 576px) {
        .prob-sol-box {
            flex: 1 1 calc(50% - 1.5rem);
            /* 2 per row on tablets */
        }
    }

    @media (max-width:576px) {

        .crypto-banner {
            padding: 40px;
        }

        .overlay-texts p {
            font-size: 24px;
            line-height: 28px;
        }

        .crypto-world .btn-orange {
            font-size: 12px;
        }

        .ready-to-trade .btn-orange {
            font-size: 16px;
        }

        .howambayoworks .card {
            height: 230px !important;
        }

        .safe-transparent-section .left-list {
            margin-bottom: 20px;
            justify-content: flex-start !important;
        }

        .smart-crypto {
            margin-top: 0px;
        }

        .community-reviews,
        .privacy-respecting {
            margin-top: 20px;
        }
    }

    @media (max-width:440px) {
        .info {
            flex-direction: column;
        }

        .info {
            margin-top: 20px;
        }
    }
</style>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

@section('content')
<section class="hero position-relative font-urbanist">
    <video autoplay muted loop playsinline class="w-100">
        <source src="{{asset('images/banner-video.mp4')}}" type="video/mp4">
        {{ __('aboutUs.Your browser does not support the video tag.') }}
    </video>
    <div class="overlay-black"></div>
    <div class="overlay-accent"></div>
    <div class="hero-overlay d-flex flex-column justify-content-center align-items-center text-center px-3">
        <h1 class="fw-bold heading">
            {{ __('aboutUs.Freedom to Trade. Power to Connect.') }}<br>{{ __('aboutUs.Built for the World.') }}
        </h1>
        <p class="lead">
            {{ __('aboutUs.Ambayo is the global, crypto-friendly marketplace where everyone') }}<br>{{ __('aboutUs.can post, earn, and connect — for free, forever.') }}
        </p>
        <a href="{{ route('advertisment.create.get') }}" class="btn-orange d-flex align-items-center gap-2">
            <div>{{ __('aboutUs.Get Started - It\'s free') }}</div> <img src="{{ asset('images/chevron-right.svg') }}"
                alt="chevron-right">
        </a>
    </div>
</section>

<!-- Why We Exist -->
<section class="py-5 font-urbanist whyweexist-block bg-light">
    <div class="container">
        <h2 class="text-center heading-two">{{ __('aboutUs.Why We Exist') }}</h2>
        <div class="text-underline"></div>
        <p class="text-center subheading">
            {{ __('aboutUs.Ambayo exists to give every person on the planet the power to trade, connect, and earn freely — no matter') }}<br>{{ __('aboutUs.where they are or what language they speak.') }}
        </p>
        <p class="text-center body-text">
            {{ __('aboutUs.We remove the middlemen, break down language and currency barriers, and bring people together in a borderless, trusted way.') }}
        </p>
        <div class="text-center whyexist">
            <img src="{{ asset('images/whyeeexistbanner.png') }}" alt="why-we-exist-banner" class="img-fluid">
        </div>
        <div class="boxes g-4 text-center d-flex align-items-center justify-content-center">
            <div class="card shadow-card p-4 mb-4">
                <div class="icons-whyweexist">
                    <img src="{{ asset('images/globalreach.svg') }}" alt="globalreach">
                </div>
                <h5 class="title-whywe">{{ __('aboutUs.Global Reach') }}</h5>
                <p>{{ __('aboutUs.Connect with people across every continent and time zone') }}</p>
            </div>
            <div class="card shadow-card p-4 mb-4">
                <div class="icons-whyweexist">
                    <img src="{{ asset('images/translatedcommunication.svg') }}" alt="translatedcommunication">
                </div>
                <h5 class="title-whywe">{{ __('aboutUs.Translated Communication') }}</h5>
                <p>{{ __('aboutUs.Break language barriers with automatic chat translations in real time') }}</p>
            </div>
            <div class="card shadow-card p-4 mb-4">
                <div class="icons-whyweexist">
                    <img src="{{ asset('images/freeforever.svg') }}" alt="freeforver">
                </div>
                <h5 class="title-whywe">{{ __('aboutUs.Free Forever') }}</h5>
                <p>{{ __('aboutUs.No hidden fees, no subscriptions - always completely free') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- How It All Began -->
<section class="py-5 font-urbanist howitallbegan">
    <div class="container">
        <h2 class="text-center heading-two">{{ __('aboutUs.How It All Began') }}</h2>
        <div class="text-underline"></div>
        <p class="text-center body-text mt-3">
            {{ __('aboutUs.We started Ambayo because we believe everyone deserves') }}<br>{{ __('aboutUs.global opportunity — no matter where they live.') }}
        </p>
        <div class="row g-4 text-center">
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card">
                    <img src="{{ asset('images/idea.png') }}" class="card-img-top rounded-0 img-fluid" alt="idea">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('aboutUs.The Idea') }}</h5>
                        <p class="card-text">
                            {{ __('aboutUs.We saw a problem — people couldn\'t freely connect, trade, or post ads globally.') }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card">
                    <img src="{{ asset('images/insight.png') }}" class="card-img-top rounded-0" alt="insight">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('aboutUs.The Insight') }}</h5>
                        <p class="card-text">
                            {{ __('aboutUs.No global platform combined crypto, direct chat, translations, and free listings.') }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card">
                    <img src="{{ asset('images/build.png') }}" class="card-img-top rounded-0" alt="build">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('aboutUs.The Build') }}</h5>
                        <p class="card-text">
                            {{ __('aboutUs.We built Ambayo — a truly open, crypto-powered global marketplace.') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card">
                    <img src="{{ asset('images/vision.png') }}" class="card-img-top rounded-0" alt="build">
                    <div class="card-body">
                        <h5 class="card-title">{{ __('aboutUs.The Vision') }}</h5>
                        <p class="card-text">
                            {{ __('aboutUs.To become the #1 platform for financially independent, free-minded global citizens.') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Real Problems and Solutions -->
<section class="py-5 font-urbanist problems-solutions bg-light">
    <div class="container">
        <h2 class="text-center heading-two">
            {{ __('aboutUs.The Real Problems People Face') }}<br>{{ __('aboutUs.and How Ambayo Solves Them') }}</h2>
        <div class="text-underline"></div>
        <div class="prob-sol-boxes-wrapper"></div>
        <div class="row g-4 prob-sol-boxes">
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/globe.png') }}" alt="globe">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.You can’t post ads across countries freely.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo lets you post globally or locally — your choice.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/moneywings.png') }}" alt="money">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.Most platforms charge listing or promotion fees.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo is 100% free — always, with no hidden costs.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/unlocked.png') }}" alt="unlock">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.Communication breaks down due to language barriers.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo auto-translates messages in real time.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/wallet.png') }}" alt="wallet">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.Traditional sites control your data and transactions.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo empowers you to trade directly — no middlemen.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/watch.png') }}" alt="time">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.Posting takes time or needs approval.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo ads go live instantly — no waiting.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/block.png') }}" alt="block">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.Some platforms ban crypto payments.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo is crypto-friendly. Accept or pay with crypto freely.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/handshake.png') }}" alt="trust">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.It’s hard to trust sellers you don’t know.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo highlights verified sellers and ratings.') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/rocket.png') }}" alt="rocket">
                    </div>
                    <h6>{{ __('aboutUs.Problem') }}</h6>
                    <p>{{ __('aboutUs.Your listings stay invisible without promotion.') }}</p>
                    <h6>{{ __('aboutUs.Ambayo Solution') }}</h6>
                    <p>{{ __('aboutUs.Ambayo gives every ad global exposure — instantly.') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- What We Believe In -->
<section class="py-5 font-urbanist whatwebelieve">
    <div class="container">
        <h2 class="text-center heading-two">{{ __('aboutUs.What We Believe In') }}</h2>
        <div class="text-underline"></div>
        <div class="believe-block mt-5 d-flex flex-column gap-4">
            <div class="card d-flex justify-content-between flex-row align-items-center p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="left-icon">
                        <img src="{{ asset('images/accessible.png') }}" alt="accessible">
                    </div>
                    <h5>{{ __('aboutUs.Accessible') }}</h5>
                </div>
                <div class="sub-text">{{ __('aboutUs.Everyone should be able to access crypto and global trade.') }}
                </div>
            </div>
            <div class="card d-flex justify-content-between flex-row align-items-center p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="left-icon">
                        <img src="{{ asset('images/alternative.png') }}" alt="alternative">
                    </div>
                    <h5>{{ __('aboutUs.Alternative') }}</h5>
                </div>
                <div class="sub-text">
                    {{ __('aboutUs.We offer a true alternative to limited, traditional platforms.') }}</div>
            </div>
            <div class="card d-flex justify-content-between flex-row align-items-center p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="left-icon">
                        <img src="{{ asset('images/independent.png') }}" alt="Independent">
                    </div>
                    <h5>{{ __('aboutUs.Independent') }}</h5>
                </div>
                <div class="sub-text">{{ __('aboutUs.Empowering financial freedom and borderless opportunity.') }}
                </div>
            </div>
            <div class="card d-flex justify-content-between flex-row align-items-center p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="left-icon">
                        <img src="{{ asset('images/innovative.png') }}" alt="Innovative">
                    </div>
                    <h5>{{ __('aboutUs.Innovative') }}</h5>
                </div>
                <div class="sub-text">{{ __('aboutUs.Always improving, always evolving.') }}</div>
            </div>
            <div class="card d-flex justify-content-between flex-row align-items-center p-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="left-icon">
                        <img src="{{ asset('images/sociable.png') }}" alt="Sociable">
                    </div>
                    <h5>{{ __('aboutUs.Sociable') }}</h5>
                </div>
                <div class="sub-text">{{ __('aboutUs.Ambayo connects people and ideas from everywhere.') }}</div>
            </div>
        </div>
    </div>
</section>

<!-- Our Dream -->
<section
    class="crypto-world d-flex flex-column justify-content-center align-items-center text-center bg-light font-urbanist">
    <h2 class="text-center heading-two">{{ __('aboutUs.Our Dream: A Borderless Crypto World') }}</h2>
    <div class="text-underline"></div>
    <div class="container">
        <div class="crypto-banner" style="background-image: url('{{ asset('images/cryptoworld.png') }}');">
            <div class="overlay-texts">
                <p class="text-white mb-4">
                    {{ __('aboutUs.We\'re building a global crypto-powered community') }}<br>{{ __('aboutUs.where people live, trade, and connect freely —') }}<br>{{ __('aboutUs.beyond limitations.') }}
                </p>
                <div class="d-flex gap-2 align-items-center justify-content-center">
                    <button class="btn-orange disabled-button">{{ __('aboutUs.Join the Crypto Future') }} <img
                            src="{{ asset('images/chevron-right.svg') }}" alt="chevron-right"></button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How Ambayo Works -->
<section class="py-5 font-urbanist howambayoworks">
    <div class="container">
        <h2 class="text-center heading-two">{{ __('aboutUs.How Ambayo Works') }}</h2>
        <div class="text-underline"></div>
        <div class="row g-4 prob-sol-boxes">
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/contact.png') }}" alt="contact">
                    </div>
                    <h6>{{ __('aboutUs.Create a free account') }}</h6>
                    <p>{{ __('aboutUs.Sign up in seconds with email or social login') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/add-another.png') }}" alt="add">
                    </div>
                    <h6>{{ __('aboutUs.Post your ad in seconds') }}</h6>
                    <p>{{ __('aboutUs.Upload photos, add details, and go live instantly') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/globe_svg.png') }}" alt="globee">
                    </div>
                    <h6>{{ __('aboutUs.Choose local or global reach') }}</h6>
                    <p>{{ __('aboutUs.Target your neighborhood or reach worldwide customers') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/chat.png') }}" alt="chat">
                    </div>
                    <h6>{{ __('aboutUs.Chat instantly — in your own language') }}</h6>
                    <p>{{ __('aboutUs.Built-in translation breaks down language barriers') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/cards.png') }}" alt="card">
                    </div>
                    <h6>{{ __('aboutUs.Accept payments — crypto or fiat') }}</h6>
                    <p>{{ __('aboutUs.Secure transactions with multiple payment options') }}</p>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="card p-4">
                    <div class="icons-prblm mb-4">
                        <img src="{{ asset('images/gift.png') }}" alt="gift">
                    </div>
                    <h6>{{ __('aboutUs.Earn rewards for activity') }}</h6>
                    <p>{{ __('aboutUs.Get crypto rewards for posts, referrals, and engagement') }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="py-5 bg-light font-urbanist position-relative safe-transparent-section">
    <div class="right-abstract position-absolute">
        <img src="{{ asset('images/right-abstract.png') }}" alt="" class="img-fluid">
    </div>
    <div class="left-abstract position-absolute">
        <img src="{{ asset('images/left-abstract.png') }}" alt="" class="img-fluid">
    </div>
    <div class="container">
        <h2 class="text-center heading-two">{{ __('aboutUs.Safe. Transparent. Limitless.') }}</h2>
        <div class="text-underline"></div>
        <p class="text-center body-text mt-3">
            {{ __('aboutUs.Ambayo is built on trust, fairness, and freedom — for everyone.') }}</p>
        <div class="row justify-content-center divider-listing ">
            <div class="col-12 col-sm-5">
                <div class="d-flex left-list align-items-center justify-content-end">
                    <div class="icon-box me-3">
                        <i class="fas fa-check"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold listing-heading">{{ __('aboutUs.No listing or selling fees') }}
                        </h6>
                    </div>
                </div>
                <div class="d-flex left-list align-items-center justify-content-end">
                    <div class="icon-box me-3">
                        <i class="fas fa-infinity"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold listing-heading">{{ __('aboutUs.Unlimited ads') }}</h6>
                    </div>
                </div>
                <div class="d-flex left-list align-items-center justify-content-end">
                    <div class="icon-box me-3">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold listing-heading">{{ __('aboutUs.Verified seller system') }}</h6>
                    </div>
                </div>
            </div>
            <div class="col-sm-1 d-none d-sm-flex justify-content-center">
                <div class="divider"></div>
            </div>
            <div class="col-12 col-sm-5">
                <div class="d-flex smart-crypto align-items-center justify-content-start">
                    <div class="icon-box me-3">
                        <i class="fas fa-coins"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold listing-heading">{{ __('aboutUs.Smart crypto options') }}</h6>
                    </div>
                </div>
                <div class="d-flex community-reviews align-items-center justify-content-start">
                    <div class="icon-box me-3">
                        <i class="fas fa-users"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold listing-heading">{{ __('aboutUs.Community reviews') }}</h6>
                    </div>
                </div>
                <div class="d-flex privacy-respecting align-items-center justify-content-start">
                    <div class="icon-box me-3">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-semibold listing-heading">{{ __('aboutUs.Privacy-respecting') }}</h6>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="text-center whatusersay">{{ __('aboutUs.What Our Users Say') }}</h2>
        <p class="realpeople-text text-center">{{ __('aboutUs.Real people. Real freedom. Real results.') }}</p>
        <!-- Swiper -->
        <div class="swiper mySwiper usersratingblock">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="user-box">
                        <div>
                            <img src="{{ asset('images/quote.png') }}" alt="">
                        </div>
                        <p>{{ __('aboutUs.I sold my old laptop to someone in Argentina. No fees!') }}</p>
                        <div class="d-flex justify-content-between align-items-center testimonial-block">
                            <div class="userinf d-flex align-items-center gap-3">
                                <div class="user-avatar">
                                    <img src="{{ asset('images/user-one.png') }}" alt="">
                                </div>
                                <div class="user-details">
                                    Alex R.
                                    <span class="d-block">Toronto, Canada</span>
                                </div>
                            </div>
                            <div class="rating-stars d-flex align-items-center">
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="user-box">
                        <div>
                            <img src="{{ asset('images/quote.png') }}" alt="">
                        </div>
                        <p>{{ __('aboutUs.The chat auto-translation is magic. We closed a deal in minutes.') }}</p>
                        <div class="d-flex justify-content-between align-items-center testimonial-block">
                            <div class="userinf d-flex align-items-center gap-3">
                                <div class="user-avatar">
                                    <img src="{{ asset('images/user-two.png') }}" alt="">
                                </div>
                                <div class="user-details">
                                    Fatima H.
                                    <span class="d-block">Dubai, UAE</span>
                                </div>
                            </div>
                            <div class="rating-stars d-flex align-items-center">
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="user-box">
                        <div>
                            <img src="{{ asset('images/quote.png') }}" alt="">
                        </div>
                        <p>{{ __('aboutUs.Finally, a crypto-powered platform that feels fair.') }}</p>
                        <div class="d-flex justify-content-between align-items-center testimonial-block">
                            <div class="userinf d-flex align-items-center gap-3">
                                <div class="user-avatar">
                                    <img src="{{ asset('images/user-three.png') }}" alt="">
                                </div>
                                <div class="user-details">
                                    Kenji M.
                                    <span class="d-block">Tokyo, Japan</span>
                                </div>
                            </div>
                            <div class="rating-stars d-flex align-items-center">
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                                <div class="stars">
                                    <img src="{{ asset('images/rating-star.png') }}" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Repeated slides omitted for brevity, update similarly -->
            </div>
            <!-- Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="info d-flex align-items-center justify-content-center gap-4">
            <div class="secure d-flex gap-2 align-items-center">
                <div class="left-icn">
                    <img src="{{ asset('images/lock.png') }}" alt="lock">
                </div>
                <div class="social-proof">{{ __('aboutUs.Secure') }}</div>
            </div>
            <div class="secure d-flex gap-2 align-items-center">
                <div class="left-icn">
                    <img src="{{ asset('images/secure.png') }}" alt="secure">
                </div>
                <div class="social-proof">{{ __('aboutUs.Encrypted Chat') }}</div>
            </div>
            <div class="secure d-flex gap-2 align-items-center">
                <div class="left-icn">
                    <img src="{{ asset('images/dollar.png') }}" alt="dollar">
                </div>
                <div class="social-proof">{{ __('aboutUs.No hidden fees') }}</div>
            </div>
        </div>
    </div>
</section>

<!-- Ready-to-trade -->
<section class="ready-to-trade" style="background-image: url('{{ asset('images/readytotradebanner.png') }}');">
    <div class="container text-center">
        <h1 class="fw-bold heading">
            {{ __('aboutUs.Freedom to Trade. Power to Connect.') }}<br>{{ __('aboutUs.Built for the World.') }}
        </h1>
        <p class="lead">
            {{ __('aboutUs.Ambayo is the global, crypto-friendly marketplace where everyone') }}<br>{{ __('aboutUs.can post, earn, and connect — for free, forever.') }}
        </p>
        <div class="d-flex align-items-center justify-content-center">
            <button class="btn-orange"
                onclick="window.location.href='{{ route('login') }}'">{{ __('aboutUs.Create Your Free Account') }}
                <img src="{{ asset('images/chevron-right.svg') }}" alt="chevron-right" class="ms-2"></button>
        </div>
    </div>
</section>

@endsection
@push('page_script')
    <script>

  new Swiper('.mySwiper', {
    loop: true,
    slidesPerView: 1,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    // Optional: Enable autoplay
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    // Optional: responsive breakpoints
    breakpoints: {
      768: {
        slidesPerView: 2,
      },
      1024: {
        slidesPerView: 3,
      },
    },
  });

  // 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');
    }
  });

    </script>
@endpush