<?php
/**
 * Mapa das obras — Fase 2 (mock de pré-visualização).
 * PLACEHOLDER: a caixa tracejada será substituída pelo mapa Leaflet +
 * OpenStreetMap com pins coloridos por status e busca real por bairro.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<!-- ============ MAPA DAS OBRAS (placeholder do Leaflet) ============ -->
<section class="mfm-mapa" id="mapa">
	<div class="mfm-container">
		<header class="mfm-secao-cabecalho">
			<p class="mfm-secao-cabecalho__eyebrow">Mapa das obras</p>
			<h2 class="mfm-secao-cabecalho__titulo">O que estamos fazendo no seu bairro</h2>
			<p class="mfm-secao-cabecalho__sub">Localização de todas as obras em andamento. Busca por bairro, rua ou região.</p>
		</header>

		<!-- PLACEHOLDER: vira o mapa Leaflet/OSM na Fase 2 -->
		<div class="mfm-mapa__caixa">
			<span class="mfm-mapa__pin" aria-hidden="true">📍</span>
			<p class="mfm-mapa__texto">
				Mapa com pins das obras
				<span>em andamento · entregues · planejadas</span>
			</p>
			<div class="mfm-mapa__busca" aria-hidden="true">
				<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14"/></svg>
				Busque pelo nome do seu bairro...
			</div>
		</div>
	</div>
</section>
