# GHL-Hub Implementation Plan

## Objective
Build **GHL-Hub** — a client-facing, interactive knowledge hub for GoHighLevel, mirroring the finished Woo-Hub architecture. Single-file `hub-ghl.html` with an integrated offline KB-search chat assistant, plus `validate-hub.js` and accessory files. All content derives from the 14 English KB articles; each of the 14 videos is embedded in its correct lesson.

## Confirmed scope
- **Full mirror of Woo-Hub**: single-file `hub-ghl.html` (CONFIG → DATA → ENGINE → integrated chat) + `validate-hub.js` + accessory widget files.
- **Bilingual ES/EN toggle**: all UI chrome (sections, labels, checklists, buttons, nav) fully bilingual; lesson content and videos remain English.
- **YouTube embeds only**: videos embedded via iframe in each lesson; no screenshot/SVG zone mockups.
- **Offline KB-search chat** integrated into the hub (matches Woo-Hub's final refactor — no LLM dependency).

## Content architecture
Two hub sections split the 14 videos:

- **LEARN** (conceptual, videos 1–6): What is GHL, CRM overview, Automations/Workflows explained, Funnel Builder, Features (Calendar/AI/Courses), Hidden Costs & Usage Fees.
- **DO** (step-by-step, videos 7–14): Import Contacts, Conversations (Trigger Links & Snippets), Set Up Calendar & Booking, Opportunities & Pipelines, Payments (Stripe & Invoices), AI Agents & Bots, Workflows for Beginners, Website & Funnel Builder.

## Hub features
- Two top sections: **Learn** and **Do**
- Bilingual ES/EN toggle (localStorage-persisted)
- Live search across lessons/keywords
- Interactive checklists per DO tutorial (localStorage)
- Progress & achievements
- Embedded YouTube video per lesson
- FAQ, Glossary, Quick Steps
- Dark/light theme toggle (Coordenadas palette)
- Integrated offline KB-search chat assistant

## Deliverables
```
Projects/GHL-Hub/
├── hub-ghl.html            # single-file interactive hub (deliverable)
├── validate-hub.js         # Node data-integrity validator
├── ghl-assistant.html      # standalone chat-assistant demo page
├── chat-worker/            # accessory (offline mode is default)
│   ├── src/worker.js
│   ├── widget-snippet.js
│   └── package.json
└── docs/
    ├── plans/2026-09-03-hub-gohighlevel.md
    └── specs/2026-09-03-hub-gohighlevel-design.md
```

## Build order
1. Design spec
2. Content transformation (KB → DATA.tutoriales)
3. Hub skeleton (CONFIG/DATA/ENGINE)
4. KB chat index + integrated chat
5. Accessory files (assistant, chat-worker)
6. validate-hub.js
7. Browser verification + validation