static/busca.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscar imóveis — Sahkey Imóveis</title>
<meta name="description" content="Busque casas, apartamentos e terrenos à venda e locação no litoral do Paraná com filtros por cidade, bairro, preço e mais.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>

<header class="site-header">
  <nav class="nav">
    <a class="brand" href="index.html">Sahkey <small>Imóveis</small></a>
    <button class="nav-toggle" aria-label="Abrir menu">☰</button>
    <ul class="nav-links">
      <li><a href="index.html">Início</a></li>
      <li><a href="busca.html">Comprar &amp; Alugar</a></li>
      <li><a href="servicos.html">Serviços</a></li>
      <li><a href="sobre.html">Sobre</a></li>
      <li><a href="contato.html">Contato</a></li>
    </ul>
    <a class="nav-cta" href="contato.html">Falar com um corretor</a>
  </nav>
</header>

<section class="page-hero">
  <div class="container">
    <span class="eyebrow">Busca exploratória</span>
    <h1>Encontre o imóvel certo no litoral</h1>
    <p>Refine por cidade, bairro, preço e características — os números ao lado de cada filtro mostram quantos imóveis restam a cada escolha.</p>

    <div class="field" style="max-width:520px;margin-top:18px">
      <input type="search" id="f-busca" placeholder="Buscar por título, bairro ou endereço…">
    </div>
  </div>
</section>

<section class="container" style="padding-top:36px">
  <div class="search-layout">

    <aside class="filters-panel" id="filters-panel">
      <h3>Filtros</h3>
      <span class="filters-count" id="filters-total">carregando opções…</span>

      <div class="filter-group">
        <h4>Negócio</h4>
        <ul class="facet-list" id="facet-negocio"></ul>
      </div>

      <div class="filter-group">
        <h4>Cidade</h4>
        <ul class="facet-list" id="facet-cidade"></ul>
      </div>

      <div class="filter-group">
        <h4>Bairro</h4>
        <ul class="facet-list" id="facet-bairro"></ul>
      </div>

      <div class="filter-group">
        <h4>Tipo de imóvel</h4>
        <ul class="facet-list" id="facet-tipo"></ul>
      </div>

      <div class="filter-group">
        <h4>Faixa de preço (R$)</h4>
        <div class="range-row">
          <input type="number" id="f-preco-min" placeholder="mín.">
          <span class="muted">—</span>
          <input type="number" id="f-preco-max" placeholder="máx.">
        </div>
      </div>

      <div class="filter-group">
        <h4>Quartos (mínimo)</h4>
        <ul class="facet-list" id="facet-quartos"></ul>
      </div>

      <div class="filter-group">
        <h4>Status</h4>
        <ul class="facet-list" id="facet-status"></ul>
      </div>

      <label style="display:flex;align-items:center;gap:8px;font-size:.86rem;margin-bottom:16px">
        <input type="checkbox" id="f-destaque"> Somente destaques
      </label>

      <button class="btn btn-outline btn-block" id="btn-limpar">Limpar filtros</button>
    </aside>

    <main>
      <div class="chips" id="chips-ativos"></div>
      <div class="results-toolbar">
        <span class="results-count" id="results-count">Carregando resultados…</span>
        <div class="field" style="min-width:210px">
          <select id="f-ordenar">
            <option value="mais_recentes">Mais recentes</option>
            <option value="preco_asc">Menor preço</option>
            <option value="preco_desc">Maior preço</option>
            <option value="area_asc">Menor área</option>
            <option value="area_desc">Maior área</option>
          </select>
        </div>
      </div>

      <div class="grid-cards" id="results-grid"></div>
      <div class="pagination" id="pagination"></div>
    </main>
  </div>
</section>

<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div>
        <div class="footer-brand">Sahkey Imóveis</div>
        <p class="muted" style="font-size:.86rem">Venda, locação e gestão de negócios imobiliários no litoral do Paraná.</p>
      </div>
      <div>
        <h4>Navegação</h4>
        <ul>
          <li><a href="busca.html">Comprar &amp; Alugar</a></li>
          <li><a href="servicos.html">Serviços</a></li>
          <li><a href="sobre.html">Sobre a Sahkey</a></li>
          <li><a href="contato.html">Contato</a></li>
        </ul>
      </div>
      <div>
        <h4>Cidades</h4>
        <ul>
          <li><a href="busca.html?cidade=Matinhos">Matinhos</a></li>
          <li><a href="busca.html?cidade=Guaratuba">Guaratuba</a></li>
          <li><a href="busca.html?cidade=Pontal do Paraná">Pontal do Paraná</a></li>
        </ul>
      </div>
      <div>
        <h4>Contato</h4>
        <ul>
          <li>Av. Beira Mar, 1120 — Caiobá, Matinhos/PR</li>
          <li>(41) 99811-2201</li>
          <li>contato@sahkeyimoveis.com.br</li>
          <li><a href="admin.html">Área do corretor →</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© <span data-year></span> Sahkey Imóveis · CRECI-PR 00000-J (demo)</span>
      <span>Site demonstrativo — dados fictícios</span>
    </div>
  </div>
</footer>

<script src="/js/api.js"></script>
<script src="/js/main.js"></script>
<script src="/js/busca.js"></script>
</body>
</html>