<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BrighterTrading - Welcome</title>
    <link rel="icon" href="{{ url_for('static', filename='brightertrades_favicon.ico') }}" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
        }

        .welcome-container {
            text-align: center;
            max-width: 800px;
            padding: 40px;
        }

        .logo-container {
            margin-bottom: 40px;
        }

        .logo-container svg {
            width: 150px;
            height: 150px;
            filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
        }

        h1 {
            font-size: 3rem;
            margin-bottom: 15px;
            background: linear-gradient(90deg, #00d4ff, #00ff88);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .tagline {
            font-size: 1.2rem;
            color: #a0a0a0;
            margin-bottom: 50px;
        }

        .buttons-container {
            display: flex;
            gap: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .welcome-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 50px;
            border-radius: 16px;
            text-decoration: none;
            transition: all 0.3s ease;
            min-width: 220px;
        }

        .welcome-btn svg {
            width: 48px;
            height: 48px;
            margin-bottom: 15px;
        }

        .welcome-btn span {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .btn-docs {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .btn-docs:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .btn-start {
            background: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%);
            border: none;
            color: #1a1a2e;
        }

        .btn-start:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
        }

        .btn-description {
            font-size: 0.85rem;
            font-weight: 400;
            opacity: 0.8;
            margin-top: 8px;
        }

        .footer-text {
            margin-top: 60px;
            color: #666;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="welcome-container">
        <div class="logo-container">
            <!-- Trading/Chart SVG Icon -->
            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="10" y="60" width="12" height="30" rx="2" fill="#00d4ff"/>
                <rect x="28" y="40" width="12" height="50" rx="2" fill="#00ff88"/>
                <rect x="46" y="25" width="12" height="65" rx="2" fill="#00d4ff"/>
                <rect x="64" y="45" width="12" height="45" rx="2" fill="#00ff88"/>
                <rect x="82" y="15" width="12" height="75" rx="2" fill="#00d4ff"/>
                <path d="M16 55 L34 35 L52 20 L70 40 L88 10" stroke="url(#lineGradient)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                <defs>
                    <linearGradient id="lineGradient" x1="16" y1="55" x2="88" y2="10">
                        <stop offset="0%" stop-color="#00d4ff"/>
                        <stop offset="100%" stop-color="#00ff88"/>
                    </linearGradient>
                </defs>
            </svg>
        </div>

        <h1>BrighterTrading</h1>
        <p class="tagline">Visual strategy builder for cryptocurrency trading</p>

        <div class="buttons-container">
            <a href="/docs" class="welcome-btn btn-docs">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h6v6h6v10H6z"/>
                    <path d="M8 12h8v2H8zm0 4h8v2H8z"/>
                </svg>
                <span>Documentation</span>
                <span class="btn-description">Walkthroughs & guides</span>
            </a>

            <a href="/app" class="welcome-btn btn-start">
                <svg viewBox="0 0 24 24" fill="currentColor">
                    <path d="M8 5v14l11-7z"/>
                </svg>
                <span>Get Started</span>
                <span class="btn-description">Open the trading platform</span>
            </a>
        </div>

        <!-- Auth Links -->
        <div class="auth-links">
            <a href="/login" class="auth-link">Sign In</a>
            <span class="auth-divider">|</span>
            <a href="/signup" class="auth-link">Create Account</a>
        </div>

        <p class="footer-text">Build, test, and deploy trading strategies with visual blocks</p>

        <!-- Flash Messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="flash-container">
                    {% for category, message in messages %}
                        {% if category == 'success' %}
                            <div class="flash-message flash-success">
                                {{ message }}
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
    </div>

    <style>
        .auth-links {
            margin-top: 30px;
        }

        .auth-link {
            color: #a0a0a0;
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.2s ease;
        }

        .auth-link:hover {
            color: #00d4ff;
        }

        .auth-divider {
            color: #555;
            margin: 0 15px;
        }

        .flash-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        .flash-message {
            padding: 15px 25px;
            border-radius: 8px;
            margin-bottom: 10px;
            font-size: 0.95rem;
            animation: slideIn 0.3s ease;
        }

        .flash-success {
            background: rgba(0, 255, 136, 0.2);
            border: 1px solid #00ff88;
            color: #00ff88;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</body>
</html>
