# GHL-Hub Design Spec

_Approved build spec for the GoHighLevel knowledge hub. Approved 2026-09-03._

## 1. Philosophy
A single, self-contained HTML file that clients open in any browser. No build step, no server, no external library at runtime. All content, styling, and behavior live in one file split into clear blocks:

1. `<script id="ghl-config">` — brand, videos, i18n keys, toggles.
2. `<script id="ghl-data">` — all content (sections, tutorials, checklist steps, FAQ, glossary, quick steps, achievements, I18N dictionary).
3. `<script id="ghl-engine">` — rendering, search, checklists, toggles, progress, theming.
4. `<script type="text/plain" id="ghl-kb-data">` — generated search index for the offline chat.
5. `<script id="ghl-chat">` — integrated offline KB-search chat widget.

## 2. Brand & Theme
- **Coordenadas palette**: primary green (`#0f7d51`), accent yellow (`#f2c94c`), dark surfaces for dark mode.
- **Dark/light theme** toggled via `data-theme` attr on `<html>`; persisted in localStorage.
- Clean modern sans-serif type stack (system UI fonts).

## 3. Layout
- **Top header**: brand mark, site title, language toggle (ES/EN), theme toggle, search box.
- **Left/desktop sidebar**: nav for sections (Learn, Do), metrón academic progress, links (FAQ, Glossary, Quick Steps).
- **Main area**: route views — home, section, lesson detail.
- **Mobile**: collapsing burger drawer (sidebar), stacked content.

## 4. Data model
Each tutorial:
- `id`, `sec` ("learn" | "do"), `title` (EN lesson title)
- `video` (YouTube embed id)
- `sections`: array of `{title, content}` — prose summary chunks from the KB article (EN)
- `pasos`: checkable step strings (bilingual `{es,en}`)
- `keywords`: search terms (EN + ES)

Supporting data: `faq`, `glosario`, `quickSteps` (condensed recap), `logros` (achievements), `I18N[es|en]`.

## 5. Interactivity
- **Language toggle**: swaps all `data-i18n` text and bilingual step text; persists.
- **Search**: filters lesson cards by keyword match live.
- **Checklists**: per-step checkboxes; state persisted in localStorage keyed by `ghl-progress`.
- **Progress**: section + overall %; unlocks achievements (e.g. "First lesson", "Halfway", "All done").
- **Theme**: dark/light.

## 6. Chat assistant (offline KB-search)
- `ghl-kb-data` holds the KB search index (keywords, titles, step text) as JSON.
- `ghl-chat` matches user text against the index on the client, returns the most relevant snippet + which lesson it belongs to, with a link to open it.
- Fully offline — no API key, no server.
- `ghl-assistant.html` renders the same chat as a standalone demo page.

## 7. Bilingual content
- UI chrome and step labels are bilingual via `I18N` + step `{es,en}`.
- Lesson prose (`sections[].content`) and videos remain **English**.

## 8. Validation
`validate-hub.js` (Node) checks every tutorial has an id, section, video, sections, and keywords; both i18n languages defined; FAQ/glossary present; no broken internal references; progress model consistent.