<template>
  <div class="min-h-screen bg-[#0f172a] text-slate-300 font-mono">
    <!-- Blockchain Header -->
    <header class="h-16 border-b border-slate-800 bg-[#0f172a]/90 backdrop-blur fixed w-full z-50">
      <div class="max-w-7xl mx-auto px-4 h-full flex items-center justify-between">
        <div class="flex items-center space-x-2">
          <div class="w-6 h-6 border-2 border-blue-500 rounded animate-spin-slow"></div>
          <span class="text-xl font-bold text-white">FISCO BCOS 区块链浏览器</span>
          <span class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-xs border border-blue-500/20">测试网</span>
        </div>
        <nav class="flex space-x-6 text-sm items-center h-full">
          <router-link to="/" class="text-slate-400 hover:text-white flex items-center px-3 py-1 rounded border border-slate-700 hover:border-slate-500 transition-colors mr-2">
            <span class="mr-1">↩</span> 返回首页
          </router-link>
          
          <router-link 
            to="/blockchain/explorer" 
            class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
            active-class="text-white font-bold"
          >
            概览
            <div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
          </router-link>

          <router-link 
            to="/blockchain/blocks" 
            class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
            active-class="text-white font-bold"
          >
            区块
            <div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
          </router-link>

          <router-link 
            to="/blockchain/transactions" 
            class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
            active-class="text-white font-bold"
          >
            交易
            <div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
          </router-link>

          <router-link 
            to="/blockchain/contracts" 
            class="transition-colors hover:text-white h-full flex items-center px-2 relative group"
            active-class="text-white font-bold"
          >
            合约
            <div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 scale-x-0 group-hover:scale-x-100 transition-transform origin-center active-indicator"></div>
          </router-link>
        </nav>
      </div>
    </header>

    <!-- Main Content -->
    <main class="pt-20 pb-12 px-4 max-w-7xl mx-auto">
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup>
</script>

<style scoped>
.animate-spin-slow {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.router-link-active .active-indicator {
  transform: scaleX(1);
}
</style>
