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

{% block title %}Impressum | JI:O{% endblock %}

{% block legal_extra_styles %}
    <style>
        .legal-editorial h1, .legal-editorial h2 { 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="Zurueck">
            <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>
    <div class="flex items-center gap-2 sm:gap-3">
        <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_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_faq') }}" class="text-stone-400 hover:text-primary text-sm font-label uppercase tracking-wider no-underline">FAQ</a>
    </div>
</header>

<main class="legal-editorial max-w-3xl mx-auto px-6 py-12 space-y-10 pb-32">
    <section class="space-y-4">
        <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white leading-[1.1]">
            Impressum
        </h1>
        <p class="text-on-surface-variant text-lg max-w-xl font-medium">
            Pflichtangaben zur Anbieterkennzeichnung. Bitte tragen Sie die markierten Platzhalter fuer Ihren Live-Betrieb ein.
        </p>
    </section>

    <div class="grid grid-cols-1 gap-6">
        <section class="p-8 rounded-xl bg-surface-container-low space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-2xl font-bold text-primary">Diensteanbieter</h2>
            </div>
            <div class="text-on-surface-variant leading-relaxed text-sm space-y-3">
                <p class="text-on-surface"><strong>[Firmenname / Name]</strong><br>
                [Strasse und Hausnummer]<br>
                [PLZ und Ort]<br>
                Deutschland</p>
                <p class="text-xs border border-outline-variant/30 rounded-lg p-4 bg-surface-container/50">
                    Ersetzen Sie die eckigen Platzhalter durch die Daten Ihrer juristischen Person oder Ihres verantwortlichen Betreibers der Plattform „JI:O“ / „Wanted“.
                </p>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary-container rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">Kontakt</h2>
            </div>
            <div class="text-on-surface-variant text-sm leading-relaxed space-y-2">
                <p><strong>E-Mail:</strong> <a href="mailto:hello@jio.app" class="text-primary underline">hello@jio.app</a></p>
                <p><strong>Telefon:</strong> [optional, z. B. +49 …]</p>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4 border-l-2 border-primary/10">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary-container rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">Vertretungsberechtigte Person</h2>
            </div>
            <p class="text-on-surface-variant text-sm leading-relaxed">[Name der / des Geschaeftsfuehrer:in / Inhaber:in / Vorstand …]</p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-high space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">Registereintrag</h2>
            </div>
            <div class="text-on-surface-variant text-sm leading-relaxed space-y-2">
                <p><strong>Registergericht:</strong> [z. B. Amtsgericht …]</p>
                <p><strong>Registernummer:</strong> [z. B. HRB …]</p>
                <p class="text-xs opacity-80">Nur ausfuellen, sofern ein Eintrag besteht (z. B. GmbH, UG).</p>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">Umsatzsteuer</h2>
            </div>
            <p class="text-on-surface-variant text-sm leading-relaxed">
                <strong>USt-IdNr. gemaess § 27 a Umsatzsteuergesetz:</strong> [DE …]<br>
                <span class="text-xs opacity-80 mt-2 block">Nur angeben, wenn vorhanden.</span>
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-low space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">Verantwortlich fuer den Inhalt (§ 18 Abs. 2 MStV)</h2>
            </div>
            <p class="text-on-surface-variant text-sm leading-relaxed">
                [Name, Anschrift — falls von Diensteanbieter abweichend, z. B. Redaktion]<br>
                <span class="text-xs opacity-80 mt-2 block">Fuer journalistisch-redaktionelle Angebote; bei reinem Plattformbetrieb ggf. identisch mit Diensteanbieter.</span>
            </p>
        </section>

        <section class="p-8 rounded-xl bg-surface-container space-y-4 md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">EU-Streitschlichtung / Verbraucherstreitbeilegung</h2>
            </div>
            <div class="text-on-surface-variant text-sm leading-relaxed space-y-3">
                <p>Die Europaeische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" class="text-primary underline" rel="noopener noreferrer" target="_blank">https://ec.europa.eu/consumers/odr</a></p>
                <p>Wir sind nicht verpflichtet und grundsaetzlich nicht bereit, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen, es sei denn, wir sind hierzu gesetzlich verpflichtet.</p>
            </div>
        </section>

        <section class="p-8 rounded-xl bg-surface-container-high space-y-4">
            <div class="flex items-center gap-3">
                <span class="w-1.5 h-6 bg-primary rounded-full" aria-hidden="true"></span>
                <h2 class="text-xl font-bold text-primary">Haftung fuer Inhalte und Links</h2>
            </div>
            <p class="text-on-surface-variant text-sm leading-relaxed">
                Als Diensteanbieter sind wir fuer eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Fuer fremde Inhalte (z. B. Nutzer-Uploads) gelten die gesetzlichen Haftungsbeschraenkungen, soweit anwendbar. Ausfuehrliche Regelungen finden Sie in unseren <a href="{{ path('app_terms') }}" class="text-primary underline font-semibold">Nutzungsbedingungen</a>.
            </p>
        </section>
    </div>

    <p class="text-center text-stone-600 text-[10px] font-bold uppercase tracking-[0.2em] font-label pt-4">
        Stand: {{ 'now'|date('d.m.Y') }} — Muster-Impressum, rechtlich pruefen lassen.
    </p>
</main>
{% endblock %}