@php
$path = request()->path();
$is = fn($p) => str_starts_with($path, trim($p, '/'));
@endphp

<footer class="app-footer">  
  <nav class="tabbar">  
    {{-- ১. হোম --}}  
    <a class="tab {{ $is('/dashboard') ? 'active' : '' }}" href="{{ route('user.dashboard') }}">  
      <span class="tab-inner">  
        <i class="fa-solid fa-house-chimney"></i>  
        <span class="tab-text">হোম</span>  
      </span>  
    </a>  

    {{-- ২. শপ / প্রোডাক্ট --}}  
    <a class="tab {{ $is('/shop') ? 'active' : '' }}" href="{{ route('user.shop') }}">  
      <span class="tab-inner">  
        <i class="fa-solid fa-store"></i>  
        <span class="tab-text">শপ</span>  
      </span>  
    </a>  

    {{-- ৩. সেন্ট্রাল পয়েন্টে আর্নিং প্রজেক্ট --}}  
    <a class="tab center-tab {{ $is('/earning-projects') || $is('/projects') ? 'active' : '' }}" href="{{ url('/earning-projects') }}">  
      <span class="center-click-area">  
        <span class="center-circle">  
          <i class="fa-solid fa-rocket"></i>  
        </span>  
        <span class="center-label">প্রজেক্ট</span>  
      </span>  
    </a>  

    {{-- ৪. ইনকাম --}}  
    <a class="tab {{ $is('/earnings') ? 'active' : '' }}" href="{{ route('earnings.index') }}">  
      <span class="tab-inner">  
        <i class="fa-solid fa-wallet"></i>  
        <span class="tab-text">ইনকাম</span>  
      </span>  
    </a>  

    {{-- ৫. নেটওয়ার্ক --}}  
    <a class="tab {{ $is('/network') ? 'active' : '' }}" href="{{ url('/network') }}">  
      <span class="tab-inner">  
        <i class="fa-solid fa-user-group"></i>  
        <span class="tab-text">নেটওয়ার্ক</span>  
      </span>  
    </a>
  </nav>  
</footer>  

<style>  
:root{  
  --footer-h: 60px;  
  
  --footer-dark:#061544;  
  --footer-blue:#0759ff;  
  --footer-sky:#00a8ff;  
  --footer-surface: rgba(255, 255, 255, 0.98);  
  --footer-border: rgba(7, 89, 255, 0.12);  
  
  --footer-gradient: linear-gradient(135deg, #0759ff 0%, #0045cc 100%);  
  --center-gradient: linear-gradient(135deg, #0066ff 0%, #00d2ff 100%);  
  --active-bg: linear-gradient(135deg, rgba(7, 89, 255, 0.10), rgba(0, 168, 255, 0.14));  
}  

/* অতিরিক্ত বিশাল প্যাডিং কমিয়ে পারফেক্ট সাইজ করা হয়েছে */
html,  
body{  
  padding-bottom: calc(var(--footer-h) + 14px) !important;  
}  

/* Base Footer Box */  
.app-footer{  
  position: fixed !important;  
  left: 10px !important;  
  right: 10px !important;  
  bottom: 8px !important;  
  width: auto !important;  
  height: var(--footer-h) !important;  
  z-index: 9999 !important;  
  background: var(--footer-surface);  
  box-shadow: 0 8px 24px rgba(6, 21, 68, 0.12);  
  overflow: visible !important;  
  user-select: none;  
  -webkit-user-select: none;  
  border-radius: 20px;  
  border: 1px solid var(--footer-border);  
  backdrop-filter: blur(15px);  
  -webkit-backdrop-filter: blur(15px);  
}  

.tabbar{  
  height: var(--footer-h);  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  gap: 2px;  
  padding: 4px 6px;  
  position: relative;  
  z-index: 2;  
}  

/* Base Tab Styling */  
.tab{  
  height: 48px;  
  flex: 1;  
  min-width: 0;  
  text-decoration: none !important;  
  color: #64748b !important;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  position: relative;  
  -webkit-tap-highlight-color: transparent;  
  border-radius: 16px;  
  transition: all 0.25s ease;  
}  

.tab-inner,  
.center-click-area{  
  width: 100%;  
  height: 48px;  
  display: flex;  
  flex-direction: row;  
  align-items: center;  
  justify-content: center;  
  gap: 5px;  
  pointer-events: none;  
  border-radius: 16px;  
  position: relative;  
}  

.tab-inner::before,  
.center-click-area::before{  
  content: "";  
  position: absolute;  
  inset: 0;  
  border-radius: 16px;  
  background: transparent;  
  opacity: 0;  
  transform: scale(.92);  
  transition: all .25s ease;  
}  

/* Icons Styling */  
.tab i{  
  width: 32px;  
  height: 32px;  
  min-width: 32px;  
  border-radius: 10px;  
  font-size: 16px;  
  color: #64748b !important;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  pointer-events: none;  
  position: relative;  
  z-index: 2;  
  transition: all 0.2s ease;  
}  

.tab-text,  
.center-label{  
  max-width: 0;  
  opacity: 0;  
  overflow: hidden;  
  font-size: 11px !important;  
  font-weight: 700;  
  color: #64748b !important;  
  line-height: 1;  
  white-space: nowrap;  
  position: relative;  
  z-index: 2;  
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);  
}  

/* Active State Styles */  
.tab.active{  
  flex: 1.6;  
}  

.tab.active .tab-inner::before{  
  background: var(--active-bg);  
  opacity: 1;  
  transform: scale(1);  
  box-shadow: inset 0 0 0 1px rgba(7, 89, 255, 0.15);  
}  

.tab.active i{  
  color: #ffffff !important;  
  background: var(--footer-gradient);  
  box-shadow: 0 4px 10px rgba(7, 89, 255, 0.3);  
}  

.tab.active .tab-text{  
  max-width: 70px;  
  opacity: 1;  
  color: var(--footer-blue) !important;  
}  

/* Special Center Tab: Earning Project */  
.center-circle{  
  width: 34px;  
  height: 34px;  
  min-width: 34px;  
  border-radius: 12px;  
  background: #f1f5f9;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  position: relative;  
  z-index: 2;  
  transition: all 0.25s ease;  
}  

.center-circle i{  
  font-size: 16px;  
  color: #64748b !important;  
}  

/* Center Active */  
.center-tab.active{  
  flex: 1.7;  
}  

.center-tab.active .center-click-area::before{  
  background: linear-gradient(135deg, rgba(7, 89, 255, 0.12), rgba(0, 168, 255, 0.15));  
  opacity: 1;  
  transform: scale(1);  
  box-shadow: inset 0 0 0 1px rgba(7, 89, 255, 0.2);  
}  

.center-tab.active .center-circle{  
  background: var(--footer-gradient);  
  box-shadow: 0 4px 12px rgba(7, 89, 255, 0.35);  
}  

.center-tab.active .center-circle i{  
  color: #ffffff !important;  
}  

.center-tab.active .center-label{  
  max-width: 75px;  
  opacity: 1;  
  color: var(--footer-blue) !important;  
}  

/* Touch Animations */  
.tab:active .tab-inner,  
.center-tab:active .center-click-area{  
  transform: scale(.92);  
}  

@media(max-width: 400px){  
  :root{  
    --footer-h: 56px;  
  }  
  
  html, body{  
    padding-bottom: calc(var(--footer-h) + 12px) !important;  
  }  
  
  .app-footer{  
    left: 6px !important;  
    right: 6px !important;  
    bottom: 6px !important;  
    border-radius: 16px;  
  }  
  
  .tab, .tab-inner, .center-click-area{  
    height: 44px;  
  }  
  
  .tab i, .center-circle{  
    width: 28px;  
    height: 28px;  
    min-width: 28px;  
    font-size: 14px;  
    border-radius: 8px;  
  }  
  
  .tab-text, .center-label{  
    font-size: 10px !important;  
  }  
}  
</style>