@extends('apple.apple_layout')

@section('app-name', 'Note+')
@section('app-desc', 'Focused Writing. Schnell notieren, strukturieren und Ideen mit klaren Boards und smarten Arbeitsflaechen festhalten.')
@section('app-category', 'iOS App')
@section('app-icon', 'fas fa-note-sticky')
@section('theme-color', '#f59e0b')
@section('bg-color', '#fff8eb')

@section('app-ui')
    <div class="noteplus-shell" style="height: 100%; width: 100%; display: flex; flex-direction: column; background: #fff8eb; font-family: -apple-system, BlinkMacSystemFont, sans-serif; position: relative;">
        <div style="padding: 52px 20px 14px; display: flex; align-items: center; justify-content: space-between;">
            <div>
                <span style="font-size: 0.72rem; color: #92400e; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">Writing Studio</span>
                <h2 style="font-size: 1.9rem; font-weight: 900; letter-spacing: -1px; color: #111827; margin-top: 4px;">Note+</h2>
            </div>
            <div class="noteplus-sync-dot" style="width: 12px; height: 12px; background: #f59e0b; border-radius: 50%; box-shadow: 0 0 0 rgba(245, 158, 11, 0.45);"></div>
        </div>

        <div style="padding: 0 20px 18px;">
            <div class="noteplus-main-card" style="background: linear-gradient(145deg, #f59e0b, #fb923c); border-radius: 26px; padding: 22px; color: white; overflow: hidden; position: relative;">
                <span style="display: inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.16); font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;">Quick Capture</span>
                <h3 style="font-size: 1.55rem; font-weight: 900; line-height: 1.1; margin: 14px 0 12px;">Ideen sofort sichern,<br>bevor sie weg sind.</h3>
                <div class="noteplus-typing-line" style="font-size: 0.92rem; line-height: 1.6; max-width: 230px;">
                    Projektstart: neue Landingpage fuer Studiengruppe<span class="noteplus-caret">|</span>
                </div>
                <div class="noteplus-orb"></div>
            </div>
        </div>

        <div style="padding: 0 20px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 12px;">
            <div class="noteplus-sheet" style="background: white; border-radius: 22px; padding: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;">
                    <strong style="font-size: 0.95rem; color: #111827;">Heute</strong>
                    <span style="font-size: 0.72rem; color: #6b7280; font-weight: 700;">3 Notizen</span>
                </div>
                <div class="noteplus-line noteplus-line-long"></div>
                <div class="noteplus-line noteplus-line-mid"></div>
                <div class="noteplus-line noteplus-line-short"></div>
                <div class="noteplus-line noteplus-line-long"></div>
            </div>

            <div style="display: grid; gap: 12px;">
                <div class="noteplus-tag-card" style="background: #ffffff; border-radius: 20px; padding: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);">
                    <div style="font-size: 0.74rem; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;">Boards</div>
                    <div class="noteplus-tag">Campus</div>
                    <div class="noteplus-tag">Produkt</div>
                    <div class="noteplus-tag">Ideen</div>
                </div>
                <div class="noteplus-pulse-card" style="background: #111827; color: white; border-radius: 20px; padding: 18px; position: relative; overflow: hidden;">
                    <div style="font-size: 0.74rem; opacity: 0.7; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px;">Focus Mode</div>
                    <strong style="font-size: 1.4rem; display: block;">24 min</strong>
                    <span style="font-size: 0.82rem; opacity: 0.8;">Ablenkungsfrei schreiben</span>
                    <div class="noteplus-wave"></div>
                </div>
            </div>
        </div>

        <div style="margin-top: auto; background: rgba(255,255,255,0.92); backdrop-filter: blur(18px); border-top: 1px solid rgba(148, 163, 184, 0.25); display: flex; justify-content: space-around; padding: 15px 20px 24px;">
            <div style="text-align: center; color: #f59e0b;"><i class="fas fa-note-sticky" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 700;">Notizen</span></div>
            <div style="text-align: center; color: #9ca3af;"><i class="fas fa-layer-group" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Boards</span></div>
            <div style="text-align: center; color: #9ca3af;"><i class="fas fa-clock-rotate-left" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Verlauf</span></div>
            <div style="text-align: center; color: #9ca3af;"><i class="fas fa-gear" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Setup</span></div>
        </div>
    </div>

    <style>
        .noteplus-main-card { animation: noteCardFloat 6s ease-in-out infinite; }
        .noteplus-sync-dot { animation: syncPulse 3s ease-in-out infinite; }
        .noteplus-caret { animation: noteCaretBlink 0.9s steps(1) infinite; }
        .noteplus-orb {
            position: absolute;
            right: -20px;
            bottom: -20px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%);
            animation: orbDrift 7s ease-in-out infinite;
        }
        .noteplus-sheet { animation: sheetLift 6s ease-in-out infinite; }
        .noteplus-line {
            height: 10px;
            border-radius: 999px;
            background: linear-gradient(90deg, #fcd34d, #fde68a, #fef3c7);
            margin-bottom: 10px;
            background-size: 180% 100%;
            animation: lineFlow 4.2s ease-in-out infinite;
        }
        .noteplus-line-long { width: 100%; }
        .noteplus-line-mid { width: 78%; animation-delay: 0.35s; }
        .noteplus-line-short { width: 54%; animation-delay: 0.7s; }
        .noteplus-tag-card { animation: tagTilt 6.5s ease-in-out infinite; }
        .noteplus-tag {
            display: inline-flex;
            padding: 7px 11px;
            margin: 0 8px 8px 0;
            border-radius: 999px;
            background: #fff7ed;
            color: #c2410c;
            font-size: 0.72rem;
            font-weight: 700;
            animation: chipPop 4.5s ease-in-out infinite;
        }
        .noteplus-tag:nth-child(3) { animation-delay: 0.35s; }
        .noteplus-tag:nth-child(4) { animation-delay: 0.7s; }
        .noteplus-pulse-card { animation: pulseCard 5.8s ease-in-out infinite; }
        .noteplus-wave {
            position: absolute;
            inset: auto -20% -38% auto;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.16);
            animation: focusWave 3.4s ease-out infinite;
        }

        @keyframes noteCardFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-6px); }
        }

        @keyframes syncPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.05); transform: scale(1); }
            50% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.18); transform: scale(1.08); }
        }

        @keyframes noteCaretBlink {
            0%, 50% { opacity: 1; }
            50.01%, 100% { opacity: 0; }
        }

        @keyframes orbDrift {
            0%, 100% { transform: scale(0.9); opacity: 0.55; }
            50% { transform: scale(1.15) translate(-6px, -6px); opacity: 1; }
        }

        @keyframes sheetLift {
            0%, 100% { transform: translateY(0px); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); }
            50% { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12); }
        }

        @keyframes lineFlow {
            0%, 100% { background-position: 0% 50%; opacity: 0.85; }
            50% { background-position: 100% 50%; opacity: 1; }
        }

        @keyframes tagTilt {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(-2deg) translateY(-4px); }
        }

        @keyframes chipPop {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-3px); }
        }

        @keyframes pulseCard {
            0%, 100% { transform: translateY(0px); box-shadow: 0 12px 24px rgba(17, 24, 39, 0.16); }
            50% { transform: translateY(-4px); box-shadow: 0 18px 30px rgba(17, 24, 39, 0.24); }
        }

        @keyframes focusWave {
            0% { transform: scale(0.72); opacity: 0.75; }
            100% { transform: scale(1.4); opacity: 0; }
        }
    </style>
@endsection

@section('app-specs')
    <li><span style="color: #64748b;">Modus</span><strong style="color: #0f172a;">Quick Notes + Boards</strong></li>
    <li><span style="color: #64748b;">Staerke</span><strong style="color: #0f172a;">Fokus ohne Ablenkung</strong></li>
    <li><span style="color: #64748b;">Sync</span><strong style="color: #0f172a;">Schnell zwischen iPhone und Mac</strong></li>
@endsection