<template>
  <section id="app" class="flex flex-col min-h-screen">
    <NavBar class="fixed" />

    <main class="w-full p-4 pt-[80px]">
      <section class="grid grid-cols-7 gap-4 overflow-hidden">
        <!-- 左側：地圖 -->
        <section class="col-span-3 bg-white/50 rounded-md  shadow p-3 h-full overflow-hidden">
          <div class="w-full h-full flex items-center justify-center text-gray-500">
            <Forge />
          </div>
        </section>

        <!-- 右側：路由內容 -->
        <section class="col-span-4 h-full overflow-hidden">
          <div class="w-full h-full">
            <RouterView class="h-[calc(100vh-72px-24px)]" />
          </div>
        </section>
      </section>
    </main>
  </section>
</template>

<script setup>
import NavBar from "@/layouts/NavBar.vue";
// 延遲載入，避免首頁沒用到也被打包
import { defineAsyncComponent } from "vue";
const Forge = defineAsyncComponent(() => import("@/components/forge/Forge.vue"));
</script>
