<?php
require_once __DIR__ . '/../config/config.php';
require_once __DIR__ . '/../src/Auth.php';

if (session_status() === PHP_SESSION_NONE) { 
    session_name(SESSION_NAME); 
    session_start(); 
}

try {
    $dsn = "mysql:host=" . DB_HOST . ";port=" . DB_PORT . ";dbname=" . DB_NAME . ";charset=utf8mb4";
    $pdo = new PDO($dsn, DB_USER, DB_PASS, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, 
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, 
        PDO::ATTR_EMULATE_PREPARES => false
    ]);
} catch (PDOException $e) { 
    header('Location: /traderalign/dashboard?error=Server+error'); 
    exit; 
}

$auth = new Auth($pdo);
$userId = $auth->requireAuth();

// Get user profile for greeting
$stmt = $pdo->prepare("SELECT display_name FROM user_profiles WHERE user_id = :uid");
$stmt->execute([':uid' => $userId]);
$profile = $stmt->fetch();
$userName = htmlspecialchars($profile['display_name'] ?? 'Trader');

// Learning modules
$modules = [
    [
        'id' => 'intro-markets',
        'icon' => '🌍',
        'title' => 'Introduction to Financial Markets',
        'description' => 'Understand how financial markets work: stocks, forex, commodities, and crypto. Learn about market participants, trading sessions, and what moves prices.',
        'topics' => [
            'What are financial markets?',
            'Major market participants',
            'Trading sessions and overlap',
            'Bid, ask, and spread explained',
            'Market structure basics',
        ],
        'difficulty' => 'Beginner',
        'estimated_time' => '20 min',
    ],
    [
        'id' => 'forex-basics',
        'icon' => '💱',
        'title' => 'Forex Basics',
        'description' => 'Learn currency pairs, pips, lots, leverage, and how the forex market operates 24 hours a day. Understand major, minor, and exotic pairs.',
        'topics' => [
            'Currency pairs explained',
            'What is a pip?',
            'Lot sizes and position sizing',
            'Leverage and margin',
            'Reading a forex quote',
        ],
        'difficulty' => 'Beginner',
        'estimated_time' => '25 min',
    ],
    [
        'id' => 'risk-management',
        'icon' => '🛡️',
        'title' => 'Risk Management',
        'description' => 'The foundation of every successful trader. Learn how to protect your capital, set stop losses, calculate position sizes, and manage drawdown.',
        'topics' => [
            'Why risk management matters',
            'The 1% rule and position sizing',
            'Stop-loss placement strategies',
            'Risk-to-reward ratios',
            'Maximum drawdown and recovery',
        ],
        'difficulty' => 'Intermediate',
        'estimated_time' => '30 min',
    ],
    [
        'id' => 'position-sizing',
        'icon' => '📐',
        'title' => 'Position Sizing',
        'description' => 'Master the math behind how much to trade. Calculate lot sizes based on account balance, risk percentage, and stop-loss distance.',
        'topics' => [
            'Position sizing formula',
            'Account risk vs trade risk',
            'Calculating lot sizes',
            'Scaling in and out of positions',
            'Correlation risk across pairs',
        ],
        'difficulty' => 'Intermediate',
        'estimated_time' => '25 min',
    ],
    [
        'id' => 'trading-psychology',
        'icon' => '🧠',
        'title' => 'Trading Psychology',
        'description' => 'Master your mindset. Overcome fear, greed, and revenge trading. Build discipline, patience, and the emotional resilience to trade consistently.',
        'topics' => [
            'Common psychological traps',
            'Dealing with losses',
            'Avoiding revenge trading',
            'Building trading discipline',
            'The importance of a trading plan',
        ],
        'difficulty' => 'Intermediate',
        'estimated_time' => '35 min',
    ],
    [
        'id' => 'trading-systems',
        'icon' => '⚙️',
        'title' => 'Understanding Trading Systems',
        'description' => 'Learn what makes a trading system, how to build one, and the difference between discretionary and systematic approaches.',
        'topics' => [
            'What is a trading system?',
            'Discretionary vs systematic trading',
            'Components of a trading system',
            'Entry and exit rules',
            'Backtesting basics',
        ],
        'difficulty' => 'Intermediate',
        'estimated_time' => '30 min',
    ],
    [
        'id' => 'trading-edge',
        'icon' => '🎯',
        'title' => 'What Constitutes a Trading Edge',
        'description' => 'Discover what a real trading edge looks like. Understand expectancy, win rate, risk-reward, and why having an edge is non-negotiable.',
        'topics' => [
            'Defining a trading edge',
            'Expectancy: the math of profitability',
            'Win rate vs risk-reward trade-off',
            'Statistical significance in trading',
            'Validating your edge with data',
        ],
        'difficulty' => 'Advanced',
        'estimated_time' => '30 min',
    ],
];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Center - TraderAlign</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/traderalign/assets/tokens.css">
<link rel="icon" type="image/png" sizes="32x32" href="/traderalign/assets/favicon/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/traderalign/assets/favicon/favicon-16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/traderalign/assets/favicon/apple-touch-icon.png">
    <link rel="shortcut icon" href="/traderalign/assets/favicon/favicon.ico">
<link rel="stylesheet" href="/traderalign/assets/css/brand.css">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased}
.dash-layout{display:flex;min-height:100vh}
.sidebar{width:4rem;background:var(--sidebar);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;align-items:center;padding-top:1rem;gap:.25rem;position:fixed;top:0;left:0;bottom:0;z-index:40}
.sidebar a{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--radius-md);color:var(--foreground-dim);transition:background var(--t-fast),color var(--t-fast);position:relative}
.sidebar a:hover{background:var(--background-surface);color:var(--foreground)}
.sidebar a.active{background:var(--background-surface);color:var(--sidebar-primary)}
.sidebar a .tt{position:absolute;left:3.5rem;background:var(--popover);color:var(--foreground);font-size:.75rem;padding:.25rem .625rem;border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--t-fast)}
.sidebar a:hover .tt{opacity:1}
.main{margin-left:4rem;flex:1;padding:2rem;max-width:calc(100vw - 4rem)}

/* Page header */
.page-header{margin-bottom:2rem}
.page-header h1{font-size:1.8rem;font-weight:800;color:var(--foreground);letter-spacing:-.02em;margin-bottom:.35rem}
.page-header p{color:var(--foreground-dim);font-size:.88rem;line-height:1.5;max-width:640px}

/* Welcome banner */
.welcome-banner{background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 8%,transparent),color-mix(in srgb,#7c3aed 5%,transparent));border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-radius:var(--radius-xl);padding:1.5rem 1.75rem;margin-bottom:2rem;position:relative;overflow:hidden}
.welcome-banner::after{content:'';position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 8%,transparent),transparent 70%);pointer-events:none}
.welcome-banner>*{position:relative;z-index:1}
.welcome-banner h2{font-size:1.25rem;font-weight:700;color:var(--foreground);margin-bottom:.4rem}
.welcome-banner p{font-size:.84rem;color:var(--foreground-dim);line-height:1.6;max-width:600px}

/* Module grid */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1rem;margin-bottom:2.5rem}
.module-card{background:var(--background-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);padding:1.5rem;transition:all .2s ease;cursor:pointer;position:relative;overflow:hidden}
.module-card:hover{border-color:color-mix(in srgb,var(--primary) 30%,transparent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.module-card::after{content:'';position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 3%,transparent),transparent 70%);pointer-events:none}
.module-card>*{position:relative;z-index:1}
.module-icon{font-size:2rem;margin-bottom:.75rem;display:block}
.module-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;flex-wrap:wrap;gap:.4rem}
.module-title{font-size:1rem;font-weight:700;color:var(--foreground);line-height:1.3}
.module-badges{display:flex;gap:.4rem}
.module-badge{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .55rem;border-radius:var(--radius-full)}
.badge-difficulty{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary)}
.badge-time{background:var(--background-surface);color:var(--foreground-dim);border:1px solid var(--border)}
.module-description{font-size:.8rem;color:var(--foreground-dim);line-height:1.6;margin-bottom:.85rem}
.module-topics-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--foreground-dim);margin-bottom:.4rem}
.module-topics{display:flex;flex-direction:column;gap:.25rem}
.module-topic{font-size:.75rem;color:var(--foreground-muted);padding-left:.75rem;position:relative}
.module-topic::before{content:'•';position:absolute;left:0;color:var(--primary)}
.module-cta{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;color:var(--primary);margin-top:.85rem;text-decoration:none}
.module-cta:hover{text-decoration:underline}

/* Section divider */
.section-divider{display:flex;align-items:center;gap:1rem;margin:2rem 0 1.5rem}
.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--foreground-dim);white-space:nowrap}

/* Resources section */
.resources-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}
.resource-card{background:var(--background-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;transition:border-color .15s}
.resource-card:hover{border-color:color-mix(in srgb,var(--primary) 25%,transparent)}
.resource-icon{font-size:1.5rem;margin-bottom:.5rem;display:block}
.resource-title{font-size:.9rem;font-weight:600;color:var(--foreground);margin-bottom:.3rem}
.resource-desc{font-size:.75rem;color:var(--foreground-dim);line-height:1.5}

/* Bottom CTA */
.cta-card{background:linear-gradient(145deg,color-mix(in srgb,var(--positive) 8%,transparent),color-mix(in srgb,var(--primary) 5%,transparent));border:2px solid color-mix(in srgb,var(--positive) 30%,transparent);border-radius:var(--radius-xl);padding:2rem;text-align:center;margin-top:2rem}
.cta-card h2{font-size:1.2rem;font-weight:700;color:var(--foreground);margin-bottom:.5rem}
.cta-card p{font-size:.84rem;color:var(--foreground-dim);margin-bottom:1.25rem;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.6}
.btn-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-size:.85rem;font-weight:600;color:#fff;background:var(--positive);border:none;cursor:pointer;transition:all .2s ease;font-family:var(--font-sans);text-decoration:none}
.btn-cta:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px color-mix(in srgb,var(--positive) 30%,transparent)}

@media(max-width:768px){
  .main{padding:1rem}
  .module-grid{grid-template-columns:1fr}
  .resources-grid{grid-template-columns:1fr}
  .welcome-banner{padding:1.25rem}
}
</style>
</head>
<body class="dash-layout">
<?php require __DIR__ . '/sidebar.php'; ?>
<main class="main">

<div class="page-header">
    <h1>📚 Learning Center</h1>
    <p>Build a solid foundation. Every successful trader started by understanding the fundamentals, and these resources are here to help you get there.</p>
</div>

<!-- Welcome Banner -->
<div class="welcome-banner">
    <h2>Welcome, <?= $userName ?> 👋</h2>
    <p>This is your learning space. Work through the modules at your own pace. When you're ready, you can start developing and validating your own trading edge right here on TraderAlign.</p>
</div>

<!-- Core Modules -->
<div class="section-divider"><span class="section-title">Core Learning Modules</span></div>

<div class="module-grid">
    <?php foreach ($modules as $module): ?>
    <div class="module-card">
        <span class="module-icon"><?= $module['icon'] ?></span>
        <div class="module-header">
            <span class="module-title"><?= htmlspecialchars($module['title']) ?></span>
            <div class="module-badges">
                <span class="module-badge badge-difficulty"><?= $module['difficulty'] ?></span>
                <span class="module-badge badge-time"><?= $module['estimated_time'] ?></span>
            </div>
        </div>
        <p class="module-description"><?= htmlspecialchars($module['description']) ?></p>
        <div class="module-topics-label">Topics covered</div>
        <div class="module-topics">
            <?php foreach ($module['topics'] as $topic): ?>
            <span class="module-topic"><?= htmlspecialchars($topic) ?></span>
            <?php endforeach; ?>
        </div>
        <span class="module-cta">Start Learning →</span>
    </div>
    <?php endforeach; ?>
</div>

<!-- Additional Resources -->
<div class="section-divider"><span class="section-title">Additional Resources</span></div>

<div class="resources-grid">
    <div class="resource-card">
        <span class="resource-icon">📊</span>
        <div class="resource-title">Trading Journal Templates</div>
        <div class="resource-desc">Ready-to-use journal templates to track your trades and identify patterns in your performance.</div>
    </div>
    <div class="resource-card">
        <span class="resource-icon">📈</span>
        <div class="resource-title">Chart Pattern Library</div>
        <div class="resource-desc">Visual reference of common chart patterns: head and shoulders, double tops, flags, and more.</div>
    </div>
    <div class="resource-card">
        <span class="resource-icon">🔢</span>
        <div class="resource-title">Trading Calculators</div>
        <div class="resource-desc">Position size calculator, risk-reward calculator, and expectancy calculator to support your trading decisions.</div>
    </div>
    <div class="resource-card">
        <span class="resource-icon">📖</span>
        <div class="resource-title">Recommended Reading</div>
        <div class="resource-desc">Curated list of books and articles that have shaped successful traders around the world.</div>
    </div>
</div>

<!-- Bottom CTA -->
<div class="cta-card">
    <h2>🚀 Ready to Start Developing Your Trading Edge?</h2>
    <p>You've explored the foundations. Now it's time to put that knowledge into practice: create your first validation strategy and start tracking real data.</p>
    <a href="/traderalign/strategy-validation" class="btn-cta">
        I'm Ready to Start Developing My Trading Edge →
    </a>
</div>

</main>
</body>
</html>