<?php
$currentPage = basename($_SERVER['PHP_SELF']);
// require '../app/Controllers/layouts.php'; 
?>

<?php if ($stmtThemesPlatformResult['theme_actual'] === 'brasileira') : ?>
  <link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
  <nav class="fixed bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[600px] bg-white shadow-xl z-50">
    <ul class="flex justify-between px-4 items-center py-3 text-sm">
      <li><a href="index.php" class="flex flex-col items-center"><i class='bx bx-home text-2xl'></i><span>Início</span></a></li>
    </ul>
  </nav>

<?php elseif ($stmtThemesPlatformResult['theme_actual'] === 'gringa') : ?>
  <?php elseif ($stmtThemesPlatformResult['theme_actual'] === 'gringa2' || true) : ?>
  <style>
    :root {
      --dock-bg: rgba(255, 255, 255, 0.95);
      --dock-border: #E5E7EB;
      --dock-active: #FF7E67; /* Salmão */
      --dock-inactive: #9CA3AF; /* Cinza */
      --dock-glow: rgba(255, 126, 103, 0.3);
    }

    .cyber-dock-container {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 92%;
      max-width: 440px;
      z-index: 1000;
    }

    .cyber-dock {
      background: var(--dock-bg);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--dock-border);
      border-radius: 24px;
      padding: 0 16px;
      height: 72px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    /* Linha sutil superior */
    .cyber-dock::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
    }

    .dock-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      color: var(--dock-inactive);
      flex: 1;
      height: 100%;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .dock-icon-wrapper {
      position: relative;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s;
    }

    .dock-item i {
      stroke-width: 2px;
      width: 24px;
      height: 24px;
    }

    .dock-label {
      font-size: 9px;
      font-weight: 600;
      margin-top: 4px;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.3s;
      position: absolute;
      bottom: 12px;
      font-family: 'Inter', sans-serif;
      text-transform: uppercase;
      white-space: nowrap;
    }

    /* Estados Ativos */
    .dock-item.active {
      color: var(--dock-active);
    }

    .dock-item.active .dock-icon-wrapper {
      transform: translateY(-8px);
    }

    .dock-item.active .dock-label {
      opacity: 1;
      transform: translateY(0);
    }

    /* Indicador de Ponto */
    .dock-item.active::after {
      content: '';
      position: absolute;
      bottom: 6px;
      width: 4px;
      height: 4px;
      background: var(--dock-active);
      border-radius: 50%;
      box-shadow: 0 0 10px var(--dock-active);
    }

    /* Botão Central (Diamante) */
    .dock-item.center-action {
      flex: 1.2;
    }

    .center-btn-bg {
      width: 48px;
      height: 48px;
      background: #FFFFFF;
      border: 1px solid var(--dock-active);
      border-radius: 16px;
      transform: rotate(45deg);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 5px 15px rgba(255, 126, 103, 0.2);
      transition: all 0.3s;
      margin-bottom: 20px; /* Sobe para fora do dock */
    }

    .center-btn-content {
      transform: rotate(-45deg);
      color: var(--dock-active);
    }

    .dock-item.center-action.active .center-btn-bg {
      background: var(--dock-active);
      box-shadow: 0 5px 20px var(--dock-glow);
      border-color: var(--dock-active);
    }
    
    .dock-item.center-action.active .center-btn-content {
      color: #FFFFFF;
    }

  </style>

  <script src="https://unpkg.com/lucide@latest"></script>

  <div class="cyber-dock-container">
    <nav class="cyber-dock">
      
      <?php
      $cur = basename($_SERVER['PHP_SELF']);

      // Itens Traduzidos PT-BR + Chinês
      $menuItems = [
        [
          'link' => 'team.php',
          'icon' => 'users',
          'label' => 'Equipe 团队',
          'type' => 'normal'
        ],
        [
          'link' => 'add_bank_create.php', 
          'icon' => 'wallet',
          'label' => 'Carteira 钱包',
          'type' => 'normal'
        ],
        [
          'link' => 'index.php', // Home no Centro
          'icon' => 'home',
          'label' => 'Início 首页',
          'type' => 'center'
        ],
        [
          'link' => 'my-investments.php',
          'icon' => 'bar-chart-3',
          'label' => 'Ativos 资产',
          'type' => 'normal'
        ],
        [
          'link' => 'profile.php',
          'icon' => 'user',
          'label' => 'Perfil 我的',
          'type' => 'normal'
        ]
      ];
      ?>

      <?php foreach ($menuItems as $item): ?>
        <?php
        $isActive = (strpos($cur, $item['link']) !== false) || ($cur == '' && $item['link'] == 'index.php');
        $activeClass = $isActive ? 'active' : '';
        ?>

        <?php if ($item['type'] === 'center'): ?>
          <a href="<?= $item['link'] ?>" class="dock-item center-action <?= $activeClass ?>">
            <div class="center-btn-bg">
              <div class="center-btn-content">
                <i data-lucide="<?= $item['icon'] ?>"></i>
              </div>
            </div>
          </a>
        <?php else: ?>
          <a href="<?= $item['link'] ?>" class="dock-item <?= $activeClass ?>">
            <div class="dock-icon-wrapper">
              <i data-lucide="<?= $item['icon'] ?>"></i>
            </div>
            <span class="dock-label"><?= $item['label'] ?></span>
          </a>
        <?php endif; ?>

      <?php endforeach; ?>

    </nav>
  </div>

  <script>
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
  </script>
<?php endif; ?>