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

  const features = [
    {
      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: '📊',
      color: '#1565c0'
    },
    {
      href: '/tools/privacy-scanner/',
      title: 'Privacy Scanner',
      description: 'Detect and redact personally identifiable information (PII) from text and files. Supports 30+ PII types including emails, SSN, API keys.',
      icon: '🔒',
      color: '#7b1fa2'
    },
    {
      href: '/notebooks/',
      title: 'Exploratory Data Analysis',
      description: 'Exploratory data analysis using the Gapminder dataset. Learn data wrangling, visualization, and insights extraction.',
      icon: '🌍',
      color: '#00897b'
    }
  ];
</script>

<svelte:head>
  <title>Build with AI | ValueCurve</title>
  <meta name="description" content="Data science guides, interactive tools, and insights to accelerate your journey." />
</svelte:head>

<div class="min-h-screen">
  <Navbar />

  <main>
    <Hero />

    <!-- Features Section -->
    <section class="py-20 px-6 bg-white">
      <div class="max-w-6xl mx-auto">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold text-gray-900 mb-4">Featured Resources</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">
            Practical guides and interactive tools to help you make data-driven decisions.
          </p>
        </div>

        <div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
          {#each features as feature}
            <FeatureCard {...feature} />
          {/each}
        </div>
      </div>
    </section>

    <!-- Newsletter Section -->
    <NewsletterSection />

    <!-- Coming Soon Section -->
    <section class="py-16 px-6 bg-gradient-to-b from-white to-gray-50">
      <div class="max-w-6xl mx-auto text-center">
        <h3 class="text-2xl font-semibold text-gray-900 mb-4">More Coming Soon</h3>
        <p class="text-gray-600 max-w-xl mx-auto">
          We're building more guides and interactive tools for machine learning, data visualization, and AI development.
        </p>
      </div>
    </section>
  </main>

  <Footer />
</div>
