# S02: Social Links + Stats Section

**Goal:** Social link icons visible in hero section. Stats bar shows technique count, video count, moment count, and topic breakdown.
**Demo:** After this: Social link icons visible in hero. Stats bar shows technique/video/moment counts and topic breakdown.

## Tasks
- [x] **T01: Added moment_count field to CreatorDetail schema, router query (KeyMoment→SourceVideo join), and frontend TypeScript type** — The backend CreatorDetail schema and router don't include moment_count. The frontend type also lacks it. This task adds the count (via KeyMoment→SourceVideo join) to the backend, adds the field to the Pydantic schema, and syncs the frontend TypeScript interface.

## Steps

1. In `backend/schemas.py`, add `moment_count: int = 0` to the `CreatorDetail` class (after `technique_count`).
2. In `backend/routers/creators.py` `get_creator()` function (~line 127), add a moment count query after the video_count query:
   ```python
   moment_count = (await db.execute(
       select(func.count()).select_from(KeyMoment)
       .join(SourceVideo, KeyMoment.source_video_id == SourceVideo.id)
       .where(SourceVideo.creator_id == creator.id)
   )).scalar() or 0
   ```
   Ensure `KeyMoment` is imported from `models`. Pass `moment_count=moment_count` in the `CreatorDetail(...)` constructor (~line 164).
3. In `frontend/src/api/public-client.ts`, add `moment_count: number;` to the `CreatorDetailResponse` interface (after `technique_count`).
4. Verify: `cd frontend && npx tsc --noEmit` — zero errors.

## Must-Haves

- [ ] `moment_count: int = 0` on CreatorDetail schema
- [ ] Subquery joins KeyMoment→SourceVideo→creator.id
- [ ] `moment_count` passed in CreatorDetail constructor
- [ ] Frontend type includes `moment_count: number`
- [ ] TypeScript compiles with zero errors
  - Estimate: 15m
  - Files: backend/schemas.py, backend/routers/creators.py, frontend/src/api/public-client.ts
  - Verify: cd frontend && npx tsc --noEmit
- [x] **T02: Added SocialIcons component with 9 platform SVG icons, rendered social links in creator hero, and expanded stats bar to show technique/video/moment counts** — Create a SocialIcons component with inline SVGs for common platforms, render social links as clickable icons in the hero section, and update the stats bar to show technique/video/moment counts.

## Steps

1. Create `frontend/src/components/SocialIcons.tsx` following the `CategoryIcons.tsx` pattern (shared style constant `S` for dimensions, `P` for stroke props). Include icons for: instagram, bandcamp, youtube, soundcloud, twitter/x, spotify, facebook, and a globe/website fallback. Each icon is a named export function returning an inline SVG. Also export a `SocialIcon` component that takes `platform: string` and returns the matching icon (case-insensitive key lookup), falling back to globe.

2. In `frontend/src/pages/CreatorDetail.tsx`:
   - Import `SocialIcon` from `../components/SocialIcons`.
   - After the bio paragraph and before genre pills in the `.creator-hero__info` div, add a conditional block:
     ```tsx
     {creator.social_links && Object.keys(creator.social_links).length > 0 && (
       <div className="creator-hero__socials">
         {Object.entries(creator.social_links).map(([platform, url]) => (
           <a key={platform} href={url} target="_blank" rel="noopener noreferrer"
              className="creator-hero__social-link" title={platform}>
             <SocialIcon platform={platform} />
           </a>
         ))}
       </div>
     )}
     ```
   - Update the stats bar to show all three counts:
     ```tsx
     <span>{creator.technique_count} technique{creator.technique_count !== 1 ? 's' : ''}</span>
     <span className="creator-detail__stats-sep">·</span>
     <span>{creator.video_count} video{creator.video_count !== 1 ? 's' : ''}</span>
     <span className="creator-detail__stats-sep">·</span>
     <span>{creator.moment_count} moment{creator.moment_count !== 1 ? 's' : ''}</span>
     ```

3. In `frontend/src/App.css`, add styles:
   - `.creator-hero__socials` — flex row, gap 0.5rem, margin 0.5rem 0
   - `.creator-hero__social-link` — color: var(--color-text-muted), hover: var(--color-accent), transition
   - `.creator-hero__social-link svg` — width: 1.25rem, height: 1.25rem
   - `.creator-detail__stats-sep` — color: var(--color-text-muted), margin: 0 0.25rem
   - Adjust `.creator-detail__stats-bar` to use flex with gap for the count items

4. Verify: `cd frontend && npx tsc --noEmit && npm run build` — zero errors, clean build.

## Must-Haves

- [ ] SocialIcons.tsx with at least 8 platform icons + fallback
- [ ] Social links render as clickable `<a>` tags with `target=_blank` and `rel=noopener noreferrer`
- [ ] Stats bar shows technique_count, video_count, moment_count
- [ ] CSS styles for social links and stats separators
- [ ] TypeScript compiles and production build succeeds
  - Estimate: 30m
  - Files: frontend/src/components/SocialIcons.tsx, frontend/src/pages/CreatorDetail.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npm run build
