---
// Component: Section02.astro
---
<!-- Section 02: Visibility & traffic -->
  <h2 class="section-title" id="traffic">02 Visibility & traffic</h2>
  <p class="section-subtitle">Nguồn truy cập và sự dịch chuyển của các kênh. Biểu đồ miền = Phiên GA4 hàng ngày; Biểu đồ đường = Xu hướng Click & Impression từ GSC.</p>
  
  <div class="grid-2x2">
    <div class="panel">
      <div class="panel-header">
        <h3><span id="logo-ga4-1"></span> Sessions by channel · daily</h3>
        <p class="panel-sub">GA4 · biểu đồ miền xếp chồng, <span class="dyn-days">30</span> ngày qua</p>
      </div>
      <div id="chart-stacked-channels" style="position:relative;"></div>
    </div>

    <div class="panel">
      <div class="panel-header">
        <h3><span id="logo-gsc-1"></span> Organic search trend</h3>
        <p class="panel-sub">GSC · clicks (xanh lá) & impressions (cyan)</p>
      </div>
      <div id="chart-gsc-trend" style="position:relative;"></div>
    </div>

    <div class="panel">
      <div class="panel-header">
        <h3><span id="logo-ga4-2"></span> Channel performance · current vs prior <span class="dyn-days">30</span>d</h3>
        <p class="panel-sub">Khối lượng, chất lượng và các chỉ số chuyển đổi</p>
      </div>
      <div id="table-channels-container"></div>
    </div>

    <div class="panel">
      <div class="panel-header">
        <h3><span id="logo-gsc-2"></span> Branded vs non-branded search</h3>
        <p class="panel-sub">Nếu truy vấn thương hiệu tăng nhưng phi thương hiệu đi ngang, bạn chỉ đang tiếp cận lại khách hàng cũ chứ không tạo ra nhu cầu mới.</p>
      </div>
      <div id="branded-search-container" style="padding: 20px 0;"></div>
    </div>
  </div>