<script>
  import { getContext } from 'svelte';
  import ThemeSelector from '$lib/components/ThemeSelector.svelte';

  const themeStore = getContext('theme');
  let currentTheme = $themeStore;
  
  $: themeStore.set(currentTheme);
</script>

<div class="home-wrapper">
  <div class="home-container">
    <div class="home-window">
      <div class="home-title-bar">
        <span>A Sludge & Friends game</span>
      </div>
      
      <div class="home-content">
        <h1 class="title">On the Spectrum!</h1>
        <p class="subtitle">Well.. are ya?</p>
        
        <div class="tabs">
          <a href="/play" class="tab-button">
            <span class="tab-icon">🎮</span>
            <span>Play</span>
          </a>
          <a href="/rules" class="tab-button">
            <span class="tab-icon">📖</span>
            <span>Rules</span>
          </a>
        </div>

        <div class="theme-selector-container">
          <fieldset>
            <legend>Theme Selector</legend>
            <ThemeSelector bind:currentTheme />
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .home-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .home-container {
    width: 100%;
    max-width: 700px;
  }

  .home-window {
    width: 100%;
  }

  .home-content {
    padding: 40px;
    text-align: center;
  }

  .title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    line-height: 1.2;
  }

  .subtitle {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
  }

  .tabs {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
  }

  .tab-button {
    border: none;
    border-radius: 10px;
    padding: 25px 40px;
    font-size: 1.3rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    text-decoration: none;
  }

  .tab-icon {
    font-size: 2.5rem;
  }

  .theme-selector-container {
    margin-top: 2rem;
  }

  .theme-selector-container fieldset {
    padding: 20px;
  }

  .theme-selector-container legend {
    font-weight: bold;
    padding: 0 10px;
  }

  @media (max-width: 768px) {
    .title {
      font-size: 2rem;
    }

    .subtitle {
      font-size: 1.1rem;
    }

    .tab-button {
      padding: 20px 30px;
      font-size: 1.1rem;
      min-width: 150px;
    }

    .tab-icon {
      font-size: 2rem;
    }

    .home-content {
      padding: 30px 20px;
    }
  }
</style>