<script lang="ts">
  import { TUTORIALS, CONCEPTS } from './guides-data.js'
</script>

<div class="pagehead">
  <div>
    <h1>Guide für Einsteiger</h1>
    <div class="sub">Praktische Workflows + die Local-LLM-Welt in Klartext — ohne Vorwissen.</div>
  </div>
</div>

<div class="card-h"><h3>Tutorials &amp; Workflows</h3></div>
<div class="card" style="padding:0;overflow:hidden">
  {#each TUTORIALS as [title, body], i}
    <details class="guide-acc" open={i === 0}>
      <summary>{title}</summary>
      <div class="acc-body">{@html body}</div>
    </details>
  {/each}
</div>

<div class="card-h" style="margin-top:8px"><h3>Konzepte kurz erklärt</h3></div>
<div class="concept-grid">
  {#each CONCEPTS as [term, text]}
    <div class="concept">
      <h4>{term}</h4>
      <p>{text}</p>
    </div>
  {/each}
</div>
