@extends('layouts.app')
@section('title', 'Schlafrechner – Beste Aufwachzeit berechnen | kotsch.tech')
@section('meta_description', 'Schlafrechner: Berechne die optimale Aufwach- oder Einschlafzeit basierend auf 90-Minuten-Schlafzyklen. Wach frisch und erholt auf.')
@section('meta_extra')
<meta name="keywords" content="Schlafrechner, Schlafzyklen berechnen, wann aufwachen, Einschlafzeit, Tiefschlaf, REM Schlaf, optimale Schlafzeit">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.cycle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
@media(max-width:480px){ .cycle-grid { grid-template-columns: repeat(2,1fr); } }
.cycle-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 12px; text-align: center; }
.cycle-card.best { background: var(--accent-soft); border-color: rgba(16,185,129,0.3); }
.cycle-time { font-size: 1.5rem; font-weight: 900; letter-spacing: -1px; color: var(--accent); }
.cycle-meta { font-size: 0.75rem; color: var(--muted); font-weight: 700; margin-top: 3px; }
.cycle-badge { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.65rem; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-moon"></i> Gesundheit</span>
        <h1 class="tool-h1">Schlaf<span>rechner.</span></h1>
        <p class="tool-sub">Finde die optimalen Auf- und Einschlafzeiten basierend auf 90-Minuten-Schlafzyklen.</p>
    </div>

    <div class="t-panel">
        <div class="t-tabs">
            <button class="t-tab active" onclick="switchTab('wake',this)">Wann aufwachen?</button>
            <button class="t-tab" onclick="switchTab('sleep',this)">Wann einschlafen?</button>
        </div>

        <div class="t-tab-pane active" id="pane-wake">
            <div class="t-field">
                <label class="t-label">Einschlafzeit (jetzt)</label>
                <input type="time" class="t-input" id="sleep-time" value="23:00">
            </div>
            <p class="t-info">Das Einschlafen dauert durchschnittlich 14 Minuten. Diese Zeit wird berücksichtigt.</p>
        </div>

        <div class="t-tab-pane" id="pane-sleep">
            <div class="t-field">
                <label class="t-label">Aufstehzeit (Wecker)</label>
                <input type="time" class="t-input" id="wake-time" value="07:00">
            </div>
        </div>

        <button class="t-btn accent full" style="margin-top:16px" onclick="calculate()">
            <i class="fas fa-calculator"></i> Zeiten berechnen
        </button>
    </div>

    <div class="t-panel" id="results-panel" style="display:none">
        <div class="t-panel-title"><i class="fas fa-star"></i> Optimale Zeiten</div>
        <div class="cycle-grid" id="cycle-grid"></div>

        <div style="margin-top:20px">
            <div class="t-panel-title"><i class="fas fa-chart-bar"></i> Schlafphasen pro Zyklus (90 min)</div>
            <div class="t-grid-3">
                <div class="t-stat-card">
                    <div class="t-stat-num" style="color:#6366f1">~22 min</div>
                    <div class="t-stat-lbl">Einschlafphase N1</div>
                </div>
                <div class="t-stat-card">
                    <div class="t-stat-num">~40 min</div>
                    <div class="t-stat-lbl">Leichtschlaf N2</div>
                </div>
                <div class="t-stat-card">
                    <div class="t-stat-num" style="color:#f59e0b">~28 min</div>
                    <div class="t-stat-lbl">REM / Tiefschlaf</div>
                </div>
            </div>
        </div>

        <div style="margin-top:20px">
            <div class="t-panel-title"><i class="fas fa-lightbulb"></i> Schlaf-Tipps</div>
            <div class="t-row"><span class="t-row-lbl">Empfohlene Schlafdauer</span><span class="t-row-val">7–9 Stunden (4–6 Zyklen)</span></div>
            <div class="t-row"><span class="t-row-lbl">Einschlafen dauert ca.</span><span class="t-row-val">14 Minuten</span></div>
            <div class="t-row"><span class="t-row-lbl">Kein Koffein ab</span><span class="t-row-val">6 Std. vor Schlafenszeit</span></div>
            <div class="t-row"><span class="t-row-lbl">Bildschirme meiden ab</span><span class="t-row-val">1 Std. vor Schlafenszeit</span></div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
let activeTab = 'wake';
function switchTab(tab, btn) {
    activeTab = tab;
    document.querySelectorAll('.t-tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.t-tab-pane').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('pane-' + tab).classList.add('active');
}

function calculate() {
    const FALL_ASLEEP = 14, CYCLE = 90;
    let baseMinutes;
    if (activeTab === 'wake') {
        const t = document.getElementById('sleep-time').value;
        if (!t) return;
        const [h,m] = t.split(':').map(Number);
        baseMinutes = h * 60 + m + FALL_ASLEEP;
    } else {
        const t = document.getElementById('wake-time').value;
        if (!t) return;
        const [h,m] = t.split(':').map(Number);
        baseMinutes = h * 60 + m;
    }

    const grid = document.getElementById('cycle-grid');
    grid.innerHTML = '';
    for (let c = 1; c <= 6; c++) {
        let minutes;
        if (activeTab === 'wake') {
            minutes = (baseMinutes + c * CYCLE) % (24 * 60);
        } else {
            minutes = ((baseMinutes - c * CYCLE) + 24 * 60) % (24 * 60);
        }
        const h = Math.floor(minutes / 60), m = minutes % 60;
        const timeStr = String(h).padStart(2,'0') + ':' + String(m).padStart(2,'0');
        const hours = (c * CYCLE / 60).toFixed(1).replace('.',',');
        const isBest = c === 5 || c === 6;
        const card = document.createElement('div');
        card.className = 'cycle-card' + (isBest ? ' best' : '');
        card.innerHTML = `<div class="cycle-time">${timeStr}</div><div class="cycle-meta">${c} Zyklus${c>1?'en':''} · ${hours} Std.</div>${isBest?'<span class="cycle-badge">Empfohlen</span>':''}`;
        grid.appendChild(card);
    }
    document.getElementById('results-panel').style.display = 'block';
}
</script>

@include('tools._seo_content', ['toolSlug' => 'schlaf-rechner', 'toolName' => 'Schlaf Rechner'])

@endsection