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

{% block title %}Info & Rechtliches | JI:O{% endblock %}

{% block legal_extra_styles %}
    <style>
        .legal-editorial h1 { font-family: 'Plus Jakarta Sans', sans-serif; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0e0e0e; }
        ::-webkit-scrollbar-thumb { background: #262626; border-radius: 4px; }
    </style>
{% 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" aria-label="Zur Startseite">
            <span class="material-symbols-outlined">arrow_back</span>
        </a>
        <div class="flex items-center gap-3">
            <img alt="JI:O" class="w-8 h-8 object-contain rounded-lg" 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>
    <a href="{{ path('app_feed') }}" class="text-stone-400 hover:text-primary text-sm font-label uppercase tracking-wider no-underline">Feed</a>
</header>

<main class="legal-editorial max-w-lg mx-auto px-6 py-12 space-y-8 pb-32">
    <div class="space-y-2">
        <h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight">Info &amp; Rechtliches</h1>
        <p class="text-on-surface-variant text-sm leading-relaxed">Hilfe, Pflichtangaben und Vertragsdokumente — alles an einem Ort.</p>
    </div>

    <ul class="space-y-3">
        <li>
            <a href="{{ path('app_faq') }}" class="flex items-center justify-between gap-4 p-5 rounded-xl bg-surface-container-low border border-outline-variant/15 no-underline text-inherit hover:border-primary/30 transition-colors">
                <span class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary">quiz</span>
                    <span class="font-semibold text-on-surface">FAQ &amp; Support</span>
                </span>
                <span class="material-symbols-outlined text-on-surface-variant text-xl">chevron_right</span>
            </a>
        </li>
        <li>
            <a href="{{ path('app_how_it_works') }}" class="flex items-center justify-between gap-4 p-5 rounded-xl bg-surface-container-low border border-outline-variant/15 no-underline text-inherit hover:border-primary/30 transition-colors">
                <span class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary">auto_awesome</span>
                    <span class="font-semibold text-on-surface">So funktioniert JI:O</span>
                </span>
                <span class="material-symbols-outlined text-on-surface-variant text-xl">chevron_right</span>
            </a>
        </li>
        <li>
            <a href="{{ path('app_imprint') }}" class="flex items-center justify-between gap-4 p-5 rounded-xl bg-surface-container-low border border-outline-variant/15 no-underline text-inherit hover:border-primary/30 transition-colors">
                <span class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary">article</span>
                    <span class="font-semibold text-on-surface">Impressum</span>
                </span>
                <span class="material-symbols-outlined text-on-surface-variant text-xl">chevron_right</span>
            </a>
        </li>
        <li>
            <a href="{{ path('app_privacy') }}" class="flex items-center justify-between gap-4 p-5 rounded-xl bg-surface-container-low border border-outline-variant/15 no-underline text-inherit hover:border-primary/30 transition-colors">
                <span class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary">policy</span>
                    <span class="font-semibold text-on-surface">Datenschutz</span>
                </span>
                <span class="material-symbols-outlined text-on-surface-variant text-xl">chevron_right</span>
            </a>
        </li>
        <li>
            <a href="{{ path('app_terms') }}" class="flex items-center justify-between gap-4 p-5 rounded-xl bg-surface-container-low border border-outline-variant/15 no-underline text-inherit hover:border-primary/30 transition-colors">
                <span class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary">gavel</span>
                    <span class="font-semibold text-on-surface">Nutzungsbedingungen</span>
                </span>
                <span class="material-symbols-outlined text-on-surface-variant text-xl">chevron_right</span>
            </a>
        </li>
        <li>
            <a href="mailto:hello@jio.app" class="flex items-center justify-between gap-4 p-5 rounded-xl bg-surface-container-low border border-outline-variant/15 no-underline text-inherit hover:border-primary/30 transition-colors">
                <span class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary">mail</span>
                    <span class="font-semibold text-on-surface">Kontakt (E-Mail)</span>
                </span>
                <span class="material-symbols-outlined text-on-surface-variant text-xl">chevron_right</span>
            </a>
        </li>
    </ul>
</main>
{% endblock %}