@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;
    // Bis zu 7 Bereiche umkreisen das Schild — Positionen vorab trigonometrisch berechnet.
    $orbit = $areas->take(7)->values();
    $on = max($orbit->count(), 1);
@endphp

@section('title', $tr('Datenschutz pro Bereich & App | KOTSCH.TECH', 'Privacy per Section & App | KOTSCH.TECH'))
@section('meta_description', $tr('Datenschutz auf einen Blick: die allgemeine Erklärung plus eigene Datenschutz-Hinweise für jeden Bereich, jede App und jedes Windows-Programm von KOTSCH.TECH.', 'Privacy at a glance: the general policy plus dedicated privacy notes for every section, app and Windows program by KOTSCH.TECH.'))

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

<div class="ds">
    <div class="ds-atmo" aria-hidden="true"></div>

    <div class="ds-wrap">

        {{-- ── Hero ───────────────────────────────────────────────────── --}}
        <section class="ds-hero-grid" style="display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(2.4rem,7vw,5rem) 0 1rem">
            <div class="ds-reveal">
                <span class="ds-eyebrow"><span class="dot" aria-hidden="true"></span> {{ $tr('Datenschutz', 'Privacy') }}</span>
                <h1 class="ds-h1">{{ $tr('Datenschutz,', 'Privacy,') }} <span class="ds-grad">{{ $tr('klar nach Bereich', 'clear by section') }}</span></h1>
                <p class="ds-lead">{{ $tr('Die allgemeine Erklärung gilt für alles. Zusätzlich gibt es für jeden Bereich, jede App und jedes Programm einen eigenen, verständlichen Datenschutz-Hinweis — ohne Juristennebel.', 'The general policy covers everything. On top of that, there is a dedicated, plain-language privacy note for every section, app and program — no legal fog.') }}</p>

                <div style="display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem">
                    <a class="ds-btn" href="{{ route('datenschutz', [], false) }}">{{ $tr('Allgemeine Erklärung', 'General policy') }} <span class="ar" aria-hidden="true">→</span></a>
                    <a class="ds-btn-ghost" href="#ds-bereiche">{{ $tr('Bereiche ansehen', 'Browse sections') }}</a>
                </div>

                <div style="display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.9rem">
                    <div><div style="font-family:var(--font-d);font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1">{{ $areas->count() }}</div><div style="font-size:.82rem;color:var(--muted)">{{ $tr('Bereiche', 'Sections') }}</div></div>
                    <div style="width:1px;background:var(--line)"></div>
                    <div><div style="font-family:var(--font-d);font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1">{{ $iosApps->count() }}</div><div style="font-size:.82rem;color:var(--muted)">{{ $tr('Apps', 'Apps') }}</div></div>
                    <div style="width:1px;background:var(--line)"></div>
                    <div><div style="font-family:var(--font-d);font-weight:700;font-size:1.7rem;color:var(--ink);line-height:1">{{ $windowsApps->count() }}</div><div style="font-size:.82rem;color:var(--muted)">{{ $tr('Programme', 'Programs') }}</div></div>
                </div>
            </div>

            {{-- Signatur-Szene: Schild mit umkreisenden Bereichs-Chips --}}
            <div class="ds-reveal" style="--i:1">
                <div class="ds-scene" data-ds-scene aria-hidden="true">
                    <div class="ring"></div>
                    <div class="ring r2"></div>
                    <div class="ds-scan"></div>

                    <div class="ds-orbit">
                        @foreach($orbit as $idx => $it)
                            @php
                                $ang = (2 * M_PI * $idx) / $on - (M_PI / 2);
                                $x = 50 + 37 * cos($ang);
                                $y = 50 + 37 * sin($ang);
                            @endphp
                            <span class="ds-node" style="left:{{ round($x,2) }}%;top:{{ round($y,2) }}%">
                                <span class="chip" style="color:{{ $it['accent'] }}"><i class="fas {{ $it['icon'] }}"></i></span>
                            </span>
                        @endforeach
                    </div>

                    <div class="ds-core">
                        <span class="glow"></span>
                        <svg class="ds-shield" viewBox="0 0 100 100" role="img" aria-label="{{ $tr('Datenschutz-Schild', 'Privacy shield') }}">
                            <defs>
                                <linearGradient id="dsGrad" x1="0" y1="0" x2="1" y2="1">
                                    <stop offset="0" stop-color="var(--c)"/>
                                    <stop offset="1" stop-color="var(--c2)"/>
                                </linearGradient>
                            </defs>
                            <path class="plate" d="M50 5 L84 18 V44 C84 68 69 84 50 95 C31 84 16 68 16 44 V18 Z"/>
                            <circle class="ring-stroke" cx="50" cy="46" r="24"/>
                            <path class="tick" d="M39 47 L47 56 L63 37"/>
                        </svg>
                    </div>
                </div>
            </div>
        </section>

        {{-- ── Trust-Ticker ───────────────────────────────────────────── --}}
        @php
            $trust = [
                ['fa-scale-balanced', $tr('DSGVO als Grundlage', 'GDPR as the basis')],
                ['fa-comment', $tr('Klartext statt Juristennebel', 'Plain language, no fog')],
                ['fa-feather', $tr('Datensparsam by default', 'Data-minimal by default')],
                ['fa-layer-group', $tr('Pro Bereich erklärt', 'Explained per section')],
                ['fa-bullhorn', $tr('Werbung nur mit Einwilligung', 'Ads only with consent')],
                ['fa-microchip', $tr('Viele Tools laufen lokal', 'Many tools run locally')],
                ['fa-clock-rotate-left', $tr('Auto-Löschung beim PDF-Teilen', 'Auto-deletion when sharing PDFs')],
            ];
        @endphp
        <div class="ds-ticker ds-reveal" aria-hidden="true">
            <div class="ds-ticker-row">
                @foreach(array_merge($trust, $trust) as $t)
                    <span class="ds-tk"><i class="fas {{ $t[0] }}"></i>{{ $t[1] }}</span>
                @endforeach
            </div>
        </div>

        {{-- ── Allgemein-Feature ──────────────────────────────────────── --}}
        <section class="ds-section">
            <a class="ds-feature ds-reveal ds-tilt" href="{{ route('datenschutz', [], false) }}"
               style="position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
                      padding:1.7rem 1.9rem;border-radius:24px;text-decoration:none;color:inherit;overflow:hidden;
                      background:linear-gradient(120deg,color-mix(in srgb,var(--c) 9%,#fff),#fff 60%);
                      border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));box-shadow:var(--ds-shadow-c)">
                <span style="width:62px;height:62px;display:grid;place-items:center;border-radius:18px;font-size:1.7rem;color:#fff;
                             background:linear-gradient(135deg,var(--c),var(--c2));transform:translateZ(30px);
                             box-shadow:0 16px 30px -14px color-mix(in srgb,var(--c) 70%,transparent)">
                    <i class="fas fa-file-shield" aria-hidden="true"></i>
                </span>
                <span style="transform:translateZ(18px)">
                    <strong style="display:block;font-family:var(--font-d);font-size:1.35rem;color:var(--ink);letter-spacing:-.01em">{{ $tr('Allgemeine Datenschutzerklärung', 'General privacy policy') }}</strong>
                    <span style="color:var(--muted);font-size:.98rem">{{ $tr('Gilt für die gesamte Plattform: Hosting, Kontakt, Mail, Cookies, Werbung und deine Rechte.', 'Applies to the whole platform: hosting, contact, mail, cookies, advertising and your rights.') }}</span>
                </span>
                <span class="ds-more" style="white-space:nowrap">{{ $tr('Lesen', 'Read') }} <span class="ar" aria-hidden="true">→</span></span>
            </a>
        </section>

        {{-- ── Bereiche ───────────────────────────────────────────────── --}}
        <section class="ds-section" id="ds-bereiche">
            <div class="ds-section-head ds-reveal">
                <div>
                    <h2 class="ds-h2">{{ $tr('Bereiche', 'Sections') }}</h2>
                    <p class="ds-sub">{{ $tr('Datenschutz-Hinweise je Dienst — vom Shop bis zur Umfrage.', 'Privacy notes per service — from the shop to the survey.') }}</p>
                </div>
            </div>
            <div class="ds-grid cols-3">
                @foreach($areas as $i => $a)
                    <a class="ds-card ds-tilt ds-reveal" style="--cc:{{ $a['accent'] }};--i:{{ $i % 3 }}" href="{{ $a['url'] }}">
                        <span class="ds-ic"><i class="fas {{ $a['icon'] }}" aria-hidden="true"></i></span>
                        <h3>{{ $a['title'] }}</h3>
                        <p>{{ \Illuminate\Support\Str::limit($a['tagline'], 115) }}</p>
                        <span class="ds-more">{{ $tr('Details', 'Details') }} <span class="ar" aria-hidden="true">→</span></span>
                    </a>
                @endforeach
            </div>
        </section>

        {{-- ── iOS / Mac Apps ─────────────────────────────────────────── --}}
        <section class="ds-section" id="ds-apps">
            <div class="ds-section-head ds-reveal">
                <div>
                    <h2 class="ds-h2">{{ $tr('Apps für iPhone, iPad & Mac', 'Apps for iPhone, iPad & Mac') }}</h2>
                    <p class="ds-sub">{{ $tr('Jede App verarbeitet Daten grundsätzlich lokal bzw. über Apple.', 'Each app processes data locally or via Apple by default.') }}</p>
                </div>
            </div>
            <div class="ds-grid cols-4">
                @foreach($iosApps as $i => $app)
                    <a class="ds-card ds-tilt ds-reveal" style="--cc:#0A84FF;--i:{{ $i % 4 }}" href="{{ $app['url'] }}">
                        <span class="ds-ic"><i class="fas fa-mobile-screen-button" aria-hidden="true"></i></span>
                        <h3>{{ $app['name'] }}</h3>
                        <p>{{ \Illuminate\Support\Str::limit($app['summary'], 92) }}</p>
                        @if(!empty($app['platforms']))
                            <span class="ds-chips">@foreach(array_slice($app['platforms'],0,3) as $p)<span class="ds-chip">{{ $p }}</span>@endforeach</span>
                        @endif
                    </a>
                @endforeach
            </div>
        </section>

        {{-- ── Windows-Programme ──────────────────────────────────────── --}}
        <section class="ds-section" id="ds-windows" style="margin-bottom:4rem">
            <div class="ds-section-head ds-reveal">
                <div>
                    <h2 class="ds-h2">{{ $tr('Windows-Programme', 'Windows programs') }}</h2>
                    <p class="ds-sub">{{ $tr('Laufen lokal auf deinem PC — ohne Telemetrie an uns.', 'Run locally on your PC — no telemetry sent to us.') }}</p>
                </div>
            </div>
            <div class="ds-grid cols-4">
                @foreach($windowsApps as $i => $app)
                    <a class="ds-card ds-tilt ds-reveal" style="--cc:#1B6CF2;--i:{{ $i % 4 }}" href="{{ $app['url'] }}">
                        <span class="ds-ic"><i class="fas fa-window-maximize" aria-hidden="true"></i></span>
                        <h3>{{ $app['name'] }}</h3>
                        <p>{{ \Illuminate\Support\Str::limit($app['summary'], 92) }}</p>
                        <span class="ds-more">{{ $tr('Details', 'Details') }} <span class="ar" aria-hidden="true">→</span></span>
                    </a>
                @endforeach
            </div>
        </section>

    </div>
</div>
@endsection