{% extends "base.html" %}

{% block title %}Spark - Welcome{% endblock %}

{% block content %}
<div class="container" style="max-width: 720px; padding-top: 3rem;">

    <!-- Hero -->
    <div class="text-center mb-5">
        <svg width="80" height="80" viewBox="0 0 130 130" fill="none" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <linearGradient id="welcome-arc" x1="0" y1="0" x2="1" y2="1">
                    <stop offset="0%" stop-color="var(--app-accent-dark)"/>
                    <stop offset="50%" stop-color="var(--app-accent)"/>
                    <stop offset="100%" stop-color="var(--app-accent-dark)"/>
                </linearGradient>
                <radialGradient id="welcome-dot" cx="40%" cy="35%" r="60%">
                    <stop offset="0%" stop-color="var(--app-accent-light)"/>
                    <stop offset="100%" stop-color="var(--app-accent)"/>
                </radialGradient>
            </defs>
            <g transform="translate(65,65)">
                <line x1="-65" y1="0" x2="-46" y2="0" stroke="var(--app-accent)" stroke-width="0.8" opacity="0.28"/>
                <line x1="46" y1="0" x2="65" y2="0" stroke="var(--app-accent)" stroke-width="0.8" opacity="0.14"/>
                <line x1="0" y1="0" x2="33" y2="-42" stroke="var(--app-accent)" stroke-width="0.8" opacity="0.2"/>
                <line x1="0" y1="0" x2="33" y2="42" stroke="var(--app-accent)" stroke-width="0.8" opacity="0.2"/>
                <path d="M32 -48 A48 48 0 1 0 32 48" stroke="url(#welcome-arc)" stroke-width="4" fill="none" stroke-linecap="round"/>
                <circle cx="32" cy="-48" r="5" fill="var(--app-accent-light)"/>
                <circle cx="32" cy="48" r="5" fill="var(--app-accent)" opacity="0.85"/>
                <circle cx="12" cy="0" r="9" fill="url(#welcome-dot)"/>
                <circle cx="12" cy="0" r="4.5" fill="var(--app-accent-light)" opacity="0.9"/>
            </g>
        </svg>
        <h2 style="font-family: var(--app-font-heading); font-weight: 700; margin-top: 1rem;">
            Welcome to <i class="bi bi-lightning-charge-fill" style="font-size: 1.25rem;"></i> Spark
        </h2>
        <p style="color: var(--app-text-secondary); font-size: 1.0625rem; max-width: 500px; margin: 0.75rem auto 0;">
            Your secure personal AI research kit is ready. Let's get you set up.
        </p>
    </div>

    <!-- Setup notice -->
    <div class="alert-app alert-app-info mb-4 d-flex align-items-start gap-3">
        <i class="bi bi-info-circle-fill" style="font-size: 1.25rem; flex-shrink: 0; margin-top: 0.125rem;"></i>
        <div>
            <strong>No providers configured yet.</strong>
            Spark needs at least one LLM provider to start conversations. Head to Settings to
            connect Anthropic, AWS Bedrock, Ollama, or another provider.
        </div>
    </div>

    <!-- Quick start steps -->
    <div class="app-card mb-4">
        <div class="card-header">
            <i class="bi bi-list-check me-2"></i> Getting Started
        </div>
        <div class="card-body">
            <div class="d-flex align-items-start gap-3 mb-3 pb-3" style="border-bottom: 1px solid var(--app-border);">
                <span class="badge-app badge-app-primary" style="min-width: 1.75rem; text-align: center;">1</span>
                <div>
                    <strong>Configure a provider</strong>
                    <div style="color: var(--app-text-secondary); font-size: 0.875rem;">
                        Enable at least one LLM provider and provide its credentials.
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-start gap-3 mb-3 pb-3" style="border-bottom: 1px solid var(--app-border);">
                <span class="badge-app badge-app-primary" style="min-width: 1.75rem; text-align: center;">2</span>
                <div>
                    <strong>Review database settings</strong>
                    <div style="color: var(--app-text-secondary); font-size: 0.875rem;">
                        SQLite is ready by default. Switch to PostgreSQL or MySQL if needed.
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-start gap-3 mb-3 pb-3" style="border-bottom: 1px solid var(--app-border);">
                <span class="badge-app badge-app-primary" style="min-width: 1.75rem; text-align: center;">3</span>
                <div>
                    <strong>Configure tools (optional)</strong>
                    <div style="color: var(--app-text-secondary); font-size: 0.875rem;">
                        Enable built-in tools or connect MCP servers for extended capabilities.
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-start gap-3">
                <span class="badge-app badge-app-primary" style="min-width: 1.75rem; text-align: center;">4</span>
                <div>
                    <strong>Start a conversation</strong>
                    <div style="color: var(--app-text-secondary); font-size: 0.875rem;">
                        Once a provider is configured, create your first conversation.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA -->
    <div class="text-center">
        <a href="/settings" class="btn btn-app-primary btn-lg">
            <i class="bi bi-gear me-2"></i> Open Settings
        </a>
        <div class="mt-3" style="font-size: 0.8125rem; color: var(--app-text-muted);">
            You can return to settings at any time from the navigation bar.
        </div>
    </div>

</div>
{% endblock %}