<script>
  // 안전 자료실 (safety-library-1 Phase 3) — 재해/법령·지침/서적·표준·매뉴얼 3탭.
  import { page } from '$app/stores';

  const TABS = [
    { href: '/safety/incidents', label: '재해사례' },
    { href: '/safety/laws', label: '법령·지침' },
    { href: '/safety/materials', label: '서적·표준·매뉴얼' },
  ];
</script>

<div class="max-w-5xl mx-auto px-4 py-5 flex flex-col gap-4">
  <header>
    <h1 class="text-lg font-bold text-text">안전 자료실</h1>
    <p class="text-xs text-dim mt-0.5">재해사례·법령·지침·표준 — 자료유형(material_type) 축 기반</p>
  </header>

  <nav class="flex gap-1 border-b border-default" aria-label="안전 자료실 탭">
    {#each TABS as tab}
      <a
        href={tab.href}
        aria-current={$page.url.pathname === tab.href ? 'page' : undefined}
        class="px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors
          {$page.url.pathname === tab.href
            ? 'border-accent text-accent'
            : 'border-transparent text-dim hover:text-text'}"
      >
        {tab.label}
      </a>
    {/each}
  </nav>

  <slot />
</div>
