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

@section('title', 'Kotsch.Cleaner Optimizer | kotsch.tech')
@section('meta_description', 'Kotsch.Cleaner – das System-Optimierungstool für Windows. Datenmüll aufspüren, Autostart entschlacken und den PC mit einem Klick spürbar beschleunigen.')

@section('bg-color', '#020617')

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

    <!-- HERO SCORE -->
    <div class="kc-hero">
        <div class="kc-ring">
            <svg viewBox="0 0 120 120">
                <circle class="kc-ring-bg" cx="60" cy="60" r="52"></circle>
                <circle class="kc-ring-fg" cx="60" cy="60" r="52"></circle>
            </svg>
            <div class="kc-ring-label">
                <span class="kc-score count-anim" data-target="94">62</span>
                <small>SCORE</small>
            </div>
        </div>
        <div class="kc-hero-text">
            <h2>System wird optimiert</h2>
            <p>3.7 GB Datenmüll gefunden &middot; 12 Autostart-Einträge bremsen den Start</p>
            <div class="kc-optimize-btn clean-pulse"><i class="fas fa-bolt"></i> JETZT OPTIMIEREN</div>
        </div>
    </div>

    <!-- MODULE GRID -->
    <div class="kc-grid">
        <div class="kc-module">
            <div class="kc-mod-head"><i class="fas fa-trash"></i> Datenmüll</div>
            <div class="kc-mod-val red-txt">3.7 GB</div>
            <div class="kc-mod-bar"><div class="kc-mod-fill red" style="width:78%"></div></div>
            <span class="kc-mod-note">Temp, Cache, Logs</span>
        </div>
        <div class="kc-module">
            <div class="kc-mod-head"><i class="fas fa-rocket"></i> Autostart</div>
            <div class="kc-mod-val yellow-txt">12 Apps</div>
            <div class="kc-mod-bar"><div class="kc-mod-fill yellow" style="width:55%"></div></div>
            <span class="kc-mod-note">+8 s Startzeit</span>
        </div>
        <div class="kc-module">
            <div class="kc-mod-head"><i class="fas fa-database"></i> Registry</div>
            <div class="kc-mod-val">241</div>
            <div class="kc-mod-bar"><div class="kc-mod-fill blue" style="width:34%"></div></div>
            <span class="kc-mod-note">Verwaiste Einträge</span>
        </div>
        <div class="kc-module">
            <div class="kc-mod-head"><i class="fas fa-shield-halved"></i> Privatsphäre</div>
            <div class="kc-mod-val green-txt">Sicher</div>
            <div class="kc-mod-bar"><div class="kc-mod-fill green" style="width:96%"></div></div>
            <span class="kc-mod-note">Browser-Spuren gelöscht</span>
        </div>
    </div>

    <!-- LIVE LOG -->
    <div class="kc-log">
        <div class="kc-log-row"><i class="fas fa-check"></i> Windows Temp-Ordner bereinigt <span>1.2 GB</span></div>
        <div class="kc-log-row"><i class="fas fa-check"></i> Browser-Cache geleert <span>612 MB</span></div>
        <div class="kc-log-row"><i class="fas fa-check"></i> Update-Reste entfernt <span>1.5 GB</span></div>
        <div class="kc-log-row scanning"><i class="fas fa-spinner fa-spin"></i> Autostart wird analysiert &hellip;</div>
    </div>
</div>

<style>
    .kc-app {
        width: 100vw; height: 100vh; background: #020617;
        font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
        color: #e2e8f0; padding: 28px 34px; overflow: hidden;
        display: flex; flex-direction: column; gap: 22px;
    }

    /* HERO */
    .kc-hero { display: flex; align-items: center; gap: 34px; }
    .kc-ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
    .kc-ring svg { width: 130px; height: 130px; transform: rotate(-90deg); }
    .kc-ring-bg { fill: none; stroke: #1e293b; stroke-width: 9; }
    .kc-ring-fg {
        fill: none; stroke: #10b981; stroke-width: 9; stroke-linecap: round;
        stroke-dasharray: 327; stroke-dashoffset: 327;
        animation: ringFill 2.4s ease-out forwards;
    }
    .kc-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .kc-score { font-size: 2.4rem; font-weight: 900; color: #10b981; line-height: 1; }
    .kc-ring-label small { font-size: 0.62rem; color: #64748b; font-weight: 800; letter-spacing: 2px; margin-top: 4px; }
    .kc-hero-text h2 { font-size: 1.4rem; font-weight: 900; color: #f1f5f9; margin: 0 0 8px; }
    .kc-hero-text p { color: #64748b; font-size: 0.85rem; margin: 0 0 18px; }
    .kc-optimize-btn {
        display: inline-flex; align-items: center; gap: 10px;
        background: #10b981; color: #fff; padding: 12px 28px; border-radius: 9px;
        font-weight: 800; font-size: 0.82rem; letter-spacing: 0.5px; cursor: default;
    }

    /* MODULE GRID */
    .kc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .kc-module {
        background: #0f172a; border: 1px solid #1e293b; border-radius: 14px;
        padding: 18px; animation: cardFade 0.6s ease both;
    }
    .kc-module:nth-child(2) { animation-delay: 0.1s; }
    .kc-module:nth-child(3) { animation-delay: 0.2s; }
    .kc-module:nth-child(4) { animation-delay: 0.3s; }
    .kc-mod-head { display: flex; align-items: center; gap: 9px; color: #94a3b8; font-weight: 700; font-size: 0.78rem; margin-bottom: 12px; }
    .kc-mod-head i { color: #475569; }
    .kc-mod-val { font-size: 1.5rem; font-weight: 900; color: #f1f5f9; line-height: 1; margin-bottom: 12px; }
    .kc-mod-bar { height: 6px; background: #1e293b; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
    .kc-mod-fill { height: 100%; border-radius: 10px; }
    .kc-mod-fill.red { background: #ef4444; }
    .kc-mod-fill.yellow { background: #f59e0b; }
    .kc-mod-fill.blue { background: #3b82f6; }
    .kc-mod-fill.green { background: #10b981; }
    .kc-mod-note { font-size: 0.7rem; color: #475569; font-weight: 600; }
    .red-txt { color: #ef4444; } .yellow-txt { color: #f59e0b; } .green-txt { color: #10b981; }

    /* LOG */
    .kc-log { flex: 1; background: #0f172a; border: 1px solid #1e293b; border-radius: 14px; padding: 8px 0; overflow-y: auto; }
    .kc-log-row {
        display: flex; align-items: center; gap: 12px; padding: 12px 22px;
        font-size: 0.82rem; color: #cbd5e1; border-bottom: 1px solid rgba(30,41,59,0.6);
        animation: rowFade 0.5s ease both;
    }
    .kc-log-row:last-child { border-bottom: none; }
    .kc-log-row i { color: #10b981; width: 16px; text-align: center; }
    .kc-log-row span { margin-left: auto; font-family: monospace; color: #64748b; font-weight: 700; }
    .kc-log-row.scanning { color: #f59e0b; }
    .kc-log-row.scanning i { color: #f59e0b; }
    .kc-log-row:nth-child(2) { animation-delay: 0.15s; }
    .kc-log-row:nth-child(3) { animation-delay: 0.3s; }
    .kc-log-row:nth-child(4) { animation-delay: 0.45s; }

    /* ANIM */
    .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 22px rgba(16,185,129,0.45); } }
    @keyframes ringFill { from { stroke-dashoffset: 327; } to { stroke-dashoffset: 20; } }
    @keyframes cardFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes rowFade { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

    ::-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 Optimizer</span></h1>
    <p>Das All-in-One Optimierungstool für Windows. Spürt Datenmüll, überflüssige Autostart-Programme und verwaiste Registry-Einträge auf – und macht deinen PC mit einem einzigen Klick wieder spürbar schneller.</p>
@endsection

@section('app-specs')
    <li><span>Version</span><span>5.2.0</span></li>
    <li><span>Plattform</span><span>Windows 10/11</span></li>
    <li><span>Module</span><span>Müll, Autostart, Registry</span></li>
    <li><span>Echtzeit-Score</span><span>0–100</span></li>
    <li><span>Sprache</span><span>C++ / WinAPI</span></li>
    <li><span>Größe</span><span>4.6 MB</span></li>
@endsection