{% extends "base.html" %}

{% block title %}{{ title if title else "Rechtliche Hinweise - MYP Platform" }}{% endblock %}

{% block extra_css %}
<style>
    /* Legal Pages mit Unified CSS Variables */
    .legal-card {
        background: var(--bg-card);
        border: 1px solid var(--border-primary);
        border-radius: 16px;
        box-shadow: var(--shadow-card);
        transition: all 0.3s ease;
    }
    
    .legal-card:hover {
        box-shadow: var(--shadow-card-hover);
        border-color: var(--border-hover);
    }
    
    .legal-nav-item {
        background: rgba(0, 115, 206, 0.05);
        border: 1px solid rgba(0, 115, 206, 0.2);
        border-radius: 12px;
        padding: 1rem;
        transition: all 0.3s ease;
        text-decoration: none;
        display: flex;
        align-items: center;
    }
    
    .legal-nav-item:hover {
        background: rgba(0, 115, 206, 0.1);
        border-color: rgba(0, 115, 206, 0.3);
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }
    
    .dark .legal-nav-item {
        background: rgba(0, 115, 206, 0.1);
        border-color: rgba(0, 115, 206, 0.3);
    }
    
    .dark .legal-nav-item:hover {
        background: rgba(0, 115, 206, 0.15);
        border-color: rgba(0, 115, 206, 0.4);
    }
    
    .contact-box {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 1.5rem;
        margin-top: 1rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-8">
    <!-- Header -->
    <div class="legal-card p-8 mb-8">
        <div class="flex items-center mb-6">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center mr-4" style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div>
                <h1 class="text-3xl font-bold" style="color: var(--text-primary);">Rechtliche Hinweise</h1>
                <p style="color: var(--text-secondary);">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="{{ url_for('legal.privacy') }}" class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors">
                <i class="fas fa-shield-alt text-blue-600 dark:text-blue-400 mr-3"></i>
                <span class="font-medium text-blue-900 dark:text-blue-300">Datenschutz</span>
            </a>
            <a href="{{ url_for('legal.terms') }}" class="flex items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/30 transition-colors">
                <i class="fas fa-file-signature text-green-600 dark:text-green-400 mr-3"></i>
                <span class="font-medium text-green-900 dark:text-green-300">AGB</span>
            </a>
            <a href="{{ url_for('legal.imprint') }}" class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors">
                <i class="fas fa-info-circle text-amber-600 dark:text-amber-400 mr-3"></i>
                <span class="font-medium text-amber-900 dark:text-amber-300">Impressum</span>
            </a>
            <a href="{{ url_for('legal.system_info') }}" class="flex items-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors">
                <i class="fas fa-cog text-red-600 dark:text-red-400 mr-3"></i>
                <span class="font-medium text-red-900 dark:text-red-300">System Info</span>
            </a>
        </div>
    </div>

    <!-- Information Section -->
    <section class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 p-8 mb-8">
        <h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-6 flex items-center">
            <i class="fas fa-info-circle text-blue-600 dark:text-blue-400 mr-3"></i>
            MYP Platform - Rechtliche Informationen
        </h2>

        <div class="prose dark:prose-invert max-w-none">
            <p class="text-slate-700 dark:text-slate-300 leading-relaxed">
                Die MYP Platform (Manage Your Printers) ist ein internes System der Mercedes-Benz AG 
                zur Verwaltung von 3D-Druckaufträgen in der Technischen Berufsausbildung (TBA) Marienfelde.
            </p>

            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mt-6 mb-3">Übersicht</h3>
            <ul class="text-slate-700 dark:text-slate-300 space-y-2">
                <li><strong>Datenschutzerklärung:</strong> Informationen zur Verarbeitung personenbezogener Daten</li>
                <li><strong>Nutzungsbedingungen:</strong> Regeln für die Nutzung der Plattform</li>
                <li><strong>Impressum:</strong> Rechtliche Angaben zum Anbieter</li>
                <li><strong>System-Information:</strong> Technische Details und Versionsinformationen</li>
            </ul>

            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mt-6 mb-3">Kontakt</h3>
            <p class="text-slate-700 dark:text-slate-300">
                Bei Fragen zu diesen rechtlichen Hinweisen wenden Sie sich bitte an:
            </p>
            <div class="bg-slate-50 dark:bg-slate-700/50 rounded-lg p-4 mt-4">
                <p class="text-slate-700 dark:text-slate-300 mb-0">
                    <strong>Till Tomczak</strong><br>
                    Fachinformatiker für digitale Vernetzung<br>
                    Mercedes-Benz AG - TBA Marienfelde<br>
                    E-Mail: <a href="mailto:till.tomczak@mercedes-benz.com" class="text-blue-600 dark:text-blue-400 hover:underline">till.tomczak@mercedes-benz.com</a>
                </p>
            </div>
        </div>
    </section>

    <!-- Navigation -->
    <div class="bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200 dark:border-slate-700 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>
            {% 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>
            {% endif %}
        </div>
    </div>

    <!-- Footer -->
    <div class="text-center text-slate-500 dark:text-slate-400 py-8">
        <p class="text-sm">
            Letzte Aktualisierung: {{ now().strftime('%d.%m.%Y') if now else '19.06.2025' }} | 
            Mercedes-Benz AG TBA Marienfelde | MYP Platform v3.0.0
        </p>
    </div>
</div>
{% endblock %}