<?php
require_once 'config.php';
require_once 'db.php';
requireLogin();

include 'header_next_page.php';
?>

<style>
.vergleich-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.vergleich-wrap h2 {
    margin-bottom: 6px;
}

.vergleich-subtitle {
    color: #888;
    font-size: 14px;
    margin-bottom: 32px;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: rgba(255,255,255,0.8);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 32px;
}

.compare-table th {
    padding: 16px 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-bottom: 2px solid rgba(0,0,0,0.08);
}

.compare-table th:first-child {
    text-align: left;
    width: 38%;
}

.compare-table th.col-basic {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: white;
}

.compare-table th.col-valusafe {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.compare-table td {
    padding: 12px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    text-align: center;
    vertical-align: middle;
}

.compare-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #374151;
}

.compare-table tr:last-child td {
    border-bottom: none;
}

.compare-table tr:hover td {
    background: rgba(0,0,0,0.02);
}

.compare-table .section-header td {
    background: rgba(0,0,0,0.03);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
    padding: 8px 20px;
}

.check { color: #27ae60; font-size: 18px; }
.cross { color: #d1d5db; font-size: 18px; }
.partial { color: #f59e0b; font-size: 13px; font-weight: 600; }

.badge-free {
    display: inline-block;
    background: linear-gradient(135deg, #27ae60, #1e8449);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
}

.badge-pro {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
}

.contact-box {
    background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08));
    border: 1.5px solid rgba(102,126,234,0.25);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
}

.contact-box h3 {
    font-size: 18px;
    color: #4c1d95;
    margin-bottom: 8px;
}

.contact-box p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.6;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: opacity 0.2s;
}

.contact-btn:hover { opacity: 0.88; }
</style>

<div class="vergleich-wrap">

    <h2>📊 Versionsvergleich</h2>
    <p class="vergleich-subtitle">Valu-Basic vs. ValuSafe — finden Sie die richtige Version für Ihren Bedarf</p>

    <table class="compare-table">
        <thead>
            <tr>
                <th></th>
                <th class="col-basic">📦 Valu-Basic</th>
                <th class="col-valusafe">🏆 ValuSafe</th>
            </tr>
        </thead>
        <tbody>

            <!-- Zielgruppe -->
            <tr class="section-header"><td colspan="3">Zielgruppe</td></tr>
            <tr>
                <td>Zielgruppe</td>
                <td>Privatnutzer</td>
                <td>Anspruchsvolle Nutzer &amp; Unternehmen</td>
            </tr>
            <tr>
                <td>Kosten</td>
                <td><span class="badge-free">Kostenlos</span></td>
                <td><span class="badge-pro">Auf Anfrage</span></td>
            </tr>
            <tr>
                <td>Installation</td>
                <td>Per FTP hochladen</td>
                <td>FTP / NAS / Docker</td>
            </tr>

            <!-- Datenbank & Technik -->
            <tr class="section-header"><td colspan="3">Technik</td></tr>
            <tr>
                <td>Datenbank</td>
                <td>SQLite (keine Installation nötig)</td>
                <td>MySQL / SQLite</td>
            </tr>
            <tr>
                <td>Webserver</td>
                <td>Apache / Nginx</td>
                <td>Apache / Nginx / Docker</td>
            </tr>
            <tr>
                <td>PHP-Version</td>
                <td>8.1+</td>
                <td>8.1+</td>
            </tr>

            <!-- Benutzer -->
            <tr class="section-header"><td colspan="3">Benutzerverwaltung</td></tr>
            <tr>
                <td>Einzelnutzer</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Multi-User (Admin / Editor / Viewer)</td>
                <td><span class="cross">—</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Berechtigungssystem</td>
                <td><span class="cross">—</span></td>
                <td><span class="check">✅</span></td>
            </tr>

            <!-- Inventar -->
            <tr class="section-header"><td colspan="3">Inventar</td></tr>
            <tr>
                <td>Gegenstände verwalten</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Kategorien &amp; Orte</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Standortverwaltung (Raum / Position)</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Mehrere Bilder pro Gegenstand</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Dokumente (PDF, DOCX, etc.)</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Zeitwert / Werthistorie</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Barcode-Lookup (EAN/ISBN)</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>

            <!-- Export -->
            <tr class="section-header"><td colspan="3">Export</td></tr>
            <tr>
                <td>PDF-Export</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>CSV-Export</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Versicherungs-Export</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>QR-Code-Export</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>

            <!-- Versicherung -->
            <tr class="section-header"><td colspan="3">Versicherung</td></tr>
            <tr>
                <td>Versicherungsmodul</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Gegenstände Versicherung zuordnen</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>

            <!-- Sicherheit -->
            <tr class="section-header"><td colspan="3">Sicherheit</td></tr>
            <tr>
                <td>Brute-Force-Schutz</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>CSRF-Schutz</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Sicherheitslog</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>2-Faktor-Authentifizierung</td>
                <td><span class="cross">—</span></td>
                <td><span class="check">✅</span></td>
            </tr>

            <!-- Backup -->
            <tr class="section-header"><td colspan="3">Backup &amp; Sync</td></tr>
            <tr>
                <td>Backup (Datenbank + Bilder)</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Automatisches Cron-Backup</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Sync zwischen Instanzen</td>
                <td><span class="cross">—</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Restore im Browser</td>
                <td><span class="partial">In Planung</span></td>
                <td><span class="check">✅</span></td>
            </tr>

            <!-- Design -->
            <tr class="section-header"><td colspan="3">Design &amp; Sprache</td></tr>
            <tr>
                <td>Farbthemen</td>
                <td>9 Themes</td>
                <td>9 Themes</td>
            </tr>
            <tr>
                <td>Mehrsprachigkeit</td>
                <td>DE / EN</td>
                <td>9 Sprachen</td>
            </tr>
            <tr>
                <td>PWA (App-Installation)</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>
            <tr>
                <td>Mobil-optimiert</td>
                <td><span class="check">✅</span></td>
                <td><span class="check">✅</span></td>
            </tr>

        </tbody>
    </table>

    <!-- Kontakt-Box -->
    <div class="contact-box">
        <h3>🏆 Interesse an ValuSafe?</h3>
        <p>
            ValuSafe bietet den vollen Funktionsumfang für anspruchsvolle Nutzer,
            Versicherungsmakler und Unternehmen — <strong>ab Oktober 2026 verfügbar</strong>.<br>
            Tragen Sie sich in die Mailingliste ein und wir informieren Sie, sobald es soweit ist.
        </p>
        <a href="registrierung.php"
           class="contact-btn">
            📬 Jetzt vormerken
        </a>
    </div>

</div>

<?php include 'footer_next_page.php'; ?>
