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

{% block title %}Profil bearbeiten | JI:O{% endblock %}
{% block header %}{% endblock %}
{% block main_class %}profile-screen stitch-page{% endblock %}

{% block stylesheets %}
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .glass-nav {
            background: rgba(38, 38, 38, 0.8);
            backdrop-filter: blur(20px);
        }

        .kinetic-gradient {
            background: linear-gradient(135deg, #ff9064 0%, #ff7941 100%);
        }

        .customer-avatar-upload {
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            background: rgba(0, 0, 0, 0.55);
            display: grid;
            place-items: center;
            color: #fff;
            cursor: pointer;
            z-index: 4;
        }
    </style>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "secondary-fixed-dim": "#ffb285",
                        "surface-container-high": "#20201f",
                        "on-tertiary": "#5a3900",
                        "primary-container": "#ff7941",
                        "error-container": "#9f0519",
                        "primary-fixed": "#ff7941",
                        "tertiary": "#ffb951",
                        "inverse-on-surface": "#565555",
                        "surface-dim": "#0e0e0e",
                        "surface-container": "#1a1a1a",
                        "inverse-primary": "#a83a00",
                        "tertiary-fixed": "#f8a91f",
                        "surface-container-highest": "#262626",
                        "surface": "#0e0e0e",
                        "tertiary-dim": "#e89b09",
                        "background": "#0e0e0e",
                        "surface-container-lowest": "#000000",
                        "primary": "#ff9064",
                        "tertiary-container": "#f8a91f",
                        "outline": "#767575",
                        "on-tertiary-container": "#4d3100",
                        "inverse-surface": "#fcf9f8",
                        "on-tertiary-fixed-variant": "#593900",
                        "tertiary-fixed-dim": "#e89b09",
                        "on-surface": "#ffffff",
                        "on-error": "#490006",
                        "on-primary": "#571a00",
                        "on-secondary-container": "#fff6f2",
                        "on-primary-fixed-variant": "#531900",
                        "secondary-container": "#9a4600",
                        "on-secondary-fixed-variant": "#843c00",
                        "on-tertiary-fixed": "#301c00",
                        "surface-tint": "#ff9064",
                        "outline-variant": "#484847",
                        "primary-fixed-dim": "#ff5e07",
                        "primary-dim": "#ff7439",
                        "on-error-container": "#ffa8a3",
                        "on-primary-container": "#431200",
                        "error": "#ff716c",
                        "secondary": "#f8883e",
                        "on-background": "#ffffff",
                        "surface-variant": "#262626",
                        "surface-container-low": "#131313",
                        "on-secondary-fixed": "#582500",
                        "error-dim": "#d7383b",
                        "surface-bright": "#2c2c2c",
                        "on-secondary": "#451c00",
                        "secondary-dim": "#ee8137",
                        "secondary-fixed": "#ffc5a5",
                        "on-surface-variant": "#adaaaa",
                        "on-primary-fixed": "#000000"
                    },
                    fontFamily: {
                        "headline": ["Plus Jakarta Sans"],
                        "body": ["Manrope"],
                        "label": ["Manrope"]
                    },
                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "1.5rem", "full": "9999px"}
                }
            }
        };
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const avatarInputs = Array.from(document.querySelectorAll('input[type="file"][name="avatar"][data-avatar-autosave]'));
            avatarInputs.forEach((input) => {
                input.addEventListener('change', () => {
                    const form = input.closest('form');
                    if (!(form instanceof HTMLFormElement)) {
                        return;
                    }
                    if (!input.files || input.files.length === 0) {
                        return;
                    }
                    if (form.dataset.avatarSubmitting === '1') {
                        return;
                    }

                    form.dataset.avatarSubmitting = '1';
                    if (typeof form.requestSubmit === 'function') {
                        form.requestSubmit();
                    } else {
                        form.submit();
                    }
                });
            });
        });
    </script>
{% endblock %}

{% block body %}
<form method="post" enctype="multipart/form-data" class="profile-screen-form stitch-form-layout font-body selection:bg-primary selection:text-on-primary">
    {% if isCustomer %}
        <input type="hidden" name="customer_name" value="{{ user and user.displayName ? user.displayName : '' }}">
        <input type="hidden" name="customer_email" value="{{ user and user.email ? user.email : '' }}">
        <input type="hidden" name="customer_city" value="{{ user and user.city ? user.city : '' }}">

        <header class="feed-shell-header">
            <nav class="feed-shell-topnav">
                <div class="feed-shell-topnav-left">
                    <button type="button" class="feed-shell-location-btn" onclick="history.back()" aria-label="Zurueck">
                        <span class="material-symbols-outlined">arrow_back</span>
                    </button>
                </div>
                <a class="feed-shell-logo-wrap feed-shell-logo-center" href="{{ path('app_feed') }}" aria-label="Zum Feed">
                    <img src="{{ asset('assets/img/top_logo.png') }}" alt="JI:O Logo">
                </a>
                <div class="feed-shell-topnav-right">
                    <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="feed-shell-user" aria-label="Profil">
                        {% if app.user and app.user.avatarPath %}
                            <img src="{{ app.user.avatarPath }}" alt="Profil">
                        {% else %}
                            <span class="material-symbols-outlined">person</span>
                        {% endif %}
                    </a>
                </div>
            </nav>
        </header>

        <main class="max-w-screen-xl mx-auto px-6 pb-32 pt-24">
            <header class="flex flex-col md:flex-row items-center md:items-end gap-8 mb-16 relative">
                <div class="relative group">
                    <div class="w-32 h-32 md:w-48 md:h-48 rounded-xl overflow-hidden shadow-2xl bg-surface-container-highest">
                        {% if user and user.avatarPath %}
                            <img src="{{ user.avatarPath }}" alt="{{ user and user.displayName ? user.displayName : 'Customer' }}" class="w-full h-full object-cover">
                        {% else %}
                            <div class="w-full h-full grid place-items-center text-4xl font-bold">{{ (user and user.displayName ? user.displayName : 'W')|slice(0,1)|upper }}</div>
                        {% endif %}
                    </div>
                    <label class="customer-avatar-upload" aria-label="Avatar aendern">
                        <i class="fa-solid fa-camera"></i>
                        <input type="file" name="avatar" accept="image/*" hidden data-avatar-autosave>
                    </label>
                    <div class="absolute -bottom-2 -right-2 kinetic-gradient px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest text-on-primary">
                        Seeker
                    </div>
                </div>
                <div class="flex-1 text-center md:text-left">
                    <h1 class="text-5xl md:text-7xl font-headline font-extrabold tracking-tighter mb-2">{{ user and user.displayName ? user.displayName : 'JI:O User' }}</h1>
                    <p class="text-on-surface-variant text-lg font-medium mb-6">Premium Member since 2023 • {{ user and user.city ? user.city : 'Deutschland' }}</p>
                    <div class="flex flex-wrap justify-center md:justify-start gap-4">
                        <button type="submit" class="kinetic-gradient text-on-primary font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-xl">edit</span>
                            Edit Profile
                        </button>
                        <button type="button" onclick="history.back()" class="bg-surface-container-highest text-on-surface font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-xl">share</span>
                            Share Profile
                        </button>
                    </div>
                </div>
            </header>

            <section class="mb-10 rounded-2xl border border-outline-variant/20 bg-surface-container-low p-5 md:p-6" aria-labelledby="customer-interests-heading">
                <h2 id="customer-interests-heading" class="text-xl font-headline font-bold mb-2">Deine Interessen</h2>
                <p class="text-sm text-on-surface-variant mb-4">Waehle Kategorien, die dir wichtig sind (optional, bis zu 12).</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" {% if cat.slug in user.interestedCategorySlugs %}checked{% endif %}>
                            <span class="inline-flex px-4 py-2.5 rounded-full bg-surface-container-highest text-on-surface text-sm font-medium border border-outline-variant/30 peer-checked:bg-primary peer-checked:text-on-primary peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-primary">{{ cat.name }}</span>
                        </label>
                    {% endfor %}
                </div>
            </section>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                <section class="lg:col-span-8 space-y-8">
                    <div class="flex justify-between items-end">
                        <h2 class="text-3xl font-headline font-bold">My Favorites</h2>
                        <button type="button" class="text-primary font-bold text-sm hover:underline">View All</button>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="group relative aspect-[4/5] rounded-xl overflow-hidden bg-surface-container transition-all hover:scale-[1.02]">
                            <div class="w-full h-full bg-[radial-gradient(circle_at_20%_15%,#333_0%,#1a1a1a_55%,#111_100%)] opacity-80 group-hover:opacity-100 transition-opacity"></div>
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 p-6 w-full">
                                <span class="bg-primary/20 text-primary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded mb-3 inline-block">Fitness</span>
                                <h3 class="text-2xl font-headline font-bold leading-tight">Hyper-Intensity Performance Coaching</h3>
                                <div class="flex items-center justify-between mt-4">
                                    <span class="text-white/70 text-sm">Marcus V.</span>
                                    <span class="font-bold text-primary">$120/hr</span>
                                </div>
                            </div>
                            <button type="button" class="absolute top-4 right-4 bg-black/40 backdrop-blur-md p-2 rounded-full text-primary">
                                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
                            </button>
                        </div>
                        <div class="group relative aspect-[4/5] rounded-xl overflow-hidden bg-surface-container transition-all hover:scale-[1.02]">
                            <div class="w-full h-full bg-[radial-gradient(circle_at_20%_15%,#2d3134_0%,#1a1a1a_55%,#111_100%)] opacity-80 group-hover:opacity-100 transition-opacity"></div>
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent"></div>
                            <div class="absolute bottom-0 p-6 w-full">
                                <span class="bg-tertiary/20 text-tertiary text-[10px] font-bold uppercase tracking-widest px-2 py-1 rounded mb-3 inline-block">Wellness</span>
                                <h3 class="text-2xl font-headline font-bold leading-tight">Somatic Resonance &amp; Sound Bath</h3>
                                <div class="flex items-center justify-between mt-4">
                                    <span class="text-white/70 text-sm">Elena R.</span>
                                    <span class="font-bold text-tertiary">$95/hr</span>
                                </div>
                            </div>
                            <button type="button" class="absolute top-4 right-4 bg-black/40 backdrop-blur-md p-2 rounded-full text-primary">
                                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
                            </button>
                        </div>
                    </div>
                </section>

                <aside class="lg:col-span-4 space-y-12">
                    <div class="space-y-6">
                        <h2 class="text-2xl font-headline font-bold">Recent Activity</h2>
                        <div class="space-y-4">
                            <div class="bg-surface-container-low p-4 rounded-xl flex gap-4 items-center">
                                <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                                    <span class="material-symbols-outlined">event_available</span>
                                </div>
                                <div>
                                    <p class="text-sm font-bold">Booked: HIIT Session</p>
                                    <p class="text-xs text-on-surface-variant">2 hours ago</p>
                                </div>
                            </div>
                            <div class="bg-surface-container-low p-4 rounded-xl flex gap-4 items-center">
                                <div class="w-12 h-12 rounded-lg bg-tertiary/10 flex items-center justify-center text-tertiary">
                                    <span class="material-symbols-outlined">payments</span>
                                </div>
                                <div>
                                    <p class="text-sm font-bold">Payment Confirmed</p>
                                    <p class="text-xs text-on-surface-variant">Yesterday</p>
                                </div>
                            </div>
                            <div class="bg-surface-container-low p-4 rounded-xl flex gap-4 items-center">
                                <div class="w-12 h-12 rounded-lg bg-secondary/10 flex items-center justify-center text-secondary">
                                    <span class="material-symbols-outlined">star</span>
                                </div>
                                <div>
                                    <p class="text-sm font-bold">Left a Review</p>
                                    <p class="text-xs text-on-surface-variant">3 days ago</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-6">
                        <h2 class="text-2xl font-headline font-bold">Settings</h2>
                        <div class="bg-surface-container rounded-xl overflow-hidden">
                            <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_profile_show', {id: app.user.id}) }}">
                                <div class="flex items-center gap-3">
                                    <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">person</span>
                                    <span class="font-medium">Profil ansehen</span>
                                </div>
                                <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                            </a>
                            <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_faq') }}">
                                <div class="flex items-center gap-3">
                                    <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">payments</span>
                                    <span class="font-medium">Payments &amp; FAQ</span>
                                </div>
                                <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                            </a>
                            <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_imprint') }}">
                                <div class="flex items-center gap-3">
                                    <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">article</span>
                                    <span class="font-medium">Impressum</span>
                                </div>
                                <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                            </a>
                            <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group" href="{{ path('app_privacy') }}">
                                <div class="flex items-center gap-3">
                                    <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">policy</span>
                                    <span class="font-medium">Privacy</span>
                                </div>
                                <span class="material-symbols-outlined text-on-surface-variant">chevron_right</span>
                            </a>
                            <a class="flex items-center justify-between p-4 hover:bg-surface-container-highest transition-colors group text-error" href="{{ path('app_logout') }}">
                                <div class="flex items-center gap-3">
                                    <span class="material-symbols-outlined">logout</span>
                                    <span class="font-medium">Logout</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </aside>
            </div>
        </main>
    {% else %}
        <header class="feed-shell-header">
            <nav class="feed-shell-topnav">
                <div class="feed-shell-topnav-left">
                    <button type="button" class="feed-shell-location-btn" onclick="history.back()" aria-label="Zurueck">
                        <span class="material-symbols-outlined">arrow_back</span>
                    </button>
                </div>
                <a class="feed-shell-logo-wrap feed-shell-logo-center" href="{{ path('app_feed') }}" aria-label="Zum Feed">
                    <img src="{{ asset('assets/img/top_logo.png') }}" alt="JI:O Logo">
                </a>
                <div class="feed-shell-topnav-right">
                    <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="feed-shell-user" aria-label="Profil">
                        {% if app.user and app.user.avatarPath %}
                            <img src="{{ app.user.avatarPath }}" alt="Profil">
                        {% else %}
                            <span class="material-symbols-outlined">business</span>
                        {% endif %}
                    </a>
                </div>
            </nav>
        </header>

        <main class="max-w-screen-xl mx-auto px-6 pb-32 pt-24">
            <header class="flex flex-col md:flex-row items-center md:items-end gap-8 mb-12 relative">
                <div class="relative group">
                    <div class="w-32 h-32 md:w-48 md:h-48 rounded-xl overflow-hidden shadow-2xl bg-surface-container-highest">
                        {% if user and user.avatarPath %}
                            <img src="{{ user.avatarPath }}" alt="{{ user and user.companyName ? user.companyName : 'Company' }}" class="w-full h-full object-cover">
                        {% else %}
                            <div class="w-full h-full grid place-items-center text-4xl font-bold">{{ (user and user.companyName ? user.companyName : 'B')|slice(0,1)|upper }}</div>
                        {% endif %}
                    </div>
                    <label class="customer-avatar-upload" aria-label="Avatar aendern">
                        <i class="fa-solid fa-camera"></i>
                        <input type="file" name="avatar" accept="image/*" hidden data-avatar-autosave>
                    </label>
                    <div class="absolute -bottom-2 -right-2 kinetic-gradient px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest text-on-primary">
                        Business
                    </div>
                </div>
                <div class="flex-1 text-center md:text-left">
                    <h1 class="text-5xl md:text-7xl font-headline font-extrabold tracking-tighter mb-2">{{ user and user.companyName ? user.companyName : 'Business Profile' }}</h1>
                    <p class="text-on-surface-variant text-lg font-medium mb-6">{{ user and user.city ? user.city : 'Deutschland' }} • Unternehmen</p>
                    <div class="flex flex-wrap justify-center md:justify-start gap-4">
                        <button type="submit" class="kinetic-gradient text-on-primary font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-xl">edit</span>
                            Edit Profile
                        </button>
                        <button type="button" onclick="history.back()" class="bg-surface-container-highest text-on-surface font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200 flex items-center gap-2">
                            <span class="material-symbols-outlined text-xl">share</span>
                            Share Profile
                        </button>
                    </div>
                </div>
            </header>

            <section id="wanted-plus" class="mb-6 p-5 rounded-2xl border border-primary/30 bg-gradient-to-br from-tertiary/10 to-primary/10">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex items-start gap-3 min-w-0">
                        <span class="material-symbols-outlined text-primary text-2xl shrink-0" style="font-variation-settings: 'FILL' 1;">auto_awesome</span>
                        <div>
                            <h2 class="text-lg font-headline font-bold text-on-surface">JI:O+</h2>
                            <p class="text-sm text-on-surface-variant mt-1 leading-relaxed">
                                Premium-Dashboard, Vorteile und Demo-Kennzahlen — volle Seite oeffnen.
                            </p>
                        </div>
                    </div>
                    <a href="{{ path('app_wanted_plus') }}" class="kinetic-gradient text-on-primary font-bold px-6 py-3 rounded-full text-sm whitespace-nowrap text-center no-underline shrink-0">
                        Zu JI:O+
                    </a>
                </div>
            </section>

            <section class="bg-surface-container rounded-2xl p-5 md:p-6">
                <h2 class="text-2xl font-headline font-bold mb-5">Business Daten</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <label class="profile-field">
                        <span>Unternehmensname</span>
                        <input type="text" name="name" value="{{ user and user.companyName ? user.companyName : '' }}" placeholder="Studio Name">
                    </label>
                    <label class="profile-field">
                        <span>Kategorie</span>
                        <select name="category">
                            {% set currentCategory = user and user.company and user.company.category ? user.company.category.name : '' %}
                            <option value="">Bitte waehlen</option>
                            {% for cat in categories %}
                                <option value="{{ cat.name }}" {% if currentCategory == cat.name %}selected{% endif %}>{{ cat.name }}</option>
                            {% endfor %}
                        </select>
                    </label>
                    <label class="profile-field">
                        <span>Stadt</span>
                        <input type="text" name="city" value="{{ user and user.city ? user.city : '' }}" placeholder="z.B. Essen">
                    </label>
                    <label class="profile-field">
                        <span>Telefon</span>
                        <input type="tel" name="phone" value="{{ user and user.company and user.company.phone ? user.company.phone : '' }}" placeholder="+49 ...">
                    </label>
                    <label class="profile-field">
                        <span>Website</span>
                        <input type="url" name="website" value="{{ user and user.company and user.company.website ? user.company.website : '' }}" placeholder="https://...">
                    </label>
                    <label class="profile-field">
                        <span>Instagram</span>
                        <input type="text" name="instagram" value="{{ user and user.company and user.company.instagram ? user.company.instagram : '' }}" placeholder="@profil">
                    </label>
                    <label class="profile-field md:col-span-2">
                        <span>Adresse</span>
                        <input type="text" name="address" value="{{ user and user.company ? user.company.address : '' }}" placeholder="Strasse, PLZ, Ort">
                    </label>
                    <label class="profile-field md:col-span-2">
                        <span>About</span>
                        <textarea name="about" rows="4" placeholder="Beschreibe dein Unternehmen...">{{ user and user.company and user.company.description ? user.company.description : '' }}</textarea>
                    </label>
                    <div class="profile-field md:col-span-2">
                        <span>Profilvideo</span>
                        <p class="text-on-surface-variant text-sm mb-2 leading-relaxed">Optional: Kurzvideo fuer dein Profil. Nach dem Upload prueft das Team die Freigabe; bis dahin siehst du im Profil den Hinweis &bdquo;wird geprueft&ldquo;.</p>
                        {% if profileIntroVideo is defined and profileIntroVideo %}
                            {% if profileIntroVideo.moderationStatus == 'pending' %}
                                <p class="text-amber-400 text-sm mb-2">Aktuell: Profilvideo wird geprueft.</p>
                            {% elseif profileIntroVideo.moderationStatus == 'approved' %}
                                <p class="text-emerald-400/90 text-sm mb-2">Aktuell: Profilvideo ist freigegeben. Ein neues Video ersetzt das alte und wird erneut geprueft.</p>
                            {% endif %}
                        {% endif %}
                        <input type="file" name="profile_intro_video" accept="video/mp4,video/webm,video/quicktime,.mp4,.webm,.mov" class="w-full text-sm text-on-surface-variant file:mr-3 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-primary file:text-on-primary">
                    </div>
                </div>
                <div class="mt-6 grid gap-3">
                    <button type="submit" class="kinetic-gradient text-on-primary font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200">
                        Profil speichern
                    </button>
                    <button type="button" onclick="history.back()" class="bg-surface-container-highest text-on-surface font-bold px-8 py-3 rounded-full active:scale-95 transition-transform duration-200">
                        Abbrechen
                    </button>
                </div>
            </section>
        </main>
    {% endif %}

    <nav class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[90%] rounded-full z-50 glass-nav shadow-[0_32px_64px_rgba(0,0,0,0.08)]">
        <div class="flex justify-around items-center h-20 px-4">
            <a href="{{ path('app_how_it_works') }}" class="flex flex-col items-center justify-center text-white/50 hover:text-white transition-colors active:scale-90 transition-transform duration-300">
                <span class="material-symbols-outlined">explore</span>
                <span class="font-['Manrope'] text-[10px] font-semibold uppercase tracking-widest mt-1">So geht's</span>
            </a>
            <a href="{{ path('app_faq') }}" class="flex flex-col items-center justify-center text-white/50 hover:text-white transition-colors active:scale-90 transition-transform duration-300">
                <span class="material-symbols-outlined">help</span>
                <span class="font-['Manrope'] text-[10px] font-semibold uppercase tracking-widest mt-1">FAQ</span>
            </a>
            <a href="mailto:hello@jio.app" class="flex flex-col items-center justify-center text-white/50 hover:text-white transition-colors active:scale-90 transition-transform duration-300">
                <span class="material-symbols-outlined">chat_bubble</span>
                <span class="font-['Manrope'] text-[10px] font-semibold uppercase tracking-widest mt-1">Kontakt</span>
            </a>
            <a href="{{ path('app_profile_show', {id: app.user.id}) }}" class="flex flex-col items-center justify-center text-[#ff7439] drop-shadow-[0_0_8px_rgba(255,116,57,0.4)] active:scale-90 transition-transform duration-300">
                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">person</span>
                <span class="font-['Manrope'] text-[10px] font-semibold uppercase tracking-widest mt-1">Profile</span>
            </a>
        </div>
    </nav>
</form>
{% endblock %}