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

{% block title %}Kundenregistrierung | 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="w-full top-0 sticky z-50 bg-[#0e0e0e]">
        <div class="flex justify-between items-center px-6 py-4 w-full max-w-screen-xl mx-auto">
            <a href="{{ path('app_feed') }}" class="flex items-center gap-4">
                <img class="h-10 w-auto object-contain" src="{{ asset('assets/img/top_logo.png') }}" alt="Wanted Logo">
            </a>
            <a href="{{ path('app_register') }}" class="text-[#ff9064] text-sm font-bold">Rolle wechseln</a>
        </div>
    </header>

    <main class="flex-grow flex flex-col items-center justify-center px-6 py-12">
        <div class="w-full max-w-2xl">
            {% for message in app.flashes('error') %}
                <div class="mb-4 rounded-xl bg-red-900/40 border border-red-500/30 px-4 py-3 text-sm">{{ message }}</div>
            {% endfor %}

            <section class="mb-12 text-center md:text-left flex flex-col gap-2">
                <h1 class="font-extrabold text-6xl md:text-8xl tracking-tighter leading-none">Werde Teil von <span class="text-[#ff9064] italic">JI:O</span></h1>
                <p class="text-[#adaaaa] text-lg max-w-md mt-4">Entdecke einen Video-First-Marktplatz fuer starke lokale Anbieter und kreative Profis.</p>
            </section>

            <div class="bg-[#131313] rounded-xl p-8 md:p-12 relative overflow-hidden">
                <form method="post" class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <label class="flex flex-col gap-2">
                        <span class="text-xs uppercase tracking-widest text-[#adaaaa] ml-1">Vollstaendiger Name</span>
                        <input class="bg-[#20201f] border-none rounded-xl p-4 text-white" name="display_name" placeholder="Max Mustermann" type="text"/>
                    </label>
                    <label class="flex flex-col gap-2">
                        <span class="text-xs uppercase tracking-widest text-[#adaaaa] ml-1">E-Mail</span>
                        <input class="bg-[#20201f] border-none rounded-xl p-4 text-white" name="email" placeholder="max@beispiel.de" type="email" required/>
                    </label>
                    <label class="md:col-span-2 flex flex-col gap-2">
                        <span class="text-xs uppercase tracking-widest text-[#adaaaa] ml-1">Stadt</span>
                        <input class="bg-[#20201f] border-none rounded-xl p-4 text-white" name="city" placeholder="Koeln" type="text"/>
                    </label>
                    <label class="md:col-span-2 flex flex-col gap-2">
                        <span class="text-xs uppercase tracking-widest text-[#adaaaa] ml-1">Passwort</span>
                        <input class="bg-[#20201f] border-none rounded-xl p-4 text-white" name="password" type="password" required/>
                    </label>
                    <div class="md:col-span-2 flex flex-col gap-4 mt-4">
                        <span class="text-xs uppercase tracking-widest text-[#adaaaa] ml-1">Interessen (optional, bis zu 12)</span>
                        <p class="text-[#767575] text-sm -mt-2 ml-1">Tippe auf Kategorien, die dich im Feed interessieren.</p>
                        <div class="flex flex-wrap gap-2">
                            {% for cat in categories %}
                                <label class="cursor-pointer">
                                    <input type="checkbox" name="interest_slugs[]" value="{{ cat.slug }}" class="peer sr-only">
                                    <span class="inline-flex px-4 py-2.5 rounded-full bg-[#262626] text-white text-sm font-medium border border-transparent peer-checked:bg-[#ff9064] peer-checked:text-black peer-checked:border-[#ff7941] peer-focus-visible:ring-2 peer-focus-visible:ring-[#ff9064]">{{ cat.name }}</span>
                                </label>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-4">
                        <button class="w-full bg-gradient-to-r from-[#ff9064] to-[#ff7941] text-black py-5 rounded-full font-bold text-xl">Jetzt registrieren</button>
                        <p class="text-center text-[#adaaaa] text-xs mt-6 px-8">
                            Mit der Registrierung stimmst du den <a href="{{ path('app_terms') }}" class="text-[#ff9064] underline hover:no-underline" target="_blank" rel="noopener noreferrer">Nutzungsbedingungen</a> und der <a href="{{ path('app_privacy') }}" class="text-[#ff9064] underline hover:no-underline" target="_blank" rel="noopener noreferrer">Datenschutzerklaerung</a> von JI:O zu.
                        </p>
                    </div>
                </form>
            </div>
        </div>
    </main>
</section>
{% endblock %}