# Classroom Support Integration

## Purpose

`ClassroomSupport` renders editable classroom strategy content from the backend content catalog. The frontend owns only UI state, filtering rules, style tokens, and presentation.

Runtime strategy records, images, descriptions, and implementation tips belong to the backend seed payload and can be managed through content catalog APIs.

## Frontend Layers

View:

- `frontend/src/components/frameworks/ClassroomSupport.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportView.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportHeader.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportTryToday.tsx`
- `frontend/src/components/classroom-support/ClassroomSupportFilters.tsx`
- `frontend/src/components/classroom-support/ClassroomStrategyGrid.tsx`
- `frontend/src/components/classroom-support/ClassroomStrategyCard.tsx`
- `frontend/src/components/classroom-support/ClassroomStrategyDetailModal.tsx`

Business logic:

- `frontend/src/business/classroom-support/hooks.ts`
- `frontend/src/business/classroom-support/selectors.ts`
- `frontend/src/business/classroom-support/types.ts`

Shared contracts and UI config:

- `frontend/src/shared/types/app.ts`
- `frontend/src/shared/constants/classroomSupport.ts`
- `frontend/src/shared/constants/contentCatalog.ts`

## Backend Contract

The page reads:

- `GET /api/public/content-catalog/classroom-strategies`

The content payload is seeded in:

- `backend/src/db/seeders/content-catalog-data/content-catalog-seed-payloads.js`

Each strategy payload supports:

- `id`
- `title`
- `description`
- `category`
- `ageGroup`
- `zone`
- `image`
- `implementationTip`

## Behavior

- `useClassroomSupportPage` loads strategies through the shared content catalog hook.
- Selectors handle search, category, age, zone, favorites-only filtering, favorite toggling, and the daily strategy selection.
- View components receive a prepared page model and do not call API/data access modules.
- Loading, empty, and error states are explicit through `StatePanel`.
- The detail modal displays `implementationTip` only when the backend payload provides it.

## Data Ownership Rules

- Do not add classroom strategy records to frontend constants.
- Do not add frontend fallback strategy payloads.
- Keep frontend constants limited to filter options, style classes, query-independent timing values, and UI labels.
- Test-only fixtures may live in selector tests or `frontend/src/test-seeds/`.