<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Market Intelligence Dashboard - Live Data</title>
    
    <!-- Styles -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/enhanced-styles.css">
    
    <style>
        /* Base styles */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f7fa; min-height: 100vh; }
        .container { max-width: 1400px; margin: 0 auto; padding: 20px; }
        
        /* Header */
        header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 30px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        header h1 { font-size: 32px; margin-bottom: 10px; }
        header p { opacity: 0.9; font-size: 16px; }
        
        /* Live indicator */
        .live-badge { 
            display: inline-block; 
            background: #2ecc71; 
            color: #fff; 
            padding: 6px 12px; 
            border-radius: 20px; 
            font-size: 12px; 
            font-weight: bold; 
            margin-left: 15px;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* Navigation */
        nav { background: #fff; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 30px; border-radius: 12px; overflow: hidden; }
        .nav-buttons { display: flex; gap: 0; }
        .nav-btn { flex: 1; background: #fff; border: none; padding: 20px 24px; font-size: 16px; font-weight: 600; color: #7f8c8d; cursor: pointer; transition: all 0.3s ease; border-bottom: 3px solid transparent; }
        .nav-btn:hover { background: #f8f9fa; color: #2c3e50; }
        .nav-btn.active { color: #667eea; background: #f8f9fa; border-bottom-color: #667eea; }
        
        /* Content */
        #content-area { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); min-height: 600px; }
        
        /* Footer */
        footer { text-align: center; padding: 40px 0; color: #7f8c8d; font-size: 14px; }
    </style>
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <h1>🤖 AI Market Intelligence <span class="live-badge">🔴 LIVE</span></h1>
            <p>Real-time AI supply chain tracking with live stock prices</p>
        </div>
    </header>
    
    <!-- Navigation -->
    <div class="container">
        <nav>
            <div class="nav-buttons">
                <button class="nav-btn active" data-view="dashboard">✦ Dashboard</button>
                <button class="nav-btn" data-view="companies">🏢 Companies (30)</button>
                <button class="nav-btn" data-view="capex">💰 CapEx Tracker</button>
                <button class="nav-btn" data-view="graph">🔗 Dependency Graph</button>
                <button class="nav-btn" data-view="about">ℹ️ About</button>
            </div>
        </nav>
        
        <!-- Main Content -->
        <div id="content-area">
            <div style="padding: 100px; text-align: center; color: #7f8c8d;">
                <p>Loading dashboard with live stock data...</p>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <footer>
        <div class="container">
            <p>AI Market Intelligence Dashboard | Powered by Cloudflare Pages + Yahoo Finance API | $0/month</p>
            <p style="margin-top: 10px; opacity: 0.7;">
                30 Companies • 7 Supply Chain Layers • 21 Dependencies • 📊 Live Stock Prices
            </p>
        </div>
    </footer>
    
    <!-- Scripts - Load in specific order -->
    <!-- 1. Company Database -->
    <script src="js/company-data.js?v=1768510577"></script>
    
    <!-- 2. Yahoo Finance Integration (NEW!) -->
    <script src="js/yahoo-finance.js?v=1768510577"></script>
    
    <!-- 3. CapEx Tracker -->
    <script src="js/capex-tracker.js"></script>
    
    <!-- 4. Dependency Graph -->
    <script src="js/dependency-graph.js"></script>
    
    <!-- 5. Main Application -->
    <script src="js/main.js?v=1768510577"></script>
</body>
</html>
