{% extends "base.html" %}

{% block title %}Impressum - Mercedes-Benz MYP System{% endblock %}

{% block extra_css %}
<style>
    .impressum-hero {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
        position: relative;
        overflow: hidden;
    }
    
    .impressum-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
    }
    
    .content-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    
    .dark .content-card {
        background: #1e293b;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    }
    
    .content-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .section-header {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        border-bottom: 1px solid #e2e8f0;
        padding: 1.5rem;
    }
    
    .dark .section-header {
        background: linear-gradient(135deg, #334155 0%, #475569 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .mercedes-star {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.3);
    }
    
    .info-row {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .dark .info-row {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .info-row:last-child {
        border-bottom: none;
    }
    
    .info-label {
        font-weight: 600;
        color: #475569;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .dark .info-label {
        color: #94a3b8;
    }
    
    .info-value {
        color: #1e293b;
        font-weight: 500;
    }
    
    .dark .info-value {
        color: #f1f5f9;
    }
    
    .contact-link {
        color: #3b82f6;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s ease;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        margin: -0.25rem -0.5rem;
    }
    
    .contact-link:hover {
        background: rgba(59, 130, 246, 0.1);
        color: #1d4ed8;
    }
    
    .dark .contact-link {
        color: #60a5fa;
    }
    
    .dark .contact-link:hover {
        background: rgba(96, 165, 250, 0.1);
        color: #93c5fd;
    }
    
    .disclaimer-box {
        background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
        border: 1px solid #f59e0b;
        border-radius: 12px;
        padding: 1.5rem;
        margin: 1.5rem 0;
    }
    
    .dark .disclaimer-box {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
        border: 1px solid rgba(245, 158, 11, 0.3);
    }
    
    .nav-button {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    
    .nav-button:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    }
    
    .nav-button.secondary {
        background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    }
    
    .nav-button.secondary:hover {
        background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4);
    }
    
    .nav-button.success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    }
    
    .nav-button.success:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="impressum-hero text-white py-16 relative">
    <div class="max-w-6xl mx-auto px-6 relative z-10">
        <div class="flex items-center gap-6 mb-8">
            <div class="mercedes-star">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2zm0 2.83l5.21 14.17L12 16.83 6.79 19 12 4.83z"/>
                </svg>
            </div>
            <div>
                <h1 class="text-4xl font-bold mb-2">Impressum</h1>
                <p class="text-xl text-blue-100">Rechtliche Angaben gemäß § 5 TMG</p>
            </div>
        </div>
        <div class="inline-flex items-center bg-white/10 backdrop-blur-sm rounded-full px-4 py-2">
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z"/>
            </svg>
            <span class="font-medium">Mercedes-Benz MYP System v3.0.0</span>
        </div>
    </div>
</div>

<div class="max-w-6xl mx-auto px-6 -mt-8 relative z-20 space-y-8 pb-16">
    
    <!-- Anbieter -->
    <div class="content-card">
        <div class="section-header">
            <h2 class="text-2xl font-bold text-slate-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 mr-3 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
                Anbieter
            </h2>
        </div>
        <div class="p-6">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="info-row">
                        <div class="info-label">Unternehmen</div>
                        <div class="info-value">Mercedes-Benz AG</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Abteilung</div>
                        <div class="info-value">Technische Berufsausbildung (TBA)</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Standort</div>
                        <div class="info-value">Marienfelde</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Bereich</div>
                        <div class="info-value">Digitale Fertigung & 3D-Druck</div>
                    </div>
                </div>
                <div>
                    <div class="info-row">
                        <div class="info-label">Straße</div>
                        <div class="info-value">Daimlerstraße 1</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">PLZ / Ort</div>
                        <div class="info-value">12277 Berlin</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Land</div>
                        <div class="info-value">Deutschland</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Website</div>
                        <div class="info-value">
                            <a href="https://www.mercedes-benz.com" target="_blank" class="contact-link">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                                </svg>
                                mercedes-benz.com
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Kontakt -->
    <div class="content-card">
        <div class="section-header">
            <h2 class="text-2xl font-bold text-slate-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 mr-3 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                Kontakt & Verantwortlichkeit
            </h2>
        </div>
        <div class="p-6">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Projektverantwortlicher</h3>
                    <div class="info-row">
                        <div class="info-label">Name</div>
                        <div class="info-value">Till Tomczak</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Position</div>
                        <div class="info-value">Fachinformatiker für Anwendungsentwicklung</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Projekt</div>
                        <div class="info-value">IHK-Projektarbeit: MYP System</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">E-Mail</div>
                        <div class="info-value">
                            <a href="mailto:till.tomczak@mercedes-benz.com" class="contact-link">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
                                </svg>
                                till.tomczak@mercedes-benz.com
                            </a>
                        </div>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Ausbildungsbetrieb</h3>
                    <div class="info-row">
                        <div class="info-label">Betrieb</div>
                        <div class="info-value">Mercedes-Benz AG</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Standort</div>
                        <div class="info-value">TBA Marienfelde</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Telefon</div>
                        <div class="info-value">
                            <a href="tel:+493075668000" class="contact-link">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                                </svg>
                                +49 (0) 30 7566-8000
                            </a>
                        </div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Zweck</div>
                        <div class="info-value">Interne Systemschulung & 3D-Druck Management</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rechtliche Angaben -->
    <div class="content-card">
        <div class="section-header">
            <h2 class="text-2xl font-bold text-slate-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 mr-3 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
                Rechtliche Angaben
            </h2>
        </div>
        <div class="p-6">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="info-row">
                        <div class="info-label">Registergericht</div>
                        <div class="info-value">Amtsgericht Stuttgart</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Handelsregister</div>
                        <div class="info-value">HRB 19360</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">USt-IdNr.</div>
                        <div class="info-value">DE811944017</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Steuernummer</div>
                        <div class="info-value">99073/00159</div>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Vorstand Mercedes-Benz AG</h3>
                    <div class="space-y-2 text-slate-700 dark:text-slate-300">
                        <div class="flex justify-between">
                            <span>Ola Källenius</span>
                            <span class="text-sm text-slate-500">(Vorsitzender)</span>
                        </div>
                        <div>Jörg Burzer</div>
                        <div>Renata Jungo Brüngger</div>
                        <div>Sabine Kohleisen</div>
                        <div>Harald Wilhelm</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System-Information -->
    <div class="content-card">
        <div class="section-header">
            <h2 class="text-2xl font-bold text-slate-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 mr-3 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                MYP System Information
            </h2>
        </div>
        <div class="p-6">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <div class="info-row">
                        <div class="info-label">Systemname</div>
                        <div class="info-value">MYP Platform</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Vollständig</div>
                        <div class="info-value">Manage Your Printers</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Version</div>
                        <div class="info-value">3.0.0</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Status</div>
                        <div class="info-value">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                Produktiv
                            </span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="info-row">
                        <div class="info-label">Framework</div>
                        <div class="info-value">Flask (Python)</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Frontend</div>
                        <div class="info-value">Tailwind CSS</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Datenbank</div>
                        <div class="info-value">SQLite</div>
                    </div>
                    <div class="info-row">
                        <div class="info-label">Zweck</div>
                        <div class="info-value">3D-Drucker Management</div>
                    </div>
                </div>
            </div>
            
            <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                <h4 class="font-semibold text-slate-900 dark:text-white mb-2">Projektkontext</h4>
                <p class="text-slate-700 dark:text-slate-300 text-sm">
                    Das MYP System wurde als <strong>IHK-Projektarbeit</strong> für die Ausbildung zum Fachinformatiker für 
                    Anwendungsentwicklung entwickelt. Es dient der zentralen Verwaltung von 3D-Druckern 
                    in der Mercedes-Benz TBA Marienfelde und integriert Smart-Plug-Steuerung, 
                    Benutzer-Management und Energiemonitoring.
                </p>
            </div>
        </div>
    </div>

    <!-- Haftungsausschluss -->
    <div class="content-card">
        <div class="section-header">
            <h2 class="text-2xl font-bold text-slate-900 dark:text-white flex items-center">
                <svg class="w-6 h-6 mr-3 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L4.316 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                </svg>
                Haftungsausschluss
            </h2>
        </div>
        <div class="p-6 space-y-6">
            <div class="disclaimer-box">
                <h3 class="font-semibold text-slate-900 dark:text-white mb-3">Haftung für Inhalte</h3>
                <p class="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
                    Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den 
                    allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht 
                    unter der Verpflichtung, übermittelte oder gespeicherte fremde Informationen zu überwachen.
                </p>
            </div>
            
            <div class="disclaimer-box">
                <h3 class="font-semibold text-slate-900 dark:text-white mb-3">Urheberrecht</h3>
                <p class="text-slate-700 dark:text-slate-300 text-sm leading-relaxed">
                    Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen 
                    Urheberrecht. Das MYP System wurde speziell für Mercedes-Benz entwickelt und ist für den internen Gebrauch bestimmt.
                </p>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="content-card">
        <div class="p-6">
            <div class="flex flex-wrap gap-4 justify-center">
                <a href="{{ url_for('index') }}" class="nav-button">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                    </svg>
                    Zur Startseite
                </a>
                
                <a href="{{ url_for('legal.privacy') }}" class="nav-button success">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                    </svg>
                    Datenschutz
                </a>
                
                <a href="{{ url_for('legal.legal') }}" class="nav-button secondary">
                    <svg class="w-5 h-5" 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>
                    Rechtliche Hinweise
                </a>

                {% if current_user.is_authenticated %}
                <a href="{{ url_for('dashboard') }}" class="nav-button secondary">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                    Dashboard
                </a>
                {% endif %}
            </div>
        </div>
    </div>

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