{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Welcome to PX360" %}{% endblock %}

{% block content %}
<div class="container-fluid py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0">
                <div class="card-body p-5">
                    <div class="text-center mb-5">
                        <div class="mb-4">
                            <i class="bi bi-rocket-takeoff fa-5x text-primary"></i>
                        </div>
                        <h1 class="display-4 mb-3">{% trans "Welcome to PX360!" %}</h1>
                        <p class="lead text-muted">
                            {% trans "Your journey to better patient experience starts here" %}
                        </p>
                    </div>

                    <div class="alert alert-info mb-4">
                        <i class="bi bi-info-circle me-2"></i>
                        {% trans "Please complete the onboarding wizard to set up your account and learn about the system." %}
                    </div>

                    <div class="row mb-5">
                        <div class="col-md-4 mb-3">
                            <div class="text-center p-3 border rounded">
                                <i class="bi bi-book fa-2x text-primary mb-2"></i>
                                <h5>{% trans "Learn" %}</h5>
                                <p class="small text-muted">
                                    {% trans "Understand the PX360 system" %}
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-center p-3 border rounded">
                                <i class="bi bi-clipboard-check fa-2x text-success mb-2"></i>
                                <h5>{% trans "Acknowledge" %}</h5>
                                <p class="small text-muted">
                                    {% trans "Review and confirm key policies" %}
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="text-center p-3 border rounded">
                                <i class="bi bi-pen fa-2x text-warning mb-2"></i>
                                <h5>{% trans "Sign" %}</h5>
                                <p class="small text-muted">
                                    {% trans "Create your account credentials" %}
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid gap-2">
                        <button onclick="startWizard()" class="btn btn-primary btn-lg">
                            <i class="bi bi-arrow-right me-2"></i>
                            {% trans "Start Onboarding" %}
                        </button>
                        <p class="text-center text-muted small mt-3">
                            {% trans "Estimated time: 10-15 minutes" %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function startWizard() {
    window.location.href = '/accounts/onboarding/wizard/step/1/';
}
</script>
{% endblock %}