% Strategy Mode Selector - UI Components

## Component Hierarchy

```
Daily Trading Plan (index.tsx)
├── PlanHeader
├── Strategy Info Banner ✨ NEW
│   └── Shows: Mode, Emoji, Max Trades, R:R, Stop %
├── Strategy Mode Selector ✨ NEW
│   ├── Full Variant (Desktop/Tablet)
│   │   ├── Header with Show/Hide Details
│   │   ├── 3x Mode Buttons (SCALP/SWING/HYBRID)
│   │   ├── Mode Description Box
│   │   └── Optional Details Panel
│   │       ├── Risk Management Section
│   │       ├── Time & Frequency Section
│   │       ├── Strategy Tips
│   │       └── Action Buttons
│   └── Compact Variant (Mobile)
│       └── 3 Small Buttons in Row
├── PlanBiasSelector
├── PlanRiskParameters
├── PlanKeyLevelsEditor
└── Trading Notes
```

---

## Desktop Layout

```
┌─────────────────────────────────────────────────────────────┐
│  📅 DAILY TRADING PLAN                                      │
│  Edit | Generate AI | Reset                                 │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  ⚡ SCALP Mode Active                                        │
│  Max 20 trades • R:R 1:1 • Stop: 0.5%                       │
└─────────────────────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────────┐
│  TRADING STRATEGY MODE                    [Show Details]    │
│                                                              │
│  ┌──────────────┬──────────────┬──────────────┐            │
│  │     ⚡       │      📈      │      🎯      │            │
│  │    SCALP     │    SWING     │    HYBRID    │            │
│  │ Quick Moves  │ Trend Capture│   Balanced   │            │
│  └──────────────┴──────────────┴──────────────┘            │
│                                                              │
│  Quick profits from micro price moves. High frequency,      │
│  tight stops.                                               │
│                                                              │
│  ┌──────────────────────────────────────────────────────┐  │
│  │ RISK MANAGEMENT                                       │  │
│  │                                                        │  │
│  │ Risk per Trade:        0.25%                          │  │
│  │ Stop Loss:            0.5%                            │  │
│  │ Take Profit:          1%                              │  │
│  │ R:R Ratio:            1:1                             │  │
│  │                                                        │  │
│  │ TIME & FREQUENCY                                       │  │
│  │                                                        │  │
│  │ Time Frame:           1m                              │  │
│  │ Max Hold Time:        5m                              │  │
│  │ Max Daily Trades:     20 trades                        │  │
│  │                                                        │  │
│  │ 💡 STRATEGY TIPS                                       │  │
│  │                                                        │  │
│  │ • Use 1-5 min charts for entry signals                │  │
│  │ • Close 50% at 0.5% profit, let 50% run to 1%        │  │
│  │ • Avoid holding through market chop                   │  │
│  │ • Speed is critical - execute fast                    │  │
│  │ • Max 5-20 trades per day depending on volatility    │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                              │
│  ┌──────────┬──────────┬──────────┐                        │
│  │   ⚡     │   📈     │   🎯     │                        │
│  │ Scalping │  Swing   │  Hybrid  │                        │
│  └──────────┴──────────┴──────────┘                        │
└────────────────────────────────────────────────────────────┘

[Other Plan Components Below...]
```

---

## Mobile Layout

```
┌─────────────────────────┐
│ 📅 DAILY TRADING PLAN   │
│ Edit | Generate AI|Reset│
└─────────────────────────┘

┌─────────────────────────┐
│ ⚡ SCALP Mode Active    │
│ Max 20 trades • R:R 1:1 │
│ Stop: 0.5%              │
└─────────────────────────┘

┌─────────────────────────┐
│ ⚡ 📈 🎯                  │
│ SCALP SWING HYBRID      │
└─────────────────────────┘

[Strategy Mode Selector - Compact]

[Other Plan Components Below...]
```

---

## Component States

### Mode Selection - Before Click
```
┌──────────────────────────────────────┐
│  3 Strategy Buttons (Unselected)     │
│  ┌──────────┬──────────┬──────────┐  │
│  │    ⚡    │   📈     │   🎯     │  │
│  │  SCALP   │  SWING   │  HYBRID  │  │
│  │          │          │          │  │
│  └──────────┴──────────┴──────────┘  │
└──────────────────────────────────────┘
```

### Mode Selection - After Click (SCALP Selected)
```
┌──────────────────────────────────────┐
│  SCALP Mode Selected (Highlighted)   │
│  ┌──────────┬──────────┬──────────┐  │
│  │    ⚡    │   📈     │   🎯     │  │
│  │  SCALP   │  SWING   │  HYBRID  │  │
│  │ [ACTIVE] │          │          │  │
│  └──────────┴──────────┴──────────┘  │
│                                       │
│  Info Box Updates:                   │
│  ✅ Daily target = $50               │
│  ✅ Max loss = $12.50                │
│  ✅ Stop = 0.5%                      │
│  ✅ Max trades = 20                  │
└──────────────────────────────────────┘
```

---

## Data Flow Diagram

```
┌─────────────────────────┐
│  User Clicks SCALP      │
└────────────┬────────────┘
             │
             ▼
┌─────────────────────────────────────┐
│ handleStrategyModeChange()          │
│ - Receives: mode = 'SCALP'          │
│ - Creates: defaultPlan()            │
│ - Gets: STRATEGY_PRESETS['SCALP']   │
└────────────┬────────────────────────┘
             │
             ▼
┌─────────────────────────────────────┐
│ createDefaultPlan(price, 'SCALP')   │
│ - Risk: 0.25%                       │
│ - Stop: $4 (0.5%)                   │
│ - Target: $8 (1%)                   │
│ - Daily Target: $50                 │
│ - Max Loss: $12.50                  │
│ - Max Trades: 20                    │
└────────────┬────────────────────────┘
             │
             ▼
┌─────────────────────────────────────┐
│ setPlan() - Update Local Storage    │
└────────────┬────────────────────────┘
             │
             ▼
┌─────────────────────────────────────┐
│ Component Re-renders:               │
│ ✅ Strategy Info Banner Updates     │
│ ✅ Plan Values Update               │
│ ✅ Risk Parameters Recalculate      │
│ ✅ Entry Zone Adjusts               │
│ ✅ Key Levels Update                │
└─────────────────────────────────────┘
```

---

## Interactive Flow Example

### Scenario: Trader Switches from SWING to SCALP

**Before:**
```
Daily Plan:
├─ Mode: SWING
├─ Daily Target: $500
├─ Max Loss: $250
├─ Max Trades: 3
├─ Stop Loss: 2%
└─ Take Profit: 8%
```

**User Action:** Click SCALP Button

**After (Instant):**
```
Daily Plan:
├─ Mode: SCALP ✨ CHANGED
├─ Daily Target: $50 ✨ CHANGED
├─ Max Loss: $12.50 ✨ CHANGED
├─ Max Trades: 20 ✨ CHANGED
├─ Stop Loss: 0.5% ✨ CHANGED
└─ Take Profit: 1% ✨ CHANGED

Info Banner: "⚡ SCALP Mode Active"
```

---

## Color Scheme

```
SCALP Mode:
├─ Primary: Yellow (#FCD34D)
├─ Accent: Amber (#FBBF24)
└─ Text: White on Dark

SWING Mode:
├─ Primary: Blue (#3B82F6)
├─ Accent: Cyan (#06B6D4)
└─ Text: White on Dark

HYBRID Mode:
├─ Primary: Purple (#A855F7)
├─ Accent: Pink (#EC4899)
└─ Text: White on Dark

Borders/Info:
├─ Active Selected: Full Opacity
├─ Inactive: Reduced Opacity (60%)
└─ Hover: Increased Opacity

Strategy Info Banner:
├─ Background: Blue/10 (blue-500/10)
├─ Border: Blue/30 (blue-500/30)
├─ Text: Blue/300 (blue-300)
└─ Accent: Yellow (emoji)
```

---

## Responsive Breakpoints

```
Mobile (< 640px):
├─ StrategyModeSelector: variant="compact"
├─ Layout: Vertical Stack
├─ Buttons: Full Width
└─ Details: Hidden (tap to expand)

Tablet (640px - 1024px):
├─ StrategyModeSelector: variant="compact"
├─ Layout: Grid 2 columns
├─ Details: Expandable
└─ Responsive spacing

Desktop (> 1024px):
├─ StrategyModeSelector: variant="full"
├─ Layout: Card view
├─ Details: Visible by default
└─ All parameters displayed
```

---

## Accessibility Features

```
✅ Semantic HTML buttons
✅ ARIA labels on all interactive elements
✅ Color not sole indicator (emoji + text)
✅ High contrast text
✅ Keyboard navigable
✅ Focus states visible
✅ Proper heading hierarchy
✅ Type hints and descriptions
```

---

## Animation & Transitions

```
Button Hover:
├─ Transition: 150ms ease
├─ Background: +10% opacity
└─ Scale: 1.02x

Mode Switch:
├─ Fade: 100ms
├─ Parameters: Instant update
├─ Info banner: Slide in

Details Panel:
├─ Open: 200ms ease-out
├─ Close: 100ms ease-in
└─ Max height: auto
```