---
// Component: CitedUrlsTable.astro
---
<h3 class="section-title">02 GEO Health & Citability</h3>
<p class="section-subtitle" style="margin-bottom: 24px; color: var(--text-secondary); font-size: 14px;">
  Đánh giá chất lượng của các liên kết được Trí tuệ Nhân tạo trích dẫn. Tỷ lệ tương tác (Eng. Rate) cao chứng tỏ người dùng từ AI Chat thực sự tìm thấy giá trị trên trang đích.
</p>

<div class="panel" style="margin-bottom: 24px;">
  <div class="panel-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px;">
    <h3><span id="logo-ga4-cited"></span> AI Referral Quality</h3>
    <div style="display: flex; align-items: center; gap: 12px;">
      <input type="text" id="geo-search" placeholder="Tìm kiếm trang đích..." style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 4px; color: #fff; font-size: 13px; outline: none; min-width: 180px;" />
      <span id="geo-count" style="font-size: 12px; color: var(--text-secondary);">0 rows</span>
    </div>
  </div>
  
  <div class="table-responsive-wrapper" style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
    <div id="table-geo-citations-container"></div>
  </div>
  
  <div class="kpi-footer-row" style="display: flex; align-items: center; margin-top: 16px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px;">
    <svg viewBox="0 0 24 24" width="14" height="14" style="vertical-align:middle"><circle cx="19" cy="5" r="3.2" fill="#F9AB00"/><rect x="3" y="14" width="6" height="8" rx="3" fill="#F9AB00"/><path d="M11 8 Q 11 5 14 5 Q 17 5 17 8 L 17 22 L 11 22 Z" fill="#E37400"/></svg>
    <span style="font-size: 11px; color: var(--text-secondary); margin-left: 6px; font-weight: 500; text-transform: uppercase;">GA4 API · Real-time Data</span>
  </div>
</div>