{# SPDX-FileCopyrightText: 2026 PythonWoods <dev@pythonwoods.dev> #}
{# SPDX-License-Identifier: Apache-2.0 #}
<section class="py-16 md:py-24">
  <div class="max-w-5xl mx-auto px-6">
    <div class="mb-12 max-w-3xl">
      <p class="text-[11px] font-mono font-semibold tracking-[0.18em] dark:text-zinc-400 text-zinc-500 mb-4 uppercase">Health Metrics</p>
      <h2 class="text-3xl md:text-4xl font-semibold tracking-tight dark:text-white text-zinc-900 mb-4">Quality Score <span class="dark:text-zinc-500 text-zinc-400">Deterministic health check, per commit.</span></h2>
      <p class="dark:text-zinc-500 text-zinc-500 text-lg max-w-2xl">Track a deterministic score in CI to block regressions. A holistic, elegant view of your documentation health.</p>
    </div>
    <div class="w-full bg-transparent border dark:border-zinc-800/40 border-zinc-200 rounded-xl overflow-hidden flex flex-col md:flex-row md:translate-x-8 lg:translate-x-12">
      <div class="w-full md:w-72 dark:bg-[#0d0d11]/30 bg-zinc-50/50 backdrop-blur-sm border-b md:border-b-0 md:border-r dark:border-zinc-800/40 border-zinc-200 p-6 flex flex-col">
        <div class="text-[13px] font-medium dark:text-zinc-300 text-zinc-600 mb-8">Metrics</div>
        <div class="flex-1 flex flex-col justify-center">
          <div class="text-sm font-medium dark:text-zinc-500 text-zinc-400 mb-2">Overall Health</div>
          <div class="text-7xl font-light tracking-tighter dark:text-white text-zinc-900 mb-4">98</div>
          <div class="inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded-sm bg-emerald-500/10 text-emerald-400 text-xs font-medium w-max border border-emerald-500/20">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-3 h-3"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline><polyline points="16 7 22 7 22 13"></polyline></svg>+2%
          </div>
        </div>
        <div class="mt-12 pt-6 border-t dark:border-zinc-800/40 border-zinc-200">
          <div class="text-xs dark:text-zinc-500 text-zinc-400 mb-2">CI Command</div>
          <code class="text-xs dark:text-zinc-400 text-zinc-600 font-mono">zenzic score --save</code>
        </div>
      </div>
      <div class="flex-1 p-2 dark:bg-zinc-950/10 bg-white backdrop-blur-sm">
        <div class="p-2">
          <div class="flex items-center justify-between group px-4 py-3 rounded-md dark:hover:bg-zinc-800/30 hover:bg-zinc-50 transition-colors">
            <div class="flex items-center gap-3">
              <div class="w-5 h-5 rounded-full border flex items-center justify-center border-sky-500/30 bg-sky-500/10">
                <div class="w-1.5 h-1.5 rounded-full bg-sky-400"></div>
              </div>
              <span class="text-[13px] dark:text-zinc-200 text-zinc-700 font-medium">Internal Links Health</span>
            </div>
            <span class="text-[13px] dark:text-zinc-500 text-zinc-400 font-mono">99</span>
          </div>
          <div class="ml-5 pl-4 border-l dark:border-zinc-800/40 border-zinc-200 flex flex-col py-1">
            <div class="flex items-center justify-between group px-4 py-2 rounded-md dark:hover:bg-zinc-800/30 hover:bg-zinc-50 transition-colors">
              <div class="flex items-center gap-3">
                <span class="inline-flex w-4 h-4 rounded-full text-sky-400/80 border border-current items-center justify-center"><span class="w-1 h-1 rounded-full bg-current"></span></span>
                <span class="text-[13px] dark:text-zinc-400 text-zinc-500">Anchor stability</span>
              </div>
              <span class="text-[13px] dark:text-zinc-600 text-zinc-400 font-mono">100</span>
            </div>
            <div class="flex items-center justify-between group px-4 py-2 rounded-md dark:hover:bg-zinc-800/30 hover:bg-zinc-50 transition-colors">
              <div class="flex items-center gap-3">
                <span class="inline-flex w-4 h-4 rounded-full text-sky-400/80 border border-current items-center justify-center"><span class="w-1 h-1 rounded-full bg-current"></span></span>
                <span class="text-[13px] dark:text-zinc-400 text-zinc-500">External references</span>
              </div>
              <span class="text-[13px] dark:text-zinc-600 text-zinc-400 font-mono">97</span>
            </div>
          </div>
        </div>
        <div class="border-t dark:border-zinc-800/50 border-zinc-200 mx-2 my-1"></div>
        <div class="p-2">
          <div class="flex items-center justify-between group px-4 py-3 rounded-md dark:hover:bg-zinc-800/30 hover:bg-zinc-50 transition-colors">
            <div class="flex items-center gap-3">
              <div class="w-5 h-5 rounded-full border flex items-center justify-center border-rose-500/30 bg-rose-500/10">
                <div class="w-1.5 h-1.5 rounded-full bg-rose-400"></div>
              </div>
              <span class="text-[13px] dark:text-zinc-200 text-zinc-700 font-medium">Orphan Detection</span>
            </div>
            <span class="text-[13px] dark:text-zinc-500 text-zinc-400 font-mono">95</span>
          </div>
          <div class="ml-5 pl-4 border-l dark:border-zinc-800/40 border-zinc-200 flex flex-col py-1">
            <div class="flex items-center justify-between group px-4 py-2 rounded-md dark:hover:bg-zinc-800/30 hover:bg-zinc-50 transition-colors">
              <div class="flex items-center gap-3">
                <span class="inline-flex w-4 h-4 rounded-full text-rose-400/80 border border-current items-center justify-center"><span class="w-1 h-1 rounded-full bg-current"></span></span>
                <span class="text-[13px] dark:text-zinc-400 text-zinc-500">Unused Assets</span>
              </div>
              <span class="text-[13px] dark:text-zinc-600 text-zinc-400 font-mono">91</span>
            </div>
            <div class="flex items-center justify-between group px-4 py-2 rounded-md dark:hover:bg-zinc-800/30 hover:bg-zinc-50 transition-colors">
              <div class="flex items-center gap-3">
                <span class="inline-flex w-4 h-4 rounded-full text-rose-400/80 border border-current items-center justify-center"><span class="w-1 h-1 rounded-full bg-current"></span></span>
                <span class="text-[13px] dark:text-zinc-400 text-zinc-500">Nav Isolation</span>
              </div>
              <span class="text-[13px] dark:text-zinc-600 text-zinc-400 font-mono">100</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>