# Sprint 3 — Bricks Builder Blueprint: Stats Bar + Ticker

**Áp dụng cho:** Bricks Homepage Template
**CSS Module:** `ticker.css` (Sprint 0, đã enqueue)
**JS Modules:** `counter.js`, `ticker.js` (Sprint 0)

---

## A. TICKER BAR

### Cấu trúc Element Tree

```
Div (class: ticker-bar)
└── Div (class: ticker-track)
    └── Query Loop on ACF Options Repeater: ticker_items
        ├── Span (class: ticker-item)
        │   → Dynamic: {acf_options:ticker_icon} + {acf_options:ticker_text}
        │   (duplicate set for seamless loop)
```

### Cách dựng trong Bricks
1. Thêm **Div** → class: `ticker-bar`
2. Bên trong, thêm **Div** → class: `ticker-track`
3. **Query Loop** trên `ticker-track`:
   - Type: ACF Repeater
   - Field: `ticker_items` (Options Page)
4. Bên trong loop, thêm **Rich Text** → class: `ticker-item`
5. Content: `{acf_repeater:ticker_icon} {acf_repeater:ticker_text}`
6. **Duplicate** toàn bộ nội dung ticker-track (copy paste) để tạo seamless loop

### ACF Fields
| Field | Sub-field | Type |
|---|---|---|
| `ticker_items` (Repeater) | `ticker_icon` | Text (emoji) |
| | `ticker_text` | Text |

---

## B. STATS BAR

### Cấu trúc Element Tree

```
Div (class: stats)
└── Container (class: container stats-grid stagger)
    └── Query Loop on ACF Options Repeater: stats_items
        └── Div (class: stat-item reveal-scale)
            ├── Div (class: stat-num, data-target: {value})
            │   → Text: "0" (JS sẽ animate lên target)
            └── Div (class: stat-label)
                → Dynamic: {acf_repeater:stat_label}
```

### Cách dựng trong Bricks
1. Thêm **Div** → class: `stats`
2. Background: gradient hoặc dark color
3. **Container** → class: `container stats-grid stagger`
4. **Query Loop** trên container:
   - Type: ACF Repeater
   - Field: `stats_items` (Options Page)
5. Bên trong loop:
   - **Div** class: `stat-item reveal-scale`
   - **Heading** (h3 hoặc div) class: `stat-num`
   - Custom Attribute: `data-target` = `{acf_repeater:stat_value}`
   - Text content: `0`
   - **Text** class: `stat-label` → `{acf_repeater:stat_label}`
6. counter.js tự động animate khi IntersectionObserver trigger

### Stats CSS (thêm vào Bricks Custom CSS hoặc tạo stats.css)

```css
.stats {
  background: linear-gradient(135deg, var(--blue-deeper), var(--blue-dark));
  padding: 40px 0;
  color: var(--white);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item { padding: 20px; }
.stat-num {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .stat-num { font-size: 2rem; }
}
```

### ACF Fields
| Field | Sub-field | Type |
|---|---|---|
| `stats_items` (Repeater) | `stat_value` | Number |
| | `stat_label` | Text |
| | `stat_suffix` | Text (optional: +, %, etc.) |

---

## Checklist
- [ ] Ticker chạy marquee liên tục, pause khi hover
- [ ] Ticker content từ ACF Options (không hardcode)
- [ ] Stats 4 cột, animate count-up khi scroll vào view
- [ ] Stats data từ ACF Options (không hardcode)
- [ ] Responsive: 4-col → 2-col
- [ ] prefers-reduced-motion: marquee dừng