{% extends 'legal/base_legal.html.twig' %}

{% block title %}JI:O | FAQ & Support{% endblock %}

{% block legal_extra_styles %}
    <style>
        .faq-details > summary { list-style: none; }
        .faq-details > summary::-webkit-details-marker { display: none; }
        .faq-details[open] > .faq-summary-row .faq-chevron { transform: rotate(180deg); }
    </style>
{% endblock %}

{% block legal_extra_scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input = document.getElementById('faq-search');
            const items = document.querySelectorAll('[data-faq-item]');
            const chips = document.querySelectorAll('[data-faq-chip]');
            const apply = () => {
                const q = (input && input.value ? input.value : '').toLowerCase().trim();
                items.forEach((el) => {
                    const hay = (el.getAttribute('data-faq-search') || '').toLowerCase();
                    el.classList.toggle('hidden', q !== '' && !hay.includes(q));
                });
            };
            if (input) {
                input.addEventListener('input', apply);
            }
            chips.forEach((chip) => {
                chip.addEventListener('click', () => {
                    const term = chip.getAttribute('data-faq-chip') || '';
                    if (input) {
                        input.value = term;
                        apply();
                        input.focus();
                    }
                });
            });
        });
    </script>
{% endblock %}

{% block legal_body %}
<header class="bg-[#262626]/60 backdrop-blur-xl top-0 sticky z-50 shadow-2xl shadow-black/20 flex items-center justify-between px-6 py-4 w-full min-h-16">
    <div class="flex items-center gap-4">
        <a href="{{ path('app_landing') }}" class="text-stone-400 hover:opacity-80 transition-opacity active:scale-95 duration-200" aria-label="Zurueck">
            <span class="material-symbols-outlined">arrow_back</span>
        </a>
        <div class="flex items-center gap-2">
            <img alt="JI:O" class="h-8 w-8 object-contain" src="{{ asset('assets/img/top_logo.png') }}" width="32" height="32">
            <span class="text-2xl font-black italic tracking-tighter text-orange-600 font-headline">JI:O</span>
        </div>
    </div>
    <div class="flex items-center gap-2 sm:gap-3">
        <a href="{{ path('app_imprint') }}" class="text-stone-400 hover:text-primary text-xs font-label uppercase tracking-wider no-underline hidden sm:inline">Impressum</a>
        <a href="{{ path('app_terms') }}" class="text-stone-400 hover:text-primary text-xs font-label uppercase tracking-wider no-underline hidden sm:inline">AGB</a>
        <a href="{{ path('app_privacy') }}" class="text-stone-400 hover:text-primary text-xs font-label uppercase tracking-wider no-underline hidden sm:inline">Datenschutz</a>
        <a href="{{ path('app_feed') }}" class="text-stone-400 hover:text-primary text-sm font-label uppercase tracking-wider no-underline">Feed</a>
    </div>
</header>

<main class="max-w-4xl mx-auto px-6 pt-8">
    <section class="mb-12">
        <h2 class="font-headline text-4xl sm:text-5xl font-extrabold tracking-tight mb-4">Wie koennen wir <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-container">helfen?</span></h2>
        <p class="font-body text-on-surface-variant text-lg max-w-xl">Antworten auf haeufige Fragen zu Buchungen, JI:O+, Videos, Datenschutz und deinem Konto auf der JI:O-Plattform.</p>
    </section>

    <div class="mb-12">
        <div class="relative group">
            <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
                <span class="material-symbols-outlined text-on-surface-variant group-focus-within:text-primary transition-colors">search</span>
            </div>
            <input id="faq-search" class="w-full bg-surface-container-high border-none rounded-full py-5 pl-14 pr-6 text-on-surface placeholder:text-outline font-body focus:ring-2 focus:ring-primary/20 transition-all outline-none" placeholder="Fragen durchsuchen …" type="search" autocomplete="off">
        </div>
        <div class="flex flex-wrap gap-3 mt-6">
            <button type="button" data-faq-chip="jio+" class="px-4 py-2 rounded-full bg-surface-container-highest text-sm font-label text-on-surface-variant cursor-pointer hover:bg-primary/10 hover:text-primary transition-all border-0">JI:O+</button>
            <button type="button" data-faq-chip="zahlung" class="px-4 py-2 rounded-full bg-surface-container-highest text-sm font-label text-on-surface-variant cursor-pointer hover:bg-primary/10 hover:text-primary transition-all border-0">Zahlung</button>
            <button type="button" data-faq-chip="video" class="px-4 py-2 rounded-full bg-surface-container-highest text-sm font-label text-on-surface-variant cursor-pointer hover:bg-primary/10 hover:text-primary transition-all border-0">Videos</button>
            <button type="button" data-faq-chip="datenschutz" class="px-4 py-2 rounded-full bg-surface-container-highest text-sm font-label text-on-surface-variant cursor-pointer hover:bg-primary/10 hover:text-primary transition-all border-0">Datenschutz</button>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4">
        <div class="p-1 rounded-3xl bg-surface-container">
            <div class="flex flex-col gap-1">

                <details open class="faq-details bg-surface-container-highest rounded-[1.25rem] p-6 transition-all border-l-4 border-primary shadow-lg shadow-primary/5" data-faq-item data-faq-search="jio+ plus premium mitgliedschaft vorteile abo">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">star_rate</span>
                            <h3 class="font-headline text-xl font-bold text-left">Was ist JI:O+?</h3>
                        </div>
                        <span class="material-symbols-outlined text-primary faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        JI:O+ ist eine optionale Premium-Stufe fuer aktive Anbieterinnen und Power-User. Je nach gebuchtem Paket koennen u. a. erweiterte Sichtbarkeit, priorisierte Platzierungen, zusaetzliche Profilfunktionen oder exklusive Formate angeboten werden. Die genauen Leistungen und Preise werden in der App bzw. auf der Angebotsseite zum Zeitpunkt des Abschlusses angezeigt und sind Vertragsbestandteil.
                    </div>
                </details>

                <details class="faq-details bg-surface-container hover:bg-surface-container-high rounded-[1.25rem] p-6 transition-all group border-l-4 border-transparent open:border-primary open:shadow-lg open:shadow-primary/5" data-faq-item data-faq-search="buchung termin service anbieter buchen">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">calendar_month</span>
                            <h3 class="font-headline text-xl font-bold text-left">Wie buche ich einen Service?</h3>
                        </div>
                        <span class="material-symbols-outlined text-on-surface-variant faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        Entdecke Anbieter im Feed oder ueber Profile. Ueber die Kontakt- bzw. Buchungsfunktionen im jeweiligen Profil kannst du eine Anfrage stellen oder — sofern freigeschaltet — direkt buchen. Die verbindliche Abwicklung (Termin, Preis, Stornierung) erfolgt zwischen dir und dem Anbieter bzw. ueber die in der App beschriebenen Ablaeufe. Speichere wichtige Absprachen schriftlich.
                    </div>
                </details>

                <details class="faq-details bg-surface-container hover:bg-surface-container-high rounded-[1.25rem] p-6 transition-all group border-l-4 border-transparent open:border-primary" data-faq-item data-faq-search="video hochladen upload profil clip">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">video_call</span>
                            <h3 class="font-headline text-xl font-bold text-left">Wie lade ich Videos hoch?</h3>
                        </div>
                        <span class="material-symbols-outlined text-on-surface-variant faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        Als registrierte Anbieterin bzw. registrierter Anbieter nutzt du die Upload-Funktion in der App (z. B. „Erstellen“ / Profilvideo bei der Registrierung). Community-Nutzer koennen — wo vorgesehen — Clips fuer Betriebe einreichen. Formate und Groessenbeschraenkungen werden beim Upload angezeigt. Einige Inhalte (z. B. Profilvideos) koennen vor Veroeffentlichung geprueft werden; Details stehen in den <a href="{{ path('app_terms') }}" class="text-primary underline">Nutzungsbedingungen</a>.
                    </div>
                </details>

                <details class="faq-details bg-surface-container hover:bg-surface-container-high rounded-[1.25rem] p-6 transition-all group border-l-4 border-transparent open:border-primary" data-faq-item data-faq-search="datenschutz dsgvo sicherheit daten">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">shield</span>
                            <h3 class="font-headline text-xl font-bold text-left">Sind meine Daten sicher?</h3>
                        </div>
                        <span class="material-symbols-outlined text-on-surface-variant faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        Wir setzen technische und organisatorische Massnahmen ein, die dem Stand der Technik entsprechen (z. B. Verschluesselung bei der Uebertragung, wo TLS eingesetzt wird, Zugriffsbeschraenkungen, regelmaessige Pflege). Eine absolute Sicherheit gibt es im Internet nicht. Ausfuehrliche Informationen zu Verarbeitung, Rechtsgrundlagen und deinen Rechten findest du in unserer <a href="{{ path('app_privacy') }}" class="text-primary underline">Datenschutzerklaerung</a> gemaess Art. 13 ff. DSGVO.
                    </div>
                </details>

                <details class="faq-details bg-surface-container hover:bg-surface-container-high rounded-[1.25rem] p-6 transition-all group border-l-4 border-transparent open:border-primary" data-faq-item data-faq-search="konto loeschen widerruf betroffenenrechte">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">person_remove</span>
                            <h3 class="font-headline text-xl font-bold text-left">Wie loesche ich mein Konto?</h3>
                        </div>
                        <span class="material-symbols-outlined text-on-surface-variant faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        Du kannst die Loeschung deines Kontos und deiner personenbezogenen Daten verlangen, soweit keine gesetzlichen Aufbewahrungspflichten entgegenstehen. Nutze hierfuer die Kontaktmoeglichkeit im Footer oder schreibe uns mit Betreff „Datenloeschung“. Nachweis deiner Identitaet kann erforderlich sein. Rechtliche Hinweise zu Auskunft, Berichtigung und Widerspruch: siehe <a href="{{ path('app_privacy') }}" class="text-primary underline">Datenschutz</a>, Abschnitt „Ihre Rechte“.
                    </div>
                </details>

                <details class="faq-details bg-surface-container hover:bg-surface-container-high rounded-[1.25rem] p-6 transition-all group border-l-4 border-transparent open:border-primary" data-faq-item data-faq-search="zahlung zahlungsanbieter gebuehr">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">payments</span>
                            <h3 class="font-headline text-xl font-bold text-left">Wie funktionieren Zahlungen?</h3>
                        </div>
                        <span class="material-symbols-outlined text-on-surface-variant faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        Sofern in-app-Zahlungen angeboten werden, erfolgen diese ueber zertifizierte Zahlungsdienstleister. Es gelten deren Nutzungs- und Datenschutzbedingungen zusaetzlich zu unseren <a href="{{ path('app_terms') }}" class="text-primary underline">Nutzungsbedingungen</a>. Rechnungen und Rueckerstattungen richten sich nach dem jeweiligen Produkt bzw. Angebot und den kommunizierten AGB des Zahlungsflows.
                    </div>
                </details>

                <details class="faq-details bg-surface-container hover:bg-surface-container-high rounded-[1.25rem] p-6 transition-all group border-l-4 border-transparent open:border-primary" data-faq-item data-faq-search="minderjaehrig alter 18 jugendschutz">
                    <summary class="faq-summary-row flex justify-between items-center cursor-pointer list-none">
                        <div class="flex items-center gap-4">
                            <span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors">badge</span>
                            <h3 class="font-headline text-xl font-bold text-left">Ab welchem Alter darf ich JI:O nutzen?</h3>
                        </div>
                        <span class="material-symbols-outlined text-on-surface-variant faq-chevron transition-transform">expand_more</span>
                    </summary>
                    <div class="mt-4 font-body text-on-surface-variant leading-relaxed border-t border-outline-variant/10 pt-4">
                        Die Registrierung und Nutzung der vollen Funktionen setzt in der Regel die Volljaehrigkeit (18 Jahre) voraus, sofern nicht ausdruecklich eine elterlich freigegebene Sonderregelung besteht. Details regeln unsere <a href="{{ path('app_terms') }}" class="text-primary underline">Nutzungsbedingungen</a>.
                    </div>
                </details>

            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="bg-surface-container rounded-3xl p-8 flex flex-col justify-between group hover:bg-surface-container-high transition-all">
                <div>
                    <span class="material-symbols-outlined text-primary mb-4 block scale-125">contact_support</span>
                    <h4 class="font-headline text-2xl font-bold mb-2">Noch Fragen?</h4>
                    <p class="font-body text-on-surface-variant text-sm">Schreib uns — wir melden uns zu den ueblichen Geschaeftszeiten.</p>
                </div>
                <a href="mailto:hello@jio.app" class="mt-8 bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-label font-bold py-3 rounded-full flex items-center justify-center gap-2 group-active:scale-95 transition-all no-underline">
                    E-Mail an Support
                    <span class="material-symbols-outlined text-sm">send</span>
                </a>
            </div>
            <div class="bg-surface-container rounded-3xl p-8 relative overflow-hidden min-h-[16rem] flex flex-col justify-end border border-outline-variant/20">
                <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-transparent to-surface-container-lowest opacity-90 z-0" aria-hidden="true"></div>
                <div class="relative z-10">
                    <h4 class="font-headline text-xl font-bold mb-2">Rechtliches</h4>
                    <p class="font-body text-on-surface-variant text-sm mb-4">Impressum, Datenschutz und Nutzungsbedingungen findest du hier.</p>
                    <div class="flex flex-col gap-2">
                        <a href="{{ path('app_imprint') }}" class="text-primary font-label text-sm font-bold no-underline hover:underline">Impressum</a>
                        <a href="{{ path('app_privacy') }}" class="text-primary font-label text-sm font-bold no-underline hover:underline">Datenschutzerklaerung</a>
                        <a href="{{ path('app_terms') }}" class="text-primary font-label text-sm font-bold no-underline hover:underline">Nutzungsbedingungen</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <p class="mt-12 text-center text-on-surface-variant text-xs font-label max-w-2xl mx-auto leading-relaxed">
        Die Antworten sind allgemeine Hinweise und ersetzen keine individuelle Rechtsberatung. Fuer verbindliche Auskunft zu deinem Konto nutze bitte den Support.
    </p>
</main>

<nav class="fixed bottom-6 left-1/2 -translate-x-1/2 w-[92%] max-w-md rounded-full px-2 py-2 bg-[#262626]/80 backdrop-blur-3xl shadow-[0_32px_64px_rgba(0,0,0,0.4)] flex justify-around items-center z-50" aria-label="Hauptnavigation">
    <a href="{{ path('app_landing') }}" class="flex flex-col items-center justify-center text-stone-500 hover:text-orange-400 transition-all active:scale-90 duration-300 no-underline">
        <span class="material-symbols-outlined text-2xl">home</span>
        <span class="text-[10px] font-semibold uppercase tracking-widest mt-1">Start</span>
    </a>
    <a href="{{ path('app_feed') }}" class="flex flex-col items-center justify-center text-stone-500 hover:text-orange-400 transition-all active:scale-90 duration-300 no-underline">
        <span class="material-symbols-outlined text-2xl">explore</span>
        <span class="text-[10px] font-semibold uppercase tracking-widest mt-1">Feed</span>
    </a>
    <a href="{{ path('app_register') }}" class="flex flex-col items-center justify-center text-stone-500 hover:text-orange-400 transition-all active:scale-90 duration-300 no-underline">
        <span class="material-symbols-outlined text-3xl text-orange-500">add_circle</span>
        <span class="text-[10px] font-semibold uppercase tracking-widest mt-1">Registrieren</span>
    </a>
    <a href="mailto:hello@jio.app" class="flex flex-col items-center justify-center text-stone-500 hover:text-orange-400 transition-all active:scale-90 duration-300 no-underline">
        <span class="material-symbols-outlined text-2xl">mail</span>
        <span class="text-[10px] font-semibold uppercase tracking-widest mt-1">Kontakt</span>
    </a>
    <a href="{{ path('app_login') }}" class="flex flex-col items-center justify-center text-orange-500 drop-shadow-[0_0_12px_rgba(255,92,0,0.4)] active:scale-90 transition-transform duration-300 no-underline">
        <span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">login</span>
        <span class="text-[10px] font-semibold uppercase tracking-widest mt-1">Login</span>
    </a>
</nav>
{% endblock %}