@extends('demos.windows.app_layout', ['fullPage' => true])

@section('title', 'Kotsch.Cleaner | kotsch.tech')
@section('meta_description', 'Kotsch.Cleaner – das professionelle System-Optimierungstool für Windows. Schneller Scan, präzise Ergebnisse und sicheres Löschen von Datenmüll für mehr Speicher und Tempo.')

@section('app-ui')
<div class="cleaner-app">

    <!-- SIDEBAR -->
    <div class="cl-sidebar">
        <div class="cl-brand">
            <i class="fas fa-broom"></i>
            <span>Cleaner</span>
        </div>
        <nav class="cl-nav">
            <div class="cl-nav-item active">
                <i class="fas fa-desktop"></i> System
            </div>
            <div class="cl-nav-item">
                <i class="fas fa-globe"></i> Browser
            </div>
            <div class="cl-nav-item">
                <i class="fas fa-database"></i> Registry
            </div>
            <div class="cl-nav-item">
                <i class="fas fa-box"></i> Apps
            </div>
        </nav>
        <div class="cl-disk-info">
            <div class="cl-disk-label">
                <i class="fas fa-hdd"></i> C:\ Drive
            </div>
            <div class="cl-disk-bar">
                <div class="cl-disk-fill"></div>
            </div>
            <span class="cl-disk-text">452 GB / 1 TB</span>
        </div>
    </div>

    <!-- MAIN AREA -->
    <div class="cl-main">

        <!-- TOP BAR -->
        <div class="cl-topbar">
            <h2 class="cl-title">System Analyse</h2>
            <div class="cl-scan-btn scan-anim">
                <i class="fas fa-play"></i> Scan starten
            </div>
        </div>

        <!-- STATS ROW -->
        <div class="cl-stats-row">
            <div class="cl-stat">
                <div class="cl-stat-icon red"><i class="fas fa-trash"></i></div>
                <div>
                    <div class="cl-stat-val count-anim" data-target="4218">0 MB</div>
                    <div class="cl-stat-lbl">Datenmüll</div>
                </div>
            </div>
            <div class="cl-stat">
                <div class="cl-stat-icon yellow"><i class="fas fa-history"></i></div>
                <div>
                    <div class="cl-stat-val">1.832</div>
                    <div class="cl-stat-lbl">Temp-Dateien</div>
                </div>
            </div>
            <div class="cl-stat">
                <div class="cl-stat-icon green"><i class="fas fa-check-circle"></i></div>
                <div>
                    <div class="cl-stat-val">98<span style="font-size:1rem">%</span></div>
                    <div class="cl-stat-lbl">System-Score</div>
                </div>
            </div>
        </div>

        <!-- SCAN RESULTS -->
        <div class="cl-results">
            <div class="cl-result-row">
                <div class="cl-result-check checked"><i class="fas fa-check"></i></div>
                <div class="cl-result-info">
                    <span class="cl-result-name">Windows Temp-Ordner</span>
                    <span class="cl-result-path">C:\Windows\Temp</span>
                </div>
                <span class="cl-result-size red-txt">1.2 GB</span>
            </div>
            <div class="cl-result-row">
                <div class="cl-result-check checked"><i class="fas fa-check"></i></div>
                <div class="cl-result-info">
                    <span class="cl-result-name">Papierkorb</span>
                    <span class="cl-result-path">C:\$Recycle.Bin</span>
                </div>
                <span class="cl-result-size red-txt">847 MB</span>
            </div>
            <div class="cl-result-row">
                <div class="cl-result-check checked"><i class="fas fa-check"></i></div>
                <div class="cl-result-info">
                    <span class="cl-result-name">Browser Cache</span>
                    <span class="cl-result-path">Chrome, Edge, Firefox</span>
                </div>
                <span class="cl-result-size yellow-txt">612 MB</span>
            </div>
            <div class="cl-result-row">
                <div class="cl-result-check checked"><i class="fas fa-check"></i></div>
                <div class="cl-result-info">
                    <span class="cl-result-name">Windows Update Cache</span>
                    <span class="cl-result-path">C:\Windows\SoftwareDistribution</span>
                </div>
                <span class="cl-result-size red-txt">1.5 GB</span>
            </div>
            <div class="cl-result-row dim">
                <div class="cl-result-check"><i class="fas fa-check"></i></div>
                <div class="cl-result-info">
                    <span class="cl-result-name">Thumbnail Cache</span>
                    <span class="cl-result-path">C:\Users\...\AppData\Local</span>
                </div>
                <span class="cl-result-size">59 MB</span>
            </div>
        </div>

        <!-- BOTTOM ACTION BAR -->
        <div class="cl-action-bar">
            <span class="cl-total-label">Bereinigbar: <strong>4.2 GB</strong></span>
            <div class="cl-clean-btn clean-pulse">
                <i class="fas fa-broom"></i> JETZT BEREINIGEN
            </div>
        </div>
    </div>

</div>

<style>
    .cleaner-app {
        width: 100vw; height: 100vh;
        display: flex; background: #020617;
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        font-size: 0.85rem; color: #e2e8f0; overflow: hidden;
    }

    /* SIDEBAR */
    .cl-sidebar {
        width: 220px; flex-shrink: 0;
        background: #0f172a; border-right: 1px solid #1e293b;
        display: flex; flex-direction: column; padding: 25px 0;
    }
    .cl-brand {
        display: flex; align-items: center; gap: 12px;
        padding: 0 20px 25px; border-bottom: 1px solid #1e293b;
        font-weight: 900; font-size: 1.1rem; color: #10b981;
    }
    .cl-brand i { font-size: 1.4rem; }

    .cl-nav { padding: 15px 10px; flex: 1; }
    .cl-nav-item {
        display: flex; align-items: center; gap: 12px;
        padding: 11px 14px; border-radius: 8px;
        color: #64748b; font-weight: 600; cursor: default;
        transition: 0.2s; margin-bottom: 4px;
    }
    .cl-nav-item.active { background: rgba(16,185,129,0.12); color: #10b981; }
    .cl-nav-item i { width: 18px; text-align: center; }

    .cl-disk-info { padding: 20px; border-top: 1px solid #1e293b; }
    .cl-disk-label { display: flex; align-items: center; gap: 8px; color: #64748b; margin-bottom: 10px; font-size: 0.78rem; font-weight: 600; }
    .cl-disk-bar { height: 6px; background: #1e293b; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
    .cl-disk-fill { height: 100%; width: 45%; background: linear-gradient(90deg, #10b981, #3b82f6); border-radius: 10px; animation: diskFill 6s ease-in-out infinite alternate; }
    .cl-disk-text { font-size: 0.7rem; color: #475569; font-weight: 600; }

    /* MAIN */
    .cl-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    .cl-topbar {
        background: #0d1b2a; padding: 18px 28px;
        display: flex; justify-content: space-between; align-items: center;
        border-bottom: 1px solid #1e293b;
    }
    .cl-title { font-size: 1rem; font-weight: 800; color: #f1f5f9; margin: 0; }
    .cl-scan-btn {
        background: #1e293b; border: 1px solid #334155;
        color: #94a3b8; padding: 9px 20px; border-radius: 8px;
        font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; gap: 8px;
        cursor: default;
    }

    /* STATS */
    .cl-stats-row {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 0; border-bottom: 1px solid #1e293b;
    }
    .cl-stat {
        padding: 22px 28px; display: flex; align-items: center; gap: 16px;
        border-right: 1px solid #1e293b;
    }
    .cl-stat:last-child { border-right: none; }
    .cl-stat-icon {
        width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
    }
    .cl-stat-icon.red { background: rgba(239,68,68,0.12); color: #ef4444; }
    .cl-stat-icon.yellow { background: rgba(245,158,11,0.12); color: #f59e0b; }
    .cl-stat-icon.green { background: rgba(16,185,129,0.12); color: #10b981; }
    .cl-stat-val { font-size: 1.5rem; font-weight: 900; line-height: 1; color: #f1f5f9; }
    .cl-stat-lbl { font-size: 0.7rem; color: #64748b; font-weight: 600; margin-top: 3px; }

    /* RESULTS */
    .cl-results { flex: 1; overflow-y: auto; padding: 10px 0; }
    .cl-result-row {
        display: flex; align-items: center; gap: 16px;
        padding: 13px 28px; border-bottom: 1px solid rgba(30,41,59,0.6);
        transition: 0.2s; animation: rowFadeIn 0.5s ease both;
    }
    .cl-result-row:hover { background: rgba(255,255,255,0.02); }
    .cl-result-row.dim { opacity: 0.4; }
    .cl-result-check {
        width: 26px; height: 26px; border: 2px solid #334155;
        border-radius: 6px; display: flex; align-items: center; justify-content: center;
        font-size: 0.7rem; color: transparent; flex-shrink: 0;
    }
    .cl-result-check.checked { background: rgba(16,185,129,0.15); border-color: #10b981; color: #10b981; }
    .cl-result-info { flex: 1; min-width: 0; }
    .cl-result-name { display: block; font-weight: 700; color: #e2e8f0; font-size: 0.85rem; }
    .cl-result-path { display: block; font-size: 0.7rem; color: #475569; font-family: monospace; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cl-result-size { font-size: 0.82rem; font-weight: 800; flex-shrink: 0; font-family: monospace; color: #64748b; }
    .red-txt { color: #ef4444; }
    .yellow-txt { color: #f59e0b; }

    /* ACTION BAR */
    .cl-action-bar {
        background: #0f172a; border-top: 1px solid #1e293b;
        padding: 16px 28px; display: flex; justify-content: space-between; align-items: center;
    }
    .cl-total-label { color: #64748b; font-size: 0.85rem; }
    .cl-total-label strong { color: #ef4444; }
    .cl-clean-btn {
        background: #10b981; color: white;
        padding: 12px 30px; border-radius: 8px;
        font-size: 0.82rem; font-weight: 800; letter-spacing: 0.5px;
        display: flex; align-items: center; gap: 10px; cursor: default;
    }

    /* ANIMATIONS */
    .scan-anim { animation: scanPulse 3s ease-in-out infinite; }
    @keyframes scanPulse {
        0%, 100% { border-color: #334155; color: #94a3b8; }
        50% { border-color: #10b981; color: #10b981; box-shadow: 0 0 12px rgba(16,185,129,0.15); }
    }

    .clean-pulse { animation: cleanGlow 2.5s ease-in-out infinite; }
    @keyframes cleanGlow {
        0%, 100% { box-shadow: 0 0 0 rgba(16,185,129,0); }
        50% { box-shadow: 0 0 20px rgba(16,185,129,0.4); }
    }

    @keyframes diskFill {
        0% { width: 45%; }
        100% { width: 52%; }
    }

    @keyframes rowFadeIn {
        from { opacity: 0; transform: translateX(-10px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .cl-result-row:nth-child(1) { animation-delay: 0.1s; }
    .cl-result-row:nth-child(2) { animation-delay: 0.2s; }
    .cl-result-row:nth-child(3) { animation-delay: 0.3s; }
    .cl-result-row:nth-child(4) { animation-delay: 0.4s; }
    .cl-result-row:nth-child(5) { animation-delay: 0.5s; }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #020617; }
    ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
</style>
@endsection

@section('app-description')
    <span style="color: #10b981; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;">Windows Software</span>
    <h1 style="margin-top: 10px;">Kotsch<span style="color: #10b981;">.Cleaner</span></h1>
    <p>Ein professionelles System-Optimierungstool, das deinen PC von unnötigem Datenmüll befreit. Schneller Scan, präzise Ergebnisse, sicheres Löschen.</p>
@endsection

@section('app-specs')
    <li><span>Version</span><span>2.4.1</span></li>
    <li><span>Plattform</span><span>Windows 10/11</span></li>
    <li><span>Architektur</span><span>x64 Native</span></li>
    <li><span>Sprache</span><span>C++ / WinAPI</span></li>
    <li><span>Größe</span><span>3.2 MB</span></li>
@endsection