@extends('layouts.app')

@php
    // Locale über die Registry (erkennt auch den EN-Host privacy.kotsch.tech) — siehe Layout.
    $routeLocale = (new \App\Support\SubdomainRegistry())->currentLocale();
    $tr = fn ($de, $en) => $routeLocale === 'en' ? $en : $de;
    $c = $page['accent'] ?? '#0F766E';
@endphp

@section('title', $page['title'] . ' — ' . $tr('Datenschutz', 'Privacy') . ' | KOTSCH.TECH')
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($page['intro']), 155))

@section('content')
@include('datenschutz.partials.styles')

<div class="ds" style="--primary:{{ $c }}">
    <div class="ds-atmo" aria-hidden="true"></div>

    <div class="ds-wrap" style="max-width:960px">

        <a class="ds-back ds-reveal" href="{{ route('datenschutz.hub', [], false) }}" style="margin-top:clamp(2rem,5vw,3.2rem)">
            <i class="fas fa-arrow-left" aria-hidden="true"></i> {{ $tr('Zurück zur Datenschutz-Übersicht', 'Back to privacy overview') }}
        </a>

        {{-- ── Hero mit Medaillon ─────────────────────────────────────── --}}
        <header class="ds-reveal" style="display:flex;gap:1.3rem;align-items:flex-start;margin:1.1rem 0 .2rem">
            <div class="ds-medallion" aria-hidden="true">
                <span class="m-ring"><span class="m-dot"></span></span>
                <span class="m-ic"><i class="fas {{ $page['icon'] }}"></i></span>
            </div>
            <div>
                <span class="ds-eyebrow"><span class="dot" aria-hidden="true"></span> {{ $tr('Datenschutz', 'Privacy') }}</span>
                <h1 class="ds-h1" style="font-size:clamp(2rem,5vw,3.2rem);margin:.7rem 0 0">{{ $page['title'] }}</h1>
                @if(!empty($page['platforms']))
                    <div class="ds-chips" style="margin-top:.9rem">
                        @foreach($page['platforms'] as $p)<span class="ds-chip">{{ $p }}</span>@endforeach
                    </div>
                @endif
            </div>
        </header>

        @if(!empty($page['summary']))
            <p class="ds-reveal" style="margin:1.4rem 0 0;padding:1rem 1.2rem;border-left:3px solid var(--c);
                      background:color-mix(in srgb,var(--c) 6%,#fff);border-radius:0 14px 14px 0;color:var(--ink2);font-weight:600">
                {{ $page['summary'] }}
            </p>
        @endif

        <p class="ds-lead ds-reveal" style="margin-top:1.3rem;max-width:68ch">{{ $page['intro'] }}</p>

        {{-- ── Welche Daten (nummerierter Fluss) ──────────────────────── --}}
        @if(!empty($page['data']))
            <section class="ds-section" style="padding-top:clamp(2rem,4vw,3rem)">
                <h2 class="ds-h2 ds-reveal" style="margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem">
                    <i class="fas fa-database" style="color:var(--c)" aria-hidden="true"></i> {{ $tr('Welche Daten verarbeitet werden', 'What data is processed') }}
                </h2>
                <div class="ds-flow">
                    @foreach($page['data'] as $i => $d)
                        <div class="ds-flow-item ds-reveal" style="--i:{{ $i }}">
                            <span class="ds-flow-num">{{ sprintf('%02d', $i + 1) }}</span>
                            <div>
                                <strong>{{ $d['label'] }}</strong>
                                <p>{{ $d['detail'] }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- ── Gut zu wissen ──────────────────────────────────────────── --}}
        @if(!empty($page['extra']))
            <section class="ds-section">
                <h2 class="ds-h2 ds-reveal" style="margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem">
                    <i class="fas fa-circle-info" style="color:var(--c)" aria-hidden="true"></i> {{ $tr('Gut zu wissen', 'Good to know') }}
                </h2>
                <div class="ds-grid" style="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))">
                    @foreach($page['extra'] as $i => $e)
                        <div class="ds-spec-card ds-reveal" style="--i:{{ $i }};background:color-mix(in srgb,var(--c) 5%,#fff);border-color:color-mix(in srgb,var(--c) 18%,var(--line))">
                            <strong style="display:block;font-family:var(--font-d);color:var(--ink);font-size:1.05rem;margin-bottom:.4rem">{{ $e['h'] }}</strong>
                            <p style="color:var(--muted)">{{ $e['p'] }}</p>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        {{-- ── Spec-Panel: Zweck / Rechtsgrundlage / Speicherung / Dritte / Cookies ── --}}
        <section class="ds-section">
            <h2 class="ds-h2 ds-reveal" style="margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem">
                <i class="fas fa-scale-balanced" style="color:var(--c)" aria-hidden="true"></i> {{ $tr('Zweck, Rechtsgrundlage & Speicherung', 'Purpose, legal basis & storage') }}
            </h2>
            <div class="ds-spec">
                @if(!empty($page['purpose']))
                    <div class="ds-spec-card ds-reveal" style="--i:0">
                        <span class="lbl"><i class="fas fa-bullseye" aria-hidden="true"></i> {{ $tr('Zweck', 'Purpose') }}</span>
                        <p>{{ $page['purpose'] }}</p>
                    </div>
                @endif
                @if(!empty($page['legal_basis']))
                    <div class="ds-spec-card ds-reveal" style="--i:1">
                        <span class="lbl"><i class="fas fa-gavel" aria-hidden="true"></i> {{ $tr('Rechtsgrundlage', 'Legal basis') }}</span>
                        <p>{{ $page['legal_basis'] }}</p>
                    </div>
                @endif
                @if(!empty($page['retention']))
                    <div class="ds-spec-card ds-reveal" style="--i:2">
                        <span class="lbl"><i class="fas fa-clock-rotate-left" aria-hidden="true"></i> {{ $tr('Speicherdauer', 'Retention') }}</span>
                        <p>{{ $page['retention'] }}</p>
                    </div>
                @endif
                <div class="ds-spec-card ds-reveal" style="--i:3">
                    <span class="lbl"><i class="fas fa-share-nodes" aria-hidden="true"></i> {{ $tr('Empfänger / Dritte', 'Recipients / third parties') }}</span>
                    @if(!empty($page['third_parties']))
                        <ul class="ds-tp">@foreach($page['third_parties'] as $tp)<li>{{ $tp }}</li>@endforeach</ul>
                    @else
                        <p class="ds-tp-none">{{ $tr('Keine Weitergabe an Dritte.', 'No sharing with third parties.') }}</p>
                    @endif
                </div>
                <div class="ds-spec-card ds-reveal" style="--i:4">
                    <span class="lbl"><i class="fas fa-cookie-bite" aria-hidden="true"></i> {{ $tr('Cookies', 'Cookies') }}</span>
                    <p>{{ $page['cookies']
                        ? $tr('Es können (auch einwilligungspflichtige) Cookies zum Einsatz kommen — Details in der allgemeinen Erklärung.', 'Cookies (including consent-based ones) may be used — details in the general policy.')
                        : $tr('Für diese Funktion sind keine zustimmungspflichtigen Cookies erforderlich.', 'No consent-based cookies are required for this function.') }}</p>
                </div>
            </div>
        </section>

        {{-- ── Footer-CTA ─────────────────────────────────────────────── --}}
        <div class="ds-cta ds-reveal">
            <p>{{ $tr('Fragen zum Datenschutz in diesem Bereich?', 'Questions about privacy in this area?') }}</p>
            <div style="display:flex;gap:.6rem;flex-wrap:wrap">
                <a class="ds-btn-ghost" href="{{ route('datenschutz', [], false) }}"><i class="fas fa-file-shield" aria-hidden="true"></i> {{ $tr('Allgemeine Erklärung', 'General policy') }}</a>
                <a class="ds-btn" href="mailto:{{ config('datenschutz.meta.email', 'arthurkotsch@kotsch.tech') }}"><i class="fas fa-envelope" aria-hidden="true"></i> {{ $tr('E-Mail schreiben', 'Send email') }}</a>
            </div>
        </div>

    </div>
</div>
@endsection