import React, { useState, useEffect, useRef, useMemo } from 'react'; import { TrendingUp, TrendingDown, BookOpen, ShieldCheck, Award, DollarSign, Calculator, Zap, CheckCircle2, XCircle, RotateCcw, Play, Pause, HelpCircle, Search, Sparkles, ChevronRight, ChevronLeft, UserCheck, Smartphone, CreditCard, Lock, RefreshCw, Layers, Activity, FileText, BarChart2, ArrowUpRight, ArrowDownRight, Eye, AlertTriangle, Crosshair, GraduationCap, Download, Share2, Check } from 'lucide-react'; const COURSES_DATA = [ { id: 'tier-1', tier: 'Tier 1: Beginner', title: 'Forex Market Foundations', level: 'Beginner', badge: 'Novice Trader', color: 'from-emerald-500 to-teal-600', borderColor: 'border-emerald-500/30', description: 'Master the mechanics of currency trading, pip calculations, bid/ask spreads, and order execution.', modules: [ { id: 'm1-1', title: 'What is Forex & Market Structure', duration: '15 mins', jargon: ['Base Currency', 'Quote Currency', 'Liquidity Provider', 'Central Banks'], content: ` The Foreign Exchange (Forex) market is the world's largest and most liquid financial market, trading over $7.5 trillion daily. Key Market Participants: 1. Central Banks (FED, ECB, BOE) - Set interest rates and monetary policy. 2. Commercial Banks - Provide liquidity in the interbank market. 3. Hedge Funds & Institutional Investors - Drive long-term directional trends. 4. Retail Traders - Speculate on price fluctuations using leverage. Currency Pairs are quoted as Base / Quote (e.g., EUR/USD). If EUR/USD is 1.0850, 1 Euro equals 1.0850 US Dollars. `, quiz: [ { q: 'In the currency pair GBP/USD, which is the Quote currency?', options: ['GBP', 'USD', 'Both', 'Neither'], correct: 1, explanation: 'In any forex pair, the first currency is the Base currency and the second is the Quote currency.' }, { q: 'Which participant provides the primary interbank liquidity?', options: ['Retail Traders', 'Commercial Banks', 'Prop Firms', 'Brokers'], correct: 1, explanation: 'Tier-1 commercial banks process major transactions and supply interbank market liquidity.' } ] }, { id: 'm1-2', title: 'Pips, Spreads, & Lot Sizes', duration: '20 mins', jargon: ['Pip', 'Fractional Pip/Pipette', 'Spread', 'Standard Lot'], content: ` Understanding trade sizing is crucial for capital preservation. - Pip (Percentage in Point): Typically the 4th decimal place in standard pairs (0.0001). In JPY pairs, it is the 2nd decimal place (0.01). - Pipette: The 5th decimal place (0.00001), representing a fraction of a pip. - Spread: The difference between the Ask (buy) price and Bid (sell) price. This is the broker's fee. Standard Lot Sizes: - Standard Lot (1.00): 100,000 units (~$10 per pip on EUR/USD) - Mini Lot (0.10): 10,000 units (~$1 per pip) - Micro Lot (0.01): 1,000 units (~$0.10 per pip) `, quiz: [ { q: 'If EUR/USD moves from 1.0820 to 1.0835, how many pips did it gain?', options: ['1.5 pips', '15 pips', '150 pips', '0.15 pips'], correct: 1, explanation: '1.0835 - 1.0820 = 0.0015, which translates to 15 pips.' } ] } ] }, { id: 'tier-2', tier: 'Tier 2: Intermediate', title: 'Technical & Fundamental Analysis', level: 'Intermediate', badge: 'Chart Technician', color: 'from-blue-500 to-cyan-600', borderColor: 'border-blue-500/30', description: 'Learn price action patterns, technical indicators, economic news drivers, and confluence trading.', modules: [ { id: 'm2-1', title: 'Candlestick Dynamics & Support/Resistance', duration: '25 mins', jargon: ['Bullish Engulfing', 'Pinbar', 'Key Levels', 'Breakout'], content: ` Japanese Candlesticks display Open, High, Low, and Close (OHLC) over a specific timeframe. Support & Resistance: - Support: A floor price level where buying interest overcomes selling pressure. - Resistance: A ceiling price level where selling pressure halts upward moves. - Role Reversal: Once Resistance breaks, it frequently acts as new Support upon a retest. `, quiz: [ { q: 'When a strong resistance level breaks upward, what function does it often serve next?', options: ['New Resistance', 'New Support', 'Consolidation zone', 'No function'], correct: 1, explanation: 'Role reversal causes broken resistance to become a future support area.' } ] }, { id: 'm2-2', title: 'Fundamental Indicators (NFP, CPI, Interest Rates)', duration: '30 mins', jargon: ['NFP', 'CPI', 'Hawkish', 'Dovish', 'FOMC'], content: ` Fundamentals dictate macro trends. Key high-impact news releases include: - Non-Farm Payrolls (NFP): US employment metric released monthly. - Consumer Price Index (CPI): Measures inflation rates. Higher CPI leads to central bank rate hikes. - Central Bank Interest Rates: Higher interest rates attract yield-seeking investors, strengthening the currency (Hawkish policy). `, quiz: [ { q: 'What term describes a central bank signaling potential interest rate increases to curb inflation?', options: ['Dovish', 'Hawkish', 'Neutral', 'Quantitative Easing'], correct: 1, explanation: 'Hawkish stance means aggressive interest rate policies to combat inflation.' } ] } ] }, { id: 'tier-3', tier: 'Tier 3: Advanced', title: 'Risk Engineering & Psychology', level: 'Advanced', badge: 'Risk Manager', color: 'from-indigo-500 to-purple-600', borderColor: 'border-indigo-500/30', description: 'Build mathematical position sizing rules, control drawdown, and conquer emotional biases.', modules: [ { id: 'm3-1', title: 'Position Sizing & Risk-to-Reward Ratios', duration: '25 mins', jargon: ['Risk-to-Reward (RR)', 'Drawdown', 'Equity Curve', 'Max Loss'], content: ` Professional trading is pure risk management. Core Principles: 1. Risk no more than 1% to 2% of total capital per trade. 2. Maintain minimum 1:2 Risk-to-Reward Ratio (RR). 3. A 33% win rate with a 1:3 RR produces long-term profitability! `, quiz: [ { q: 'If you risk $100 on a trade targeting $300 profit, what is your Risk-to-Reward ratio?', options: ['1:1', '1:2', '1:3', '3:1'], correct: 2, explanation: '$100 risk relative to $300 reward equals a 1:3 RR.' } ] } ] }, { id: 'tier-4', tier: 'Tier 4: Expert SMC', title: 'Smart Money Concepts & Institutional Flow', level: 'Expert SMC', badge: 'Institutional Elite', color: 'from-amber-500 to-yellow-600', borderColor: 'border-amber-500/30', description: 'Trade like bank algorithms using Order Blocks, Fair Value Gaps, Liquidity Sweeps, and Wyckoff.', modules: [ { id: 'm4-1', title: 'Order Blocks (OB) & Fair Value Gaps (FVG)', duration: '35 mins', jargon: ['Order Block (OB)', 'Fair Value Gap (FVG)', 'Liquidity Sweep', 'Market Structure Shift (MSS)'], content: ` Institutional algorithms leave distinct footprints on charts: 1. Order Block (OB): The last down-candle before a massive bullish rally (or up-candle before a drop) where central banks accumulated massive orders. 2. Fair Value Gap (FVG): A 3-candle pattern where candle 1 high and candle 3 low do not overlap, leaving an imbalance area that price returns to rebalance. 3. Liquidity Sweep: Price temporarily piercing above equal highs (BSL) or below equal lows (SSL) to stop out retail traders before reversing sharply. `, quiz: [ { q: 'What causes a Fair Value Gap (FVG) on a candlestick chart?', options: ['Low liquidity news holiday', 'Rapid institutional buying/selling creating price imbalance', 'Equal high bounces', 'Broker spread spikes'], correct: 1, explanation: 'Rapid institutional aggressive orders leave inefficient price ranges (gaps) requiring future rebalancing.' } ] } ] } ]; const JARGON_DICTIONARY = [ { term: 'Pip', category: 'Basics', def: 'Percentage in Point. The standardized unit representing the smallest price move in currency quotes (0.0001).', example: 'EUR/USD moves from 1.0900 to 1.0905 = 5 Pips.' }, { term: 'Spread', category: 'Mechanics', def: 'The difference between the Ask (buy) price and Bid (sell) price quoted by a broker.', example: 'Ask: 1.0852, Bid: 1.0850 -> Spread = 2 Pips.' }, { term: 'Slippage', category: 'Execution', def: 'The difference between the expected price of a trade and the actual execution price during high volatility.', example: 'Ordering at 1.1000 but filled at 1.1004 due to news event.' }, { term: 'Leverage', category: 'Risk', def: 'Using borrowed capital from a broker to increase trade size exposure (e.g., 1:100 leverage).', example: '$1,000 capital controls $100,000 position.' }, { term: 'Margin Call', category: 'Risk', def: 'A broker notification when account equity drops below required margin threshold.', example: 'Occurs when losses eat into required buffer.' }, { term: 'Lot Size', category: 'Basics', def: 'Standardized contract volume (1 Standard Lot = 100,000 units, Mini = 10k, Micro = 1k).', example: 'Trading 0.10 lots equals $1/pip on EUR/USD.' }, { term: 'Order Block (OB)', category: 'SMC', def: 'Institutional buy/sell order zone where central banks accumulate massive position volume.', example: 'Price returns to an bullish OB and bounces heavily upward.' }, { term: 'Fair Value Gap (FVG)', category: 'SMC', def: 'In-efficient price displacement creating a gap between the wicks of candle 1 and candle 3.', example: 'Algorithms pull price back to fill the gap before continuing trend.' }, { term: 'Liquidity Sweep', category: 'SMC', def: 'When smart money runs price past swing highs/lows to trigger retail stop losses for liquidity.', example: 'Wicking below equal lows before reversing up.' }, { term: 'Market Structure Shift (MSS)', category: 'SMC', def: 'When price breaks a significant key swing high or low, signaling a structural trend change.', example: 'Break of structure indicating bearish reversal.' }, { term: 'Cable', category: 'Slang', def: 'Traders slang term for the GBP/USD currency pair due to transatlantic telegraph cables.', example: 'Cable is rallying today.' }, { term: 'Fiber', category: 'Slang', def: 'Traders slang term for the EUR/USD currency pair.', example: 'Fiber rejected key daily resistance.' }, { term: 'Swaps / Rollover', category: 'Mechanics', def: 'Interest rate differential fee charged or paid for holding positions open overnight.', example: 'Positive swap earns daily interest.' }, { term: 'Drawdown', category: 'Risk', def: 'Peak-to-trough decline in account balance or equity expressed as a percentage.', example: 'A drop from $10,000 to $8,500 is a 15% drawdown.' } ]; const MEMBERSHIP_PLANS = [ { id: 'starter', name: 'Starter Trader', price: '$0', period: 'Forever Free', badge: 'Basic Access', color: 'from-slate-700 to-slate-800', features: ['Access to Tier 1 Beginner Course', 'Interactive Jargon Dictionary', 'Basic Lot Size Calculator', '$10,000 Demo Practice Account', 'Community Access'], cta: 'Current Plan', tierUnlock: 'tier-1' }, { id: 'pro', name: 'Pro Academy', price: '$49', period: 'per month', popular: true, badge: 'Most Popular', color: 'from-emerald-600 to-teal-700', features: ['Unlock Tiers 1, 2 & 3 Courses', 'Full Interactive Order Simulator', 'Advanced Indicator Suite (RSI, EMA)', 'Risk & Lot Calculator with Pair Multipliers', 'Verified Trading Certificate', 'Priority Market Signal Alerts'], cta: 'Upgrade to Pro', tierUnlock: 'tier-3' }, { id: 'vip', name: 'VIP Institutional', price: '$149', period: 'per month', badge: 'VIP Elite', color: 'from-amber-500 to-yellow-600', features: ['Complete Access (All Tiers + SMC)', '1-on-1 Mentorship with Eric Mwenda', 'SMC Order Block & FVG Live Scanner', 'Unlimited Practice Balance Reset', 'EMC Official Graduate Certificate', 'Direct VIP Trading Desk Signal Access'], cta: 'Join VIP Elite', tierUnlock: 'tier-4' } ]; export default function App() { const [activeTab, setActiveTab] = useState('courses'); // courses, simulator, jargon, calculator, pricing const [userPlan, setUserPlan] = useState('starter'); // starter, pro, vip const [userXP, setUserXP] = useState(120); const [completedModules, setCompletedModules] = useState(['m1-1']); // Lesson view state const [selectedCourse, setSelectedCourse] = useState(COURSES_DATA[0]); const [selectedModule, setSelectedModule] = useState(COURSES_DATA[0].modules[0]); const [quizAnswers, setQuizAnswers] = useState({}); const [quizSubmitted, setQuizSubmitted] = useState(false); const [showCertModal, setShowCertModal] = useState(false); // Simulator State const [simPair, setSimPair] = useState('EUR/USD'); const [simBalance, setSimBalance] = useState(10000); const [simLeverage, setSimLeverage] = useState(100); const [orderLotSize, setOrderLotSize] = useState(1.0); const [stopLossPips, setStopLossPips] = useState(20); const [takeProfitPips, setTakeProfitPips] = useState(40); const [activePositions, setActivePositions] = useState([]); const [tradeHistory, setTradeHistory] = useState([]); const [chartTicks, setChartTicks] = useState([]); const [isSimPaused, setIsSimPaused] = useState(false); const [showRSI, setShowRSI] = useState(true); const [showEMA, setShowEMA] = useState(true); // Payment Modal State const [showCheckoutModal, setShowCheckoutModal] = useState(false); const [targetPlan, setTargetPlan] = useState(null); const [payMethod, setPayMethod] = useState('mpesa'); // mpesa, card, crypto const [mpesaPhone, setMpesaPhone] = useState('254748830323'); const [isProcessingPay, setIsProcessingPay] = useState(false); const [paySuccess, setPaySuccess] = useState(false); const canvasRef = useRef(null); // Generate initial candle dataset for Chart Simulator useEffect(() => { const initialCandles = []; let basePrice = simPair === 'XAU/USD' ? 2650.00 : simPair === 'GBP/USD' ? 1.3120 : 1.0850; for (let i = 0; i < 40; i++) { const change = (Math.random() - 0.49) * (simPair === 'XAU/USD' ? 4.0 : 0.0012); const open = basePrice; const close = open + change; const high = Math.max(open, close) + Math.random() * (simPair === 'XAU/USD' ? 2.0 : 0.0006); const low = Math.min(open, close) - Math.random() * (simPair === 'XAU/USD' ? 2.0 : 0.0006); basePrice = close; initialCandles.push({ open, high, low, close, time: i }); } setChartTicks(initialCandles); }, [simPair]); // Real-time chart tick engine useEffect(() => { if (isSimPaused || chartTicks.length === 0) return; const interval = setInterval(() => { setChartTicks((prev) => { const last = { ...prev[prev.length - 1] }; const pipStep = simPair === 'XAU/USD' ? 0.35 : 0.00015; const delta = (Math.random() - 0.485) * pipStep; // Update current candle const newClose = parseFloat((last.close + delta).toFixed(simPair === 'XAU/USD' ? 2 : 5)); const newHigh = Math.max(last.high, newClose); const newLow = Math.min(last.low, newClose); const updated = [...prev]; updated[updated.length - 1] = { ...last, close: newClose, high: newHigh, low: newLow }; // Every 8 ticks, complete candle and start next if (Math.random() > 0.75) { const nextOpen = newClose; updated.push({ open: nextOpen, high: nextOpen, low: nextOpen, close: nextOpen, time: last.time + 1 }); if (updated.length > 50) updated.shift(); } return updated; }); }, 1200); return () => clearInterval(interval); }, [isSimPaused, simPair, chartTicks]); // Monitor positions floating P&L and TP/SL execution const currentPrice = useMemo(() => { if (!chartTicks.length) return 1.0850; return chartTicks[chartTicks.length - 1].close; }, [chartTicks]); useEffect(() => { if (!activePositions.length) return; setActivePositions((prevPositions) => { return prevPositions.map((pos) => { const pipMultiplier = simPair === 'XAU/USD' ? 10 : 10000; const priceDiff = pos.type === 'BUY' ? currentPrice - pos.entryPrice : pos.entryPrice - currentPrice; const pnlPips = priceDiff * pipMultiplier; const floatingPnL = pnlPips * pos.lot * (simPair === 'XAU/USD' ? 10 : 10); // Check Take Profit or Stop Loss auto closure let shouldClose = false; if (pos.type === 'BUY') { if (pos.tp && currentPrice >= pos.tp) shouldClose = true; if (pos.sl && currentPrice <= pos.sl) shouldClose = true; } else { if (pos.tp && currentPrice <= pos.tp) shouldClose = true; if (pos.sl && currentPrice >= pos.sl) shouldClose = true; } if (shouldClose) { closePosition(pos.id, floatingPnL); } return { ...pos, currentPrice, pnlPips, floatingPnL }; }); }); }, [currentPrice]); useEffect(() => { const canvas = canvasRef.current; if (!canvas || !chartTicks.length) return; const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; // Clear background ctx.fillStyle = '#0A0E17'; ctx.fillRect(0, 0, width, height); // Draw Gridlines ctx.strokeStyle = '#1E293B'; ctx.lineWidth = 1; for (let x = 0; x < width; x += 50) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke(); } for (let y = 0; y < height; y += 40) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(width, y); ctx.stroke(); } // Min & Max calculations for chart scaling const prices = chartTicks.flatMap(c => [c.high, c.low]); let minP = Math.min(...prices); let maxP = Math.max(...prices); const range = (maxP - minP) || 0.001; const candleWidth = Math.floor((width - 80) / chartTicks.length); // Render Candlesticks chartTicks.forEach((c, i) => { const x = i * candleWidth + 20; const openY = height - 60 - ((c.open - minP) / range) * (height - 100); const closeY = height - 60 - ((c.close - minP) / range) * (height - 100); const highY = height - 60 - ((c.high - minP) / range) * (height - 100); const lowY = height - 60 - ((c.low - minP) / range) * (height - 100); const isBull = c.close >= c.open; const color = isBull ? '#10B981' : '#EF4444'; // Draw Wick ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(x + candleWidth / 2, highY); ctx.lineTo(x + candleWidth / 2, lowY); ctx.stroke(); // Draw Body ctx.fillStyle = color; const bodyY = Math.min(openY, closeY); const bodyH = Math.max(Math.abs(closeY - openY), 2); ctx.fillRect(x + 2, bodyY, candleWidth - 4, bodyH); }); // Draw Price Axis Right Label const lastPrice = chartTicks[chartTicks.length - 1].close; const lastY = height - 60 - ((lastPrice - minP) / range) * (height - 100); ctx.fillStyle = '#10B981'; ctx.fillRect(width - 75, lastY - 12, 70, 24); ctx.fillStyle = '#FFFFFF'; ctx.font = 'bold 12px monospace'; ctx.fillText(lastPrice.toFixed(simPair === 'XAU/USD' ? 2 : 4), width - 70, lastY + 4); }, [chartTicks, simPair]); const handleExecuteOrder = (type) => { const pipScale = simPair === 'XAU/USD' ? 0.1 : 0.0001; const slPrice = type === 'BUY' ? currentPrice - (stopLossPips * pipScale) : currentPrice + (stopLossPips * pipScale); const tpPrice = type === 'BUY' ? currentPrice + (takeProfitPips * pipScale) : currentPrice - (takeProfitPips * pipScale); const newPosition = { id: Date.now(), pair: simPair, type, lot: orderLotSize, entryPrice: currentPrice, currentPrice, sl: parseFloat(slPrice.toFixed(simPair === 'XAU/USD' ? 2 : 5)), tp: parseFloat(tpPrice.toFixed(simPair === 'XAU/USD' ? 2 : 5)), pnlPips: 0, floatingPnL: 0, openTime: new Date().toLocaleTimeString() }; setActivePositions((prev) => [newPosition, ...prev]); }; const closePosition = (id, overridePnL = null) => { setActivePositions((prev) => { const pos = prev.find(p => p.id === id); if (pos) { const finalPnL = overridePnL !== null ? overridePnL : pos.floatingPnL; setSimBalance(b => parseFloat((b + finalPnL).toFixed(2))); setTradeHistory(h => [{ ...pos, closePrice: currentPrice, finalPnL, status: finalPnL >= 0 ? 'WIN' : 'LOSS' }, ...h]); setUserXP(xp => xp + (finalPnL > 0 ? 30 : 10)); } return prev.filter(p => p.id !== id); }); }; const handleQuizOptionSelect = (qIdx, optIdx) => { setQuizAnswers(prev => ({ ...prev, [qIdx]: optIdx })); }; const handleQuizSubmit = () => { setQuizSubmitted(true); let score = 0; selectedModule.quiz.forEach((q, idx) => { if (quizAnswers[idx] === q.correct) score++; }); if (score === selectedModule.quiz.length) { if (!completedModules.includes(selectedModule.id)) { setCompletedModules([...completedModules, selectedModule.id]); setUserXP(prev => prev + 100); } } }; const handleOpenCheckout = (plan) => { setTargetPlan(plan); setShowCheckoutModal(true); setPaySuccess(false); }; const handleProcessPayment = () => { setIsProcessingPay(true); setTimeout(() => { setIsProcessingPay(false); setPaySuccess(true); setUserPlan(targetPlan.id); setUserXP(xp => xp + 500); }, 2000); }; return (
{/* HEADER NAVBAR */}
{/* Logo & Title */}
ERIC MWENDA CAPITAL Academy

Institutional FX & Wealth Management

{/* User Progress Stats Header */}
Sim Account
${simBalance.toLocaleString('en-US', { minimumFractionDigits: 2 })}
Trader XP
{userXP} XP
Status
{userPlan}
{/* Upgrade CTA */} {userPlan !== 'vip' && ( )}
{/* Navigation Tabs Bar */}
{[ { id: 'courses', label: 'Curriculum & Courses', icon: BookOpen }, { id: 'simulator', label: 'Order & Chart Simulator', icon: Activity }, { id: 'jargon', label: 'Jargon & Matrix', icon: FileText }, { id: 'calculator', label: 'Risk & Lot Calculator', icon: Calculator }, { id: 'pricing', label: 'Pricing & Membership', icon: ShieldCheck } ].map((tab) => { const Icon = tab.icon; const isActive = activeTab === tab.id; return ( ); })}
{}
{/* ================= TAB 1: CURRICULUM & COURSES ================= */} {activeTab === 'courses' && (
{/* Course Navigation Sidebar */}

Learning Path

{completedModules.length} Modules Passed
{COURSES_DATA.map((course) => { const isSelected = selectedCourse.id === course.id; const isLocked = (course.id === 'tier-3' || course.id === 'tier-4') && userPlan === 'starter'; return (
!isLocked && setSelectedCourse(course)} className={`p-3.5 rounded-xl border transition-all cursor-pointer relative overflow-hidden ${ isSelected ? 'bg-slate-800/80 border-emerald-500/50 shadow-md' : 'bg-slate-950/40 border-slate-800/80 hover:border-slate-700' } ${isLocked ? 'opacity-60 cursor-not-allowed' : ''}`} >
{course.level}

{course.title}

{isLocked && }

{course.description}

{course.modules.map((m) => { const isDone = completedModules.includes(m.id); const isModSelected = selectedModule.id === m.id; return (
{ e.stopPropagation(); if (!isLocked) { setSelectedCourse(course); setSelectedModule(m); setQuizSubmitted(false); setQuizAnswers({}); } }} className={`flex items-center justify-between text-xs p-2 rounded-lg transition ${ isModSelected ? 'bg-emerald-500/10 text-emerald-400 font-semibold' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/40' }`} > {isDone ? : } {m.title} {m.duration}
); })}
); })}
{/* Certificate Download Trigger Box */}

EMC Academy Certification

Complete all course modules to generate your official verified trading certificate.

{/* Course Lesson Content Panel */}
{/* Module Header */}
{selectedCourse.tier}

{selectedModule.title}

⏱ {selectedModule.duration}
{/* Key Jargon Tags */}
Key Jargon In This Lesson:
{selectedModule.jargon.map((j, idx) => ( #{j} ))}
{/* Lesson Body Content */}
{selectedModule.content}
{/* Interactive End of Lesson Quiz Engine */}

Interactive Knowledge Check

{selectedModule.quiz.map((q, qIdx) => (

{qIdx + 1}. {q.q}

{q.options.map((opt, optIdx) => { const isSelected = quizAnswers[qIdx] === optIdx; const isCorrect = q.correct === optIdx; let btnStyle = 'bg-slate-900 border-slate-800 text-slate-300 hover:border-slate-700'; if (quizSubmitted) { if (isCorrect) btnStyle = 'bg-emerald-500/20 border-emerald-500 text-emerald-400'; else if (isSelected) btnStyle = 'bg-rose-500/20 border-rose-500 text-rose-400'; } else if (isSelected) { btnStyle = 'bg-emerald-500/10 border-emerald-500 text-emerald-400 font-bold'; } return ( ); })}
{quizSubmitted && (
Explanation: {q.explanation}
)}
))}
{!quizSubmitted ? ( ) : (

Lesson Module Completed!

+100 XP added to your profile.

)}
)} {} {/* ================= TAB 2: INTERACTIVE CHART & SIMULATOR ================= */} {activeTab === 'simulator' && (
{/* Chart Canvas Side */}
{/* Chart Header Controls */}
Live Price: {currentPrice.toFixed(simPair === 'XAU/USD' ? 2 : 4)}
{/* Indicators and Simulation Play/Pause Toggle */}
{/* HTML Canvas Chart Element */}
{/* Account Floating Metrics Bar */}
Balance
${simBalance.toFixed(2)}
Active Positions
{activePositions.length} Open
Floating P&L
acc + p.floatingPnL, 0) >= 0 ? 'text-emerald-400' : 'text-rose-400' }`}> ${activePositions.reduce((acc, p) => acc + p.floatingPnL, 0).toFixed(2)}
Leverage
1:{simLeverage}
{/* Active Positions Table */}

Open Trades Workspace {activePositions.length} Active Orders

{activePositions.length === 0 ? (

No active positions open. Place a Buy or Sell order to start trading.

) : (
{activePositions.map((pos) => ( ))}
Type Lots Entry Price Current Price SL / TP Floating PnL Action
{pos.type} {pos.pair} {pos.lot} {pos.entryPrice.toFixed(simPair === 'XAU/USD' ? 2 : 4)} {pos.currentPrice.toFixed(simPair === 'XAU/USD' ? 2 : 4)} {pos.sl} / {pos.tp} = 0 ? 'text-emerald-400' : 'text-rose-400'}`}> ${pos.floatingPnL.toFixed(2)}
)}
{/* Order Execution Side Control Panel */}

Order Execution Terminal

{/* Lot Sizing */}
Volume (Lots) {orderLotSize} Standard Lot
setOrderLotSize(parseFloat(e.target.value))} className="w-full accent-emerald-500 bg-slate-800 rounded-lg cursor-pointer" />
0.01 Micro 1.0 Standard 5.0 Heavy
{/* SL / TP Sliders */}
Stop Loss (Pips) {stopLossPips} Pips
setStopLossPips(parseInt(e.target.value))} className="w-full accent-rose-500 bg-slate-800 rounded-lg cursor-pointer" />
Take Profit (Pips) {takeProfitPips} Pips
setTakeProfitPips(parseInt(e.target.value))} className="w-full accent-emerald-500 bg-slate-800 rounded-lg cursor-pointer" />
{/* Leverage Selector */}
{/* Action Buy / Sell Buttons */}
{/* Trade History */}

Closed Trades History

{tradeHistory.length === 0 ? (

No closed trades recorded yet.

) : (
{tradeHistory.map((t, idx) => (
{t.type} {t.pair}
{t.lot} Lot @ {t.entryPrice}
= 0 ? 'text-emerald-400' : 'text-rose-400'}`}> {t.finalPnL >= 0 ? '+' : ''}${t.finalPnL.toFixed(2)}
))}
)}
)} {} {/* ================= TAB 3: JARGON & TERMINOLOGY MATRIX ================= */} {activeTab === 'jargon' && (
{/* Header / Search Controls */}

Forex Jargon & Terminology Matrix

Master the vocabulary of central bankers, hedge fund managers, and SMC institutional traders.

{/* Matrix Dictionary Grid */}
{JARGON_DICTIONARY.map((item, idx) => (

{item.term}

{item.category}

{item.def}

Example: {item.example}
))}
)} {} {/* ================= TAB 4: RISK & LOT SIZE CALCULATOR ================= */} {activeTab === 'calculator' && (

Institutional Risk & Position Size Calculator

Calculate exact position sizes in standard, mini, and micro lots to enforce strict risk management.

{/* Inputs */}
setSimBalance(parseFloat(e.target.value) || 0)} className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-sm text-slate-100 font-mono focus:outline-none focus:border-emerald-500" />
Recommended conservative risk: 1.0% - 2.0%
setStopLossPips(parseInt(e.target.value) || 10)} className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-sm text-slate-100 font-mono focus:outline-none focus:border-emerald-500" />
{/* Calculated Results */}

Position Breakdown

Cash at Risk ${(simBalance * 0.01).toFixed(2)}
Standard Lots (1.00) {((simBalance * 0.01) / (stopLossPips * 10)).toFixed(2)} Lots
Units {Math.round(((simBalance * 0.01) / (stopLossPips * 10)) * 100000).toLocaleString()} Units
Position sizing protects your trading capital against consecutive drawdowns.
)} {} {/* ================= TAB 5: PRICING & MEMBERSHIP ================= */} {activeTab === 'pricing' && (
EMC Academy Memberships

Invest in Your Financial Mastery

Unlock institutional trading courses, smart money concepts, and real-time simulator tools.

{MEMBERSHIP_PLANS.map((plan) => { const isCurrent = userPlan === plan.id; return (
{plan.popular && ( {plan.badge} )}

{plan.name}

{plan.price} {plan.period}
    {plan.features.map((f, idx) => (
  • {f}
    • ))}
); })}
)}
{} {/* CHECKOUT MODAL */} {showCheckoutModal && targetPlan && (
{!paySuccess ? ( <>
Upgrade Subscription

{targetPlan.name} - {targetPlan.price}

{/* Payment Method Tabs */}
{[ { id: 'mpesa', label: 'M-Pesa', icon: Smartphone }, { id: 'card', label: 'Card', icon: CreditCard }, { id: 'crypto', label: 'Crypto', icon: Lock } ].map((m) => { const Icon = m.icon; return ( ); })}
{/* Payment Details Form */} {payMethod === 'mpesa' && (
setMpesaPhone(e.target.value)} className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs text-slate-100 font-mono" />

You will receive an STK prompt on your phone to complete payment.

)} ) : (

Membership Activated!

Your account has been upgraded to {targetPlan.name}. All course tiers are unlocked.

)}
)} {/* CERTIFICATE MODAL */} {showCertModal && (

Certificate of Completion

EMC FOREX ACADEMY

This is officially presented to

Certified FX Student

For successfully mastering Forex Market Mechanics, Risk Management, Technical Analysis, and Smart Money Concepts.

Eric Mwenda

Chief Investment Officer, EMC

Verification ID

EMC-FX-2026-9920

)}
); }