<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title><?= e(APP_NAME) ?> App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#1351b4">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Prefeitura Resolve">
    <link rel="manifest" href="<?= asset_url('/manifest.json') ?>">
    <link rel="apple-touch-icon" href="<?= asset_url('/assets/img/icon-192.png') ?>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@600;700;800&family=Rawline:wght@400;500;600;700&display=swap">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <link rel="stylesheet" href="<?= asset_url('/assets/css/style.css') ?>">
    <link rel="stylesheet" href="<?= asset_url('/assets/css/public.css') ?>">
    <link rel="stylesheet" href="<?= asset_url('/assets/css/app.css') ?>">
</head>
<body class="public-body app-mode-body">
    <div class="app-phone-shell">
        <header class="app-topbar">
            <div class="app-topbar-row">
                <div>
                    <div class="app-eyebrow">APP DO CIDADÃO</div>
                    <strong>Prefeitura Resolve</strong>
                </div>
                <a class="app-admin-link" href="<?= base_url('/login') ?>">Admin</a>
            </div>
            <div class="app-welcome-card compact">
                <div>
                    <small>Atendimento urbano</small>
                    <h1>Registre e acompanhe ocorrências pela cidade</h1>
                </div>
            </div>
        </header>

        <main class="app-screen-content">
            <?php require $viewFile; ?>
        </main>

        <nav class="app-tabbar" aria-label="Navegação do aplicativo">
            <a href="<?= base_url('/app') ?>" class="<?= (isset($_GET['route']) && $_GET['route'] === '/app') || (!isset($_GET['route']) && strpos($_SERVER['REQUEST_URI'], '/app') !== false && strpos($_SERVER['REQUEST_URI'], 'consultar') === false && strpos($_SERVER['REQUEST_URI'], 'registrar') === false) ? 'active' : '' ?>">
                <span>🏠</span>
                <small>Início</small>
            </a>
            <a href="<?= base_url('/app/registrar') ?>" class="<?= strpos((string)($_GET['route'] ?? ''), '/app/registrar') === 0 ? 'active' : '' ?>">
                <span>📍</span>
                <small>Novo</small>
            </a>
            <a href="<?= base_url('/app/consultar') ?>" class="<?= strpos((string)($_GET['route'] ?? ''), '/app/consultar') === 0 ? 'active' : '' ?>">
                <span>🔎</span>
                <small>Consultar</small>
            </a>
        </nav>
    </div>

    <script>
        window.PREFEITURA_RESOLVE = {
            baseUrl: <?= json_encode(app_base_path()) ?>,
            homeUrl: <?= json_encode(base_url('/app')) ?>,
            registerUrl: <?= json_encode(base_url('/app/registrar')) ?>,
            manifestUrl: <?= json_encode(asset_url('/manifest.json')) ?>
        };
    </script>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="<?= asset_url('/assets/js/mapa.js') ?>?v=141"></script>
</body>
</html>
