<!-- #region ToolsHubPage [C:2] [TYPE Page] [SEMANTICS sveltekit, tools, hub, overview] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Tools hub page — overview of available tools with navigation cards. -->
<!-- @LAYER Page -->
<!--
@SEMANTICS: tools, hub, overview
@PURPOSE:   Central landing page for /tools with cards linking to each tool.
@LAYER     Page
@RELATION  IMPLEMENTS -> [EXT:frontend:RoutePages]
@UX_STATE  Ready -> Tool cards rendered as navigation links.
@UX_STATE  Empty -> No tools available (should not occur — static list).
@INVARIANT Each card links to an existing /tools/* sub-route.
@RATIONALE Created to fix 404 on /tools breadcrumb click. The breadcrumb
           "Tools" at /tools/backups links to /tools, which had no +page.svelte.
           Now shows a hub page with cards for mapper, debug, storage, backups.
-->
<script lang="ts">
  import { t } from '$lib/i18n/index.svelte.js';
  import { PageHeader, Card, Icon } from '$lib/ui';

  interface ToolItem {
    label: string;
    path: string;
    description: string;
    icon: string;
  }

  const tools: ToolItem[] = [
    {
      label: $t.nav.tools_mapper,
      path: '/tools/mapper',
      description: $t.nav.tools_mapper_desc,
      icon: 'arrows-right-left',
    },
    {
      label: $t.nav.tools_debug,
      path: '/tools/debug',
      description: $t.nav.tools_debug_desc,
      icon: 'bug',
    },
    {
      label: $t.nav.tools_storage,
      path: '/tools/storage',
      description: $t.nav.tools_storage_desc,
      icon: 'folder',
    },
    {
      label: $t.nav.tools_backups,
      path: '/tools/backups',
      description: $t.nav.tools_backups_desc,
      icon: 'archive-box',
    },
  ];
</script>

<div class="container mx-auto p-4 max-w-6xl">
  <PageHeader title={$t.nav.tools} />

  <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
    {#each tools as tool}
      <a
        href={tool.path}
        class="group block rounded-lg border border-border bg-surface-card p-5 transition-all hover:border-primary hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-ring"
      >
        <div class="flex items-start gap-4">
          <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-surface-muted text-primary group-hover:bg-primary/10 transition-colors">
            <Icon name={tool.icon} class="h-5 w-5" />
          </div>
          <div class="flex-1 min-w-0">
            <h3 class="text-base font-semibold text-text group-hover:text-primary transition-colors">
              {tool.label}
            </h3>
            <p class="mt-1 text-sm text-text-muted line-clamp-2">
              {tool.description}
            </p>
          </div>
          <svg class="h-5 w-5 flex-shrink-0 text-text-subtle group-hover:text-primary transition-colors" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
          </svg>
        </div>
      </a>
    {/each}
  </div>
</div>
<!-- #endregion ToolsHubPage -->
