---
// Component: GeoMetrics.astro
---
<h3 class="section-title">01 Toàn Cảnh Tối Ưu Hóa Bộ Máy Trả Lời (GEO Landscape)</h3>
<p class="section-subtitle" style="margin-bottom: 24px; color: var(--text-secondary); font-size: 14px;">
  Đo lường mức độ bao phủ và chất lượng trích dẫn của các Mô hình Ngôn ngữ Lớn (LLMs) như ChatGPT, Perplexity, Gemini đối với kho nội dung của Green Leaf Vietnam.
</p>

<div class="grid-kpi" style="grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;">

  <!-- TILE 1: TOTAL AI SESSIONS -->
  <div class="kpi-tile" id="tile-ai-total"></div>

  <!-- TILE 2: AVG AI ENGAGEMENT RATE -->
  <div class="kpi-tile" id="tile-ai-eng"></div>

  <!-- TILE 3: CITABILITY RATIO -->
  <div class="kpi-tile" id="tile-ai-citability"></div>

  <!-- TILE 4: AI GAP OPPORTUNITIES -->
  <div class="kpi-tile" id="tile-ai-gap"></div>

</div>