<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="theme-color" content="#020617">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <title>Arch Launcher</title>
    <link rel="manifest" href="manifest.json">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        arch: {
                            bg: '#0f172a',
                            fg: '#e2e8f0',
                            primary: '#06b6d4', // cyan-500
                            secondary: '#64748b', // slate-500
                            accent: '#22d3ee', // cyan-400
                            muted: '#334155', // slate-700
                        }
                    },
                    fontFamily: {
                        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'],
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;400;700&display=swap');
    </style>
</head>
<body class="bg-arch-bg text-arch-fg font-mono antialiased overflow-hidden h-screen w-screen selection:bg-arch-primary selection:text-black">
    
    <!-- Top Status Bar -->
    <arch-status-bar></arch-status-bar>

    <!-- Main Content Area -->
    <main id="main-screen" class="h-full w-full flex flex-col relative transition-transform duration-300 ease-out">
        
        <!-- System Info Widget (Neofetch Style) -->
        <section class="px-6 pt-20 pb-4">
            <div class="border-l-2 border-arch-primary pl-4 space-y-1 text-xs sm:text-sm">
                <div class="flex items-center gap-2 text-arch-primary font-bold">
                    <i data-feather="smartphone" class="w-4 h-4"></i>
                    <span>user@s23-ultra</span>
                </div>
                <div class="grid grid-cols-[80px_1fr] gap-x-4 text-arch-secondary">
                    <span class="text-arch-muted">OS:</span>
                    <span>Arch Linux Mobile (Android 14)</span>
                    <span class="text-arch-muted">Host:</span>
                    <span>SM-S918B</span>
                    <span class="text-arch-muted">Kernel:</span>
                    <span>6.1.25-android</span>
                    <span class="text-arch-muted">Uptime:</span>
                    <span id="uptime">3 days, 4 hrs</span>
                    <span class="text-arch-muted">Shell:</span>
                    <span>zsh 5.9</span>
                    <span class="text-arch-muted">Server:</span>
                    <span id="server-status" class="text-arch-accent animate-pulse">● checking...</span>
                </div>
                <div class="pt-2 flex gap-1">
                    <span class="w-3 h-3 rounded-full bg-red-500"></span>
                    <span class="w-3 h-3 rounded-full bg-yellow-500"></span>
                    <span class="w-3 h-3 rounded-full bg-green-500"></span>
                    <span class="w-3 h-3 rounded-full bg-arch-primary"></span>
                    <span class="w-3 h-3 rounded-full bg-blue-500"></span>
                    <span class="w-3 h-3 rounded-full bg-purple-500"></span>
                </div>
            </div>
        </section>

        <!-- Favorites Grid -->
        <section class="flex-1 px-6 py-4">
            <div class="flex items-center gap-2 mb-4 text-xs text-arch-secondary uppercase tracking-widest border-b border-arch-muted pb-2">
                <i data-feather="star" class="w-3 h-3"></i>
                <span>~/favorites</span>
            </div>
            <arch-app-grid id="favorites-grid" class="grid grid-cols-4 gap-4"></arch-app-grid>
        </section>

        <!-- Bottom Dock -->
        <section class="px-6 pb-8 pt-4 bg-gradient-to-t from-arch-bg to-transparent">
            <div class="flex justify-around items-center bg-arch-muted/30 backdrop-blur-md rounded-2xl p-4 border border-arch-muted/50">
                <arch-app-icon name="Phone" icon="phone" package="com.android.dialer"></arch-app-icon>
                <arch-app-icon name="Messages" icon="message-square" package="com.google.android.apps.messaging"></arch-app-icon>
                <arch-app-icon name="Browser" icon="globe" package="org.mozilla.firefox"></arch-app-icon>
                <arch-app-icon name="Camera" icon="camera" package="com.sec.android.app.camera"></arch-app-icon>
            </div>
        </section>

        <!-- Swipe Up Indicator -->
        <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1 opacity-50 animate-bounce">
            <div class="w-12 h-1 bg-arch-muted rounded-full"></div>
            <span class="text-[10px] text-arch-secondary uppercase">App Drawer</span>
        </div>
    </main>

    <!-- App Drawer (Hidden by default) -->
    <arch-app-drawer id="app-drawer" class="fixed inset-0 translate-y-full transition-transform duration-300 ease-out z-50 bg-arch-bg"></arch-app-drawer>

    <!-- Quick Settings / Server Panel -->
    <arch-server-panel id="server-panel" class="fixed inset-0 -translate-x-full transition-transform duration-300 ease-out z-50 bg-arch-bg/95 backdrop-blur-xl"></arch-server-panel>

    <!-- Scripts -->
    <script src="components/arch-status-bar.js"></script>
    <script src="components/arch-app-icon.js"></script>
    <script src="components/arch-app-grid.js"></script>
    <script src="components/arch-app-drawer.js"></script>
    <script src="components/arch-server-panel.js"></script>
    <script src="script.js"></script>
    <script>feather.replace();</script>
</body>
</html>