# Premium Version Implementation Schedule

## Timeline: 8-9 Working Days

### **Phase 1: Analysis & Architecture** (Day 1 - 8 hours)
- ✅ Catalog 45 CSS and 41 JS files from `/pro` folder
- ✅ Map HTML templates to React components
- ✅ Design integration strategy (no MyUIbrix conflicts)
- ✅ Create architecture documentation

**Deliverables:** Technical spec, component wireframes

---

### **Phase 2: Backend Infrastructure** (Day 1-2 - 12 hours)

#### 2.1 Environment Configuration (2h)
```bash
# Add to .env
PREMIUM_MODE=false
PREMIUM_HOMEPAGE=false
PREMIUM_BLOG=false
PREMIUM_404=false
PREMIUM_DISABLE_MYUIBRIX=false
```

#### 2.2 Premium Mode Middleware (3h)
- Create `internal/middleware/premium_mode.go`
- Detect premium mode via environment
- Add context flags for template rendering

#### 2.3 Settings API Extension (3h)
- Extend `/api/v1/settings/public` endpoint
- Add `premium_mode_active` field
- Include premium feature flags in response

#### 2.4 Static Asset Routes (2h)
```go
router.Static("/premium/css", "./pro/css")
router.Static("/premium/js", "./pro/js")
router.Static("/premium/img", "./pro/img")
```

#### 2.5 Database Migration (2h)
```sql
ALTER TABLE settings ADD COLUMN premium_mode_active BOOLEAN DEFAULT FALSE;
ALTER TABLE settings ADD COLUMN premium_features TEXT;
```

**Deliverables:** Backend API ready, static routes configured

---

### **Phase 3: Frontend Premium Components** (Day 2-4 - 16 hours)

#### 3.1 Premium Layout Wrapper (4h)
- Create `PremiumLayout.tsx` with dynamic CSS/JS loading
- Handle Chakra UI style conflicts
- Implement cleanup on unmount

#### 3.2 Premium Homepage (6h)
**Components:**
- `PremiumHomePage.tsx` - Main page
- `ZoomSlider.tsx` - Hero slider with parallax
- `PremiumNav.tsx` - Navigation
- `PremiumFooter.tsx` - Footer

**Features:**
- Dynamic data from API (matches, articles, players)
- React Router navigation
- Responsive breakpoints (mobile: 767px, tablet: 1199px, desktop: 1440px+)

#### 3.3 Premium Blog (4h)
- `PremiumBlogPage.tsx` - Blog post display
- Integrate article API
- Related posts section
- Social sharing buttons

#### 3.4 Premium 404 Page (2h)
- Simple error page with navigation
- Styled with premium CSS

**Deliverables:** All premium React components

---

### **Phase 4: Asset Migration & Styling** (Day 4-6 - 16 hours)

#### 4.1 CSS Organization (4h)
```
frontend/src/styles/premium/
├── core/ (bizoni.css, bootstrap.css, elementor-*.css)
├── components/ (zoom-slider.css, swiper.css)
├── utilities/ (overrides.css, animations.css)
└── index.css
```

#### 4.2 JavaScript Integration (6h)
**Load Order:**
1. jQuery + migrate + modernizr
2. Page-specific: swiper, parallax, zoom-slider
3. Elementor: webpack.runtime, frontend-modules, frontend

**Utilities:**
- `getPremiumCSSFiles(pageType)` - Returns CSS array
- `getPremiumJSFiles(pageType)` - Returns JS array
- `loadJS(src)` - Promise-based loader
- `loadCSS(src)` - Dynamic CSS injection

#### 4.3 Font Integration (2h)
- Google Fonts: Open Sans, Sofia Sans, Marcellus, Tangerine
- Material Icons
- Font fallbacks

#### 4.4 Icon System (2h)
- Ionicons 7.1.0
- Font Awesome shims
- Icon mapping utility

#### 4.5 Image Assets (2h)
- Copy from `/pro/img/` to `public/premium/img/`
- Lazy loading
- Optimize delivery

**Deliverables:** Complete asset pipeline

---

### **Phase 5: Dynamic Theming** (Day 6-7 - 8 hours)

#### 5.1 Color Palette Injection (3h)
```typescript
// Inject club colors
root.style.setProperty('--lte-main-color', settings.primary_color);
root.style.setProperty('--lte-secondary-color', settings.secondary_color);
```

#### 5.2 Logo Integration (2h)
- Replace hardcoded logos with `settings.club_logo_url`
- Support light/dark variants
- Fallback to default

#### 5.3 Dynamic Content (3h)
- Club name, tagline, contact info
- Navigation from API
- FACR matches
- Featured articles → slider
- Zonerama gallery

**Deliverables:** Fully dynamic premium theme

---

### **Phase 6: Testing & Integration** (Day 7-8 - 12 hours)

#### 6.1 Router Integration (3h)
```typescript
<Route path="/" element={
  isPremiumMode ? <PremiumHomePage /> : <HomePage />
} />
```

#### 6.2 Performance Testing (3h)
**Targets:**
- Initial load: < 2s
- CSS load: < 500ms
- JS load: < 1s
- Lighthouse: > 90

**Optimizations:**
- Code splitting
- Dynamic imports
- Resource hints
- Asset compression

#### 6.3 Cross-Browser Testing (2h)
- Chrome, Firefox, Safari, Edge
- Mobile Safari, Chrome Mobile

#### 6.4 Responsive Testing (2h)
- Mobile: 360-767px
- Tablet: 768-1199px
- Desktop: 1200-1920px+

#### 6.5 Integration Testing (2h)
- Toggle premium on/off
- MyUIbrix disabled in premium
- FACR data integration
- Blog rendering
- Forms functionality

**Deliverables:** Test reports, performance benchmarks

---

### **Phase 7: Documentation & Deployment** (Day 8-9 - 8 hours)

#### 7.1 User Documentation (2h)
- How to enable premium mode
- Feature comparison table
- Configuration guide
- Troubleshooting
- FAQ

#### 7.2 Developer Documentation (2h)
- Architecture overview
- Component API reference
- Customization guide
- Adding new premium pages

#### 7.3 Deployment Checklist (2h)
- [ ] Update `.env.example`
- [ ] Run database migration
- [ ] Copy premium assets to production
- [ ] Update Nginx config for `/premium/*` routes
- [ ] Test premium mode in staging
- [ ] Rollback plan

#### 7.4 Admin UI Integration (2h)
- Add premium toggle in Admin Settings
- Visual preview switcher
- Feature status dashboard

**Deliverables:** Complete documentation, deployment ready

---

## Quick Reference

### Environment Variables
```bash
PREMIUM_MODE=true              # Master toggle
PREMIUM_HOMEPAGE=true          # Homepage only
PREMIUM_BLOG=true              # Blog pages only
PREMIUM_404=true               # 404 page only
PREMIUM_DISABLE_MYUIBRIX=true  # Auto-disable editor
```

### Key Files Created
```
Backend:
- internal/middleware/premium_mode.go
- internal/controllers/premium_controller.go
- database/migrations/XXXXXX_add_premium_settings.*.sql

Frontend:
- frontend/src/layouts/PremiumLayout.tsx
- frontend/src/pages/Premium*.tsx
- frontend/src/components/premium/*
- frontend/src/hooks/usePremiumTheme.ts
- frontend/src/utils/premiumAssets.ts
- frontend/src/styles/premium/*
- frontend/public/premium/{css,js,img}/*

Documentation:
- DOCS/PREMIUM_ARCHITECTURE.md
- DOCS/PREMIUM_USER_GUIDE.md
- DOCS/PREMIUM_DEVELOPER_GUIDE.md
```

### Testing Checklist
- [ ] Premium mode toggle works
- [ ] MyUIbrix disabled when premium active
- [ ] All animations work (zoom slider, parallax)
- [ ] Dynamic data loads (matches, articles, players)
- [ ] Club colors applied correctly
- [ ] Responsive on all devices
- [ ] Cross-browser compatible
- [ ] Performance meets targets (<2s load)
- [ ] SEO meta tags working
- [ ] Forms submit correctly

### Rollback Plan
1. Set `PREMIUM_MODE=false` in .env
2. Restart backend
3. Clear browser cache
4. Verify standard site works