<?php
$iconMap = [
    'BURACO' => '🕳️',
    'ILUMINA' => '💡',
    'MATO' => '🌿',
    'ENTULHO' => '🗑️',
    'BUEIRO' => '🌀',
    'VAZAMENTO' => '💧',
    'SINALIZA' => '🚧',
    'CALÇADA' => '🚶',
    'ARVORE' => '🌳',
    'ÁRVORE' => '🌳',
    'OUTROS' => '📌',
];
?>

<section class="app-home-intro">
    <div>
        <span class="app-home-kicker">Registro rápido</span>
        <h2>Qual ocorrência deseja informar?</h2>
        <p>Escolha uma opção abaixo, marque o local no mapa e envie para a prefeitura.</p>
    </div>
    <a class="app-secondary-action" href="<?= base_url('/app/consultar') ?>">Consultar protocolo</a>
</section>

<section class="app-category-grid">
    <?php foreach ($categorias as $categoria): ?>
        <?php
            $nome = strtoupper($categoria['nome']);
            $icone = '📌';
            foreach ($iconMap as $trecho => $emoji) {
                if (strpos($nome, $trecho) !== false) {
                    $icone = $emoji;
                    break;
                }
            }
            $cor = !empty($categoria['cor']) ? $categoria['cor'] : '#1351b4';
        ?>
        <a class="app-category-card" href="<?= base_url('/app/registrar?categoria_id=' . (int)$categoria['id']) ?>">
            <span class="app-category-icon" style="background: <?= e($cor) ?>;"><?= $icone ?></span>
            <strong><?= e($categoria['nome']) ?></strong>
            <small>Registrar ocorrência</small>
        </a>
    <?php endforeach; ?>
</section>

<section class="app-shortcuts-row">
    <a class="app-shortcut-card" href="<?= base_url('/app/registrar') ?>">
        <span>📍</span>
        <div>
            <strong>Abrir no mapa</strong>
            <small>Escolha qualquer categoria</small>
        </div>
    </a>
    <a class="app-shortcut-card" href="<?= base_url('/app/consultar') ?>">
        <span>🔎</span>
        <div>
            <strong>Consultar protocolo</strong>
            <small>Acompanhe o andamento</small>
        </div>
    </a>
</section>
