---
const categories = [
  {
    href: "/examples/csv/",
    color: "#10b981",
    badge: "FORMAT",
    title: "CSV Processing",
    desc: "Read and write CSV files with full header support, custom delimiters, and fault-tolerant parsing.",
    features: ["csv", "json", "serde"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <path d="M3 9h18M3 15h18M9 3v18"/>
    </svg>`,
  },
  {
    href: "/examples/json/",
    color: "#3b82f6",
    badge: "FORMAT",
    title: "JSON Processing",
    desc: "Stream JSON arrays, write with pretty-printing, and transform between formats seamlessly.",
    features: ["json", "csv", "serde"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/>
      <path d="M16 3h1a2 2 0 0 1 2 2v5a2 2 0 0 0 2 2 2 2 0 0 0-2 2v5a2 2 0 0 1-2 2h-1"/>
    </svg>`,
  },
  {
    href: "/examples/xml/",
    color: "#f59e0b",
    badge: "FORMAT",
    title: "XML Processing",
    desc: "Parse XML documents with namespace support, handle nested elements and attributes.",
    features: ["xml", "json", "csv"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="16 18 22 12 16 6"/>
      <polyline points="8 6 2 12 8 18"/>
    </svg>`,
  },
  {
    href: "/examples/database/",
    color: "#8b5cf6",
    badge: "DATABASE",
    title: "Database (RDBC)",
    desc: "PostgreSQL, MySQL, and SQLite operations with paginated reads and efficient batch inserts.",
    features: ["rdbc-postgres", "rdbc-sqlite", "rdbc-mysql"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <ellipse cx="12" cy="5" rx="9" ry="3"/>
      <path d="M3 5v14a9 3 0 0 0 18 0V5"/>
      <path d="M3 12a9 3 0 0 0 18 0"/>
    </svg>`,
  },
  {
    href: "/examples/mongodb/",
    color: "#14b8a6",
    badge: "DATABASE",
    title: "MongoDB",
    desc: "Query collections, batch inserts, and cursor-based pagination for document databases.",
    features: ["mongodb", "csv", "json"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 2C8 2 6 6 6 9c0 4.5 4 7 6 13 2-6 6-8.5 6-13 0-3-2-7-6-7z"/>
    </svg>`,
  },
  {
    href: "/examples/orm/",
    color: "#ec4899",
    badge: "DATABASE",
    title: "ORM (SeaORM)",
    desc: "Type-safe entity mapping, async queries, and seamless pagination with SeaORM integration.",
    features: ["orm", "csv", "json"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <rect x="2" y="3" width="8" height="8" rx="1"/>
      <rect x="14" y="3" width="8" height="8" rx="1"/>
      <rect x="2" y="13" width="8" height="8" rx="1"/>
      <rect x="14" y="13" width="8" height="8" rx="1"/>
    </svg>`,
  },
  {
    href: "/examples/tasklets/",
    color: "#ef4444",
    badge: "OPERATIONS",
    title: "Tasklets",
    desc: "ZIP compression, FTP file transfers, and other single-task operations outside chunk processing.",
    features: ["zip", "ftp"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/>
      <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
      <path d="M12 2v2M12 20v2M2 12h2M20 12h2"/>
    </svg>`,
  },
  {
    href: "/examples/advanced-patterns/",
    color: "#00d9ff",
    badge: "PATTERNS",
    title: "Advanced Patterns",
    desc: "Multi-step ETL pipelines, error recovery, processor chains, and complex production workflows.",
    features: ["csv", "json", "logger"],
    icon: `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="18" cy="18" r="3"/>
      <circle cx="6" cy="6" r="3"/>
      <circle cx="6" cy="18" r="3"/>
      <path d="M6 9v6M9 6h9a3 3 0 0 1 3 3v6"/>
    </svg>`,
  },
];
---

<div class="eg-root">
  <div class="eg-header">
    <p class="eg-description">
      Browse examples organized by feature. Each page includes documentation
      and links to runnable source code on GitHub.
    </p>
    <div class="eg-stats">
      <div class="eg-stat">
        <span class="eg-stat-num">8</span>
        <span class="eg-stat-label">Categories</span>
      </div>
      <div class="eg-stat-sep"></div>
      <div class="eg-stat">
        <span class="eg-stat-num">24+</span>
        <span class="eg-stat-label">Examples</span>
      </div>
      <div class="eg-stat-sep"></div>
      <div class="eg-stat">
        <span class="eg-stat-num">100%</span>
        <span class="eg-stat-label">Source on GitHub</span>
      </div>
    </div>
  </div>

  <div class="eg-grid">
    {categories.map((cat) => (
      <a href={cat.href} class="eg-card" style={`--cat: ${cat.color}`}>
        <div class="eg-card-glow" aria-hidden="true"></div>
        <div class="eg-card-top">
          <div class="eg-icon" set:html={cat.icon} />
          <span class="eg-badge">{cat.badge}</span>
        </div>
        <h3 class="eg-title">{cat.title}</h3>
        <p class="eg-desc">{cat.desc}</p>
        <div class="eg-features">
          {cat.features.map((f) => <span class="eg-tag">{f}</span>)}
        </div>
        <div class="eg-cta">
          <span>View examples</span>
          <svg class="eg-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </a>
    ))}
  </div>
</div>

<style>
  .eg-root {
    margin-top: 1.5rem;
  }

  /* ── Header ── */
  .eg-header {
    margin-bottom: 2rem;
  }

  .eg-description {
    color: var(--sl-color-gray-2);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
  }

  .eg-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .eg-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .eg-stat-num {
    font-family: var(--font-secondary, "Space Grotesk", sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sl-color-white);
    line-height: 1;
  }

  .eg-stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sl-color-gray-3);
  }

  .eg-stat-sep {
    width: 1px;
    height: 2rem;
    background: var(--sl-color-gray-6);
  }

  /* ── Grid ── */
  .eg-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  @media (min-width: 640px) {
    .eg-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .eg-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
  }

  /* ── Card ── */
  .eg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0.875rem;
    border: 1px solid var(--sl-color-gray-6);
    background: var(--sl-color-bg);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }

  .eg-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cat);
    opacity: 0.6;
    transition: opacity 0.25s ease;
  }

  .eg-card:hover {
    border-color: color-mix(in srgb, var(--cat) 40%, transparent);
    transform: translateY(-2px);
  }

  .eg-card:hover::before {
    opacity: 1;
  }

  /* Glow effect */
  .eg-card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--cat);
    opacity: 0;
    filter: blur(40px);
    transition: opacity 0.35s ease;
    pointer-events: none;
  }

  .eg-card:hover .eg-card-glow {
    opacity: 0.12;
  }

  /* ── Card Top ── */
  .eg-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .eg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--cat) 15%, transparent);
    color: var(--cat);
    flex-shrink: 0;
    transition: background 0.25s ease;
  }

  .eg-card:hover .eg-icon {
    background: color-mix(in srgb, var(--cat) 22%, transparent);
  }

  .eg-badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cat);
    background: color-mix(in srgb, var(--cat) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cat) 25%, transparent);
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    white-space: nowrap;
  }

  /* ── Card Content ── */
  .eg-title {
    font-family: var(--font-secondary, "Space Grotesk", sans-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sl-color-white);
    margin: 0;
    line-height: 1.3;
    border: none;
  }

  /* override Starlight h3 styles inside cards */
  .eg-card .eg-title {
    padding: 0;
    border-bottom: none;
  }

  .eg-desc {
    font-size: 0.825rem;
    color: var(--sl-color-gray-3);
    line-height: 1.55;
    margin: 0;
    flex: 1;
  }

  /* ── Feature tags ── */
  .eg-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .eg-tag {
    font-size: 0.65rem;
    font-family: var(--sl-font-mono, monospace);
    color: var(--sl-color-gray-3);
    background: var(--sl-color-gray-6);
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    letter-spacing: 0.02em;
  }

  /* ── CTA ── */
  .eg-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cat);
    margin-top: auto;
    transition: gap 0.2s ease;
  }

  .eg-arrow {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .eg-card:hover .eg-arrow {
    transform: translateX(3px);
  }

  .eg-card:hover .eg-cta {
    gap: 0.55rem;
  }
</style>
