---
// Component: Section03.astro
---
<!-- Section 03: What's actually converting -->
  <h2 class="section-title" id="converts">03 What's actually converting</h2>
  <p class="section-subtitle">Lấy lượt gửi form làm chuyển đổi. Danh sách trang đích bên dưới có thể sắp xếp — màu sắc tỷ lệ tương tác giúp đánh giá nhanh chất lượng.</p>
  
  <div class="panel">
    <div class="panel-header" style="display:flex; justify-content:space-between; align-items:center;">
      <div>
        <h3><span id="logo-ga4-3"></span> Top landing pages</h3>
        <p class="panel-sub">Bấm vào tiêu đề cột để sắp xếp. Tỷ lệ tương tác ≥40% xanh lá, 25-40% vàng cam, dưới mức này báo đỏ.</p>
      </div>
      <div style="display: flex; gap: 12px; align-items: center;">
        <span id="count-landing" style="color: var(--text-muted); font-size: 12px;"></span>
        <input type="text" id="search-landing" class="search-box" placeholder="Filter landing pages...">
      </div>
    </div>
    <div id="table-landing-container"></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: 12px;">
      <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 Cross-Dimension Data</span>
    </div>
  </div>