---
// Component: Header.astro
---
<header>
    <div class="header-left">
      <h1>Green Leaf Vietnam · SEO & Visibility</h1>
      <p class="subtitle">Bản vận hành Production (Astro SSR) · Kết nối Google APIs thời gian thực · Giai đoạn 2</p>
    </div>
    <div class="header-right" style="display:flex; gap:16px; align-items:center;">
      <span class="chip" id="domain-name" style="height:36px; display:flex; align-items:center;">Domain: Loading...</span>
      
      <!-- Date Range Picker (GA4 Style) -->
      <div class="date-picker-wrapper" id="date-picker-wrapper">
        <div class="dp-backdrop" onclick="document.getElementById('date-picker-wrapper').classList.remove('open')"></div>
        <button class="date-picker-btn" id="date-picker-btn" onclick="document.getElementById('date-picker-wrapper').classList.toggle('open')">
          <div style="text-align: right;">
            <div style="font-weight: 600; font-size: 13px; color: #fff;">28 ngày trước ▼</div>
            <div style="font-size: 11px; color: var(--text-secondary);" id="date-current">13 thg 7 – 9 thg 8, 2026</div>
            <div id="date-previous" style="display:none;"></div>
          </div>
        </button>

        <div class="date-picker-dropdown">
          <div class="dp-sidebar">
            <ul>
              <li>Tuỳ chỉnh</li>
              <li>Hôm nay</li>
              <li>Hôm qua</li>
              <li>Tuần này (Chủ Nhật - Hôm nay)</li>
              <li>7 ngày trước</li>
              <li>Tuần trước (Chủ Nhật - Thứ Bảy)</li>
              <li class="active">28 ngày trước</li>
              <li>30 ngày trước</li>
              <li>Tháng này</li>
              <li>Tháng trước</li>
              <li>90 ngày trước</li>
              <li>Từ đầu quý đến hiện tại</li>
              <li>Năm nay (Tháng 1 – Hôm nay)</li>
              <li>Năm dương lịch vừa qua</li>
            </ul>
            <div class="dp-compare">
              <span>So sánh</span>
              <div class="toggle-switch"></div>
            </div>
          </div>
          <div class="dp-main">
            <div class="dp-inputs">
              <div class="dp-input-group">
                <label>Ngày bắt đầu</label>
                <input type="date" id="dp-input-start" value="2026-07-13" style="border:none; outline:none; background:transparent; font-size:13px; color:#3c4043; width:100%;">
              </div>
              <span style="color:#70757a;">–</span>
              <div class="dp-input-group">
                <label>Ngày kết thúc</label>
                <input type="date" id="dp-input-end" value="2026-08-09" style="border:none; outline:none; background:transparent; font-size:13px; color:#3c4043; width:100%;">
              </div>
            </div>
            <div class="dp-calendar" id="dp-calendar">
              <!-- Rendered by JS -->
            </div>
            <div class="dp-actions">
              <button class="btn-cancel" onclick="document.getElementById('date-picker-wrapper').classList.remove('open')">Huỷ</button>
              <button class="btn-apply" id="btn-apply-date">Áp dụng</button>
            </div>
          </div>
        </div>
      </div>

      <button class="chip" style="background: var(--cyan); color: #000; border: none; cursor: pointer; font-weight: 600; height:36px;" id="btn-sync-live">Đồng bộ trực tiếp</button>
    </div>
  </header>

<script src="../dp.js"></script>