Witaj w Krainie Wikingów!

<script>
  // Welcome to Nordheim - Land of the Vikings!
  // This is your first Svelte 5 component

  // $state - values that change and refresh the screen
  let vikingName = $state('Warrior');
  let gold = $state(0);

  // $derived - computed from gold, always up to date
  let reputation = $derived(
    gold >= 500 ? 'Legendary Jarl'
      : gold >= 200 ? 'Respected Warrior'
      : gold >= 50 ? 'Promising Viking'
      : 'Young Drengr'
  );

  function raid() {
    const loot = Math.floor(Math.random() * 50) + 10;
    gold += loot;
  }
</script>

<main class="viking-hall">
  <header>
    <h1>Viking Hall</h1>
    <p class="subtitle">Nordheim - Svelte World</p>
  </header>

  <section class="welcome">
    <h2>Welcome, {vikingName}!</h2>
    <p>This is your first Svelte component - simple as a viking sword!</p>

    <div class="input-group">
      <label for="viking-name">Your name:</label>
      <input id="viking-name" bind:value={vikingName} placeholder="Enter name..." />
    </div>
  </section>

  <section class="stats">
    <h3>Your stats</h3>
    <div class="stat-grid">
      <div class="stat">
        <span class="label">Gold</span>
        <span class="value">{gold}</span>
      </div>
      <div class="stat">
        <span class="label">Reputation</span>
        <span class="value">{reputation}</span>
      </div>
    </div>

    <button onclick={raid} class="raid-btn">
      Raiding expedition!
    </button>
  </section>

  <footer>
    <p>SKÅL! May Odin be with you!</p>
  </footer>
</main>

<style>
  .viking-hall {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0f0a 0%, #2c1810 100%);
    min-height: 100vh;
    color: #e8d5b7;
  }

  header {
    text-align: center;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }

  h1 {
    color: #d4af37;
    font-size: 2rem;
    margin: 0;
  }

  .subtitle {
    color: #8b7355;
    font-style: italic;
  }

  section {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid #d4af37;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h2, h3 {
    color: #d4af37;
    margin-top: 0;
  }

  .input-group {
    margin-top: 1rem;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
    color: #d4af37;
  }

  input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #d4af37;
    background: rgba(0,0,0,0.3);
    color: #e8d5b7;
    border-radius: 4px;
    font-size: 1rem;
  }

  input:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  }

  .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .stat {
    background: rgba(0,0,0,0.3);
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
  }

  .stat .label {
    display: block;
    color: #8b7355;
    font-size: 0.9rem;
  }

  .stat .value {
    display: block;
    font-size: 1.25rem;
    color: #d4af37;
    margin-top: 0.5rem;
  }

  .raid-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #8b0000 0%, #a52a2a 100%);
    color: white;
    border: 2px solid #d4af37;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .raid-btn:hover {
    background: linear-gradient(135deg, #a52a2a 0%, #cd5c5c 100%);
    transform: scale(1.02);
  }

  footer {
    text-align: center;
    color: #8b7355;
    border-top: 1px solid #3d2914;
    padding-top: 1rem;
  }
</style>