"""
Shared UI Components
"""

def render_header() -> str:
    return """
<div style="padding: 1rem 0; border-bottom: 1px solid var(--fill-primary); margin-bottom: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
        <div style="display: flex; align-items: center; gap: 1rem;">
            <div style="width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border-radius: 8px; display: flex; align-items: center; justify-content: center;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
                    <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                </svg>
            </div>
            <div>
                <h1 style="margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text-primary);">
                    MonteWalk
                </h1>
            </div>
        </div>
        <div style="display: flex; gap: 0.75rem; align-items: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--success);">
            <span style="height: 8px; width: 8px; background-color: var(--success); border-radius: 50%; box-shadow: 0 0 8px var(--success);"></span>
            SYSTEM ONLINE
        </div>
    </div>
    
    <!-- Tagline -->
    <div style="font-size: 1rem; color: #60a5fa; font-weight: 500; margin-bottom: 1rem; letter-spacing: -0.01em;">
        Transform your AI into an institutional trading agent
    </div>
    
    <!-- MCP Server Stats -->
    <div style="display: inline-flex; gap: 1rem; align-items: center; background: rgba(15, 23, 42, 0.4); padding: 0.75rem 1.5rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05); margin-bottom: 1rem;">
        <span style="color: #94a3b8; font-size: 0.85rem; font-weight: 500;">MCP Server:</span>
        <span style="color: #f1f5f9; font-weight: 600; font-size: 0.85rem;">🛠️ 25+ Tools</span>
        <span style="color: #475569;">|</span>
        <span style="color: #f1f5f9; font-weight: 600; font-size: 0.85rem;">📡 4 Resources</span>
        <span style="color: #475569;">|</span>
        <span style="color: #f1f5f9; font-weight: 600; font-size: 0.85rem;">🎯 6 Prompts</span>
    </div>
    
    <!-- Technology Badges -->
    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
        <span style="background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); color: #000; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">Gradio 6</span>
        <span style="background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">Modal GPU</span>
        <span style="background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">FinBERT</span>
        <span style="background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px;">Alpaca</span>
    </div>
</div>
"""

def render_footer() -> str:
    return ""