{# app/templates/platform/signup-success.html #}
{# Signup Success Page #}
{% extends "platform/base.html" %}

{% block title %}{{ _("cms.platform.success.title") }}{% endblock %}

{% block content %}
<div class="min-h-screen py-16 bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
    <div class="max-w-lg mx-auto px-4 sm:px-6 lg:px-8 text-center">

        {# Success Icon #}
        <div class="w-24 h-24 mx-auto mb-8 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
            <svg class="w-12 h-12 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
        </div>

        {# Welcome Message #}
        <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
            {{ _("cms.platform.success.title") }}
        </h1>

        <p class="text-xl text-gray-600 dark:text-gray-400 mb-8">
            {{ _("cms.platform.success.subtitle", trial_days=trial_days) }}
        </p>

        {# Next Steps #}
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 border border-gray-200 dark:border-gray-700 text-left mb-8">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">{{ _("cms.platform.success.what_next") }}</h2>
            <ul class="space-y-4">
                <li class="flex items-start">
                    <div class="w-6 h-6 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                        <span class="text-indigo-600 dark:text-indigo-400 text-sm font-bold">1</span>
                    </div>
                    <span class="ml-3 text-gray-700 dark:text-gray-300">
                        <strong>{{ _("cms.platform.success.step_connect") }}</strong> {{ _("cms.platform.success.step_connect_desc") }}
                    </span>
                </li>
                <li class="flex items-start">
                    <div class="w-6 h-6 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                        <span class="text-indigo-600 dark:text-indigo-400 text-sm font-bold">2</span>
                    </div>
                    <span class="ml-3 text-gray-700 dark:text-gray-300">
                        <strong>{{ _("cms.platform.success.step_invoicing") }}</strong> {{ _("cms.platform.success.step_invoicing_desc") }}
                    </span>
                </li>
                <li class="flex items-start">
                    <div class="w-6 h-6 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                        <span class="text-indigo-600 dark:text-indigo-400 text-sm font-bold">3</span>
                    </div>
                    <span class="ml-3 text-gray-700 dark:text-gray-300">
                        <strong>{{ _("cms.platform.success.step_products") }}</strong> {{ _("cms.platform.success.step_products_desc") }}
                    </span>
                </li>
            </ul>
        </div>

        {# CTA Button #}
        {% if store_code %}
        <a href="/store/{{ store_code }}/dashboard"
           class="inline-flex items-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl shadow-lg transition-all hover:scale-105">
            {{ _("cms.platform.success.go_to_dashboard") }}
            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
            </svg>
        </a>
        {% else %}
        <a href="/admin/login"
           class="inline-flex items-center px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-xl shadow-lg transition-all">
            {{ _("cms.platform.success.login_dashboard") }}
        </a>
        {% endif %}

        {# Support Link #}
        <p class="mt-8 text-gray-500 dark:text-gray-400">
            {{ _("cms.platform.success.need_help") }}
            <a href="/contact" class="text-indigo-600 dark:text-indigo-400 hover:underline">{{ _("cms.platform.success.contact_support") }}</a>
        </p>
    </div>
</div>
{% endblock %}