---
import { getCollection } from 'astro:content';
import Base from '../../layouts/Base.astro';
import '../../styles/sub-pages.css';

const tutorials = (await getCollection('tutorials'))
  .sort((a, b) => a.data.order - b.data.order);
---

<Base
  title="Tutorials | Impeccable"
  description="Step-by-step guides for getting started with Impeccable, from first install to live browser iteration."
  activeNav="docs"
  canonicalPath="/tutorials"
  bodyClass="sub-page"
>
  <div class="tutorials-index">
    <header class="tutorials-index-header">
      <h1 class="sub-page-title">Tutorials</h1>
      <p class="sub-page-lede">Step-by-step guides, from first install to live browser iteration.</p>
    </header>

    <div class="tutorials-list">
      {tutorials.map((t, i) => (
        <a href={`/tutorials/${t.id}`} class="tutorial-card">
          <span class="tutorial-card-num">{String(i + 1).padStart(2, '0')}</span>
          <div>
            <h2 class="tutorial-card-title">{t.data.title}</h2>
            <p class="tutorial-card-desc">{t.data.description}</p>
          </div>
        </a>
      ))}
    </div>
  </div>

  <style>
    .tutorials-index { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
    .tutorials-index-header { margin-bottom: 2rem; }
    .tutorials-list { display: flex; flex-direction: column; gap: 1rem; }
    .tutorial-card {
      display: flex; gap: 1.25rem; align-items: flex-start;
      padding: 1.25rem; border-radius: 8px; border: 1px solid var(--color-mist);
      text-decoration: none; color: inherit;
      transition: border-color 0.15s ease;
    }
    .tutorial-card:hover { border-color: var(--color-accent); }
    .tutorial-card-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-ash); flex-shrink: 0; padding-top: 0.125rem; }
    .tutorial-card-title { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
    .tutorial-card-desc { font-size: 0.875rem; color: var(--color-ash); margin: 0; line-height: 1.5; }
  </style>
</Base>