---
// Component: Section06.astro
---
<!-- Section 06: Top performers -->
  <h2 class="section-title" id="topqueries">06 Top performers · what's working</h2>
  <p class="section-subtitle">Bảng phân tích chi tiết các từ khóa và trang đích mang lại lưu lượng tìm kiếm hàng đầu.</p>
  
  <div class="grid-2">
    <!-- Top Queries Table -->
    <div class="panel" style="margin-bottom: 0; min-width: 0;">
      <div class="panel-header" style="display:flex; justify-content:space-between; align-items:center;">
        <div>
          <h3><span id="logo-gsc-3"></span> Top queries</h3>
          <p class="panel-sub">Các cụm từ tìm kiếm mang lại lượt nhấp chuột thực tế.</p>
        </div>
        <div style="display: flex; gap: 12px; align-items: center;">
          <span id="count-queries" style="color: var(--text-muted); font-size: 12px;"></span>
          <input type="text" id="search-queries" class="search-box" placeholder="Filter queries...">
        </div>
      </div>
      <div class="table-responsive-wrapper" style="overflow-x: auto; -webkit-overflow-scrolling: touch;"><div id="table-queries-container"></div></div>
    </div>

    <!-- Top Pages Table (GSC) -->
    <div class="panel" style="margin-bottom: 0; min-width: 0;">
      <div class="panel-header" style="display:flex; justify-content:space-between; align-items:center;">
        <div>
          <h3><span id="logo-gsc-4"></span> Top pages</h3>
          <p class="panel-sub">Các trang đích chiến thắng lưu lượng tự nhiên.</p>
        </div>
        <div style="display: flex; gap: 12px; align-items: center;">
          <span id="count-gscpages" style="color: var(--text-muted); font-size: 12px;"></span>
          <input type="text" id="search-gscpages" class="search-box" placeholder="Filter pages...">
        </div>
      </div>
      <div class="table-responsive-wrapper" style="overflow-x: auto; -webkit-overflow-scrolling: touch;"><div id="table-gscpages-container"></div></div>
    </div>
  </div>