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

{% block title %}Welcome to Wizamart!{% 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">
            Welcome to Wizamart!
        </h1>

        <p class="text-xl text-gray-600 dark:text-gray-400 mb-8">
            Your account has been created and your {{ trial_days }}-day free trial has started.
        </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">What's 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>Connect Letzshop:</strong> Add your API key to start syncing orders automatically.
                    </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>Set Up Invoicing:</strong> Configure your invoice settings for Luxembourg compliance.
                    </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>Import Products:</strong> Sync your product catalog from Letzshop.
                    </span>
                </li>
            </ul>
        </div>

        {# CTA Button #}
        {% if vendor_code %}
        <a href="/vendor/{{ vendor_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">
            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">
            Login to Dashboard
        </a>
        {% endif %}

        {# Support Link #}
        <p class="mt-8 text-gray-500 dark:text-gray-400">
            Need help getting started?
            <a href="/contact" class="text-indigo-600 dark:text-indigo-400 hover:underline">Contact our support team</a>
        </p>
    </div>
</div>
{% endblock %}