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

{% block title %}Registrierung waehlen | 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 overflow-hidden">
    <header class="bg-[#0e0e0e] w-full top-0 sticky z-50">
        <div class="flex justify-between items-center px-6 py-6 w-full max-w-screen-xl mx-auto">
            <a href="{{ path('app_feed') }}" class="flex items-center gap-4">
                <img class="h-8 w-auto" src="{{ asset('assets/img/top_logo.png') }}" alt="Wanted Logo">
            </a>
            <a href="{{ path('app_faq') }}" class="text-white/70 hover:opacity-80 transition-opacity active:scale-95 duration-200 inline-flex" aria-label="Hilfe und FAQ">
                <span class="material-symbols-outlined">help</span>
            </a>
        </div>
    </header>

    <main class="relative flex flex-col items-center justify-center min-h-[calc(100vh-80px)] px-6 pb-12 overflow-y-auto">
        <div class="text-center mb-12 space-y-4">
            <h1 class="font-extrabold text-4xl md:text-6xl tracking-tight leading-tight">
                Waehle deinen <span class="text-[#ff9064] italic">Weg</span>
            </h1>
            <p class="text-[#adaaaa] text-lg max-w-md mx-auto">
                Trete dem Video-First-Marktplatz bei, auf dem Talent und Nachfrage lokal zusammenfinden.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-5xl">
            <a href="{{ path('app_register', {role: 'provider', step: '1'}) }}" class="group relative overflow-hidden rounded-xl bg-[#131313] transition-all duration-500 hover:translate-y-[-8px]">
                <div class="absolute inset-0 z-0 opacity-40 grayscale group-hover:grayscale-0 transition-all duration-700">
                    <div class="w-full h-full bg-[radial-gradient(circle_at_30%_20%,#3a3a3a,transparent_55%)]"></div>
                </div>
                <div class="absolute inset-0 z-10 bg-gradient-to-t from-black via-black/80 to-transparent"></div>
                <div class="relative z-20 p-8 h-[450px] flex flex-col justify-end">
                    <div class="mb-6">
                        <span class="material-symbols-outlined text-[#ff9064] text-5xl mb-4" style="font-variation-settings: 'FILL' 1;">stars</span>
                        <h2 class="font-bold text-3xl mb-3">Ich bin Anbieter</h2>
                        <p class="text-[#adaaaa] font-medium">Zeige deine Expertise per Video, baue deine Marke auf und verwalte Buchungen einfach.</p>
                    </div>
                    <span class="bg-gradient-to-br from-[#ff9064] to-[#ff7941] text-black font-bold py-4 px-8 rounded-full flex items-center justify-center gap-2 group-hover:shadow-[0_0_30px_rgba(255,144,100,0.3)] transition-all">
                        <span>Jetzt starten</span>
                        <span class="material-symbols-outlined">arrow_forward</span>
                    </span>
                </div>
                <div class="absolute inset-0 border-2 border-[#ff9064]/0 group-hover:border-[#ff9064]/20 rounded-xl transition-all duration-500"></div>
            </a>

            <a href="{{ path('app_register', {role: 'customer'}) }}" class="group relative overflow-hidden rounded-xl bg-[#131313] transition-all duration-500 hover:translate-y-[-8px]">
                <div class="absolute inset-0 z-0 opacity-40 grayscale group-hover:grayscale-0 transition-all duration-700">
                    <div class="w-full h-full bg-[radial-gradient(circle_at_70%_30%,#454545,transparent_55%)]"></div>
                </div>
                <div class="absolute inset-0 z-10 bg-gradient-to-t from-black via-black/80 to-transparent"></div>
                <div class="relative z-20 p-8 h-[450px] flex flex-col justify-end">
                    <div class="mb-6">
                        <span class="material-symbols-outlined text-[#ff9064] text-5xl mb-4" style="font-variation-settings: 'FILL' 1;">person_search</span>
                        <h2 class="font-bold text-3xl mb-3">Ich suche Services</h2>
                        <p class="text-[#adaaaa] font-medium">Finde starke Anbieter, schau dir Videos an und buche passende Services in Sekunden.</p>
                    </div>
                    <span class="bg-[#262626] text-white font-bold py-4 px-8 rounded-full flex items-center justify-center gap-2 hover:bg-[#2f2f2f] transition-all">
                        <span>Services entdecken</span>
                        <span class="material-symbols-outlined">arrow_forward</span>
                    </span>
                </div>
                <div class="absolute inset-0 border-2 border-white/0 group-hover:border-white/10 rounded-xl transition-all duration-500"></div>
            </a>
        </div>

        <div class="fixed -top-20 -right-20 w-96 h-96 bg-[#ff9064]/10 rounded-full blur-[100px] pointer-events-none"></div>
        <div class="fixed -bottom-20 -left-20 w-96 h-96 bg-[#f8883e]/5 rounded-full blur-[100px] pointer-events-none"></div>
    </main>
</section>
{% endblock %}