<?php
if (count(get_included_files()) === 1) { http_response_code(403); exit('Forbidden'); }
// Variables esperadas: $negocios, $ciudades, $ciudadNombre, $ciudadSlug,
//   $rubroSlug, $q, $page_title, $meta_desc, $canonical, $baseUrl,
//   $pais, $paisSlug, $paisNombre, $dirBase

$rubroLabels  = DirectorioService::RUBRO_LABELS;
$rubroIconos  = DirectorioService::RUBRO_ICONS;
$activeRubro  = $rubroSlug  ?? '';
$activeCiudad = $ciudadNombre ?? '';
$dirBase      = $dirBase ?? '/ni'; // fallback

$paisesNav = ['ni' => 'Nicaragua', 'hn' => 'Honduras', 'sv' => 'El Salvador', 'us' => 'EE.UU.'];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($page_title) ?></title>
<meta name="description" content="<?= htmlspecialchars($meta_desc) ?>">
<link rel="canonical" href="<?= htmlspecialchars($canonical) ?>">
<meta property="og:title" content="<?= htmlspecialchars($page_title) ?>">
<meta property="og:description" content="<?= htmlspecialchars($meta_desc) ?>">
<meta property="og:type" content="website">
<link rel="sitemap" type="application/xml" href="/sitemap.xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
  --barro:#A8331A;--barro-h:#8F2712;--oro:#E0A33E;
  --tinta:#221C18;--tierra:#241E1A;--crema:#FBF6EE;
  --verde:#1E7A4D;--muted:#665D55;--border:#E8DFD3;
  --card:#fff;--shadow:0 4px 20px rgba(34,28,24,.06);
  --ff:'Hanken Grotesk',sans-serif;--ffd:'Fraunces',serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff);background:var(--crema);color:var(--tinta);-webkit-font-smoothing:antialiased}
a{color:var(--barro);text-decoration:none}
a:hover{color:var(--barro-h)}

/* NAV */
.dir-nav{
  background:#fff;border-bottom:1px solid var(--border);
  padding:.85rem 1.25rem;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:30;
}
.dir-nav .logo{display:flex;align-items:center;gap:8px}
.dir-nav .logo img{height:26px;width:auto}
.dir-nav .sep{color:var(--border);font-size:1.1rem}
.dir-nav .ttl{font-size:.85rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.dir-nav .sp{flex:1}
.dir-nav a.back{font-size:.82rem;color:var(--muted);font-weight:600}

/* HERO DEL DIRECTORIO */
.dir-hero{
  background:var(--tierra);padding:2.5rem 1.25rem 2rem;
  text-align:center;
}
.dir-hero h1{
  font-family:var(--ffd);font-weight:600;
  font-size:clamp(1.6rem,5vw,2.4rem);color:#FBF6EE;
  letter-spacing:-.5px;line-height:1.1;margin-bottom:.5rem;
}
.dir-hero h1 em{font-style:italic;color:var(--oro)}
.dir-hero p{font-size:.9rem;color:rgba(251,246,238,.55);margin-bottom:1.5rem}

/* BUSCADOR */
.search-wrap{max-width:520px;margin:0 auto;position:relative}
.search-wrap input{
  width:100%;padding:.85rem 1rem .85rem 2.85rem;
  border:1.5px solid rgba(224,163,62,.3);border-radius:12px;
  background:rgba(255,255,255,.07);color:#FBF6EE;
  font-family:var(--ff);font-size:.95rem;outline:none;transition:.2s;
}
.search-wrap input::placeholder{color:rgba(251,246,238,.35)}
.search-wrap input:focus{border-color:rgba(224,163,62,.6);background:rgba(255,255,255,.1)}
.search-wrap .ico{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  pointer-events:none;color:rgba(251,246,238,.4);
}
.search-wrap button{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);
  background:var(--barro);color:#fff;border:none;border-radius:8px;
  padding:.5rem .9rem;font-family:var(--ff);font-size:.82rem;font-weight:700;cursor:pointer;
}

/* FILTROS */
.dir-body{max-width:960px;margin:0 auto;padding:1.5rem 1.25rem 3rem}

.filter-row{
  display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
  margin-bottom:1.25rem;
}
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1.5px solid var(--border);border-radius:99px;
  padding:.4rem .85rem;font-size:.8rem;font-weight:600;color:var(--muted);
  text-decoration:none;transition:.15s;
}
.filter-chip:hover{border-color:var(--barro);color:var(--barro)}
.filter-chip.active{background:var(--barro);border-color:var(--barro);color:#fff}
.filter-chip svg{flex:0 0 auto}

/* BREAD */
.breadcrumb{
  font-size:.78rem;color:var(--muted);margin-bottom:1rem;
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.breadcrumb a{color:var(--muted);font-weight:600}
.breadcrumb a:hover{color:var(--barro)}
.breadcrumb span{color:var(--border)}

/* SECCIÓN DE CIUDADES (índice) */
.ciudades-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.75rem;margin-bottom:2rem;
}
.ciudad-card{
  background:#fff;border:1.5px solid var(--border);border-radius:14px;
  padding:1rem;text-align:center;text-decoration:none;
  box-shadow:var(--shadow);transition:.18s;display:block;
}
.ciudad-card:hover{border-color:var(--barro);transform:translateY(-2px)}
.ciudad-card .cn{font-weight:700;font-size:.95rem;color:var(--tinta)}
.ciudad-card .cc{font-size:.75rem;color:var(--muted);margin-top:3px}

/* GRID DE TARJETAS */
.section-title{
  font-family:var(--ffd);font-size:1.15rem;font-weight:600;
  color:var(--tierra);margin-bottom:1rem;
}
.section-title span{font-size:.8rem;font-weight:400;color:var(--muted);margin-left:.5rem}

/* GRID + CARD (v2 — banner) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.card{
  background:var(--card);border:.5px solid var(--border);border-radius:var(--r,14px);
  text-decoration:none;color:inherit;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
  opacity:0;transform:translateY(10px);animation:rise .5s ease forwards;
}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(33,28,22,.09)}

/* banner: imagen real o gradiente fallback */
.banner{height:128px;position:relative;background-size:cover;background-position:center}
.banner-fallback{background:linear-gradient(135deg,#ECDDCB 0%,#E0CDB3 100%)}

.status{
  position:absolute;top:12px;right:12px;
  font-size:11px;border-radius:999px;padding:4px 11px;
  backdrop-filter:saturate(1.2);font-weight:500;
}
.status.open{color:var(--verde);background:rgba(228,240,232,.92)}
.status.closed{color:#5F5A50;background:rgba(246,240,230,.9)}

.avatar{
  position:absolute;left:18px;bottom:-22px;
  width:48px;height:48px;border-radius:13px;
  background:#F0E4D6;border:3px solid var(--card);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ffd);font-size:22px;color:var(--barro);
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}

.body-wrap{padding:32px 18px 18px;display:flex;flex-direction:column;flex:1}
.name{font-size:16px;font-weight:500;line-height:1.25;margin:0;color:var(--tinta)}
.meta{font-size:13px;color:var(--muted);margin:4px 0 0}
.desc{
  border-top:.5px solid var(--border);margin-top:14px;padding-top:12px;
  font-size:13.5px;color:var(--muted);line-height:1.5;flex:1;
}
.cta{margin-top:14px;font-size:14px;color:var(--barro);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.card:hover .cta{gap:10px}
.arr{transition:transform .18s}
.card:hover .arr{transform:translateX(4px)}

/* EMPTY STATE */
.empty{display:none;text-align:center;padding:3rem 1rem;color:var(--muted);font-size:.9rem}

/* COUNTRY SWITCHER (nav) */
.country-sw{display:flex;gap:.3rem;align-items:center}
.cs-tab{
  padding:.28rem .55rem;border-radius:6px;font-size:.72rem;font-weight:700;
  border:1.5px solid var(--border);color:var(--muted);text-decoration:none;
  transition:.15s;letter-spacing:.04em;line-height:1;
}
.cs-tab:hover{border-color:var(--barro);color:var(--barro)}
.cs-tab.active{background:var(--barro);border-color:var(--barro);color:#fff}
@media(max-width:520px){.country-sw{gap:.2rem}.cs-tab{padding:.25rem .45rem;font-size:.68rem}}

/* FOOTER */
.dir-foot{
  background:var(--tierra);padding:1.75rem 1.25rem;margin-top:40px;
  text-align:center;font-size:.8rem;color:rgba(251,246,238,.35);
}
.dir-foot .mark{
  font-family:var(--ffd);color:rgba(251,246,238,.35);font-size:18px;
  display:block;margin-bottom:8px;
}
</style>
</head>
<body>

<!-- NAV -->
<nav class="dir-nav">
  <div class="logo">
    <img src="/img/logo.png" alt="Vale">
  </div>
  <span class="sep">/</span>
  <span class="ttl">Directorio</span>
  <div class="sp"></div>
  <div class="country-sw">
    <?php foreach ($paisesNav as $s => $n): ?>
    <a href="/<?= $s ?>" class="cs-tab <?= ($paisSlug ?? '') === $s ? 'active' : '' ?>" title="<?= htmlspecialchars($n) ?>"><?= strtoupper($s) ?></a>
    <?php endforeach; ?>
  </div>
  <a href="/" class="back" style="margin-left:.5rem">← Inicio</a>
</nav>

<!-- HERO -->
<div class="dir-hero">
  <?php if ($activeCiudad && $activeRubro): ?>
    <h1><?= htmlspecialchars(DirectorioService::RUBRO_LABELS[$activeRubro]) ?><br><em>en <?= htmlspecialchars($activeCiudad) ?></em></h1>
    <p><?= htmlspecialchars($paisNombre) ?> · Negocios que atienden por WhatsApp con Vale AI</p>
  <?php elseif ($activeCiudad): ?>
    <h1>Negocios en<br><em><?= htmlspecialchars($activeCiudad) ?></em></h1>
    <p><?= htmlspecialchars($paisNombre) ?> · Reservá por WhatsApp con cualquiera de estos negocios</p>
  <?php else: ?>
    <h1>Negocios en<br><em><?= htmlspecialchars($paisNombre) ?></em></h1>
    <p>Todos usan Vale AI — reservá por WhatsApp, cualquier hora</p>
  <?php endif; ?>

  <?php
  $searchAction = $dirBase . ($ciudadSlug ? "/$ciudadSlug" : '') . ($rubroSlug ? "/$rubroSlug" : '');
  ?>
  <form method="GET" action="<?= htmlspecialchars($searchAction) ?>" class="search-wrap">
    <svg class="ico" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
    <input type="text" name="q" placeholder="Buscar por nombre, ciudad o servicio…" value="<?= htmlspecialchars($q) ?>">
    <button type="submit">Buscar</button>
  </form>
</div>

<!-- CUERPO -->
<div class="dir-body">

  <!-- BREADCRUMB -->
  <div class="breadcrumb">
    <a href="<?= htmlspecialchars($dirBase) ?>"><?= htmlspecialchars($paisNombre) ?></a>
    <?php if ($activeCiudad): ?>
      <span>›</span>
      <a href="<?= htmlspecialchars("$dirBase/$ciudadSlug") ?>"><?= htmlspecialchars($activeCiudad) ?></a>
    <?php endif; ?>
    <?php if ($activeRubro): ?>
      <span>›</span>
      <span><?= htmlspecialchars(DirectorioService::RUBRO_LABELS[$activeRubro]) ?></span>
    <?php endif; ?>
  </div>

  <!-- FILTROS DE RUBRO -->
  <?php if ($activeCiudad || $q || !empty($negocios)): ?>
  <div class="filter-row">
    <a href="<?= htmlspecialchars($dirBase . ($ciudadSlug ? "/$ciudadSlug" : '') . ($q ? '?q='.urlencode($q) : '')) ?>"
       class="filter-chip <?= !$activeRubro ? 'active' : '' ?>" data-rubro="">Todos</a>
    <?php foreach ($rubroLabels as $key => $lbl): ?>
      <a href="<?= htmlspecialchars($ciudadSlug ? "$dirBase/$ciudadSlug/$key" : "$dirBase?q=".urlencode($q ?? '')."&rubro=$key") ?>"
         class="filter-chip <?= $activeRubro === $key ? 'active' : '' ?>" data-rubro="<?= htmlspecialchars($key) ?>">
        <?= htmlspecialchars($lbl) ?>
      </a>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>

  <?php if (!$activeCiudad && !$q && empty($negocios)): ?>
    <!-- Todavía sin negocios: mostrar ciudades si hay, o empty state -->
    <div class="empty">
      <svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
      <p>El directorio se va llenando a medida que los negocios se suman a Vale.<br>Volvé pronto.</p>
    </div>

  <?php elseif (!$activeCiudad && !$q && !empty($ciudades)): ?>
    <!-- Índice de ciudades -->
    <div class="section-title">Ciudades <span><?= count($ciudades) ?> ciudades</span></div>
    <div class="ciudades-grid">
      <?php foreach ($ciudades as $c => $cnt): ?>
        <a href="<?= htmlspecialchars("$dirBase/" . DirectorioService::slugify($c)) ?>" class="ciudad-card">
          <div class="cn"><?= htmlspecialchars($c) ?></div>
          <div class="cc"><?= $cnt ?> <?= $cnt === 1 ? 'negocio' : 'negocios' ?></div>
        </a>
      <?php endforeach; ?>
    </div>
    <!-- También mostramos todos los negocios abajo -->
    <div class="section-title" style="margin-top:1.5rem">Todos los negocios <span><?= count($negocios) ?></span></div>
    <?php include __DIR__ . '/cards.php'; ?>

  <?php else: ?>
    <!-- Vista filtrada / resultado de búsqueda -->
    <div class="section-title">
      <?= $q ? 'Resultados para "'.htmlspecialchars($q).'"' : 'Negocios' ?>
      <span><?= count($negocios) ?> encontrados</span>
    </div>
    <?php if (empty($negocios)): ?>
      <div class="empty">
        <p>No encontramos negocios con esos filtros todavía.<br>Probá con otro término o explorá otra ciudad.</p>
      </div>
    <?php else: ?>
      <?php include __DIR__ . '/cards.php'; ?>
    <?php endif; ?>

  <?php endif; ?>

</div><!-- /dir-body -->

<!-- FOOTER -->
<footer class="dir-foot">
  <span class="mark">vale</span>
  Directorio de negocios en <?= htmlspecialchars($paisNombre) ?> · Atendido por Vale AI · <?= date('Y') ?>
  <div style="margin-top:.5rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;">
    <?php foreach ($paisesNav as $s => $n): ?>
    <a href="/<?= $s ?>" style="color:<?= ($paisSlug ?? '') === $s ? 'rgba(251,246,238,.75)' : 'rgba(251,246,238,.4)' ?>;font-size:.75rem;font-weight:600;text-decoration:none;"><?= htmlspecialchars($n) ?></a>
    <?php endforeach; ?>
  </div>
</footer>

<script>
(function(){
  var cards = Array.from(document.querySelectorAll('.card'));
  var empty = document.getElementById('empty');
  var count = document.querySelector('.lead span');
  document.querySelectorAll('.filter-chip[data-rubro]').forEach(function(chip){
    chip.addEventListener('click', function(e){
      e.preventDefault();
      var f = chip.dataset.rubro;
      document.querySelectorAll('.filter-chip').forEach(function(c){ c.classList.remove('active'); });
      chip.classList.add('active');
      var n = 0;
      cards.forEach(function(c){
        var ok = !f || c.dataset.rubro === f;
        c.style.display = ok ? 'flex' : 'none';
        if (ok) n++;
      });
      if (count) count.textContent = n + (n === 1 ? ' encontrado' : ' encontrados');
      if (empty) empty.style.display = n === 0 ? 'block' : 'none';
    });
  });
})();
</script>
</body>
</html>
