---
// Component: KanbanBoard.astro
---
<h3 class="section-title">01 SEO & GEO Kanban Board</h3>
<div class="grid-2x2" style="grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;">
  
  <!-- CỘT 1 -->
  <div class="panel" style="margin-top:0;">
    <h4 style="color:#ef4444; border-bottom:1px solid rgba(239, 68, 68, 0.2); padding-bottom:8px; font-weight:600; margin-bottom:12px;">Cần Xử Lý (To Do)</h4>
    <div style="display:flex; flex-direction:column; gap:12px;">
      <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:12px; border-radius:6px; font-size:13px;">
        <span style="color:#ef4444; font-weight:bold; font-size:10px; text-transform:uppercase;">[Content] Ưu tiên: Cao</span>
        <p style="margin:6px 0 0 0; color:#fff; font-weight:600;">Viết bài answer-first cho 30 keyword AI Overview mà Green Leaf chưa có mặt</p>
      </div>
      <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:12px; border-radius:6px; font-size:13px;">
        <span style="color:#ef4444; font-weight:bold; font-size:10px; text-transform:uppercase;">[Backlink] Ưu tiên: Cao</span>
        <p style="margin:6px 0 0 0; color:#fff; font-weight:600;">Khởi động lại việc đi backlink du lịch/doanh nghiệp Nhật để khôi phục chỉ số UR</p>
      </div>
    </div>
  </div>

  <!-- CỘT 2 -->
  <div class="panel" style="margin-top:0;">
    <h4 style="color:#f59e0b; border-bottom:1px solid rgba(245, 158, 11, 0.2); padding-bottom:8px; font-weight:600; margin-bottom:12px;">Đang Thực Hiện (In Progress)</h4>
    <div style="display:flex; flex-direction:column; gap:12px;">
      <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:12px; border-radius:6px; font-size:13px;">
        <span style="color:#f59e0b; font-weight:bold; font-size:10px; text-transform:uppercase;">[Content] Ưu tiên: Cao</span>
        <p style="margin:6px 0 0 0; color:#fff; font-weight:600;">Phủ nội dung 6 cluster có volume lớn nhất: Xe 7 chỗ, xe 16 chỗ, Limousine...</p>
      </div>
      <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:12px; border-radius:6px; font-size:13px;">
        <span style="color:#f59e0b; font-weight:bold; font-size:10px; text-transform:uppercase;">[Content] Ưu tiên: Cao</span>
        <p style="margin:6px 0 0 0; color:#fff; font-weight:600;">Tối ưu hóa và đầu tư lại trang dịch vụ tiếng Nhật /ja/ phục vụ khách Nhật</p>
      </div>
    </div>
  </div>

  <!-- CỘT 3 -->
  <div class="panel" style="margin-top:0;">
    <h4 style="color:#10b981; border-bottom:1px solid rgba(16, 185, 129, 0.2); padding-bottom:8px; font-weight:600; margin-bottom:12px;">Đã Hoàn Thành (Done)</h4>
    <div style="display:flex; flex-direction:column; gap:12px;">
      <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:12px; border-radius:6px; font-size:13px;">
        <span style="color:#10b981; font-weight:bold; font-size:10px; text-transform:uppercase;">[Tech] Ưu tiên: Cao</span>
        <p style="margin:6px 0 0 0; color:#fff; font-weight:600;">Bóc tách và component hóa toàn bộ mã nguồn Astro Dashboard</p>
      </div>
      <div style="background:rgba(255,255,255,0.03); border:1px solid var(--border-color); padding:12px; border-radius:6px; font-size:13px;">
        <span style="color:#10b981; font-weight:bold; font-size:10px; text-transform:uppercase;">[UI] Ưu tiên: Cao</span>
        <p style="margin:6px 0 0 0; color:#fff; font-weight:600;">Triển khai thành công Date Range Picker chuẩn giao diện GA4</p>
      </div>
    </div>
  </div>

</div>