{% extends "base.html" %}

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

{% block extra_css %}
<style>
    body {
        background: var(--bg-primary);
    }
    
    .clean-card {
        background: var(--bg-card);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .hero-section {
        background: linear-gradient(135deg, var(--mb-black) 0%, var(--mb-primary) 100%);
        color: white;
        padding: 4rem 0;
        margin-bottom: 3rem;
    }
    
    .mercedes-logo {
        width: 60px;
        height: 60px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }
    
    .info-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .info-table td {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-primary);
        vertical-align: top;
    }
    
    .info-table td:first-child {
        font-weight: 600;
        color: var(--text-secondary);
        width: 140px;
        padding-right: 1rem;
    }
    
    .info-table td:last-child {
        color: var(--text-primary);
    }
    
    .info-table tr:last-child td {
        border-bottom: none;
    }
    
    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 1.5rem;
        border-bottom: 2px solid var(--mb-primary);
        padding-bottom: 0.5rem;
    }
    
    .link-style {
        color: var(--mb-primary);
        text-decoration: none;
        font-weight: 500;
    }
    
    .link-style:hover {
        text-decoration: underline;
    }
    
    .project-box {
        background: linear-gradient(135deg, rgba(0, 115, 206, 0.05) 0%, rgba(0, 115, 206, 0.1) 100%);
        border-left: 4px solid var(--mb-primary);
        padding: 1.5rem;
        border-radius: 0 8px 8px 0;
        margin: 2rem 0;
    }
    
    .nav-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 2rem;
    }
    
    @media (max-width: 768px) {
        .hero-section {
            padding: 2rem 0;
        }
        
        .clean-card {
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .info-table td:first-child {
            width: 120px;
            font-size: 0.9rem;
        }
        
        .nav-buttons {
            flex-direction: column;
            align-items: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Simple Hero -->
<div class="hero-section">
    <div class="container mx-auto px-6 text-center">
        <div class="mercedes-logo">
            <svg class="w-8 h-8 text-black" fill="currentColor" viewBox="0 0 80 80">
                <path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
            </svg>
        </div>
        <h1 class="text-4xl font-bold mb-4">Impressum</h1>
        <p class="text-xl opacity-90">Rechtliche Angaben gemäß § 5 TMG</p>
    </div>
</div>

<div class="container mx-auto px-6 max-w-4xl pb-12">
    
    <!-- Anbieter -->
    <div class="clean-card">
        <h2 class="section-title">Anbieter</h2>
        
        <div class="grid md:grid-cols-2 gap-8">
            <div>
                <table class="info-table">
                    <tr>
                        <td>Unternehmen</td>
                        <td>Mercedes-Benz AG</td>
                    </tr>
                    <tr>
                        <td>Abteilung</td>
                        <td>Technische Berufsausbildung (TBA)</td>
                    </tr>
                    <tr>
                        <td>Standort</td>
                        <td>Marienfelde, Berlin</td>
                    </tr>
                    <tr>
                        <td>Bereich</td>
                        <td>Digitale Fertigung & 3D-Druck</td>
                    </tr>
                </table>
            </div>
            
            <div>
                <table class="info-table">
                    <tr>
                        <td>Adresse</td>
                        <td>
                            Daimlerstraße 1<br>
                            12277 Berlin<br>
                            Deutschland
                        </td>
                    </tr>
                    <tr>
                        <td>Website</td>
                        <td><a href="https://www.mercedes-benz.com" target="_blank" class="link-style">mercedes-benz.com</a></td>
                    </tr>
                    <tr>
                        <td>Telefon</td>
                        <td><a href="tel:+493075668000" class="link-style">+49 (0) 30 7566-8000</a></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Projektverantwortlicher -->
    <div class="clean-card">
        <h2 class="section-title">Projektverantwortlicher</h2>
        
        <div class="grid md:grid-cols-2 gap-8">
            <div>
                <table class="info-table">
                    <tr>
                        <td>Name</td>
                        <td>Till Tomczak</td>
                    </tr>
                    <tr>
                        <td>Position</td>
                        <td>Fachinformatiker für digitale Vernetzung</td>
                    </tr>
                    <tr>
                        <td>Projekt</td>
                        <td>IHK-Projektarbeit: MYP System</td>
                    </tr>
                    <tr>
                        <td>Status</td>
                        <td>Auszubildender</td>
                    </tr>
                </table>
            </div>
            
            <div>
                <table class="info-table">
                    <tr>
                        <td>E-Mail</td>
                        <td><a href="mailto:till.tomczak@mercedes-benz.com" class="link-style">till.tomczak@mercedes-benz.com</a></td>
                    </tr>
                    <tr>
                        <td>Ausbildung</td>
                        <td>Mercedes-Benz AG - TBA Marienfelde</td>
                    </tr>
                    <tr>
                        <td>Zweck</td>
                        <td>Interne Systemschulung & 3D-Druck Management</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- Projekt Info -->
    <div class="project-box">
        <h3 class="text-xl font-bold mb-3" style="color: var(--text-primary);">MYP Platform - Das Projekt</h3>
        <p style="color: var(--text-secondary);">
            Das <strong>MYP System (Manage Your Printers)</strong> wurde als IHK-Projektarbeit für die Ausbildung zum 
            Fachinformatiker für digitale Vernetzung entwickelt. Es dient der zentralen Verwaltung von 3D-Druckern 
            in der Mercedes-Benz TBA Marienfelde mit Smart-Plug-Integration und Energiemonitoring.
        </p>
    </div>

    <!-- Rechtliche Angaben -->
    <div class="clean-card">
        <h2 class="section-title">Rechtliche Angaben</h2>
        
        <div class="grid md:grid-cols-2 gap-8">
            <div>
                <table class="info-table">
                    <tr>
                        <td>Registergericht</td>
                        <td>Amtsgericht Stuttgart</td>
                    </tr>
                    <tr>
                        <td>Handelsregister</td>
                        <td>HRB 19360</td>
                    </tr>
                    <tr>
                        <td>USt-IdNr.</td>
                        <td>DE811944017</td>
                    </tr>
                    <tr>
                        <td>Steuernummer</td>
                        <td>99073/00159</td>
                    </tr>
                </table>
            </div>
            
            <div>
                <h4 class="font-semibold mb-3" style="color: var(--text-primary);">Vorstand Mercedes-Benz AG</h4>
                <div style="color: var(--text-secondary);">
                    <p>Ola Källenius <span style="color: var(--text-muted);">(Vorsitzender)</span></p>
                    <p>Jörg Burzer</p>
                    <p>Renata Jungo Brüngger</p>
                    <p>Sabine Kohleisen</p>
                    <p>Harald Wilhelm</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="clean-card">
        <div class="nav-buttons">
            <a href="{{ url_for('index') }}" class="btn-primary">Zur Startseite</a>
            <a href="{{ url_for('legal.privacy') }}" class="btn-success">Datenschutz</a>
            <a href="{{ url_for('legal.legal') }}" class="btn-secondary">Rechtliche Hinweise</a>
            {% if current_user.is_authenticated %}
            <a href="{{ url_for('dashboard') }}" class="btn-secondary">Dashboard</a>
            {% endif %}
        </div>
    </div>

    <!-- Footer -->
    <div class="text-center py-6" style="color: var(--text-muted);">
        <p class="text-sm">
            Letzte Aktualisierung: 19.06.2025 | Mercedes-Benz AG TBA Marienfelde | MYP Platform v3.0.0
        </p>
    </div>
</div>
{% endblock %}