---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/pages/about.astro
 * Desc   : About page — what SVGarden is and how to use the snippets
 * ============================================================
 */
import Base from '../layouts/Base.astro';
import { loadSnippets, loadCategories } from '../lib/snippets.mjs';

const snippets = await loadSnippets();
const categories = await loadCategories();
---

<Base title="About — SVGarden" description="What SVGarden is, how the snippets work, and how to use them in your own projects.">
  <article class="sg-about">
    <h1>About SVGarden</h1>
    <p>
      SVGarden is a growing bank of <strong>{snippets.length} SVG + CSS animations</strong> across
      {categories.length} categories — loaders, stroke drawing, hover effects, gauges, animated text,
      shape morphs and backgrounds. It is built and maintained by
      <a href="mailto:contact@spboucher.ai">Simon-Pierre Boucher</a>.
    </p>

    <h2>The rules every snippet follows</h2>
    <ul>
      <li><strong>Self-contained</strong> — paste any snippet into a blank <code>.html</code> file and it works. No frameworks, no CDNs, no fonts, no build step.</li>
      <li><strong>Scoped</strong> — every class is prefixed <code>sg-</code>, so multiple snippets coexist on one page without collisions.</li>
      <li><strong>Customizable</strong> — colors, sizes and speeds are CSS custom properties (<code>--sg-*</code>) on the root element. The customizer on each page rewrites them live.</li>
      <li><strong>Pedagogical</strong> — each snippet ships with a short “How it works” explaining the technique, not just the code.</li>
      <li><strong>Accessible</strong> — decorative SVGs are <code>aria-hidden</code>; meaningful ones get <code>role="img"</code> and a <code>&lt;title&gt;</code>.</li>
    </ul>

    <h2>How to use a snippet</h2>
    <p>
      Open any snippet, tweak it with the customizer, then <em>Copy code</em> (or <em>Download .html</em>).
      The attribution header travels with the code — you're free to use the snippets in your projects;
      keeping the header is appreciated.
    </p>

    <h2>Colophon</h2>
    <p>
      Built with Astro, highlighted at build time with Shiki, searched client-side with a lazy-loaded
      Fuse.js. The site itself is styled with the same vanilla CSS techniques the snippets teach —
      no CSS frameworks anywhere.
    </p>
  </article>
</Base>