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

include 'header_next_page.php';
?>

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

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

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

.reg-card {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.reg-card h3 {
    font-size: 18px;
    color: #1f2937;
    margin-bottom: 8px;
}

.reg-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
    margin-bottom: 20px;
}

.reg-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.reg-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 11px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.15s;
    outline: none;
}

.reg-form input[type="email"]:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
}

.reg-btn {
    padding: 11px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: inherit;
}

.reg-btn:hover { opacity: 0.88; }
.reg-btn:disabled { opacity: 0.5; cursor: default; }

.reg-result {
    display: none;
    margin-top: 12px;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 8px;
}

.reg-result.success {
    background: #f0fdf4;
    border-left: 4px solid #27ae60;
    color: #166534;
}

.reg-result.error {
    background: #fef2f2;
    border-left: 4px solid #dc2626;
    color: #991b1b;
}

.dsgvo-note {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 12px;
    line-height: 1.5;
}

.valusafe-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: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.valusafe-box p {
    font-size: 14px;
    color: #3730a3;
    margin: 0;
    flex: 1;
}

.valusafe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 0.2s;
}

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

<div class="reg-wrap">

    <h2>📬 Registrierung & Updates</h2>
    <p class="reg-subtitle">Bleiben Sie über neue Versionen informiert</p>

    <!-- Registrierungsformular -->
    <div class="reg-card">
        <h3>🔔 Update-Benachrichtigungen</h3>
        <p>
            Tragen Sie Ihre E-Mail-Adresse ein um kostenlos über neue Valu-Basic Versionen
            und wichtige Updates informiert zu werden.<br>
            Kein Spam — nur relevante Informationen, jederzeit abbestellbar.
        </p>

        <div class="reg-form">
            <input type="email" id="reg-email" placeholder="ihre@email.de" autocomplete="email">
            <button type="button" class="reg-btn" id="reg-submit" onclick="registerEmail()">
                Eintragen
            </button>
        </div>

        <div class="reg-result" id="reg-result"></div>

        <p class="dsgvo-note">
            🔒 Ihre E-Mail wird ausschließlich für Update-Benachrichtigungen verwendet und nicht
            an Dritte weitergegeben. Grundlage: berechtigtes Interesse gemäß DSGVO Art. 6 Abs. 1 lit. f.
        </p>
    </div>

    <!-- ValuSafe Hinweis -->
    <div class="valusafe-box">
        <p>🏆 <strong>Mehr Funktionen gewünscht?</strong> ValuSafe bietet Multi-User, automatisches Backup, Barcode-Lookup und vieles mehr.</p>
        <a href="vergleich.php" target="_blank" class="valusafe-btn">
            📊 Versionsvergleich →
        </a>
    </div>

</div>

<script>
function registerEmail() {
    const email  = document.getElementById('reg-email').value.trim();
    const result = document.getElementById('reg-result');
    const btn    = document.getElementById('reg-submit');

    if (!email || !email.includes('@')) {
        result.className = 'reg-result error';
        result.style.display = 'block';
        result.textContent = '❌ Bitte eine gültige E-Mail-Adresse eingeben.';
        return;
    }

    btn.disabled = true;
    result.className = 'reg-result';
    result.style.display = 'block';
    result.style.background = '#f9fafb';
    result.style.borderLeft = '4px solid #d1d5db';
    result.style.color = '#6b7280';
    result.textContent = '⏳ Wird eingetragen…';

    fetch('https://valu-basic.palindrom.de/register_api.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            email: email,
            version: '<?php echo defined("APP_NAME") ? "1.0.0" : "unbekannt"; ?>',
            source: 'info_modal'
        })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            result.className = 'reg-result success';
            result.textContent = '✅ Vielen Dank! Sie werden über Updates informiert.';
            document.getElementById('reg-email').disabled = true;
            btn.disabled = true;
            btn.textContent = '✓ Eingetragen';
        } else {
            result.className = 'reg-result error';
            result.textContent = '❌ ' + (data.message || 'Fehler beim Eintragen.');
            btn.disabled = false;
        }
    })
    .catch(() => {
        result.className = 'reg-result error';
        result.textContent = '❌ Verbindung fehlgeschlagen. Bitte später versuchen.';
        btn.disabled = false;
    });
}

// Enter-Taste im E-Mail-Feld
document.getElementById('reg-email').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') registerEmail();
});
</script>

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