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

<div class="pagehead">
  <div>
    <h1>Guide</h1>
    <div class="sub">Schritt für Schritt erklärt — von der ersten Einrichtung bis zu echten Agenten-Workflows.</div>
  </div>
</div>

{#each GUIDE_GROUPS as group, gi}
  <div class="card guide-card">
    <div class="guide-group-hd">{group.label}</div>
    {#each group.tutorials as [title, body], i}
      <details class="guide-acc" open={gi === 0 && i === 0}>
        <summary>{title}</summary>
        <div class="acc-body">{@html body}</div>
      </details>
    {/each}
  </div>
{/each}

<div class="card-h" style="margin-top:8px"><h3>Begriffe 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>

<style>
  .guide-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: 8px;
  }

  .guide-group-hd {
    padding: 9px 18px 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(45, 212, 191, 0.06);
    border-bottom: 1px solid var(--line);
  }

  /* Comparison / info tables inside acc-body */
  :global(.tut-table) {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
    font-size: 12.5px;
  }
  :global(.tut-row) {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-bottom: 1px solid var(--line);
  }
  :global(.tut-row:last-child) { border-bottom: none; }
  :global(.tut-cell-hd) {
    padding: 10px 14px;
    font-weight: 500;
    border-right: 1px solid var(--line);
    background: rgba(255,255,255,.025);
    line-height: 1.5;
  }
  :global(.tut-cell-hd.bad) {
    color: var(--mut);
    text-decoration: line-through;
    font-style: italic;
  }
  :global(.tut-cell-bd) {
    padding: 10px 14px;
    line-height: 1.6;
    color: var(--fg);
  }

  /* Source / link lines at bottom of tutorials */
  :global(.tut-sources) {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--mut);
  }
  :global(.tut-sources a) {
    color: var(--accent);
    text-decoration: none;
  }
  :global(.tut-sources a:hover) { text-decoration: underline; }

  /* Code blocks inside tutorials */
  :global(.tut-code) {
    display: block;
    background: var(--bg, #0d0d0d);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: monospace;
    font-size: 11.5px;
    line-height: 1.65;
    white-space: pre;
    overflow-x: auto;
    margin: 10px 0;
    color: var(--fg);
  }
</style>
