{% extends 'base.html.twig' %}

{% block title %}Registrierung erfolgreich | Wanted{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}stitch-page{% endblock %}

{% block javascripts %}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
{% endblock %}

{% block body %}
<section class="bg-[#0e0e0e] text-white min-h-screen">
    <header class="bg-[#0e0e0e]/80 backdrop-blur-xl fixed top-0 w-full z-50">
        <div class="flex items-center justify-between px-6 py-4 w-full">
            <div class="flex items-center gap-2">
                <a href="{{ path('app_feed') }}" class="scale-95 active:scale-90 duration-200 text-[#FF5C00]">
                    <span class="material-symbols-outlined">close</span>
                </a>
            </div>
            <h1 class="font-bold text-white text-base">Registrierung erfolgreich</h1>
            <div class="w-10"></div>
        </div>
    </header>

    <main class="min-h-screen pt-24 pb-32 px-6 flex flex-col items-center justify-center relative overflow-hidden">
        <div class="relative z-10 flex flex-col items-center text-center max-w-lg">
            <div class="mb-10 relative">
                <div class="relative w-32 h-32 flex items-center justify-center bg-gradient-to-br from-[#ff9064] to-[#ff7941] rounded-full shadow-[0_0_40px_rgba(255,144,100,0.4)]">
                    <span class="material-symbols-outlined text-black text-6xl" style="font-variation-settings: 'wght' 700;">check</span>
                </div>
            </div>
            <h2 class="text-4xl md:text-5xl font-extrabold tracking-tight mb-6 leading-tight">
                Willkommen an Bord!
            </h2>
            <p class="text-[#adaaaa] text-lg md:text-xl leading-relaxed mb-12">
                Dein Profil wird nun von unserem Team überprüft. Wir melden uns in Kürze bei dir.
            </p>
            <div class="flex flex-col gap-4 w-full sm:w-80">
                <a href="{{ path('app_feed') }}" class="bg-gradient-to-r from-[#ff9064] to-[#ff7941] text-black font-bold py-4 px-8 rounded-full flex items-center justify-center gap-2">
                    Zum Feed
                    <span class="material-symbols-outlined text-xl">arrow_forward</span>
                </a>
                {% if app.user %}
                    <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="bg-[#262626] text-white font-semibold py-4 px-8 rounded-full text-center">
                        Dein Profil ansehen
                    </a>
                {% endif %}
            </div>
        </div>

        <div class="mt-20 z-10 w-full max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="bg-[#1a1a1a] p-6 rounded-xl">
                <div class="flex items-center gap-3 mb-3 text-[#ff9064]">
                    <span class="material-symbols-outlined">verified</span>
                    <span class="font-bold text-sm tracking-wider uppercase">Status</span>
                </div>
                <p class="text-white font-semibold">In Prüfung</p>
                <p class="text-[#adaaaa] text-xs mt-1">Dauer: ca. 24-48h</p>
            </div>
            <div class="bg-[#1a1a1a] p-6 rounded-xl">
                <div class="flex items-center gap-3 mb-3 text-[#f8a91f]">
                    <span class="material-symbols-outlined">rocket_launch</span>
                    <span class="font-bold text-sm tracking-wider uppercase">Nächster Schritt</span>
                </div>
                <p class="text-white font-semibold">Profil-Optimierung</p>
                <p class="text-[#adaaaa] text-xs mt-1">Videos hochladen</p>
            </div>
            <a href="{{ path('app_faq') }}" class="bg-[#1a1a1a] p-6 rounded-xl block no-underline text-inherit hover:ring-2 hover:ring-[#ff9064]/30 transition-shadow">
                <div class="flex items-center gap-3 mb-3 text-[#f8883e]">
                    <span class="material-symbols-outlined">help_center</span>
                    <span class="font-bold text-sm tracking-wider uppercase">Support</span>
                </div>
                <p class="text-white font-semibold">FAQ &amp; Hilfe</p>
                <p class="text-[#adaaaa] text-xs mt-1">Haeufige Fragen &amp; Kontakt</p>
            </a>
        </div>
    </main>
</section>
{% endblock %}