<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8">
  <div class="callout">
    <p class="tw:mb-1 tw:text-sm tw:font-mono">
      <strong>STAT:</strong> Single-figure statistic widgets<br>
      <strong>VARIANTS:</strong> Number | Donut
    </p>
    <p class="tw:mb-0 tw:text-sm">
      Consolidated entry for statistic display. Number is the label-above-value widget;
      Donut is the percentage ring used for comparison figures.
    </p>
  </div>
  <div data-controller="tabs">
    <div class="tabs" role="tablist">
      <button class="tab" role="tab" aria-selected="true" data-tabs-target="tab" data-tabs-anchor="number" data-action="click->tabs#select keydown->tabs#keydown" type="button">Number</button>
      <button class="tab" role="tab" aria-selected="false" data-tabs-target="tab" data-tabs-anchor="donut" data-action="click->tabs#select keydown->tabs#keydown" type="button">Donut</button>
    </div>
    <div class="tab-content">
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>COMPONENT:</strong> Stat<br>
            <strong>VARIANTS:</strong> default | inline | lg | chip + .stat-row grouping
          </p>
          <p class="tw:mb-0 tw:text-sm">
            Label-above-value statistic widget. Used on school/course/career detail pages for key facts.
          </p>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Single stat</h2>
          <div class="stat">
            <span class="stat-label">Students</span>
            <span class="stat-value">2,100</span>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="stat"><span class="stat-label">Students</span><span class="stat-value">2,100</span></div></code>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Stat with icon prefix</h2>
          <div class="stat">
            <span class="stat-label">Location</span>
            <span class="stat-value"><i class="fa-light fa-location-dot stat-icon" aria-hidden="true"></i>0.5 mi</span>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Stat row (grouped, no divider)</h2>
          <div class="stat-row">
            <div class="stat">
              <span class="stat-label">Type</span>
              <span class="stat-value">Sixth Form</span>
            </div>
            <div class="stat">
              <span class="stat-label">Students</span>
              <span class="stat-value">2,100</span>
            </div>
            <div class="stat">
              <span class="stat-label">A* – B</span>
              <span class="stat-value">62%</span>
            </div>
            <div class="stat">
              <span class="stat-label">Distance</span>
              <span class="stat-value">0.5 mi</span>
            </div>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Stat row (with top-border divider)</h2>
          <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Use <code>.stat-row-bordered</code> to add a top border + 12px padding (common in detail-page summary sections).</p>
          <div class="tw:max-w-[600px]">
            <p class="tw:text-neutral-700 tw:mb-3">Key facts for this provider, shown above the bordered stat row.</p>
            <div class="stat-row stat-row-bordered">
              <div class="stat">
                <span class="stat-label">Students</span>
                <span class="stat-value">2,100</span>
              </div>
              <div class="stat">
                <span class="stat-label">A* – B</span>
                <span class="stat-value">62%</span>
              </div>
              <div class="stat">
                <span class="stat-label">Distance</span>
                <span class="stat-value">0.5 mi</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Inline variant</h2>
          <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Label and value side-by-side instead of stacked. Lighter weight label (medium, not bold; not uppercase). Useful for compact list contexts.</p>
          <div class="tw:flex tw:flex-col tw:gap-1">
            <div class="stat stat-inline">
              <span class="stat-label">Type:</span>
              <span class="stat-value">Sixth Form</span>
            </div>
            <div class="stat stat-inline">
              <span class="stat-label">Students:</span>
              <span class="stat-value">2,100</span>
            </div>
            <div class="stat stat-inline">
              <span class="stat-label">A* – B:</span>
              <span class="stat-value">62%</span>
            </div>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Large variant (hero summary)</h2>
          <p class="tw:text-sm tw:text-gray-600 tw:mb-3">Use <code>.stat-lg</code> to make values larger (heading-5 size). For detail-page hero summaries.</p>
          <div class="stat-row">
            <div class="stat stat-lg">
              <span class="stat-label">Students</span>
              <span class="stat-value">2,100</span>
            </div>
            <div class="stat stat-lg">
              <span class="stat-label">A* – B</span>
              <span class="stat-value">62%</span>
            </div>
            <div class="stat stat-lg">
              <span class="stat-label">Ofsted</span>
              <span class="stat-value">Outstanding</span>
            </div>
          </div>
        </div>
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Quick-fact chips</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm"><strong>Chip (.stat-chip):</strong> bordered tile with tinted icon square — quick-fact grids on profile pages.</p>
          </div>
          <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-3">
            <div class="stat stat-chip">
              <span class="stat-icon"><i class="fa-regular fa-bed" aria-hidden="true"></i></span>
              <span class="tw:flex tw:flex-col tw:gap-[2px]">
                <span class="stat-label">Boarding Type</span>
                <span class="stat-value">No Boarder</span>
              </span>
            </div>
            <div class="stat stat-chip">
              <span class="stat-icon"><i class="fa-regular fa-school" aria-hidden="true"></i></span>
              <span class="tw:flex tw:flex-col tw:gap-[2px]">
                <span class="stat-label">School Type</span>
                <span class="stat-value">Foundation School</span>
              </span>
            </div>
            <div class="stat stat-chip">
              <span class="stat-icon"><i class="fa-regular fa-children" aria-hidden="true"></i></span>
              <span class="tw:flex tw:flex-col tw:gap-[2px]">
                <span class="stat-label">Suitable Ages</span>
                <span class="stat-value">11 to 19</span>
              </span>
            </div>
            <div class="stat stat-chip">
              <span class="stat-icon"><i class="fa-regular fa-venus-mars" aria-hidden="true"></i></span>
              <span class="tw:flex tw:flex-col tw:gap-[2px]">
                <span class="stat-label">Gender</span>
                <span class="stat-value">Mixed</span>
              </span>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="stat stat-chip"><span class="stat-icon">…</span><span>label + value</span></div></code>
          </div>
        </div>
      </div>
      <div class="tab-panel" role="tabpanel" data-tabs-target="panel">
        <div class="callout">
          <p class="tw:mb-1 tw:text-sm tw:font-mono">
            <strong>COMPONENT:</strong> Donut Stat — read-only percentage ring with centred value text<br>
            <strong>VARIANTS:</strong> blue (default) | magenta | orange | green · default (72px) | sm (44px)
          </p>
          <p class="tw:mb-0 tw:text-sm">
            A conic-gradient ring driven by <code>donut_stat_controller.js</code>, which sets
            <code>--donut-value</code> as a percent string (e.g. <code>"92%"</code>) from the
            <code>data-donut-stat-value-value</code> attribute — mirroring the progress bar's
            <code>--progress-value</code> mechanism. The numeric value is always duplicated as
            visible text inside <code>.donut-stat-value</code>; no inline styles are needed
            in the HTML.
          </p>
        </div>
        <!-- Section 1: Default size + color variants -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Default size + color variants</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Colors:</strong> blue = School series (default), magenta = England comparison, orange/green = accents.
            </p>
          </div>
          <div class="tw:flex tw:flex-wrap tw:gap-6 tw:items-start">
            <!-- Blue (default) — 92% School -->
            <div class="tw:flex tw:flex-col tw:items-center">
              <div class="donut-stat"
             data-controller="donut-stat"
             data-donut-stat-value-value="92"
             role="img"
             aria-label="School: 92%">
                <span class="donut-stat-value">92%</span>
              </div>
              <span class="donut-stat-caption">School</span>
            </div>
            <!-- Magenta — 89% England -->
            <div class="tw:flex tw:flex-col tw:items-center">
              <div class="donut-stat donut-stat-magenta"
             data-controller="donut-stat"
             data-donut-stat-value-value="89"
             role="img"
             aria-label="England: 89%">
                <span class="donut-stat-value">89%</span>
              </div>
              <span class="donut-stat-caption">England</span>
            </div>
            <!-- Orange — 34% -->
            <div class="tw:flex tw:flex-col tw:items-center">
              <div class="donut-stat donut-stat-orange"
             data-controller="donut-stat"
             data-donut-stat-value-value="34"
             role="img"
             aria-label="Orange accent: 34%">
                <span class="donut-stat-value">34%</span>
              </div>
              <span class="donut-stat-caption">Orange</span>
            </div>
            <!-- Green — 67% -->
            <div class="tw:flex tw:flex-col tw:items-center">
              <div class="donut-stat donut-stat-green"
             data-controller="donut-stat"
             data-donut-stat-value-value="67"
             role="img"
             aria-label="Green accent: 67%">
                <span class="donut-stat-value">67%</span>
              </div>
              <span class="donut-stat-caption">Green</span>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="donut-stat" data-controller="donut-stat" data-donut-stat-value-value="92" role="img" aria-label="School: 92%"><span class="donut-stat-value">92%</span></div></code>
          </div>
        </div>
        <!-- Section 2: Small variant (inline rows) -->
        <div class="tw:border-t tw:pt-6">
          <h2 class="h4 tw:mb-4">Small variant (inline rows)</h2>
          <div class="callout tw:mb-4">
            <p class="tw:mb-0 tw:text-sm">
              <strong>Small (.donut-stat-sm):</strong> 44px ring for inline catchment rows — pair with text on the right.
            </p>
          </div>
          <div class="tw:flex tw:flex-wrap tw:gap-6">
            <!-- sm magenta 70% -->
            <div class="tw:flex tw:items-center tw:gap-3">
              <div class="donut-stat donut-stat-sm donut-stat-magenta"
             data-controller="donut-stat"
             data-donut-stat-value-value="70"
             role="img"
             aria-label="70%">
                <span class="donut-stat-value">70%</span>
              </div>
              <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">Pupils are from within 0.52 miles</span>
            </div>
            <!-- sm blue 10% -->
            <div class="tw:flex tw:items-center tw:gap-3">
              <div class="donut-stat donut-stat-sm"
             data-controller="donut-stat"
             data-donut-stat-value-value="10"
             role="img"
             aria-label="10%">
                <span class="donut-stat-value">10%</span>
              </div>
              <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-700">Pupils are from 0.52 – 0.6 miles</span>
            </div>
          </div>
          <div class="tw:mt-4 tw:text-sm tw:text-gray-600">
            <code><div class="donut-stat donut-stat-sm donut-stat-magenta" data-controller="donut-stat" data-donut-stat-value-value="70" role="img" aria-label="70%"><span class="donut-stat-value">70%</span></div></code>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>