{# ontoref Services — tier-structured.
   The protocol is a gift (voluntary-adoption, protocol-not-runtime); what is
   offered is help OPERATING its highest tier (tier-2: operations, witness,
   governance — via-001) and TRAINING/COACHING to climb the lower tiers (tier-0
   declarative, tier-1 substrate). Bilingual via `texts[...]`; ES deep-link
   anchors via data-anchor-es. Mirrors the jpl services design (ds-* classes). #}
<div class="min-h-screen ds-bg-page">

  <section class="py-8 ds-container">
    <div class="mx-auto max-w-4xl text-center">
      <h1 class="text-balance text-4xl font-bold tracking-tight ds-text sm:text-6xl">
        {{ texts["services-page-title"] }}
      </h1>
      <p class="mt-ds-6 ds-body ds-text-secondary max-w-2xl mx-auto">
        {{ texts["services-page-subtitle"] }}
      </p>
      <p class="mt-3 ds-caption font-mono ds-text-secondary max-w-2xl mx-auto">
        {{ texts["services-page-note"] }}
      </p>
    </div>
  </section>

  {# ── Tier 2: the proposal — operate the operations/governance surface ─────── #}
  <section id="tier2" data-anchor-es="tier2" class="py-16 ds-bg">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        <span class="ds-caption font-mono px-2 py-1 ds-bg-page border ds-border ds-rounded ds-text-secondary">
          {{ texts["services-tier2-eyebrow"] }}
        </span>
        <h2 class="mt-4 text-3xl font-bold ds-text">{{ texts["services-tier2-title"] }}</h2>
        <p class="mt-4 ds-text-secondary max-w-3xl mx-auto">
          {{ texts["services-tier2-desc"] }}
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-ops-title"] }}</h3>
          <p class="ds-text-secondary">{{ texts["services-tier2-ops-desc"] }}</p>
        </div>
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-audit-title"] }}</h3>
          <p class="ds-text-secondary">{{ texts["services-tier2-audit-desc"] }}</p>
        </div>
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-validators-title"] }}</h3>
          <p class="ds-text-secondary">{{ texts["services-tier2-validators-desc"] }}</p>
        </div>
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
          <h3 class="ds-heading-4 ds-text mb-3">{{ texts["services-tier2-migration-title"] }}</h3>
          <p class="ds-text-secondary">{{ texts["services-tier2-migration-desc"] }}</p>
        </div>
      </div>

      <div class="mt-16">
        <h3 class="text-2xl font-bold ds-text text-center mb-8">{{ texts["services-what-you-get"] }}</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
          <div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-witnessed-history"] }}</span></div>
          <div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-validators"] }}</span></div>
          <div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-knowledge-transfer"] }}</span></div>
          <div class="flex items-start gap-3"><span class="ds-text-secondary">{{ texts["services-get-no-lockin"] }}</span></div>
          <div class="flex items-start gap-3 md:col-span-2"><span class="ds-text-secondary">{{ texts["services-get-open-protocol"] }}</span></div>
        </div>
      </div>
    </div>
  </section>

  {# ── Training & coaching for the lower tiers — use or learn ───────────────── #}
  <section id="learn" data-anchor-es="aprender" class="py-16 ds-bg-page">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        {% set training_img = "ontoref-formacion" if lang == "es" else "ontoref-training" %}
        <picture>
          <source srcset="/images/{{ training_img }}.avif" type="image/avif">
          <source srcset="/images/{{ training_img }}.webp" type="image/webp">
          <img src="/images/{{ training_img }}.webp"
               alt="{{ texts['services-learn-title'] }}"
               width="1536" height="512" loading="lazy"
               class="mb-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
        </picture>
        <h2 class="text-3xl font-bold ds-text">{{ texts["services-learn-title"] }}</h2>
        <p class="mt-4 ds-text-secondary max-w-3xl mx-auto">{{ texts["services-learn-desc"] }}</p>
        {% set coaching_img = "ontoref-coaching-es" if lang == "es" else "ontoref-coaching-en" %}
        <picture>
          <source srcset="/images/{{ coaching_img }}.avif" type="image/avif">
          <source srcset="/images/{{ coaching_img }}.webp" type="image/webp">
          <img src="/images/{{ coaching_img }}.webp"
               alt="{{ texts['services-learn-title'] }}"
               width="1536" height="1024" loading="lazy"
               class="mt-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
        </picture>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
        <div id="coaching" data-anchor-es="coaching">
          <span class="ds-caption font-mono ds-text-secondary">{{ texts["services-coaching-eyebrow"] }}</span>
          <h3 class="text-2xl font-bold ds-text mt-2 mb-6">{{ texts["services-coaching-title"] }}</h3>
          <p class="ds-text-secondary mb-8">{{ texts["services-coaching-desc"] }}</p>
          <div class="space-y-3">
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <div class="flex justify-between items-center mb-2">
                <h4 class="font-semibold ds-text">{{ texts["services-coaching-1to1-title"] }}</h4>
                <span class="text-sm ds-text-secondary">{{ texts["services-coaching-1to1-note"] }}</span>
              </div>
              <p class="text-sm ds-text-secondary">{{ texts["services-coaching-1to1-desc"] }}</p>
            </div>
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <div class="flex justify-between items-center mb-2">
                <h4 class="font-semibold ds-text">{{ texts["services-coaching-ondaod-title"] }}</h4>
                <span class="text-sm ds-text-secondary">{{ texts["services-coaching-ondaod-note"] }}</span>
              </div>
              <p class="text-sm ds-text-secondary">{{ texts["services-coaching-ondaod-desc"] }}</p>
            </div>
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <div class="flex justify-between items-center mb-2">
                <h4 class="font-semibold ds-text">{{ texts["services-coaching-adr-title"] }}</h4>
                <span class="text-sm ds-text-secondary">{{ texts["services-coaching-adr-note"] }}</span>
              </div>
              <p class="text-sm ds-text-secondary">{{ texts["services-coaching-adr-desc"] }}</p>
            </div>
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <div class="flex justify-between items-center mb-2">
                <h4 class="font-semibold ds-text">{{ texts["services-coaching-ongoing-title"] }}</h4>
                <span class="text-sm ds-text-secondary">{{ texts["services-coaching-ongoing-note"] }}</span>
              </div>
              <p class="text-sm ds-text-secondary">{{ texts["services-coaching-ongoing-desc"] }}</p>
            </div>
          </div>
        </div>

        <div id="training" data-anchor-es="formacion">
          <span class="ds-caption font-mono ds-text-secondary">{{ texts["services-training-eyebrow"] }}</span>
          <h3 class="text-2xl font-bold ds-text mt-2 mb-6">{{ texts["services-training-title"] }}</h3>
          <p class="ds-text-secondary mb-8">{{ texts["services-training-desc"] }}</p>
          <div class="space-y-3">
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <h4 class="font-semibold ds-text mb-2">{{ texts["services-training-courses-title"] }}</h4>
              <p class="text-sm ds-text-secondary">{{ texts["services-training-courses-desc"] }}</p>
            </div>
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <h4 class="font-semibold ds-text mb-2">{{ texts["services-training-workshops-title"] }}</h4>
              <p class="text-sm ds-text-secondary">{{ texts["services-training-workshops-desc"] }}</p>
            </div>
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <h4 class="font-semibold ds-text mb-2">{{ texts["services-training-talks-title"] }}</h4>
              <p class="text-sm ds-text-secondary">{{ texts["services-training-talks-desc"] }}</p>
            </div>
            <div class="ds-bg p-ds-4 ds-rounded-lg">
              <h4 class="font-semibold ds-text mb-2">{{ texts["services-training-content-title"] }}</h4>
              <p class="text-sm ds-text-secondary">{{ texts["services-training-content-desc"] }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  {# ── The three tiers — which one fits (taglines from tier-taglines.ncl) ───── #}
  <section class="py-16 ds-bg">
    <div class="ds-container-lg ds-container">
      <div class="text-center mb-ds-12">
        <h2 class="text-3xl font-bold ds-text">{{ texts["services-tiers-title"] }}</h2>
        <p class="mt-4 ds-text-secondary max-w-3xl mx-auto">{{ texts["services-tiers-desc"] }}</p>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
          <span class="ds-caption font-mono ds-text-secondary">{{ texts["services-tier0-label"] }}</span>
          <h3 class="ds-heading-4 ds-text mt-2 mb-2">{{ texts["services-tier0-title"] }}</h3>
          <p class="ds-text-secondary text-sm">{{ texts["services-tier0-desc"] }}</p>
        </div>
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm">
          <span class="ds-caption font-mono ds-text-secondary">{{ texts["services-tier1-label"] }}</span>
          <h3 class="ds-heading-4 ds-text mt-2 mb-2">{{ texts["services-tier1-title"] }}</h3>
          <p class="ds-text-secondary text-sm">{{ texts["services-tier1-desc"] }}</p>
        </div>
        <div class="ds-bg-page p-ds-6 ds-rounded-lg ds-shadow-sm border ds-border">
          <span class="ds-caption font-mono ds-text-secondary">{{ texts["services-tier2-label"] }}</span>
          <h3 class="ds-heading-4 ds-text mt-2 mb-2">{{ texts["services-tier2-card-title"] }}</h3>
          <p class="ds-text-secondary text-sm">{{ texts["services-tier2-card-desc"] }}</p>
        </div>
      </div>
    </div>
  </section>

  <section class="py-16 ds-bg-page">
    <div class="mx-auto max-w-4xl ds-container text-center">
      {% set action_img = "ontoref-accion" if lang == "es" else "ontoref-action" %}
      <picture>
        <source srcset="/images/{{ action_img }}.avif" type="image/avif">
        <source srcset="/images/{{ action_img }}.webp" type="image/webp">
        <img src="/images/{{ action_img }}.webp"
             alt="{{ texts['services-cta-title'] }}"
             width="1536" height="512" loading="lazy"
             class="mb-ds-8 mx-auto rounded-lg ds-shadow-sm w-full max-w-3xl h-auto" />
      </picture>
      <h2 class="text-3xl font-bold ds-text mb-ds-4">{{ texts["services-cta-title"] }}</h2>
      <p class="ds-text-secondary mb-8 ds-body">{{ texts["services-cta-desc"] }}</p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="{{ texts['services-cta-primary-url'] | default('/contact') }}" class="no-underline ds-btn-primary">
          {{ texts["services-cta-primary"] }}
        </a>
        <a href="{{ texts['services-cta-secondary-url'] | default('/about') }}" class="no-underline ds-btn-secondary">
          {{ texts["services-cta-secondary"] }}
        </a>
      </div>
    </div>
  </section>

</div>

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