<section class="mobile-home-hero">
    <span class="badge">Novo app da cidade</span>
    <h2>Informar problema ficou mais fácil</h2>
    <p>Escolha o tipo de ocorrência abaixo, marque o ponto no mapa e envie em poucos toques.</p>
    <div class="mobile-install-hint">📲 Abra em tela cheia depois de instalar</div>
</section>

<section class="category-grid">
    <a href="<?= base_url('/registrar?cat=1') ?>" class="category-card" style="--accent:#d62828;">
        <div class="category-icon">🕳️</div>
        <div>
            <h3>Buraco na via</h3>
            <p>Asfalto danificado, afundamento ou remendo rompido.</p>
        </div>
    </a>
    <a href="<?= base_url('/registrar?cat=2') ?>" class="category-card" style="--accent:#f4b400;">
        <div class="category-icon">💡</div>
        <div>
            <h3>Iluminação</h3>
            <p>Lâmpada apagada, poste escuro ou luminária com defeito.</p>
        </div>
    </a>
    <a href="<?= base_url('/registrar?cat=3') ?>" class="category-card" style="--accent:#6c757d;">
        <div class="category-icon">♻️</div>
        <div>
            <h3>Entulho</h3>
            <p>Resíduo em via pública, descarte irregular ou acúmulo.</p>
        </div>
    </a>
    <a href="<?= base_url('/registrar?cat=4') ?>" class="category-card" style="--accent:#2e7d32;">
        <div class="category-icon">🌿</div>
        <div>
            <h3>Mato alto</h3>
            <p>Vegetação precisando de roçada ou limpeza.</p>
        </div>
    </a>
    <a href="<?= base_url('/registrar?cat=5') ?>" class="category-card" style="--accent:#1565c0;">
        <div class="category-icon">💧</div>
        <div>
            <h3>Bueiro</h3>
            <p>Bueiro entupido, alagamento ou tampa danificada.</p>
        </div>
    </a>
    <a href="<?= base_url('/registrar?cat=6') ?>" class="category-card" style="--accent:#6f42c1;">
        <div class="category-icon">📌</div>
        <div>
            <h3>Outros</h3>
            <p>Demais demandas urbanas da cidade.</p>
        </div>
    </a>
</section>

<section class="mobile-quick-actions">
    <a href="<?= base_url('/consultar') ?>" class="mobile-action-card">
        <div>
            <strong>Consultar protocolo</strong>
            <small>Acompanhe o andamento com o número do registro.</small>
        </div>
        <div class="mobile-action-icon">🔎</div>
    </a>
    <a href="#" class="mobile-action-card" data-open-install>
        <div>
            <strong>Instalar no celular</strong>
            <small>Abra em tela cheia e com ícone na tela inicial.</small>
        </div>
        <div class="mobile-action-icon">⬇️</div>
    </a>
</section>
