@extends('apple.apple_layout')

@section('app-name', 'MVK TEAMS')
@section('app-desc', 'Team Workspace. Aufgaben, Einsatzstatus und Kommunikation in einer kompakten Teamzentrale mit schnellem Live-Status.')
@section('app-category', 'iOS App')
@section('app-icon', 'fas fa-people-group')
@section('theme-color', '#2563eb')
@section('bg-color', '#eff6ff')

@section('app-ui')
    <div class="mvk-shell" style="height: 100%; width: 100%; display: flex; flex-direction: column; background: #eff6ff; font-family: -apple-system, BlinkMacSystemFont, sans-serif; position: relative;">
        <div style="padding: 52px 20px 12px; display: flex; justify-content: space-between; align-items: center;">
            <div>
                <span style="font-size: 0.72rem; color: #2563eb; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;">Team Workspace</span>
                <h2 style="font-size: 1.85rem; font-weight: 900; color: #111827; letter-spacing: -1px; margin-top: 4px;">MVK TEAMS</h2>
            </div>
            <div class="mvk-status-lamp" style="width: 13px; height: 13px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 rgba(34, 197, 94, 0.2);"></div>
        </div>

        <div style="padding: 0 20px 14px;">
            <div class="mvk-command-card" style="background: linear-gradient(145deg, #1d4ed8, #2563eb); border-radius: 28px; padding: 22px; color: white; position: relative; overflow: hidden;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <span style="font-size: 0.74rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.84;">Operations Board</span>
                    <span style="font-size: 0.74rem; font-weight: 800; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,0.14);">Live</span>
                </div>
                <h3 style="font-size: 1.48rem; font-weight: 900; line-height: 1.12; margin-bottom: 10px;">Heute 4 aktive Teams<br>2 Prioritaeten offen</h3>
                <span style="font-size: 0.84rem; opacity: 0.86;">Status, Zuweisung und Board-Update in Echtzeit</span>
                <div class="mvk-radar"></div>
            </div>
        </div>

        <div style="padding: 0 20px; display: grid; gap: 14px;">
            <div class="mvk-board-card" style="background: white; border-radius: 24px; 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;">Boards</strong>
                    <span style="font-size: 0.72rem; color: #2563eb; font-weight: 800;">Realtime</span>
                </div>
                <div class="mvk-board-grid">
                    <div class="mvk-column">
                        <span>Neu</span>
                        <div class="mvk-ticket mvk-ticket-blue"></div>
                        <div class="mvk-ticket mvk-ticket-light"></div>
                    </div>
                    <div class="mvk-column">
                        <span>Aktiv</span>
                        <div class="mvk-ticket mvk-ticket-green"></div>
                        <div class="mvk-ticket mvk-ticket-blue"></div>
                    </div>
                    <div class="mvk-column">
                        <span>Done</span>
                        <div class="mvk-ticket mvk-ticket-slate"></div>
                    </div>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px;">
                <div class="mvk-mini-card" style="background: white; border-radius: 20px; padding: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);">
                    <div style="font-size: 0.72rem; color: #6b7280; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;">Members</div>
                    <div class="mvk-members">
                        <span>AM</span><span>LK</span><span>JR</span><span>+4</span>
                    </div>
                </div>
                <div class="mvk-mini-card" style="background: #111827; color: white; border-radius: 20px; padding: 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16); animation-delay: 0.45s;">
                    <div style="font-size: 0.72rem; opacity: 0.72; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;">Sync</div>
                    <strong style="display: block; font-size: 1.45rem;">98%</strong>
                    <span style="font-size: 0.82rem; opacity: 0.82;">Board aktuell</span>
                </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.22); display: flex; justify-content: space-around; padding: 15px 20px 24px;">
            <div style="text-align: center; color: #2563eb;"><i class="fas fa-people-group" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 700;">Teams</span></div>
            <div style="text-align: center; color: #9ca3af;"><i class="fas fa-table-columns" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Board</span></div>
            <div style="text-align: center; color: #9ca3af;"><i class="fas fa-comments" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Chat</span></div>
            <div style="text-align: center; color: #9ca3af;"><i class="fas fa-bell" style="font-size: 1.15rem; display: block; margin-bottom: 5px;"></i><span style="font-size: 0.65rem; font-weight: 600;">Alerts</span></div>
        </div>
    </div>

    <style>
        .mvk-shell::before {
            content: "";
            position: absolute;
            top: 110px;
            left: -26px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, rgba(37, 99, 235, 0) 70%);
            animation: boardGlow 6s ease-in-out infinite;
            pointer-events: none;
        }
        .mvk-status-lamp { animation: liveLamp 2.8s ease-in-out infinite; }
        .mvk-command-card { animation: commandLift 5.4s ease-in-out infinite; }
        .mvk-radar {
            position: absolute;
            right: -10px;
            bottom: -14px;
            width: 108px;
            height: 108px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.16);
            animation: radarSweep 3.8s linear infinite;
        }
        .mvk-radar::after {
            content: "";
            position: absolute;
            inset: 10px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.14);
        }
        .mvk-board-card { animation: boardLift 5.8s ease-in-out infinite; }
        .mvk-board-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .mvk-column {
            background: #f8fafc;
            border-radius: 18px;
            padding: 12px;
        }
        .mvk-column span {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            color: #64748b;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .mvk-ticket {
            height: 12px;
            border-radius: 999px;
            margin-bottom: 8px;
            animation: ticketPulse 3.6s ease-in-out infinite;
        }
        .mvk-ticket-light { width: 68%; background: #bfdbfe; animation-delay: 0.2s; }
        .mvk-ticket-blue { width: 92%; background: #60a5fa; }
        .mvk-ticket-green { width: 84%; background: #4ade80; animation-delay: 0.4s; }
        .mvk-ticket-slate { width: 72%; background: #cbd5e1; animation-delay: 0.6s; }
        .mvk-mini-card { animation: miniCardDrift 5.2s ease-in-out infinite; }
        .mvk-members {
            display: flex;
            align-items: center;
            gap: 0;
            margin-top: 6px;
        }
        .mvk-members span {
            width: 36px;
            height: 36px;
            margin-right: -8px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #dbeafe;
            color: #1d4ed8;
            border: 2px solid #ffffff;
            font-size: 0.74rem;
            font-weight: 800;
            animation: memberBounce 4.4s ease-in-out infinite;
        }
        .mvk-members span:nth-child(2) { animation-delay: 0.2s; }
        .mvk-members span:nth-child(3) { animation-delay: 0.4s; }
        .mvk-members span:nth-child(4) { animation-delay: 0.6s; background: #111827; color: white; }

        @keyframes boardGlow {
            0%, 100% { transform: scale(0.88); opacity: 0.48; }
            50% { transform: scale(1.18) translate(10px, 10px); opacity: 0.92; }
        }

        @keyframes liveLamp {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.12); }
            50% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.18); }
        }

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

        @keyframes radarSweep {
            0% { transform: rotate(0deg); opacity: 0.42; }
            50% { opacity: 0.9; }
            100% { transform: rotate(360deg); opacity: 0.42; }
        }

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

        @keyframes ticketPulse {
            0%, 100% { transform: scaleX(0.85); opacity: 0.72; }
            50% { transform: scaleX(1); opacity: 1; }
        }

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

        @keyframes memberBounce {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-3px); }
        }
    </style>
@endsection

@section('app-specs')
    <li><span style="color: #64748b;">Bereich</span><strong style="color: #0f172a;">Teams, Board, Alerts</strong></li>
    <li><span style="color: #64748b;">Workflow</span><strong style="color: #0f172a;">Status und Aufgaben live</strong></li>
    <li><span style="color: #64748b;">Staerke</span><strong style="color: #0f172a;">Schneller Einsatz fuer kleine Teams</strong></li>
@endsection