<template>
  <div>
    <div class="page-header">
      <h1>Tech Tools</h1>
    </div>

    <div class="filters">
      <input
        v-model="search"
        type="text"
        class="form-control"
        placeholder="Search tools..."
      />
    </div>

    <div v-for="group in groups" :key="group.category" class="tool-group">
      <h2 class="group-title">{{ group.label }}</h2>
      <div class="tools-grid">
        <router-link
          v-for="tool in group.tools"
          :key="tool.id"
          :to="tool.route"
          class="tool-card card"
        >
          <h3>{{ tool.name }}</h3>
          <p>{{ tool.description }}</p>
          <span class="badge">{{ group.label }}</span>
        </router-link>
      </div>
    </div>

    <div v-if="!groups.length" class="empty-state">
      No tools match your search.
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { groupTools } from '../tools'

const search = ref('')
const groups = computed(() => groupTools(search.value))
</script>

<style scoped>
.tool-group {
  margin-bottom: 2rem;
}

.group-title {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.tool-card {
  padding: 1.25rem;
  cursor: pointer;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.tool-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.tool-card p {
  margin: 0 0 0.75rem;
  color: var(--text-light);
  font-size: 0.875rem;
}

.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--text-light);
}
</style>
