<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus Markets — Learn to trade ETH/USDC</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⬡</text></svg>">
</head>
<body>
    <header class="topbar">
        <div class="topbar-inner">
            <a href="#/home" class="brand">
                <span class="brand-mark">⬡</span>
                <span class="brand-name">NEXUS<span class="brand-dim">MARKETS</span></span>
            </a>
            <nav class="main-nav" id="mainNav">
                <a href="#/home" data-nav="home">Home</a>
                <a href="#/trade" data-nav="trade">Trade</a>
                <a href="#/learn" data-nav="learn">Learn</a>
            </nav>
            <div class="topbar-actions" id="topbarActions">
                <span class="demo-badge">DEMO</span>
                <button class="btn btn-ghost" id="btnSignIn">Sign in</button>
                <button class="btn btn-primary" id="btnSignUp">Get demo account</button>
            </div>
            <div class="topbar-actions logged-in" id="topbarLoggedIn" hidden>
                <span class="demo-badge">DEMO</span>
                <div class="account-chip">
                    <span class="account-avatar" id="accountAvatar">?</span>
                    <div class="account-meta">
                        <span class="account-name" id="accountName"></span>
                        <span class="account-email" id="accountEmail"></span>
                    </div>
                </div>
                <button class="btn btn-ghost" id="btnSignOut">Sign out</button>
            </div>
        </div>
    </header>

    <main id="app">

        <!-- ===================== LANDING ===================== -->
        <section class="view" id="view-home">
            <div class="hero">
                <div class="hero-inner">
                    <span class="hero-tag">Free demo account · No credit card · No risk</span>
                    <h1>Master the markets.<br>Start with <span class="accent">paper money</span>.</h1>
                    <p class="hero-sub">
                        Practice trading <strong>ETH/USDC</strong> with a virtual $10,000 demo account.
                        Build your strategy, learn the order flow, and go live when you are ready.
                    </p>
                    <div class="hero-actions">
                        <a href="#/signup" class="btn btn-primary btn-lg" id="heroSignUp">Create demo account</a>
                        <a href="#/trade" class="btn btn-ghost btn-lg">Explore the platform</a>
                    </div>
                    <div class="hero-stats">
                        <div class="stat"><b class="stat-num" id="statUsers">48,219</b><span>traders in training</span></div>
                        <div class="stat"><b class="stat-num" id="statVolume">$2.4M</b><span>paper volume today</span></div>
                        <div class="stat"><b class="stat-num" id="statSpread">0.02%</b><span>simulated spread</span></div>
                    </div>
                </div>
            </div>

            <div class="ticker" id="heroTicker">
                <span class="ticker-label">ETH/USDC</span>
                <span class="ticker-price" id="tickerPrice">—</span>
                <span class="ticker-change" id="tickerChange">—</span>
                <span class="feed-badge" id="feedBadge">SIM</span>
            </div>

            <section class="section">
                <h2 class="section-title">Why practice with Nexus Markets?</h2>
                <div class="features">
                    <article class="feature">
                        <span class="feature-icon">📈</span>
                        <h3>Realistic market engine</h3>
                        <p>Prices move with realistic volatility, so your simulated trades behave like the real thing.</p>
                    </article>
                    <article class="feature">
                        <span class="feature-icon">🛡️</span>
                        <h3>Zero financial risk</h3>
                        <p>Trade with virtual funds. There is no deposit, no leverage trap, and no way to lose real money.</p>
                    </article>
                    <article class="feature">
                        <span class="feature-icon">🧭</span>
                        <h3>Learn by doing</h3>
                        <p>Track positions, P&L, and history to understand what works before risking capital.</p>
                    </article>
                    <article class="feature">
                        <span class="feature-icon">⚡</span>
                        <h3>Instant paper execution</h3>
                        <p>Buy and sell ETH/USDC at market price with instant confirmation and full trade history.</p>
                    </article>
                </div>
            </section>
        </section>

        <!-- ===================== TRADE ===================== -->
        <section class="view" id="view-trade" hidden>
            <div class="trade-layout">
                <div class="trade-main">
                    <div class="chart-card">
                        <div class="chart-head">
                            <div>
                                <span class="pair">ETH / USDC</span>
                                <span class="price" id="chartPrice">—</span>
                                <span class="change" id="chartChange">—</span>
                            </div>
                            <div class="chart-ranges" id="chartRanges">
                                <button class="range-btn active" data-range="60">1H</button>
                                <button class="range-btn" data-range="300">5H</button>
                                <button class="range-btn" data-range="1800">1D</button>
                            </div>
                        </div>
                        <canvas id="priceChart" height="360"></canvas>
                    </div>

                    <div class="positions-card">
                        <h3>Positions</h3>
                        <div class="balances">
                            <div class="balance"><span class="balance-label">USDC</span><b class="balance-value" id="balUsdc">0.00</b></div>
                            <div class="balance"><span class="balance-label">ETH</span><b class="balance-value" id="balEth">0.000000</b></div>
                            <div class="balance"><span class="balance-label">Equity</span><b class="balance-value" id="balEquity">0.00</b></div>
                            <div class="balance"><span class="balance-label">Total P&L</span><b class="balance-value" id="balPnl">0.00</b></div>
                        </div>
                    </div>

                    <div class="history-card">
                        <h3>Trade history</h3>
                        <table class="history-table" id="historyTable">
                            <thead>
                                <tr><th>Time</th><th>Side</th><th>Price</th><th>Amount</th><th>Total</th></tr>
                            </thead>
                            <tbody id="historyBody"></tbody>
                        </table>
                    </div>
                </div>

                <aside class="trade-side">
                    <div class="order-card">
                        <div class="order-tabs">
                            <button class="order-tab active" data-side="buy">Buy</button>
                            <button class="order-tab sell" data-side="sell">Sell</button>
                        </div>
                        <form id="orderForm">
                            <label class="field">
                                <span>Amount (USDC)</span>
                                <input type="number" id="orderAmount" min="0" step="any" placeholder="500" required>
                            </label>
                            <div class="order-preview">
                                <span>Est. execution</span>
                                <b id="orderPreview">—</b>
                            </div>
                            <button class="btn btn-block" id="orderSubmit" type="submit">Buy ETH</button>
                            <p class="order-note">Demo trade · instant paper execution</p>
                        </form>
                    </div>
                    <div class="mini-card">
                        <h4>Live market</h4>
                        <div class="mini-row"><span>24h high</span><b id="statHigh">—</b></div>
                        <div class="mini-row"><span>24h low</span><b id="statLow">—</b></div>
                        <div class="mini-row"><span>24h volume</span><b id="statVolume2">—</b></div>
                    </div>
                </aside>
            </div>
        </section>

        <!-- ===================== LEARN ===================== -->
        <section class="view" id="view-learn" hidden>
            <div class="section">
                <h2 class="section-title">Learn the basics</h2>
                <div class="learn-grid">
                    <article class="learn-card">
                        <h3>What is ETH/USDC?</h3>
                        <p>ETH/USDC is the market for trading Ethereum against the USDC stablecoin. The pair expresses how many USDC one ETH is worth at any moment.</p>
                    </article>
                    <article class="learn-card">
                        <h3>Going long vs short</h3>
                        <p>Buying ETH ("long") profits when the price rises. Selling ETH ("short") profits when the price falls. Practice both here risk-free.</p>
                    </article>
                    <article class="learn-card">
                        <h3>Understand your P&L</h3>
                        <p>Profit and loss is the change in the value of your holdings versus what you paid. Track equity and P&L in the Trade view to gauge your strategy.</p>
                    </article>
                    <article class="learn-card">
                        <h3>Start small</h3>
                        <p>Use small amounts at first to get comfortable with fills and position sizing. Consistency beats hero trades.</p>
                    </article>
                </div>
            </div>
        </section>

        <!-- ===================== SIGN UP / SIGN IN ===================== -->
        <section class="view" id="view-auth" hidden>
            <div class="auth-wrap">
                <form class="auth-card" id="authForm">
                    <span class="demo-badge">DEMO</span>
                    <h2 id="authTitle">Create your demo account</h2>
                    <p class="auth-sub" id="authSub">You get $10,000 in virtual USDC to practice with.</p>

                    <label class="field" id="fieldName">
                        <span>Display name</span>
                        <input type="text" id="authName" placeholder="Ada Lovelace" autocomplete="name">
                    </label>
                    <label class="field" id="fieldEmail">
                        <span id="authEmailLabel">Email</span>
                        <input type="text" id="authEmail" placeholder="you@hackbbs.org" autocomplete="username" inputmode="email" required>
                    </label>
                    <label class="field">
                        <span>Password</span>
                        <input type="password" id="authPassword" placeholder="••••••••" autocomplete="new-password" required>
                    </label>

                    <p class="auth-error" id="authError" hidden></p>

                    <button class="btn btn-primary btn-block" type="submit" id="authSubmit">Create demo account</button>
                    <p class="auth-switch" id="authSwitch"><a href="#/login">Already have a demo account? Sign in</a></p>
                    <p class="auth-terms">Demo only. No real funds. Trading carries risk — even simulated trading cannot predict real outcomes.</p>
                </form>
            </div>
        </section>

    </main>

    <footer class="footer">
        <div class="footer-inner">
            <span>⬡ Nexus Markets</span>
            <span class="footer-note">Fictional demo trading platform. Nothing here involves real money, real orders, or real prices.</span>
        </div>
    </footer>

    <div class="toast" id="toast" hidden></div>

    <script src="js/app.js"></script>
</body>
</html>
