{% extends "main.html" %}

{#-
  Home page renderer — content/presentation split.

  ALL copy lives in the page frontmatter (docs/index.md / docs/index.zh.md,
  key `home:`), one block per locale; this template is a pure rendering
  engine. Section schema:

    hero:      {badge, title(html), subtitle, install,
                primary:{label,ref}, secondary:{label,url}}
    sections:  list of
      cards:       {title, subtitle?, lead(html)?, command?, muted?, two?,
                    cards:[{icon, title, text(html), bullets?:[{text(html)}|{label,ref}],
                            link?:{label,ref}, chip?}]}
      comparison:  {title, subtitle?, muted?, stack?,
                    bad:{title, code}, good:{title, code},
                    deliveries?:[{icon, title, text, code}]}
      integrations:{title, subtitle?, badges:[{icon, label, ref}]}
      cta:         {title, subtitle, primary:{label,ref}, secondary:{label,url}}

  `ref` values are docs page refs passed through the `url` filter; `url`
  values are absolute links. HTML is allowed in text/lead/title fields.
-#}

{% macro feature_card(c) %}
<div class="sn-feature-card">
  <div class="sn-feature-icon">{{ c.icon }}</div>
  <h3>{{ c.title }}</h3>
  <p>{{ c.text }}{% if c.link %} <a href="{{ c.link.ref | url }}">{{ c.link.label }}</a>{% endif %}</p>
  {% if c.bullets %}
  <ul>
    {% for b in c.bullets %}
    {% if b.ref %}<li><a href="{{ b.ref | url }}">{{ b.label }}</a></li>
    {%- else %}<li>{{ b.text }}</li>{% endif %}
    {% endfor %}
  </ul>
  {% endif %}
  {% if c.chip %}<span class="sn-chip">{{ c.chip }}</span>{% endif %}
</div>
{% endmacro %}

{% macro section_header(s) %}
<div class="sn-section-header">
  <h2>{{ s.title }}</h2>
  {% if s.subtitle %}<p>{{ s.subtitle }}</p>{% endif %}
</div>
{% endmacro %}

{% macro cards_section(s) %}
<section class="sn-features{% if s.muted %} sn-features--muted{% endif %}">
  {{ section_header(s) }}
  {% if s.lead %}<p class="sn-lead">{{ s.lead }}</p>{% endif %}
  {% if s.command %}
  <div class="sn-command">
    <div class="sn-hero__install">
      <code>{{ s.command }}</code>
      <button class="sn-copy-btn" onclick="navigator.clipboard.writeText('{{ s.command }}').then(function(btn){btn.innerHTML='✓';setTimeout(function(){btn.innerHTML='<svg width=\\'16\\' height=\\'16\\' viewBox=\\'0 0 24 24\\' fill=\\'none\\' stroke=\\'currentColor\\' stroke-width=\\'2\\' stroke-linecap=\\'round\\' stroke-linejoin=\\'round\\'><rect x=\\'9\\' y=\\'9\\' width=\\'13\\' height=\\'13\\' rx=\\'2\\' ry=\\'2\\'/><path d=\\'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\\'/></svg>'},1500)}.bind(this,this))">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
      </button>
    </div>
  </div>
  {% endif %}
  <div class="sn-features__grid{% if s.two %} sn-features__grid--two{% endif %}">
    {% for c in s.cards %}{{ feature_card(c) }}{% endfor %}
  </div>
</section>
{% endmacro %}

{% macro code_panel(kind, p) %}
<div class="sn-code-panel sn-code-panel--{{ kind }}">
  <div class="sn-code-panel__header">
    <span class="sn-code-panel__title">{{ p.title }}</span>
  </div>
  <div class="sn-code-panel__body">
<pre><code class="language-python">{{ p.code }}</code></pre>
  </div>
</div>
{% endmacro %}

{% macro comparison_section(s) %}
<section class="sn-comparison{% if s.muted %} sn-features--muted{% endif %}">
  {{ section_header(s) }}
  <div class="sn-comparison__panels{% if s.stack %} sn-comparison__panels--stack{% endif %}">
    {{ code_panel("bad", s.bad) }}
    {{ code_panel("good", s.good) }}
  </div>
  {% if s.deliveries %}
  <div class="sn-deliveries">
    {% for d in s.deliveries %}
    <div class="sn-delivery">
      <div class="sn-delivery__icon">{{ d.icon }}</div>
      <h4>{{ d.title }}</h4>
      <p>{{ d.text }}</p>
      <code>{{ d.code }}</code>
    </div>
    {% endfor %}
  </div>
  {% endif %}
</section>
{% endmacro %}

{% macro integrations_section(s) %}
<section class="sn-integrations">
  {{ section_header(s) }}
  <div class="sn-integrations__grid">
    {% for b in s.badges %}
    <a href="{{ b.ref | url }}" class="sn-integration-badge">
      <span class="sn-integration-icon">{{ b.icon }}</span> {{ b.label }}
    </a>
    {% endfor %}
  </div>
</section>
{% endmacro %}

{% macro cta_section(s) %}
<section class="sn-cta">
  <div class="sn-container">
    <h2>{{ s.title }}</h2>
    <p>{{ s.subtitle }}</p>
    <div class="sn-cta__actions">
      <a href="{{ s.primary.ref | url }}" class="sn-btn sn-btn--primary">{{ s.primary.label }}</a>
      <a href="{{ s.secondary.url }}" class="sn-btn sn-btn--secondary" target="_blank" rel="noopener">{{ s.secondary.label }}</a>
    </div>
  </div>
</section>
{% endmacro %}

{% block tabs %}
{{ super() }}

{% set home = page.meta.home if page.meta else none %}

<style>
  /* ========== CSS Variables (Notion-like flat palette) ========== */
  :root {
    --sn-surface: #ffffff;
    --sn-surface-muted: #f7f7f5;
    --sn-surface-hover: #fbfbfa;
    --sn-text: #37352f;
    --sn-text-secondary: #787774;
    --sn-border: #e9e9e7;
    --sn-border-strong: #d9d9d6;
    --sn-accent: #2383e2;
    --sn-ink: #191918;
    --sn-ink-hover: #2f2f2d;
    --sn-code-bg: #f7f7f5;
    --sn-danger: #eb5757;
    --sn-success: #0f9960;
  }

  [data-md-color-scheme="slate"] {
    --sn-surface: #191919;
    --sn-surface-muted: #252525;
    --sn-surface-hover: #1f1f1f;
    --sn-text: #e6e6e4;
    --sn-text-secondary: #9b9b98;
    --sn-border: #2f2f2f;
    --sn-border-strong: #3d3d3d;
    --sn-accent: #4a9ee8;
    --sn-ink: #e8e8e6;
    --sn-ink-hover: #d4d4d2;
    --sn-code-bg: #252525;
    --sn-danger: #ff7369;
    --sn-success: #4dab9a;
  }

  /* ========== Base Layout ========== */
  .sn-page {
    background: var(--sn-surface);
    color: var(--sn-text);
    overflow-x: hidden;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
  }

  .sn-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ========== Hero Section ========== */
  .sn-hero {
    padding: 96px 24px 72px;
    text-align: center;
    background: var(--sn-surface);
  }

  .sn-hero__inner {
    max-width: 800px;
    margin: 0 auto;
  }

  .sn-hero__badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid var(--sn-border);
    color: var(--sn-text-secondary);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 28px;
  }

  .sn-hero__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--sn-text);
    margin: 0 0 20px;
    line-height: 1.15;
    letter-spacing: -0.03em;
  }

  .sn-hero__subtitle {
    font-size: 1.18rem;
    color: var(--sn-text-secondary);
    margin: 0 0 36px;
    line-height: 1.65;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }

  .sn-hero__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .sn-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .sn-btn--primary {
    background: var(--sn-ink);
    color: var(--sn-surface);
  }

  .sn-btn--primary:hover {
    background: var(--sn-ink-hover);
  }

  .sn-btn--secondary {
    background: transparent;
    color: var(--sn-text);
    border-color: var(--sn-border-strong);
  }

  .sn-btn--secondary:hover {
    background: var(--sn-surface-muted);
  }

  .sn-hero__install {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--sn-code-bg);
    border: 1px solid var(--sn-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-family: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    color: var(--sn-text);
  }

  .sn-hero__install code {
    background: none;
    color: inherit;
    font-size: inherit;
    padding: 0;
  }

  .sn-copy-btn {
    background: transparent;
    border: none;
    color: var(--sn-text-secondary);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
  }

  .sn-copy-btn:hover {
    background: var(--sn-surface-muted);
    color: var(--sn-text);
  }

  .sn-copy-btn svg {
    width: 15px;
    height: 15px;
    vertical-align: middle;
  }

  /* ========== Sections ========== */
  .sn-features,
  .sn-comparison,
  .sn-integrations {
    padding: 72px 24px;
    background: var(--sn-surface);
  }

  .sn-features--muted {
    background: var(--sn-surface-muted);
  }

  .sn-section-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .sn-section-header h2 {
    font-size: 1.7rem;
    font-weight: 650;
    color: var(--sn-text);
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  .sn-section-header p {
    font-size: 1rem;
    color: var(--sn-text-secondary);
    margin: 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
  }

  .sn-features__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Two-card variant (For AI/Human, two graphs) */
  .sn-features__grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 780px;
  }

  .sn-feature-card {
    background: var(--sn-surface);
    border: 1px solid var(--sn-border);
    border-radius: 8px;
    padding: 24px 22px;
    transition: background 0.15s, border-color 0.15s;
  }

  .sn-features--muted .sn-feature-card {
    background: var(--sn-surface);
  }

  .sn-feature-card:hover {
    background: var(--sn-surface-hover);
    border-color: var(--sn-border-strong);
  }

  .sn-feature-icon {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 14px;
  }

  .sn-feature-card h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--sn-text);
    letter-spacing: -0.01em;
  }

  .sn-feature-card p {
    font-size: 0.9rem;
    color: var(--sn-text-secondary);
    margin: 0;
    line-height: 1.6;
  }

  .sn-feature-card p a,
  .sn-feature-card li a {
    color: var(--sn-accent);
    text-decoration: none;
  }

  .sn-feature-card p a:hover,
  .sn-feature-card li a:hover {
    text-decoration: underline;
  }

  .sn-feature-card ul {
    margin: 10px 0 0;
    padding-left: 18px;
  }

  .sn-feature-card li {
    font-size: 0.9rem;
    color: var(--sn-text-secondary);
    line-height: 1.65;
  }

  .sn-feature-card li strong {
    color: var(--sn-text);
    font-weight: 600;
  }

  /* Inline-code chip (graph entry points) */
  .sn-chip {
    display: inline-block;
    margin-top: 14px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(135,131,120,0.15);
    color: var(--sn-text);
    font-family: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
  }

  /* Delivery mini-cards (five-deliveries section) */
  .sn-deliveries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    max-width: 1500px;
    margin: 24px auto 0;
  }

  .sn-delivery {
    border: 1px solid var(--sn-border);
    border-radius: 8px;
    padding: 14px 16px;
    background: var(--sn-surface);
    transition: background 0.15s, border-color 0.15s;
  }

  .sn-delivery:hover {
    background: var(--sn-surface-hover);
    border-color: var(--sn-border-strong);
  }

  .sn-delivery__icon {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 8px;
  }

  .sn-delivery h4 {
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--sn-text);
  }

  .sn-delivery p {
    font-size: 0.78rem;
    color: var(--sn-text-secondary);
    margin: 0 0 8px;
    line-height: 1.5;
  }

  .sn-delivery code {
    display: block;
    font-family: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--sn-text);
    background: rgba(135,131,120,0.15);
    border-radius: 4px;
    padding: 3px 7px;
    overflow-wrap: anywhere;
  }

  /* Centered install-command row (cards sections with a `command`) */
  .sn-command {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  /* Lead answer paragraph (pain-point section) */
  .sn-lead {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--sn-text-secondary);
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .sn-lead strong {
    color: var(--sn-text);
    font-weight: 600;
  }

  /* ========== Code Comparison Section ========== */
  .sn-comparison__panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
  }

  /* Stacked variant: panels flow top→bottom, tied to the content below */
  .sn-comparison__panels--stack {
    grid-template-columns: 1fr;
    max-width: 920px;
  }

  .sn-code-panel {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--sn-border);
    display: flex;
    flex-direction: column;
    background: var(--sn-surface);
  }

  .sn-code-panel__header {
    padding: 10px 16px;
    background: var(--sn-surface);
    border-bottom: 1px solid var(--sn-border);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .sn-code-panel__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sn-text-secondary);
  }

  .sn-code-panel--bad .sn-code-panel__title::before { content: "✕  "; color: var(--sn-danger); }
  .sn-code-panel--good .sn-code-panel__title::before { content: "✓  "; color: var(--sn-success); }

  .sn-code-panel__body {
    padding: 18px;
    background: var(--sn-code-bg);
    flex: 1;
  }

  .sn-code-panel__body pre {
    margin: 0;
    padding: 0;
    background: none !important;
    font-size: 0.82rem;
    line-height: 1.7;
    overflow-x: auto;
  }

  .sn-code-panel__body code {
    background: none !important;
    font-size: inherit;
    padding: 0;
  }

  /* Syntax highlighting — client-side highlight.js, bridged to the
     page's Notion-ish token palette (code itself stays plain text) */
  .sn-code-panel__body pre code.hljs {
    background: transparent;
    padding: 0;
  }
  .sn-code-panel__body .hljs-keyword,
  .sn-code-panel__body .hljs-meta { color: #8f5c3f; font-weight: 600; }
  .sn-code-panel__body .hljs-string { color: #0f9960; }
  .sn-code-panel__body .hljs-comment { color: #9b9b98; font-style: italic; }
  .sn-code-panel__body .hljs-number { color: #a05c16; }
  .sn-code-panel__body .hljs-title.function_ { color: #2383e2; }
  .sn-code-panel__body .hljs-title.class_,
  .sn-code-panel__body .hljs-built_in,
  .sn-code-panel__body .hljs-literal { color: #6f6c66; }

  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-keyword,
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-meta { color: #d0845f; }
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-string { color: #4dab9a; }
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-comment { color: #737273; }
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-number { color: #d19a66; }
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-title.function_ { color: #4a9ee8; }
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-title.class_,
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-built_in,
  [data-md-color-scheme="slate"] .sn-code-panel__body .hljs-literal { color: #a5a29c; }

  /* ========== Integrations Section ========== */
  .sn-integrations__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
  }

  .sn-integration-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--sn-surface);
    border: 1px solid var(--sn-border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sn-text);
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
  }

  .sn-integration-badge:hover {
    border-color: var(--sn-border-strong);
    background: var(--sn-surface-hover);
  }

  .sn-integration-icon {
    font-size: 1.1rem;
  }

  /* ========== CTA Section ========== */
  .sn-cta {
    padding: 72px 24px;
    text-align: center;
    background: var(--sn-surface-muted);
  }

  .sn-cta h2 {
    font-size: 1.7rem;
    font-weight: 650;
    color: var(--sn-text);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
  }

  .sn-cta p {
    font-size: 1rem;
    color: var(--sn-text-secondary);
    margin: 0 0 28px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
  }

  .sn-cta .sn-cta__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* ========== Footer ========== */
  .sn-footer {
    padding: 28px 24px;
    text-align: center;
    border-top: 1px solid var(--sn-border);
    background: var(--sn-surface);
  }

  .sn-footer p {
    font-size: 0.83rem;
    color: var(--sn-text-secondary);
    margin: 0;
  }

  .sn-footer a {
    color: var(--sn-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--sn-border-strong);
  }

  .sn-footer a:hover {
    color: var(--sn-text);
  }

  /* ========== Responsive ========== */
  @media (max-width: 768px) {
    .sn-hero {
      padding: 64px 20px 48px;
    }

    .sn-hero__title {
      font-size: 2.1rem;
    }

    .sn-hero__subtitle {
      font-size: 1.02rem;
    }

    .sn-features,
    .sn-comparison,
    .sn-integrations {
      padding: 56px 20px;
    }

    .sn-features__grid,
    .sn-features__grid--two {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .sn-comparison__panels {
      grid-template-columns: 1fr;
    }

    .sn-section-header h2 {
      font-size: 1.4rem;
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    .sn-features__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>

{% if home %}
<div class="sn-page">

  <!-- ==================== Hero ==================== -->
  <section class="sn-hero">
    <div class="sn-hero__inner">
      <div class="sn-hero__badge">{{ home.hero.badge }}</div>
      <h1 class="sn-hero__title">{{ home.hero.title }}</h1>
      <p class="sn-hero__subtitle">{{ home.hero.subtitle }}</p>
      <div class="sn-hero__actions">
        <a href="{{ home.hero.primary.ref | url }}" class="sn-btn sn-btn--primary">
          {{ home.hero.primary.label }}
        </a>
        <a href="{{ home.hero.secondary.url }}" class="sn-btn sn-btn--secondary" target="_blank" rel="noopener">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
          {{ home.hero.secondary.label }}
        </a>
      </div>
      <div class="sn-hero__install">
        <code>{{ home.hero.install }}</code>
        <button class="sn-copy-btn" onclick="navigator.clipboard.writeText('{{ home.hero.install }}').then(function(btn){btn.innerHTML='✓';setTimeout(function(){btn.innerHTML='<svg width=\\'16\\' height=\\'16\\' viewBox=\\'0 0 24 24\\' fill=\\'none\\' stroke=\\'currentColor\\' stroke-width=\\'2\\' stroke-linecap=\\'round\\' stroke-linejoin=\\'round\\'><rect x=\\'9\\' y=\\'9\\' width=\\'13\\' height=\\'13\\' rx=\\'2\\' ry=\\'2\\'/><path d=\\'M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\\'/></svg>'},1500)}.bind(this,this))">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
        </button>
      </div>
    </div>
  </section>

  {% for s in home.sections %}
    {% if s.type == "cards" %}{{ cards_section(s) }}
    {% elif s.type == "comparison" %}{{ comparison_section(s) }}
    {% elif s.type == "integrations" %}{{ integrations_section(s) }}
    {% elif s.type == "cta" %}{{ cta_section(s) }}
    {% endif %}
  {% endfor %}

  <!-- ==================== Footer ==================== -->
  <footer class="sn-footer">
    <div class="sn-container">
      <p>
        nexusx &middot; MIT License &middot; <a href="https://github.com/allmonday" target="_blank" rel="noopener">tangkikodo</a>
        &middot; <a href="https://github.com/allmonday/nexusx" target="_blank" rel="noopener">GitHub</a>
      </p>
    </div>
  </footer>

</div>

<!-- Code highlighting: plain code blocks above are colored client-side.
     Token palette is bridged via CSS above; if the CDN is unreachable the
     code still renders as readable plain monospace. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" defer></script>
<script>
  window.addEventListener("DOMContentLoaded", function () {
    if (!window.hljs) return
    document.querySelectorAll(".sn-code-panel__body pre code").forEach(function (el) {
      window.hljs.highlightElement(el)
    })
  })
</script>

{% else %}
<div style="padding: 40px; text-align: center; color: #787774;">
  Home content missing: add a <code>home:</code> block to this page's frontmatter.
</div>
{% endif %}

{% endblock %}

{% block content %}{% endblock %}
{% block footer %}{% endblock %}