@php
    use App\Models\DepositCoin;
    use App\Models\Bot;
    use Faker\Factory as Faker;

    $page_title = 'Home';
    $faker = Faker::create();
    //    $logos = DepositCoin::inRandomOrder()->take(20)->get('logo_url');

    $bots = Bot::get();

    $actions = [
        'deposited',
        'withdrew',
        'withdrew',
        'deposited',
        'withdrew',
        'deposited',
        'withdrew',
        'withdrew',
        'withdrew',
        'withdrew',
        'withdrew',
        'withdrew',
    ];

    $whys = [
        'Cutting-Edge Precision',
        'Trendsetter Advantage',
        'Adaptive Excellence',
        'Seamless Profits',
        'Data-Driven Triumph',
        'Strategic Partner',
        'Constant Success',
        'Market Pioneer',
        'Automated Mastery',
    ];
    $reviews = [
        [
            'image' => 'review-image-1.jpg',
            'name' => 'Adrian',
            'country' => 'UK',
            'testimony' =>
                site('name') .
                "'s precision trading is a game-changer, consistently delivering impressive profits. I trust it for my financial success.",
            'date' => '5/03/2023',
        ],
        [
            'image' => 'review-image-2.jpg',
            'name' => 'Madison',
            'country' => 'USA',
            'testimony' =>
                'Effortless trading with ' .
                site('name') .
                '. Its adaptability and data-driven approach make it a standout choice. Highly recommended!',
            'date' => '7/02/2024',
        ],
        [
            'image' => 'review-image-3.jpg',
            'name' => 'Schneider',
            'country' => 'Germany',
            'testimony' =>
                'Seamless trades, constant profits - ' .
                site('name') .
                " simplifies trading. It's a must-have for anyone in the market.",
            'date' => '5/04/2024',
        ],
        [
            'image' => 'review-image-4.jpg',
            'name' => 'Tommy',
            'country' => 'South Africa',
            'testimony' =>
                site('name') .
                "'s innovative strategies and consistent returns have transformed my trading experience. It's a valuable asset to any trader.",
            'date' => '2/05/2024',
        ],
        [
            'image' => 'review-image-5.jpg',
            'name' => 'Jannet',
            'country' => 'USA',
            'testimony' =>
                'I rely on ' .
                site('name') .
                " for its adaptability in fluctuating markets. It's a proven partner in achieving financial goals.",
            'date' => '13/06/2024',
        ],
        [
            'image' => 'review-image-6.jpg',
            'name' => 'Thomas',
            'country' => 'England',
            'testimony' =>
                site('name') .
                "'s automated precision is remarkable. It's a powerful tool for navigating today's complex trading landscape.",
            'date' => '27/08/2024',
        ],
        [
            'image' => 'review-image-7.jpg',
            'name' => 'Atlan',
            'country' => 'Germany',
            'testimony' =>
                'Maximized profits with ' .
                site('name') .
                '. Its results speak volumes. A reliable and intelligent trading companion.',
            'date' => '1/10/2024',
        ],
        [
            'image' => 'review-image-8.jpg',
            'name' => 'Kelvin',
            'country' => 'UK',
            'testimony' =>
                'Trading with ' .
                site('name') .
                ' is effortless and rewarding. It adapts to market changes seamlessly. Truly impressive!',
            'date' => '15/10/2024',
        ],
        [
            'image' => 'review-image-9.jpg',
            'name' => 'Jude',
            'country' => 'Canada',
            'testimony' =>
                site('name') .
                ' has changed my trading game. Its data-driven approach delivers consistent gains. An invaluable tool for success.',
            'date' => '7/11/2024',
        ],
        [
            'image' => 'review-image-10.jpg',
            'name' => 'Jude',
            'country' => 'Australia',
            'testimony' =>
                'Effortless trading made possible by ' .
                site('name') .
                ' .  Its strategic prowess sets it apart. A game-changer for traders.',
            'date' => '23/1/2025',
        ],
    ];

    $short_description = site('seo_description');
    $counter = 0;

@endphp

@extends('templates.' . site('template') . '.layouts.front')

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
@endsection


@section('header')
    {{-- hero secrion --}}
    <section class="bg-black pt-8 md:pt-20 px-6">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1
                class="text-3xl md:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#a3dc2f] via-[#ffffff] to-[#b96a9c] p-1 md:p-4 leading-normal lg:leading-relaxed">
                Easy Trading, Steady Profits -
                <span class="md:block">Enabled by AI Brilliance</span>
            </h1>
            <p
                class="text-sm md:text-base text-transparent bg-clip-text bg-gradient-to-r from-[#ffffff] to-[#ffffff]/40 p-1">
                {{ site('name') }} leverages cutting-edge AI robots, meticulously trained on
                vast trading data and sophisticated algorithms, to decode market
                trends and execute trades with pinpoint accuracy. Our AI bots
                consistently deliver an impressive average of 5% daily PNL.
            </p>

            <!-- auth  -->
            <div class="flex justify-center space-x-4 md:gap-16 mt-8 md:mt-12 lg:mt-16 pb-16 md:pb-60">
                @if (user())
                    <a href="{{ route('user.dashboard') }}" class="gradient-bg px-12 py-2 rounded-4xl text-black">
                        Dashboard
                    </a>
                @else
                    <a href="{{ route('user.login') }}" class="gradient-bg px-12 py-2 rounded-4xl text-black">
                        Sign In
                    </a>
                    <a href="{{ route('user.register') }}" class="gradient-border2 px-12 py-2 rounded-4xl">
                        Sign up
                    </a>
                @endif
            </div>
        </div>
    </section>

    <img src="{{ asset('/assets/templates/lunex/images/index-hero.png') }}" alt=""
        class="w-[95%] md:w-[75%] lg:w-[80%] mx-auto relative -mt-10 md:-mt-32 lg:-mt-48" />

    <!-- livecoin widget  -->
    <div
        class="flex items-center justify-center mt-4 md:mt-8 lg:mt-20 bg-gradient-to-r from-[#848895]/20 to-[#ffffff] max-h-10 md:max-h-20">
        <div class="bg-livecoin-widget w-full pt-5">
            <div class="livecoinwatch-widget-5 mx-auto text-center" lcw-base="USD" lcw-color-tx="#999999"
                lcw-marquee-1="coins" lcw-marquee-items="6"></div>
        </div>
    </div>
@endsection


@section('contents')
    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <h2 class="text-black font-bold text-3xl lg:text-4xl text-center">
            Unlocking Markets, Amplifying <span class="md:block">Returns</span>
        </h2>

        <p class="text-black text-center mt-4 md:mt-8 lg:mt-12 text-sm md:text-base lg:text-lg">
            Your ultimate trading companion, utilizing cutting-edge technology to
            unlock new market potentials and amplify your investment returns like
            never before.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-20 mt-4 md:mt-8 lg:mt-12">
            <!-- Card 1 -->
            <div class="">
                <div class="rounded-t-lg shadow-lg">
                    <img src="{{ asset('/assets/templates/lunex/images/bullish-bearish.png') }}" alt="Robot head profile"
                        class="w-full h-full" />
                </div>
                <div class="p-6 text-center">
                    <h3 class="text-xl font-bold mb-2">Bullish Or Bearish</h3>
                    <p class="text-gray-600 text-sm">
                        Utilizing cutting-edge technology to tackle tough market
                        conditions, keeping your financial goals within reach even during
                        bearish trends.
                    </p>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="">
                <div class="rounded-t-lg shadow-lg">
                    <img src="{{ asset('/assets/templates/lunex/images/guaranteed-profit.png') }}"
                        alt="Two robot heads facing each other" class="w-full h-full" />
                </div>
                <div class="p-6 text-center">
                    <h3 class="text-xl font-bold mb-2">Guaranteed Profit</h3>
                    <p class="text-gray-600 text-sm">
                        Harness the power of our Guaranteed Profit approach and let AI
                        elevate your trading endeavors, ensuring consistent gains.
                    </p>
                </div>
            </div>

            <!-- Card 3 -->
            <div class=" ">
                <div class="overflow-hidden rounded-t-lg shadow-lg">
                    <img src="{{ asset('/assets/templates/lunex/images/automated-process.png') }}"
                        alt="Robot face with glowing eye" class="w-full h-full" />
                </div>
                <div class="p-6 text-center">
                    <h3 class="text-xl font-bold mb-2">Automated Process</h3>
                    <p class="text-gray-600 text-sm">
                        Our cutting-edge technology simplifies your trading approach to
                        move through markets effortlessly and achieve optimal success.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- trading portfolio --}}
    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <h4 class="text-black text-center text-sm gradient-border-text w-fit mx-auto uppercase px-12 py-1 rounded-2xl">
            Pricing
        </h4>

        <h2 class="text-black font-bold text-2xl md:text-3xl lg:text-4xl text-center mt-4 md:mt-6">
            AI-Trading Portfolios
        </h2>

        <!-- Cards Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-10 mt-8 md:mt-16 md:items-center">
            <!-- Card 1 -->
            @foreach ($bots as $bot)
                @php
                    $class = '';
                    if ($counter % 3 == 1) {
                        $class = 'lg:scale-105 md:h-[100%] md:self-start lg:py-20';
                    }
                    $counter++;
                @endphp
                <div
                    class=" {{ $class }} relative bg-gray-900 rounded-2xl shadow-lg p-6 overflow-hidden bg-clip-border md:self-center gradient-border-text-card">
                    <!-- Card 1 content (unchanged) -->
                    <div class="mb-6 flex items-center space-x-3">
                        <img src="{{ asset('storage/bots/' . $bot->logo) }}" alt="Icon" class="w-8 h-8 rounded-full" />
                        <h3 class="text-lg font-semibold text-black">{{ $bot->name }}</h3>
                    </div>

                    <p class="text-3xl font-bold text-black mb-4">
                        {{ $bot->daily_min }}% - {{ $bot->daily_max }}%<span class="text-sm">/day</span>
                    </p>

                    <div class="w-full py-3 flex text-center">
                        <a href="{{ route('user.bots.index') }}"
                            class="w-full text-black gradient-btn mb-6 rounded-lg text-sm py-1">
                            Activate
                        </a>
                    </div>

                    <ul class="text-sm text-gray-400 space-y-2 mb-6">
                        <li class="flex items-center justify-between">
                            <span>Portfolio Range</span>
                            <span class="text-black">{{ site('currency_symbol') . $bot->min }} -
                                {{ site('currency_symbol') . $bot->max }}</span>
                        </li>
                        <li class="flex items-center justify-between">
                            <span>Daily PNL</span><span class="text-black">{{ $bot->daily_min }}% -
                                {{ $bot->daily_max }}%</span>
                        </li>
                        <li class="flex items-center justify-between">
                            <span>Trading Duration</span><span class="text-black">{{ $bot->duration }}
                                {{ $bot->duration_type }}</span>
                        </li>
                        <li class="flex items-center justify-between">
                            <span>Capital Returned</span><span class="text-black">Yes</span>
                        </li>
                    </ul>

                    <div class="mt-6 text-sm">
                        <h4 class="text-black mb-2">Trading Days</h4>
                        <ul class="space-y-1 text-black text-xs">

                            @php
                                $trading_days_display = [
                                    'monday' => in_array('monday', json_decode(site('trading_days'))),
                                    'tuesday' => in_array('tuesday', json_decode(site('trading_days'))),
                                    'wednesday' => in_array('wednesday', json_decode(site('trading_days'))),
                                    'thursday' => in_array('thursday', json_decode(site('trading_days'))),
                                    'friday' => in_array('friday', json_decode(site('trading_days'))),
                                    'saturday' => in_array('saturday', json_decode(site('trading_days'))),
                                    'sunday' => in_array('sunday', json_decode(site('trading_days'))),
                                ];
                            @endphp
                            @foreach ($trading_days_display as $day => $day_display)
                                <li class="flex items-center justify-between pb-1">
                                    <span>{{ ucfirst($day) }}</span>
                                    @if (in_array($day, json_decode(site('trading_days'))))
                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            viewBox="0 0 20 20" fill="none">
                                            <path opacity="0.4"
                                                d="M1.04166 10.0001C1.04166 14.9477 5.05244 18.9584 9.99999 18.9584C14.9476 18.9584 18.9583 14.9477 18.9583 10.0001C18.9583 5.05253 14.9476 1.04175 9.99999 1.04175C5.05244 1.04175 1.04166 5.05253 1.04166 10.0001Z"
                                                fill="#A3DC2F" />
                                            <path
                                                d="M14.0646 6.68365C14.2854 7.08744 14.1371 7.59381 13.7333 7.81463C12.5905 8.43958 11.5173 9.74792 10.6978 11.0027C10.2984 11.6143 9.97793 12.1839 9.75751 12.6003C9.64751 12.8081 9.56301 12.9767 9.50659 13.0921L9.42468 13.2632C9.29593 13.5447 9.02176 13.7318 8.71276 13.7489C8.40368 13.7659 8.11057 13.6102 7.95166 13.3446C7.69273 12.9117 7.28128 12.5165 6.89998 12.2151C6.71471 12.0686 6.54794 11.9531 6.42893 11.8752L6.25369 11.7656C5.85412 11.5374 5.71498 11.0287 5.94294 10.629C6.17095 10.2292 6.67988 10.0899 7.07967 10.3179L7.3422 10.481C7.49403 10.5804 7.70226 10.7248 7.93366 10.9077C8.11049 11.0475 8.30821 11.2156 8.50784 11.4092C8.72184 11.0247 8.98934 10.5708 9.30243 10.0913C10.1497 8.79408 11.4098 7.18572 12.9337 6.35235C13.3374 6.13152 13.8438 6.27985 14.0646 6.68365Z"
                                                fill="#A3DC2F" />
                                        </svg>
                                    @else
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            class="w-4 h-4 text-red-500" viewBox="0 0 16 16">
                                            <path
                                                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                                        </svg>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <h4 class="text-black text-center text-sm gradient-border-text w-fit uppercase px-12 py-1 rounded-2xl">
            supercharged ai
        </h4>
        <div class="mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
            <div class="">
                <h2 class="text-black text-2xl md:text-3xl lg:text-4xl mt-4 font-semibold mb-4 md:mb-8 lg:mb-12">
                    Why Choose <span class="md:block"> {{ site('name') }}?</span>
                </h2>

                <p class="text-black text-sm text-start leading-8">
                    {{ site('name') }} doesn't just follow trends - it pioneers them. It
                    empowers traders to navigate both bullish and bearish market
                    conditions with unwavering confidence. By leveraging sophisticated
                    algorithms and real-time data streams, {{ site('name') }} adapts to
                    ever-changing market dynamics, seizing opportunities while
                    minimizing risks.
                </p>

                <div class="flex justify-start space-x-4 md:gap-16 mt-8 md:mt-12 lg:mt-16">
                    @if (user())
                        <a href="{{ route('user.dashboard') }}"
                            class="gradient-border3 px-12 py-2 rounded-2xl text-black">
                            Dashboard
                        </a>
                    @else
                        <a href="{{ route('user.login') }}" class="gradient-border3 px-12 py-2 rounded-2xl text-black">
                            Sign In
                        </a>
                        <a href="{{ route('user.register') }}" class="gradient-bg px-12 py-2 rounded-2xl">Sign up</a>
                    @endif

                </div>
            </div>
            <div class="">
                <img src="{{ asset('/assets/templates/lunex/images/supercharged-hero.png') }}" alt=""
                    class="w-full md:w-96 md:h-96 mx-auto" />
            </div>
        </div>

        <div class="mt-4 md:mt-8 lg:mt-16">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 lg:gap-12">
                <!-- Card 1 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4 text-blue-500">
                        <img src="{{ asset('/assets/templates/lunex/images/cutting-edge-icon.svg') }}" alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Cutting-Edge</h3>
                    <p class="text-gray-600">Precision</p>
                </div>

                <!-- Card 2 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/trendsetter-advantage-icon.svg') }}"
                            alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Trendsetter</h3>
                    <p class="text-gray-600">Advantage</p>
                </div>

                <!-- Card 3 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/adaptive-excellence-icon.svg') }}"
                            alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Adaptive Excellence</h3>
                    <p class="text-gray-600"></p>
                </div>

                <!-- Card 4 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/seamless-profits.svg') }}" alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Seamless Profits</h3>
                    <p class="text-gray-600"></p>
                </div>

                <!-- Card 5 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/data-driven-triumph-icon.svg') }}"
                            alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Data-Driven Triumph</h3>
                    <p class="text-gray-600"></p>
                </div>

                <!-- Card 6 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/market-pioneer-icon.svg') }}"
                            alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Market Pioneer</h3>
                    <p class="text-gray-600"></p>
                </div>

                <!-- Card 7 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/strategic-partner-icon.svg') }}"
                            alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Strategic Partner</h3>
                    <p class="text-gray-600"></p>
                </div>

                <!-- Card 8 -->
                <div
                    class="bg-[#fdfffc] rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 text-center">
                    <div class="w-12 h-12 mx-auto mb-4">
                        <img src="{{ asset('/assets/templates/lunex/images/automated-mastery-icon.svg') }}"
                            alt="" />
                    </div>
                    <h3 class="font-bold text-lg mb-1">Automated Mastery</h3>
                    <p class="text-gray-600"></p>
                </div>
            </div>
        </div>
    </section>

    <!-- trade from anywhere section  -->
    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <h2 class="text-black font-bold text-2xl md:text-3xl lg:text-4xl text-center mt-4 md:mt-6">
            Trade From Anywhere
        </h2>

        <p class="text-black text-lg text-center leading-8 mt-4 md:mt-6 mb-4 md:mb-6">
            Whether you're at home or on the go, seize market opportunities anytime,
            anywhere, and secure your financial future effortlessly. Trade from any
            and every city.
        </p>

        <div class="relative w-full h-[400px] md:h-[600px] md:mt-20">
            <!-- Container for all semicircles -->
            <div class="absolute inset-0 md:flex flex-col items-center">
                <!-- First semicircle (largest, back) -->
                <div class="absolute w-full max-w-[700px] mx-auto hidden md:block">
                    <img src="{{ asset('/assets/templates/lunex/images/semi-circle1.svg') }}" alt="First semicircle"
                        class="w-full h-auto" />
                </div>

                <!-- Second semicircle (middle) -->
                <div class="absolute w-full max-w-[600px] mx-auto top-8 hidden md:block">
                    <img src="{{ asset('/assets/templates/lunex/images/semi-circle2.svg') }}" alt="Second semicircle"
                        class="w-full h-auto" />
                </div>

                <!-- Third semicircle (smallest, front) -->
                <div class="absolute w-full max-w-[500px] mx-auto top-16 hidden md:block">
                    <img src="{{ asset('/assets/templates/lunex/images/semi-circle3.svg') }}" alt="Third semicircle"
                        class="w-full h-auto" />
                </div>

                <!-- recent trades box -->
                <div
                    class="absolute w-full max-w-[800px] mx-auto top-[20%] border text-sm gradient-border-text-recent-trades p-4 md:p-8 rounded-3xl">
                    <h2 class="text-sm mb-4 text-black">Recent Trades by {{ site('name') }}</h2>
                    <div class="w-full px-2 md:px-10 mt-5 text-white">
                        <div class="w-full">
                            <div class="w-full p-3">
                                <div class="w-full overflow-x-auto" id="recentTradesContainer">
                                    <div class="w-full grid grid-cols-1 gap-4 mt-2 text-xs" id="recentTrades">
                                        <!-- Initial trades will be populated here -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- testimonials section  -->
    <section class="pt-[40rem] md:pt-[20rem] px-6 md:px-20 lg:px-40 mb-20">
        <h2 class="text-black font-bold text-2xl md:text-4xl lg:text-4xl text-center mb-4">
            Our Customers Review
        </h2>

        <p class="text-black text-sm text-center leading-8">
            Here is what our many users around the world are saying about our
            amazing product.
        </p>

        <div class="relative max-w-5xl mx-auto mt-5">
            <div class="overflow-hidden swiper mySwiper">
                <div class="swiper-wrapper grid grid-cols-1 md:grid-cols-2 gap-2">
                    @foreach ($reviews as $review)
                        <div class="swiper-slide">
                            <div style="min-height: 12rem;"
                                class="relative p-6 bg-green-100 rounded-lg shadow-md transition-all duration-300 hover:scale-105">
                                <p class="text-gray-800 text-sm md:text-base leading-relaxed mb-4">
                                    {{ $review['testimony'] }}
                                </p>
                                <div class="flex items-center space-x-3">
                                    <img src="{{ asset('/assets/templates/lunex/images/review/' . $review['image']) }}"
                                        alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow" />
                                    <div>
                                        <p class="text-gray-900 font-semibold">{{ $review['name'] }}</p>
                                        <div class="flex">
                                            @php
                                                $stars = 5;
                                            @endphp
                                            @for ($i = 0; $i < $stars; $i++)
                                                <img src="{{ asset('/assets/templates/lunex/images/stars-icon.svg') }}"
                                                    class="w-4 h-4">
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                                <img src="{{ asset('/assets/templates/lunex/images/quotations-icon.svg') }}"
                                    alt="Quotes" class="absolute bottom-6 right-6 w-12" />
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>

            <!-- Navigation Buttons -->
            <div hidden class="swiper-button-prev"></div>
            <div hidden class="swiper-button-next"></div>

            <!-- Navigation Buttons -->
            <div class="flex justify-center space-x-4 mt-6">
                <button id="swiper-button-prev1"
                    class="py-3 px-4 bg-black text-white rounded-full hover:bg-[#a3dc2f] transition-all duration-300 transform hover:scale-110">
                    ←
                </button>
                <button id="swiper-button-next1"
                    class="py-3 px-4 bg-black text-white rounded-full hover:bg-[#a3dc2f] transition-all duration-300 transform hover:scale-110">
                    →
                </button>
            </div>
        </div>
    </section>

    <!-- how it works section  -->
    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <h4 class="text-black text-center text-sm gradient-border-text w-fit mx-auto uppercase px-12 py-1 rounded-2xl">
            Getting Started
        </h4>

        <h2 class="text-black font-bold text-2xl md:text-3xl lg:text-4xl text-center mt-4 md:mt-6">
            How It Works
        </h2>

        <p class="text-black text-center mt-4 md:mt-8 lg:mt-12 text-sm md:text-base lg:text-lg">
            Our user-friendly interface and intuitive features ensure that even
            newcomers can quickly grasp the essentials and embark on a seamless
            journey into the world of efficient and profitable trading.
        </p>

        <div class="max-w-4xl mx-auto text-center py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 items-center">
                <!-- Step 1 -->
                <div class="flex flex-col items-center">
                    <div class="relative flex justify-center items-center">
                        <img src="{{ asset('/assets/templates/lunex/images/step-1-icon.svg') }}" class="w-36"
                            alt="Step 1" />
                    </div>
                    <p class="mt-3 font-medium">Step 1: Register</p>
                </div>

                <!-- Step 2 -->
                <div class="flex flex-col items-center">
                    <div class="relative flex justify-center items-center">
                        <img src="{{ asset('/assets/templates/lunex/images/step-2-icon.svg') }}" class="w-36"
                            alt="Step 2" />
                    </div>
                    <p class="mt-3 font-medium">Step 2: Deposit Funds</p>
                </div>

                <!-- Step 3 -->
                <div class="flex flex-col items-center">
                    <div class="relative flex justify-center items-center">
                        <img src="{{ asset('/assets/templates/lunex/images/step-3-icon.svg') }}" class="w-36"
                            alt="Step 3" />
                    </div>
                    <p class="mt-3 font-medium">Step 3: Activate</p>
                </div>

                <!-- Step 4 -->
                <div class="flex flex-col items-center">
                    <div class="relative flex justify-center items-center">
                        <img src="{{ asset('/assets/templates/lunex/images/step-4-icon.svg') }}" class="w-36"
                            alt="Step 4" />
                    </div>
                    <p class="mt-3 font-medium">Step 4: Withdraw</p>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <h4 class="text-black text-center text-sm gradient-border-text w-fit mx-auto uppercase px-12 py-1 rounded-2xl">
            market data
        </h4>

        <h2 class="text-black font-bold text-2xl md:text-3xl lg:text-4xl text-center mt-4 md:mt-6">
            Market Heatmap
        </h2>

        <div x-data="cryptoApp()" x-init="fetchData()"
            class="mt-4 md:mt-8 rounded-4xl border-t-6 md:border-t-20 border-l-6 md:border-l-20 border-r-6 md:border-r-20 border-[#605e63]/50 p-2 md:p-10">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
                <template x-for="coin in coins" :key="coin.id">
                    <div class="bg-gray-800 text-black p-4 rounded-lg shadow-md border border-transparent bg-clip-border md:self-center"
                        style="
              background-image: linear-gradient(#fff, #fff),
                linear-gradient(#a3dc2f, #78f6c3, #f087fe, #b96a9c);
              background-origin: border-box;
              background-clip: padding-box, border-box;
            ">
                        <div class="flex items-center mb-4 text-black">
                            <img :src="coin.logo" alt="coin.name" class="w-8 h-8 mr-2" />
                            <div>
                                <h3 class="font-bold text-sm" x-text="coin.name"></h3>
                                <p class="text-sm text-gray-400" x-text="coin.symbol"></p>
                            </div>
                        </div>
                        <p class="text-gray-400 text-sm">Price</p>
                        <p class="text-base" x-text="`$${coin.price}`"></p>
                        <p :class="coin.change > 0 ? 'text-green-500' : 'text-red-500'" class="text-sm mt-2"
                            x-text="`${coin.change > 0 ? '+' : ''}${coin.change.toFixed(2)}%`"></p>
                    </div>
                </template>
            </div>
        </div>
    </section>

    <!-- unlocking wealth section -->
    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40">
        <div class="bg-green-50 rounded-2xl p-3 md:p-6 flex flex-col lg:flex-row items-center max-w-5xl mx-auto">
            <!-- Left Side: Text & Buttons -->
            <div class="lg:w-1/2 text-center lg:text-left">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center">
                    Unlocking Wealth with Simplicity
                </h2>

                <div class="flex justify-center space-x-4 md:gap-16 mt-8 md:mt-12 lg:mt-16">
                    @if (user())
                        <a href="{{ route('user.dashboard') }}"
                            class="gradient-border3 px-12 py-2 rounded-2xl text-black">
                            Dashboard
                        </a>
                    @else
                        <a href="{{ route('user.login') }}" class="gradient-border3 px-12 py-2 rounded-2xl text-black">
                            Sign In
                        </a>
                        <a href="{{ route('user.register') }}" class="gradient-bg px-12 py-2 rounded-2xl">Sign up</a>
                    @endif
                </div>
            </div>

            <!-- Right Side: Image -->
            <div class="lg:w-1/2 mt-6 lg:mt-0">
                <img src="{{ asset('/assets/templates/lunex/images/unlocking-wealth-img.png') }}" alt="Wealth"
                    class="w-full md:w-[80%] lg:w-full md:mx-auto lg:mx-0 rounded-2xl" />
            </div>
        </div>
    </section>
@endsection


@section('scripts')
    <script defer src="https://www.livecoinwatch.com/static/lcw-widget.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


    {{-- trade data --}}
    <script>
        // Initial trades data

        const initialTrades = @json(recentTrades());

        // Keep track of currently displayed trades
        let currentTrades = [];

        // trade element from data
        function createTradeElement(trade) {
            const div = document.createElement("div");
            const currentTime = new Date().toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
                second: "2-digit",
                hour12: true,
            });

            div.className = `recent-trade w-full p-4 flex justify-between items-center ${
                trade.profit.startsWith("+")
              ? "text-green-500 hover:bg-pink-400"
              : "text-red-500 hover:bg-pink-800"
            } shadow-md transition border-b border-gray-600`;

            div.innerHTML = `
            <p class="recent_trade_time text-sm w-24">${currentTime}</p>
            <p class="text-sm w-28 px-4">${trade.pair}</p>
            <p class="text-sm w-32 text-right">${trade.amount}</p>
            <p class="text-sm w-20 text-right">${trade.profit}</p>
        `;

            return div;
        }

        // Update all trade times
        function updateTradeTimes() {
            const tradeTimeElements =
                document.querySelectorAll(".recent_trade_time");
            const currentTime = new Date().toLocaleTimeString("en-US", {
                hour: "numeric",
                minute: "2-digit",
                second: "2-digit",
                hour12: true,
            });
            tradeTimeElements.forEach((element) => {
                element.textContent = currentTime;
            });
        }

        // Shuffle and display trades
        function shuffleAndDisplayRecentTrades() {
            const tradesDiv = document.getElementById("recentTrades");
            if (!tradesDiv) return;

            // Initialize trades if needed
            if (currentTrades.length === 0) {
                currentTrades = initialTrades.map((trade) =>
                    createTradeElement(trade)
                );
            }

            // Create a copy and shuffle
            const shuffledTrades = [...currentTrades];
            for (let i = shuffledTrades.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [shuffledTrades[i], shuffledTrades[j]] = [
                    shuffledTrades[j],
                    shuffledTrades[i],
                ];
            }

            // Clear and display first 9 trades
            tradesDiv.innerHTML = "";
            const displayCount = Math.min(9, shuffledTrades.length);
            for (let i = 0; i < displayCount; i++) {
                tradesDiv.appendChild(shuffledTrades[i].cloneNode(true));
            }

            updateTradeTimes();
        }

        // Handle periodic updates
        function updateRecentTrades() {
            // In this version, we'll just reshuffle the existing trades
            // In a real implementation, you would fetch new data from the server
            shuffleAndDisplayRecentTrades();
        }

        // Initialize when document is ready
        document.addEventListener("DOMContentLoaded", function() {
            // Initial display
            shuffleAndDisplayRecentTrades();

            // Set up intervals
            const SHUFFLE_INTERVAL = 1000; // 1 second
            const UPDATE_INTERVAL = 10000; // 10 seconds

            // Clear any existing intervals
            if (window.shuffleInterval) clearInterval(window.shuffleInterval);
            if (window.updateInterval) clearInterval(window.updateInterval);

            // Set new intervals
            window.shuffleInterval = setInterval(
                shuffleAndDisplayRecentTrades,
                SHUFFLE_INTERVAL
            );
            window.updateInterval = setInterval(
                updateRecentTrades,
                UPDATE_INTERVAL
            );
        });

        // Clean up on page unload
        window.addEventListener("unload", function() {
            if (window.shuffleInterval) clearInterval(window.shuffleInterval);
            if (window.updateInterval) clearInterval(window.updateInterval);
        });
    </script>


    {{-- review testimonial-slide --}}
    <script>
        $(document).ready(function() {
            var swiper = new Swiper(".mySwiper", {
                loop: true,
                slidesPerView: 2,
                spaceBetween: 7,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
            });

            // jQuery to trigger Swiper navigation
            $("#swiper-button-next1").click(function() {
                $(".swiper-button-next").click();
            });

            $("#swiper-button-prev1").click(function() {
                $(".swiper-button-prev").click();
            });
        });
    </script>

    <!-- crypto prices js  -->
    <script>
        document.addEventListener("alpine:init", () => {
            Alpine.data("cryptoApp", () => ({
                coins: [{
                        id: "bitcoin",
                        name: "Bitcoin",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/bitcoin-btc-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "BTC",
                    },
                    {
                        id: "ethereum",
                        name: "Ethereum",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/ethereum-eth-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "ETH",
                    },
                    {
                        id: "ripple",
                        name: "Ripple",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/ripple-logo.webp') }}",
                        price: 0,
                        change: 0,
                        symbol: "XRP",
                    },
                    {
                        id: "binancecoin",
                        name: "Binance Coin",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/binance-coin-bnb-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "BNB",
                    },
                    {
                        id: "solana",
                        name: "Solana",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/solana-sol-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "SOL",
                    },
                    {
                        id: "dogecoin",
                        name: "Dogecoin",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/dogecoin-doge-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "DOGE",
                    },
                    {
                        id: "cardano",
                        name: "Cardano",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/cardano-ada-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "ADA",
                    },
                    {
                        id: "tron",
                        name: "Tron",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/tron-trx-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "TRX",
                    },
                    {
                        id: "avalanche-2",
                        name: "Avalanche",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/avalanche-avax-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "AVAX",
                    },
                    {
                        id: "sui",
                        name: "Sui",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/sui-sui-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "SUI",
                    },
                    {
                        id: "pepe",
                        name: "Pepe",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/pepe-pepe-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "PEPE",
                    },
                    {
                        id: "toncoin",
                        name: "Toncoin",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/toncoin-ton-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "TON",
                    },
                    {
                        id: "stellar",
                        name: "Stellar",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/stellar-xlm-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "XLM",
                    },
                    {
                        id: "chainlink",
                        name: "Chainlink",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/chainlink-link-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "LINK",
                    },
                    {
                        id: "shiba-inu",
                        name: "Shiba Inu",
                        logo: "{{ asset('/assets/templates/lunex/images/heatmarket_coin/shiba-inu-shib-logo.png') }}",
                        price: 0,
                        change: 0,
                        symbol: "SHIB",
                    },
                ],

                async fetchData() {
                    const apiUrl = `https://api.coingecko.com/api/v3/simple/price?ids=${this.coins
                .map((coin) => coin.id)
                .join(",")}&vs_currencies=usd&include_24hr_change=true`;
                    try {
                        const response = await fetch(apiUrl);
                        const data = await response.json();

                        this.coins.forEach((coin) => {
                            if (data[coin.id]) {
                                coin.price = data[coin.id].usd.toLocaleString();
                                coin.change = data[coin.id].usd_24h_change;
                            }
                        });
                    } catch (error) {
                        console.error("Error fetching cryptocurrency data:", error);
                    }
                },

                init() {
                    this.fetchData();
                },
            }));
        });
    </script>

    <!-- testimonials js  -->
    {{-- <script>
        document.addEventListener("DOMContentLoaded", function() {
            new Swiper(".testimonial-slider", {
                slidesPerView: 2,
                spaceBetween: 30,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                breakpoints: {
                    640: {
                        slidesPerView: 2,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                },
                loop: true,
            });
        });
    </script> --}}

    {{-- glide --}}
    <script>
        new Glide('.glide', {
            type: 'carousel',
            startAt: 0,
            perView: 9,
            focusAt: 'center',
            autoplay: 3000,
            hoverpause: true,
            gap: 6,
            rewind: true
        }).mount();
    </script>
@endsection
