<script lang="ts">
  import Navbar from '$lib/components/Navbar.svelte';
  import Footer from '$lib/components/Footer.svelte';
  import ResourceCard from '$lib/components/ResourceCard.svelte';

  const guides = [
    {
      href: '/guides/statistical-tests/',
      title: 'Statistical Tests',
      description: 'A comprehensive guide to choosing the right statistical test. Interactive fishbone diagram to navigate parametric vs non-parametric options.',
      icon: '📊',
      category: 'STATISTICS',
      status: 'live' as const
    },
    {
      href: '#',
      title: 'Data Visualization',
      description: 'Learn the principles of effective data visualization. From choosing the right chart type to creating compelling visual narratives.',
      icon: '📈',
      category: 'VISUALIZATION',
      status: 'coming-soon' as const
    },
    {
      href: '#',
      title: 'ML Model Selection',
      description: 'A practical guide to selecting the right machine learning model for your problem. Decision trees, neural networks, and more.',
      icon: '🤖',
      category: 'ML',
      status: 'coming-soon' as const
    },
    {
      href: '#',
      title: 'Feature Engineering',
      description: 'Transform raw data into meaningful features. Best practices for numerical, categorical, and text data.',
      icon: '🔧',
      category: 'ML',
      status: 'coming-soon' as const
    }
  ];

  let searchQuery = $state('');
  let selectedCategory = $state('all');

  const categories = ['all', 'STATISTICS', 'VISUALIZATION', 'ML'];

  const filteredGuides = $derived(
    guides.filter(guide => {
      const matchesSearch = guide.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
                           guide.description.toLowerCase().includes(searchQuery.toLowerCase());
      const matchesCategory = selectedCategory === 'all' || guide.category === selectedCategory;
      return matchesSearch && matchesCategory;
    })
  );
</script>

<svelte:head>
  <title>Guides | Build with AI</title>
  <meta name="description" content="In-depth guides for statistics, data visualization, and machine learning." />
</svelte:head>

<div class="min-h-screen bg-gradient-to-b from-slate-50 to-white">
  <Navbar />

  <main class="pt-24 pb-16 px-6">
    <div class="max-w-6xl mx-auto">
      <!-- Header -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Guides</h1>
        <p class="text-gray-600 max-w-2xl mx-auto">
          In-depth guides to help you understand statistics, data visualization, and machine learning concepts.
        </p>
      </div>

      <!-- Search & Filters -->
      <div class="flex flex-col sm:flex-row gap-4 mb-8">
        <div class="flex-1">
          <input
            type="text"
            placeholder="Search guides..."
            bind:value={searchQuery}
            class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all"
          />
        </div>
        <select
          bind:value={selectedCategory}
          class="px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 bg-white"
        >
          <option value="all">All Categories</option>
          {#each categories.filter(c => c !== 'all') as category}
            <option value={category}>{category}</option>
          {/each}
        </select>
      </div>

      <!-- Guides Grid -->
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {#each filteredGuides as guide}
          <ResourceCard {...guide} />
        {/each}
      </div>

      {#if filteredGuides.length === 0}
        <div class="text-center py-12">
          <p class="text-gray-500">No guides found matching your criteria.</p>
        </div>
      {/if}
    </div>
  </main>

  <Footer />
</div>
