{% extends "base.html" %}

{% block title %}{{ title }} - MYP Platform{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-6xl">
    <!-- Header -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
        <div class="flex items-center mb-6">
            <div class="w-12 h-12 bg-gradient-to-r from-purple-600 to-purple-700 rounded-lg flex items-center justify-center mr-4">
                <i class="fas fa-file-contract text-white text-xl"></i>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Rechtliche Hinweise</h1>
                <p class="text-gray-600">Datenschutz, Nutzungsbedingungen und weitere rechtliche Informationen</p>
            </div>
        </div>

        <!-- Navigation Links -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8">
            <a href="#datenschutz" class="flex items-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-shield-alt text-blue-600 mr-3"></i>
                <span class="font-medium text-blue-900">Datenschutz</span>
            </a>
            <a href="#nutzungsbedingungen" class="flex items-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-file-signature text-green-600 mr-3"></i>
                <span class="font-medium text-green-900">AGB</span>
            </a>
            <a href="#cookies" class="flex items-center p-4 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors">
                <i class="fas fa-cookie-bite text-amber-600 mr-3"></i>
                <span class="font-medium text-amber-900">Cookies</span>
            </a>
            <a href="#sicherheit" class="flex items-center p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors">
                <i class="fas fa-lock text-red-600 mr-3"></i>
                <span class="font-medium text-red-900">Sicherheit</span>
            </a>
        </div>
    </div>

    <!-- Datenschutzerklärung -->
    <section id="datenschutz" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-shield-alt text-blue-600 mr-3"></i>
            Datenschutzerklärung
        </h2>

        <div class="space-y-6">
            <!-- Grundsätzliches -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">1. Grundsätzliches zum Datenschutz</h3>
                <div class="bg-blue-50 rounded-lg p-6">
                    <p class="text-gray-700 mb-4">
                        Der Schutz Ihrer persönlichen Daten ist uns wichtig. Diese Datenschutzerklärung informiert Sie über 
                        die Art, den Umfang und Zweck der Verarbeitung personenbezogener Daten innerhalb des MYP-Systems 
                        (Manage Your Printers) der Mercedes-Benz AG.
                    </p>
                    <p class="text-gray-700">
                        Verantwortlicher im Sinne der Datenschutz-Grundverordnung (DSGVO) ist die Mercedes-Benz AG, 
                        vertreten durch die Ausbildungsabteilung.
                    </p>
                </div>
            </div>

            <!-- Datenerhebung -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">2. Erhebung und Verarbeitung personenbezogener Daten</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-gray-50 rounded-lg p-6">
                        <h4 class="font-semibold text-gray-900 mb-3">Registrierungsdaten</h4>
                        <ul class="text-gray-700 space-y-2">
                            <li>• Benutzername</li>
                            <li>• E-Mail-Adresse (Mercedes-Benz)</li>
                            <li>• Name und Abteilung</li>
                            <li>• Rolle im System</li>
                        </ul>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-6">
                        <h4 class="font-semibold text-gray-900 mb-3">Nutzungsdaten</h4>
                        <ul class="text-gray-700 space-y-2">
                            <li>• Druckaufträge und -verlauf</li>
                            <li>• Login-Zeiten und -Häufigkeit</li>
                            <li>• IP-Adresse und Browser-Info</li>
                            <li>• Systemaktivitäten</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Zweck der Datenverarbeitung -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">3. Zweck der Datenverarbeitung</h3>
                <div class="bg-green-50 rounded-lg p-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-3">Primäre Zwecke</h4>
                            <ul class="text-gray-700 space-y-2">
                                <li>• Bereitstellung der 3D-Druck-Services</li>
                                <li>• Verwaltung von Druckaufträgen</li>
                                <li>• Benutzerauthentifizierung</li>
                                <li>• Ressourcenplanung</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-3">Sekundäre Zwecke</h4>
                            <ul class="text-gray-700 space-y-2">
                                <li>• Systemoptimierung</li>
                                <li>• Qualitätssicherung</li>
                                <li>• Ausbildungszwecke</li>
                                <li>• Sicherheitsüberwachung</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Rechtsgrundlage -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">4. Rechtsgrundlage</h3>
                <div class="bg-amber-50 border border-amber-200 rounded-lg p-6">
                    <p class="text-gray-700 mb-4">
                        Die Verarbeitung erfolgt auf Grundlage von:
                    </p>
                    <ul class="text-gray-700 space-y-2">
                        <li>• <strong>Art. 6 Abs. 1 lit. b DSGVO:</strong> Vertragserfüllung (Nutzung der Druckdienste)</li>
                        <li>• <strong>Art. 6 Abs. 1 lit. f DSGVO:</strong> Berechtigte Interessen (Systemsicherheit, Optimierung)</li>
                        <li>• <strong>Art. 6 Abs. 1 lit. c DSGVO:</strong> Rechtliche Verpflichtung (Dokumentation, Compliance)</li>
                    </ul>
                </div>
            </div>

            <!-- Ihre Rechte -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">5. Ihre Rechte</h3>
                <div class="grid md:grid-cols-3 gap-4">
                    <div class="bg-blue-50 rounded-lg p-4">
                        <h4 class="font-semibold text-blue-900 mb-2">Auskunftsrecht</h4>
                        <p class="text-blue-800 text-sm">Art. 15 DSGVO</p>
                    </div>
                    <div class="bg-green-50 rounded-lg p-4">
                        <h4 class="font-semibold text-green-900 mb-2">Berichtigungsrecht</h4>
                        <p class="text-green-800 text-sm">Art. 16 DSGVO</p>
                    </div>
                    <div class="bg-red-50 rounded-lg p-4">
                        <h4 class="font-semibold text-red-900 mb-2">Löschungsrecht</h4>
                        <p class="text-red-800 text-sm">Art. 17 DSGVO</p>
                    </div>
                    <div class="bg-purple-50 rounded-lg p-4">
                        <h4 class="font-semibold text-purple-900 mb-2">Einschränkungsrecht</h4>
                        <p class="text-purple-800 text-sm">Art. 18 DSGVO</p>
                    </div>
                    <div class="bg-amber-50 rounded-lg p-4">
                        <h4 class="font-semibold text-amber-900 mb-2">Datenübertragbarkeit</h4>
                        <p class="text-amber-800 text-sm">Art. 20 DSGVO</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-semibold text-gray-900 mb-2">Widerspruchsrecht</h4>
                        <p class="text-gray-700 text-sm">Art. 21 DSGVO</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Nutzungsbedingungen -->
    <section id="nutzungsbedingungen" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-file-signature text-green-600 mr-3"></i>
            Allgemeine Nutzungsbedingungen
        </h2>

        <div class="space-y-6">
            <!-- Geltungsbereich -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">1. Geltungsbereich</h3>
                <div class="bg-gray-50 rounded-lg p-6">
                    <p class="text-gray-700">
                        Diese Nutzungsbedingungen gelten für die Nutzung des MYP-Systems (Manage Your Printers) 
                        durch Mitarbeiter und Auszubildende der Mercedes-Benz AG. Mit der Registrierung und 
                        Nutzung des Systems erkennen Sie diese Bedingungen an.
                    </p>
                </div>
            </div>

            <!-- Nutzungsrechte -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">2. Nutzungsrechte und -pflichten</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-green-50 rounded-lg p-6">
                        <h4 class="font-semibold text-green-900 mb-3">Erlaubte Nutzung</h4>
                        <ul class="text-green-800 space-y-2">
                            <li>• Druckaufträge für Ausbildungszwecke</li>
                            <li>• Prototyping und Projektarbeit</li>
                            <li>• Lernmaterialien und Demonstrationen</li>
                            <li>• Interne Mercedes-Benz Projekte</li>
                        </ul>
                    </div>
                    <div class="bg-red-50 rounded-lg p-6">
                        <h4 class="font-semibold text-red-900 mb-3">Verbotene Nutzung</h4>
                        <ul class="text-red-800 space-y-2">
                            <li>• Kommerzielle Zwecke ohne Genehmigung</li>
                            <li>• Urheberrechtsverletzungen</li>
                            <li>• Gefährliche oder illegale Objekte</li>
                            <li>• Systemmanipulation oder -missbrauch</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Verantwortlichkeiten -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">3. Verantwortlichkeiten</h3>
                <div class="bg-amber-50 border border-amber-200 rounded-lg p-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-3">Nutzer-Verantwortung</h4>
                            <ul class="text-gray-700 space-y-2">
                                <li>• Sichere Aufbewahrung der Zugangsdaten</li>
                                <li>• Einhaltung der Sicherheitsrichtlinien</li>
                                <li>• Ordnungsgemäße Nutzung der Geräte</li>
                                <li>• Meldung von Problemen</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-3">System-Verantwortung</h4>
                            <ul class="text-gray-700 space-y-2">
                                <li>• Bereitstellung der Infrastruktur</li>
                                <li>• Wartung und Support</li>
                                <li>• Datenschutz und Sicherheit</li>
                                <li>• Kontinuierliche Verbesserung</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Cookie-Policy -->
    <section id="cookies" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-cookie-bite text-amber-600 mr-3"></i>
            Cookie-Richtlinie
        </h2>

        <div class="space-y-6">
            <!-- Was sind Cookies -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Was sind Cookies?</h3>
                <div class="bg-amber-50 rounded-lg p-6">
                    <p class="text-gray-700">
                        Cookies sind kleine Textdateien, die beim Besuch einer Website auf Ihrem Computer gespeichert werden. 
                        Sie helfen dabei, Ihre Präferenzen zu speichern und die Funktionalität der Website zu verbessern.
                    </p>
                </div>
            </div>

            <!-- Cookie-Kategorien -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Verwendete Cookie-Kategorien</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-blue-50 rounded-lg p-6">
                        <h4 class="font-semibold text-blue-900 mb-3">Technisch notwendige Cookies</h4>
                        <ul class="text-blue-800 space-y-2">
                            <li>• Session-Management</li>
                            <li>• Anmeldestatus</li>
                            <li>• CSRF-Schutz</li>
                            <li>• Spracheinstellungen</li>
                        </ul>
                        <p class="text-blue-700 text-sm mt-3">Diese Cookies sind für die Funktionalität der Website erforderlich.</p>
                    </div>
                    <div class="bg-green-50 rounded-lg p-6">
                        <h4 class="font-semibold text-green-900 mb-3">Funktionale Cookies</h4>
                        <ul class="text-green-800 space-y-2">
                            <li>• Benutzereinstellungen</li>
                            <li>• Dashboard-Konfiguration</li>
                            <li>• Theme-Präferenzen</li>
                            <li>• Accessibility-Optionen</li>
                        </ul>
                        <p class="text-green-700 text-sm mt-3">Diese Cookies verbessern die Benutzererfahrung.</p>
                    </div>
                </div>
            </div>

            <!-- Cookie-Kontrolle -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Cookie-Kontrolle</h3>
                <div class="bg-gray-50 rounded-lg p-6">
                    <p class="text-gray-700 mb-4">
                        Sie können Cookies in Ihren Browser-Einstellungen verwalten. Beachten Sie jedoch, dass das 
                        Deaktivieren bestimmter Cookies die Funktionalität der Website beeinträchtigen kann.
                    </p>
                    <div class="grid md:grid-cols-3 gap-4">
                        <div class="bg-white rounded-lg p-4 border">
                            <h5 class="font-semibold text-gray-900 mb-2">Chrome</h5>
                            <p class="text-gray-600 text-sm">Einstellungen → Datenschutz und Sicherheit → Cookies</p>
                        </div>
                        <div class="bg-white rounded-lg p-4 border">
                            <h5 class="font-semibold text-gray-900 mb-2">Firefox</h5>
                            <p class="text-gray-600 text-sm">Einstellungen → Datenschutz & Sicherheit</p>
                        </div>
                        <div class="bg-white rounded-lg p-4 border">
                            <h5 class="font-semibold text-gray-900 mb-2">Edge</h5>
                            <p class="text-gray-600 text-sm">Einstellungen → Cookies und Websiteberechtigungen</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Sicherheitsrichtlinien -->
    <section id="sicherheit" class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-lock text-red-600 mr-3"></i>
            Sicherheitsrichtlinien
        </h2>

        <div class="space-y-6">
            <!-- Technische Sicherheit -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Technische Sicherheitsmaßnahmen</h3>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-red-50 rounded-lg p-6">
                        <h4 class="font-semibold text-red-900 mb-3">Infrastruktursicherheit</h4>
                        <ul class="text-red-800 space-y-2">
                            <li>• HTTPS-Verschlüsselung</li>
                            <li>• Sichere Datenübertragung</li>
                            <li>• Regelmäßige Security-Updates</li>
                            <li>• Firewalls und Intrusion Detection</li>
                        </ul>
                    </div>
                    <div class="bg-blue-50 rounded-lg p-6">
                        <h4 class="font-semibold text-blue-900 mb-3">Anwendungssicherheit</h4>
                        <ul class="text-blue-800 space-y-2">
                            <li>• Sichere Authentifizierung</li>
                            <li>• Rollenbasierte Zugriffskontrolle</li>
                            <li>• Input-Validierung</li>
                            <li>• Session-Management</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Benutzer-Sicherheit -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Empfehlungen für Benutzer</h3>
                <div class="bg-green-50 rounded-lg p-6">
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-green-900 mb-3">Passwort-Sicherheit</h4>
                            <ul class="text-green-800 space-y-2">
                                <li>• Verwenden Sie starke Passwörter</li>
                                <li>• Teilen Sie keine Zugangsdaten</li>
                                <li>• Melden Sie sich nach der Nutzung ab</li>
                                <li>• Verwenden Sie nicht öffentliche Computer</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-green-900 mb-3">Allgemeine Sicherheit</h4>
                            <ul class="text-green-800 space-y-2">
                                <li>• Halten Sie Ihren Browser aktuell</li>
                                <li>• Verwenden Sie Antivirus-Software</li>
                                <li>• Seien Sie vorsichtig bei Downloads</li>
                                <li>• Melden Sie verdächtige Aktivitäten</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Incident Response -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-3">Sicherheitsvorfälle melden</h3>
                <div class="bg-amber-50 border border-amber-200 rounded-lg p-6">
                    <p class="text-gray-700 mb-4">
                        Falls Sie einen Sicherheitsvorfall bemerken oder vermuten, wenden Sie sich umgehend an:
                    </p>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-2">Technischer Support</h4>
                            <p class="text-gray-700">
                                E-Mail: <a href="mailto:till.tomczak@mercedes-benz.com" class="text-blue-600 hover:text-blue-800">
                                    till.tomczak@mercedes-benz.com
                                </a>
                            </p>
                        </div>
                        <div>
                            <h4 class="font-semibold text-gray-900 mb-2">IT-Sicherheit</h4>
                            <p class="text-gray-700">
                                Interne IT-Security-Hotline
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Kontakt und Weitere Informationen -->
    <section class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-info-circle text-blue-600 mr-3"></i>
            Weitere Informationen
        </h2>

        <div class="grid md:grid-cols-2 gap-8">
            <!-- Kontakt -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Bei Fragen wenden Sie sich an:</h3>
                <div class="space-y-4">
                    <div class="flex items-start">
                        <i class="fas fa-envelope text-blue-600 mt-1 mr-3"></i>
                        <div>
                            <p class="font-medium text-gray-900">E-Mail</p>
                            <a href="mailto:till.tomczak@mercedes-benz.com" class="text-blue-600 hover:text-blue-800">
                                till.tomczak@mercedes-benz.com
                            </a>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <i class="fas fa-building text-blue-600 mt-1 mr-3"></i>
                        <div>
                            <p class="font-medium text-gray-900">Abteilung</p>
                            <p class="text-gray-700">Ausbildungsabteilung - 3D-Druck</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Updates -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Aktualisierungen</h3>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-gray-700 mb-2">
                        Diese rechtlichen Hinweise können bei Bedarf aktualisiert werden. 
                        Über wesentliche Änderungen werden Sie informiert.
                    </p>
                    <p class="text-sm text-gray-600">
                        Stand: {{ moment().format('DD.MM.YYYY') }}
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Navigation -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex flex-wrap gap-4 justify-center">
            <a href="{{ url_for('index') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                <i class="fas fa-home mr-2"></i>
                Zur Startseite
            </a>
            <a href="{{ url_for('imprint') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors">
                <i class="fas fa-info-circle mr-2"></i>
                Impressum
            </a>
            {% if current_user.is_authenticated %}
            <a href="{{ url_for('dashboard') }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
                <i class="fas fa-chart-line mr-2"></i>
                Dashboard
            </a>
            <a href="{{ url_for('user_settings') }}" class="inline-flex items-center px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors">
                <i class="fas fa-cog mr-2"></i>
                Einstellungen
            </a>
            {% endif %}
        </div>
    </div>
</div>

<!-- Scroll-to-Top Button -->
<button id="scrollToTop" class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-all duration-300 opacity-0 pointer-events-none">
    <i class="fas fa-chevron-up"></i>
</button>

<script>
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Scroll-to-top functionality
const scrollToTopBtn = document.getElementById('scrollToTop');
window.addEventListener('scroll', () => {
    if (window.pageYOffset > 300) {
        scrollToTopBtn.classList.remove('opacity-0', 'pointer-events-none');
        scrollToTopBtn.classList.add('opacity-100');
    } else {
        scrollToTopBtn.classList.add('opacity-0', 'pointer-events-none');
        scrollToTopBtn.classList.remove('opacity-100');
    }
});

scrollToTopBtn.addEventListener('click', () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
</script>
{% endblock %}