# URL State Example - Navigation Flow

## 📍 Visual Journey Through URL Changes

### Step 1: Page Load
```
URL: https://yoursite.com/
State: Fresh start, no parameters
Bit Value: 0
```
```
┌─────────────────────────────────┐
│  What are you looking for?      │
│  ┌─────┐  ┌─────┐               │
│  │ 🚪  │  │ 🪟  │               │
│  │Door │  │Window│              │
│  └─────┘  └─────┘               │
└─────────────────────────────────┘
```

---

### Step 2: User Selects "Door"
```
URL: https://yoursite.com/?b=1&q=q-door-type
                              ↑
                              Bit 0 set (Door)
State: Door selected
Bit Value: 1 (binary: 1)
Bits Active: Door
```
```
┌─────────────────────────────────┐
│  What type of door?             │
│  ┌──────────┐  ┌──────────┐    │
│  │Storm Door│  │Patio Door│    │
│  └──────────┘  └──────────┘    │
└─────────────────────────────────┘
```

---

### Step 3: User Selects "Storm Door"
```
URL: https://yoursite.com/?b=16385&q=q-material-storm-door
                              ↑
                              16385 = 1 (Door) + 16384 (Storm Door)
State: Door + Storm Door selected
Bit Value: 16385 (binary: 100000000000001)
Bits Active: Door, Storm Door subtype

Calculation:
  Bit 0 (Door)       = 1
  Bit 14 (Storm Door)= 16384
  Total             = 16385
```
```
┌─────────────────────────────────┐
│  Select Material                 │
│  CONDITIONAL: Only showing       │
│  because some storm doors have   │
│  multiple materials              │
│  ┌─────────┐  ┌─────────┐       │
│  │Aluminum │  │  Vinyl  │       │
│  └─────────┘  └─────────┘       │
└─────────────────────────────────┘
```

---

### Step 4: User Selects "Aluminum"
```
URL: https://yoursite.com/?b=16401&q=q-color-storm-door
                              ↑
                              16401 = 1 + 16 + 16384
State: Door + Aluminum + Storm Door
Bit Value: 16401 (binary: 100000000010001)
Bits Active: Door, Aluminum, Storm Door subtype

Calculation:
  Bit 0 (Door)       = 1
  Bit 4 (Aluminum)   = 16
  Bit 14 (Storm Door)= 16384
  Total             = 16401
```
```
┌─────────────────────────────────┐
│  Select Color                    │
│  ┌───────┐ ┌───────┐ ┌───────┐ │
│  │ Black │ │ White │ │Bronze │ │
│  └───────┘ └───────┘ └───────┘ │
└─────────────────────────────────┘
```

---

### Step 5: User Selects "White"
```
URL: https://yoursite.com/?b=16529&q=q-dimensions
                              ↑
                              16529 = 1 + 16 + 128 + 16384
State: Door + Aluminum + White + Storm Door
Bit Value: 16529 (binary: 100000010010001)
Bits Active: Door, Aluminum, White, Storm Door

Calculation:
  Bit 0 (Door)       = 1
  Bit 4 (Aluminum)   = 16
  Bit 7 (White)      = 128
  Bit 14 (Storm Door)= 16384
  Total             = 16529
```
```
┌─────────────────────────────────┐
│  Enter Dimensions                │
│  Width:  [______] inches         │
│  Height: [______] inches         │
│  [Continue →]                    │
└─────────────────────────────────┘
```

---

### Step 6: View Results
```
URL: https://yoursite.com/?b=16529&q=results
State: Showing filtered products
Bit Value: 16529
Products Matched: All doors that are:
  ✓ Storm Door type (bit 14)
  ✓ Aluminum material (bit 4)
  ✓ Available in White (bit 7)
```
```
┌─────────────────────────────────┐
│  Found 3 Products               │
│  ┌─────────────────────────┐   │
│  │ STAR 6100 FULL VIEW     │   │
│  │ Code: 6100I             │   │
│  │ Aluminum, White, Bronze  │   │
│  │ [View Details]          │   │
│  └─────────────────────────┘   │
│  ┌─────────────────────────┐   │
│  │ COLUMBIA COBRA          │   │
│  │ Code: COBRAI            │   │
│  │ [View Details]          │   │
│  └─────────────────────────┘   │
└─────────────────────────────────┘
```

---

### Step 7: Click Product Detail
```
URL: https://yoursite.com/?p=6100I&b=16529
                              ↑
                              Product code added
State: Viewing specific product 6100I
Bit Value: 16529 (preserved for "back" navigation)
```
```
┌─────────────────────────────────────────┐
│  STAR 6100 FULL VIEW STORM DOOR         │
│  ──────────────────────────────────     │
│  Product Code: 6100I                    │
│  Category: STD                          │
│  Materials: Aluminum                    │
│  Colors: White, Bronze                  │
│                                          │
│  Compatible Accessories:                │
│  • BGIST - Inserts for Storm Doors      │
│  • TGIODD - Top Glass Inserts           │
│                                          │
│  [← Back] [Start Over] [🔗 Share]      │
└─────────────────────────────────────────┘
```

---

### Step 8: Copy & Share URL
```
User clicks "🔗 Share" button
Copies: https://yoursite.com/?p=6100I&b=16529

Someone else pastes this URL in their browser:
→ Instantly shows product 6100I
→ Navigation state preserved (b=16529)
→ Back button navigates through original path
```

---

### Step 9: Browser Back Button
```
User clicks browser back button

URL Changes:
https://yoursite.com/?p=6100I&b=16529
           ↓
https://yoursite.com/?b=16529&q=results
           ↓
https://yoursite.com/?b=16529&q=q-dimensions
           ↓
https://yoursite.com/?b=16401&q=q-color-storm-door
           ↓
https://yoursite.com/?b=16385&q=q-material-storm-door
           ↓
https://yoursite.com/?b=1&q=q-door-type
           ↓
https://yoursite.com/

Each step backward:
✓ Restores question state
✓ Maintains bit value
✓ Shows correct UI
```

---

### Step 10: Refresh Page
```
At any point, user presses F5 to refresh

Before Refresh: https://yoursite.com/?b=16529&q=q-dimensions
After Refresh:  https://yoursite.com/?b=16529&q=q-dimensions

Result:
✓ Returns to same question
✓ Previous answers restored
✓ Accumulated selections preserved
✓ Can continue where they left off
```

---

## 🎯 Bit Value Breakdown Reference

### Common Values You'll See

| Bit Value | Decimal | What It Means |
|-----------|---------|---------------|
| `0000...0001` | 1 | Door selected |
| `0000...0010` | 2 | Window selected |
| `0001...0001` | 16385 | Door + Storm Door |
| `0001...0011` | 16387 | Door + Window + Storm Door |
| `0001...0011` | 16401 | Door + Aluminum + Storm Door |
| `0010...0010` | 16529 | Door + Aluminum + White + Storm Door |

### Quick Decode Formula
```
To check if a bit is set:
  if (bitValue & (1 << bitPosition)) {
    // That attribute is selected
  }

Examples:
  16529 & 1     = 1   → Door is selected ✓
  16529 & 2     = 0   → Window is NOT selected
  16529 & 16    = 16  → Aluminum is selected ✓
  16529 & 128   = 128 → White is selected ✓
  16529 & 16384 = 16384 → Storm Door is selected ✓
```

---

## 🔗 URL Patterns

### Navigation State
```
Pattern: /?b={bitValue}&q={questionKey}
Example: /?b=16529&q=q-dimensions
Use: Bookmark navigation progress
```

### Product View
```
Pattern: /?p={productCode}&b={bitValue}
Example: /?p=6100I&b=16529
Use: Direct link to product with context
```

### Initial State
```
Pattern: /
Example: https://yoursite.com/
Use: Fresh start, no parameters
```

---

## 💡 Power User Features

### Hack the URL
Users can manually modify URLs:

```
Original: /?b=16529&q=q-dimensions
         (Door + Aluminum + White + Storm Door)

Modified: /?b=34&q=q-dimensions
         (Vinyl only)

Result: Jumps directly to Vinyl products
```

### Preset Configurations
Your sales team can create bookmarks:

```
Residential Storm Doors:
  /?b=16401&q=results

Commercial Windows:
  /?b=8194&q=results

Budget Options (Vinyl):
  /?b=32&q=start
```

### Analytics Tracking
Track which combinations are popular:

```
Top URLs:
  /?b=16529 → White Aluminum Storm Doors (2,453 views)
  /?b=8226  → White Vinyl Windows (1,834 views)
  /?b=272   → Bronze products (892 views)
```

---

## 🎓 Learning Example

### Try This Exercise:
1. Start at homepage (b=0)
2. Select Window (b=2)
3. Select Primary Window (b=8194)
4. Select Vinyl (b=8226)
5. Select White (b=8354)

Your URL should be: `/?b=8354&q=q-dimensions`

Decode: 8354 in binary = 10000010100010
- Bit 1 (2) = Window ✓
- Bit 5 (32) = Vinyl ✓
- Bit 7 (128) = White ✓
- Bit 13 (8192) = Primary Window ✓
Total: 2 + 32 + 128 + 8192 = 8354 ✓

---

Ready to implement! 🚀