{# Level-aware project About — rendered when about.json declares kind="project".
   Context: `about` (view-model), `lang`, `texts`.

   Uses the ontoref `.doc-*` document chrome (styles/custom.css) so the SSR site
   matches outreach/web. GENERIC over a block vocabulary: a section is
   { key, title, blocks }, each block a typed primitive (prose | timeline |
   cards | links | graph | kv). New SECTIONS of an existing block type are
   projector-only changes (gen-about-pages.nu); only a brand-new block TYPE
   touches this template. Path/href values are `| safe` (trusted contract
   values, not user input). Bilingual fields indexed by `lang`. #}
<div class="about-doc">
  <div class="doc-wrap">

    <header class="doc-head">
      <p class="doc-eyebrow">{{ about.level_id }}</p>
      <h1>{% if lang == "es" %}Acerca de{% else %}About{% endif %} {{ about.level_id }}</h1>
      {% if about.hero and about.hero[lang] %}
        <p class="doc-lead">{{ about.hero[lang] }}</p>
      {% endif %}
    </header>

    {% set about_img = "ontoref-about-es" if lang == "es" else "ontoref-about-en" %}
    <picture>
      <source srcset="/images/{{ about_img }}.avif" type="image/avif">
      <source srcset="/images/{{ about_img }}.webp" type="image/webp">
      <img src="/images/{{ about_img }}.webp"
           alt="{% if lang == 'es' %}Acerca de{% else %}About{% endif %} {{ about.level_id }}"
           width="1536" height="1024" loading="lazy"
           style="display:block;margin:1.5rem auto 0;max-width:48rem;width:100%;height:auto;border-radius:.5rem" />
    </picture>

    {% if about.sections | length > 1 %}
    <nav class="doc-toc">
      <p>{% if lang == "es" %}Secciones{% else %}Sections{% endif %}</p>
      <ul>
        {% for section in about.sections %}
        <li><a href="#{{ section.key }}">{{ section.title[lang] }}</a></li>
        {% endfor %}
      </ul>
    </nav>
    {% endif %}

    {% for section in about.sections %}
    <section class="doc-section" id="{{ section.key }}">
      <h2>{{ section.title[lang] }}</h2>

      {% for block in section.blocks %}

        {% if block.type == "prose" %}
          <div class="doc-prose">{{ (block.html_es if lang == "es" and block.html_es else block.html) | safe }}</div>

        {% elif block.type == "timeline" %}
          {% if block.started %}
            <p class="doc-mono" style="margin:0 0 .75rem">{% if lang == "es" %}Desde{% else %}Started{% endif %} {{ block.started }}</p>
          {% endif %}
          <ul class="doc-list">
            {% for m in block.items %}
            <li>
              <span class="doc-mono">{{ m.date }}</span>
              <span>{{ m.text[lang] }}</span>
            </li>
            {% endfor %}
          </ul>

        {% elif block.type == "cards" %}
          {% for grp in block.groups %}
            {% if grp.label %}<h3 class="doc-idx-h">{{ grp.label }} <span class="doc-count">({{ grp.items | length }})</span></h3>{% endif %}
            <ul class="doc-cards">
              {% for n in grp.items %}
              {% set card_body = n.body_es if lang == "es" and n.body_es else n.body %}
              <li>
                <p class="doc-card-title">{{ n.title_es if lang == "es" and n.title_es else n.title }}{% if n.meta %} <span class="doc-card-meta">· {{ n.meta }}</span>{% endif %}</p>
                {% if card_body %}<p class="doc-card-body">{{ card_body }}</p>{% endif %}
              </li>
              {% endfor %}
            </ul>
          {% endfor %}

        {% elif block.type == "links" %}
          {% for grp in block.groups %}
            {% if grp.label %}<h3 class="doc-idx-h">{{ grp.label }} <span class="doc-count">({{ grp.items | length }})</span></h3>{% endif %}
            <ul class="doc-idx-list">
              {% for i in grp.items %}
              <li>
                <a href="{{ i.href | safe }}">{% if i.code %}<span class="doc-mono">{{ i.code }}</span> {% endif %}{{ i.text }}</a>
              </li>
              {% endfor %}
            </ul>
          {% endfor %}
          {% if block.browse and block.browse.href %}
            <a href="{{ block.browse.href | safe }}" class="doc-btn">{{ block.browse.label[lang] }} →</a>
          {% endif %}

        {% elif block.type == "graph" %}
          {% if block.svg %}<div class="doc-graph">{{ block.svg | safe }}</div>{% endif %}
          {% if block.live and block.live.href %}
            <a href="{{ (block.live.href_es if lang == "es" and block.live.href_es else block.live.href) | safe }}" class="doc-btn">↗ {{ block.live.label[lang] }}</a>
          {% endif %}

        {% elif block.type == "kv" %}
          <table class="doc-kv"><tbody>
            {% for r in block.rows %}
            <tr><td>{{ r.k_es if lang == "es" and r.k_es else r.k }}</td><td>{{ r.v_es if lang == "es" and r.v_es else r.v }}</td></tr>
            {% endfor %}
          </tbody></table>

        {% endif %}

      {% endfor %}
    </section>
    {% endfor %}

  </div>
</div>

{% include "partials/image-zoom.j2" %}