<script lang="ts">
  import { getCategoriesWithCounts, calculators } from '$lib/data/calculators';
  import CategoryCard from '$lib/components/CategoryCard.svelte';
  import SearchBar from '$lib/components/SearchBar.svelte';

  const cats = getCategoriesWithCounts();
  const totalCalculators = calculators.length;
  const totalCategories = cats.length;
</script>

<svelte:head>
  <title>HowDoYouConvert.com — Free Unit Conversion Calculators</title>
  <meta name="description" content="Convert between hundreds of units instantly. Free online calculators for length, weight, temperature, volume, area, speed, energy, power, data and more." />
</svelte:head>

<section class="hero">
  <h1>How Do You Convert?</h1>
  <p>Fast, bidirectional unit conversions with no ads.</p>
  <div class="search-center">
    <SearchBar />
  </div>
</section>

<div class="stats-row">
  <div class="stat">
    <div class="stat-num">{totalCalculators}</div>
    <div class="stat-label">Converters</div>
  </div>
  <div class="stat">
    <div class="stat-num">{totalCategories}</div>
    <div class="stat-label">Categories</div>
  </div>
</div>

<section class="category-section">
  <div class="category-section__inner">
    <h2 class="section-heading">Browse by Category</h2>
    <div class="category-grid">
      {#each cats as cat}
        <CategoryCard icon={cat.icon} label={cat.label} href="/category/{cat.key}" />
      {/each}
    </div>
  </div>
</section>
