# Mobile Plan 5 — Squad Tab

**Goal:** Full Squad UI with mock data — overview, challenges, bets, duels, pacts. UI polished, ready to wire to Supabase later.

## File map

```
apps/mobile/
  app/
    (tabs)/squad.tsx              → MODIFY: segmented control + sections
    challenge/
      create.tsx                  → modal: create squad challenge
      [id].tsx                    → modal: challenge detail w/ progress grid
    bet/
      create.tsx                  → modal: create bet
      [id].tsx                    → modal: bet detail w/ supporters
    duel/
      create.tsx                  → modal: pick opponent + metric + stake
      [id].tsx                    → modal: live VS screen
  components/
    SegmentedControl.tsx          → reusable 3-segment switch
    SquadHeader.tsx               → name + emoji + level + member count
    SquadStreakBanner.tsx         → "alle haben heute eingecheckt" banner
    LeaderboardRow.tsx            → ranked member row
    ChallengeCard.tsx             → squad challenge with progress bars per member
    BetCard.tsx                   → bet with progress + stakes summary
    DuelCard.tsx                  → VS card with two avatars, scores, deadline
    PactCard.tsx                  → linked-avatars + shared streak
    SquadVsCard.tsx               → squad vs squad battle
    InviteSheet.tsx               → share invite code (mock)
  providers/
    SquadProvider.tsx             → wraps squad mock data + actions
  hooks/
    useSquad.ts                   → activeSquad + helpers
  lib/
    squad-mock.ts                 → 4 squads, 20 members, 5 challenges, 8 bets, 3 duels, 2 pacts
```

## Tasks

- [ ] `lib/squad-mock.ts` — generate 4 mock squads with realistic German names, completion patterns, XP histories
- [ ] `SegmentedControl` — reusable, animated indicator
- [ ] `(tabs)/squad.tsx` — Übersicht | Challenges | Wetten + animated transitions between segments
- [ ] **Übersicht:** SquadHeader → SquadStreakBanner (if streak active) → Weekly Leaderboard (5 rows) → Active Pact (if any) → "Einladen" button
- [ ] **Challenges:** list of ChallengeCard with progress grid (member rows × day columns), "Neue Challenge" CTA, 1v1 Duels listed below
- [ ] **Wetten:** active bets list, completed bets history collapsed, "Neue Wette" CTA
- [ ] All "create" modals wired to SquadProvider mock state (persist to AsyncStorage)
- [ ] Detail screens reachable via tap from cards
- [ ] InviteSheet shows mock invite code with QR placeholder + Copy button
- [ ] Squad vs Squad opponent auto-generated from mock data — shown as separate card section

## Verification

- All four sections render with realistic data on first load
- Creating a bet/challenge/duel persists; reload preserves state
- Switching segments has smooth animation
- `npm run check` passes