

<!-- Modern Mobile Navigation with Glassmorphism -->
<link href="https://unpkg.com/lucide@latest" rel="stylesheet">

<div class="fixed bottom-0 w-full z-30 md:hidden" x-data="{ fabOpen: false }" x-cloak>
  <!-- Bottom Navigation Bar with Glassmorphism -->
  <div class="flex justify-between items-center bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg px-6 py-4 shadow-[0_-8px_30px_rgba(0,0,0,0.12)] relative border-t border-gray-200/20 dark:border-gray-700/20">
    <!-- Language Selector (Mobile) -->
    <div class="group flex flex-col items-center relative">
      <i data-lucide="globe" class="w-6 h-6 text-gray-500 group-hover:text-blue-600 transition-colors duration-200"></i>
      <span class="text-xs mt-1 text-gray-500 group-hover:text-blue-600">Language</span>
    </div>

    <a href="{{ route('deposits') }}" class="group flex flex-col items-center relative">
      <i data-lucide="banknote" class="w-6 h-6 {{ request()->routeIs('deposits') ? 'text-blue-600' : 'text-gray-500 group-hover:text-blue-600' }} transition-colors duration-300"></i>
      <span class="text-xs font-medium mt-1 {{ request()->routeIs('deposits') ? 'text-blue-600' : 'text-gray-500 group-hover:text-blue-600' }} transition-colors duration-300">Deposit</span>
    </a>

    <a href="{{ route('profile') }}" class="group flex flex-col items-center relative">
      <i data-lucide="user" class="w-6 h-6 {{ request()->routeIs('profile') ? 'text-blue-600' : 'text-gray-500 group-hover:text-blue-600' }} transition-colors duration-300"></i>
      <span class="text-xs font-medium mt-1 {{ request()->routeIs('profile') ? 'text-blue-600' : 'text-gray-500 group-hover:text-blue-600' }} transition-colors duration-300">Profile</span>
    </a>

    <button @click="fabOpen = !fabOpen" class="absolute -top-7 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-600 to-indigo-600 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-[0_8px_30px_rgba(59,130,246,0.5)] border-4 border-white dark:border-gray-900 hover:scale-110 active:scale-95 transition-all duration-300 ease-out">
      <i data-lucide="zap" class="w-6 h-6"></i>
      <span class="absolute w-full h-full rounded-full bg-blue-500 animate-ping opacity-20"></span>
    </button>

    <a href="{{ route('support') }}" class="flex flex-col items-center {{ request()->routeIs('support') ? 'text-blue-600' : 'text-gray-500' }} hover:text-blue-600">
      <i data-lucide="life-buoy" class="w-6 h-6"></i>
      <span class="text-xs mt-1">Support</span>
    </a>

    <a href="{{ route('dashboard') }}" class="flex flex-col items-center {{ request()->routeIs('dashboard') ? 'text-blue-600' : 'text-gray-500' }} hover:text-blue-600">
      <i data-lucide="home" class="w-6 h-6 transition-colors duration-200"></i>
      <span class="text-xs mt-1">Home</span>
    </a>
  </div>

  <!-- FAB Overlay Menu -->
  <div x-show="fabOpen" @click.away="fabOpen = false" class="fixed inset-0 bg-gray-900/70 backdrop-blur-sm z-40 flex items-center justify-center p-4" x-transition x-cloak>
    <div class="bg-gray-900 p-6 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.3)] space-y-4 w-72 max-w-full border border-gray-700">
      <div class="grid grid-cols-2 gap-4 mb-6">
        <a href="{{ route('mplans') }}" class="flex flex-col items-center p-4 bg-gray-800 border border-gray-700 hover:bg-gray-700 transition-all group">
          <i data-lucide="trending-up" class="w-6 h-6 mb-2 text-blue-400"></i>
          <span class="text-sm font-medium text-gray-200">Invest</span>
        </a>
        <a href="{{ route('withdrawalsdeposits') }}" class="flex flex-col items-center p-4 bg-gray-800 border border-gray-700 hover:bg-gray-700 transition-all group">
          <i data-lucide="wallet" class="w-6 h-6 mb-2 text-green-400"></i>
          <span class="text-sm font-medium text-gray-200">Withdraw</span>
        </a>
      </div>
      <div class="space-y-2">
        <a href="{{ route('demo.dashboard') }}" class="flex items-center p-3 text-gray-100 hover:bg-gray-800 transition-colors group">
          <i data-lucide="graduation-cap" class="w-5 h-5 mr-3 text-green-400"></i>
          <span class="font-medium">Demo Trading</span>
          <span class="ml-auto text-xs font-bold text-green-400">Practice</span>
        </a>
        <a href="{{ route('copy.dashboard') }}" class="flex items-center p-3 text-gray-100 hover:bg-gray-800 transition-colors group">
          <i data-lucide="copy" class="w-5 h-5 mr-3 text-blue-400"></i>
          <span class="font-medium">Copy Trading</span>
        </a>
        <a href="{{ route('transferview') }}" class="flex items-center p-3 text-gray-100 hover:bg-gray-800 transition-colors group">
          <i data-lucide="refresh-ccw" class="w-5 h-5 mr-3 text-purple-400"></i>
          <span class="font-medium">Transfer Funds</span>
        </a>
        <a href="{{ route('support') }}" class="flex items-center p-3 text-gray-100 hover:bg-gray-800 transition-colors group">
          <i data-lucide="life-buoy" class="w-5 h-5 mr-3 text-cyan-400"></i>
          <span class="font-medium">Support</span>
        </a>
      </div>
      <button @click="fabOpen = false" class="absolute top-2 right-2 p-2 rounded-full text-gray-400 hover:text-gray-200 hover:bg-gray-800 transition-colors">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>
  </div>
</div>

<script src="https://unpkg.com/lucide@latest"></script>
<script>
document.addEventListener('DOMContentLoaded', function() { lucide.createIcons(); });
document.addEventListener('alpine:init', () => { Alpine.nextTick(() => { lucide.createIcons(); }); });
</script>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

<script>
function cryptoPrices() {
  return {
    btcPrice: null, ethPrice: null, btcChange: 0, ethChange: 0, lastUpdate: null,
    async fetchPrices() {
      try {
        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd&include_24hr_change=true');
        const data = await response.json();
        if (data.bitcoin && data.ethereum) {
          this.btcPrice = Math.round(data.bitcoin.usd);
          this.ethPrice = Math.round(data.ethereum.usd);
          this.btcChange = data.bitcoin.usd_24h_change || 0;
          this.ethChange = data.ethereum.usd_24h_change || 0;
          this.lastUpdate = new Date();
        }
      } catch (error) {
        this.btcPrice = this.btcPrice || 45320;
        this.ethPrice = this.ethPrice || 2850;
      }
      setTimeout(() => this.fetchPrices(), 30000);
    }
  }
}
document.addEventListener('alpine:init', () => { Alpine.data('cryptoPrices', cryptoPrices); });
</script>

@yield('scripts')
@include('layouts.lang')
@include('layouts.livechat')
</body>
</html>
