← back to Costa Rica
public/search.html
205 lines
<!doctype html>
<html lang="en" data-theme="light">
<head>
<script>
// Credential-safe fetch guard (fleet drop-in) — if this page is opened with
// credentials in the URL (a saved bookmark / Chrome-remembered basic-auth:
// https://user:pass@host/…), the browser poisons document.baseURI, so any
// relative or root-relative fetch('/api/…') throws "Request cannot be constructed
// from a URL that includes credentials" and callers silently fall to an empty
// state. Resolve every non-absolute request URL against the credential-free
// location instead of baseURI. Placed first so it wraps window.fetch before any
// app script runs. Ref: creds-in-url-fetch-guard-fleet-pattern.
(function () {
var _fetch = window.fetch.bind(window);
var cleanBase = function () { return location.origin + location.pathname; };
window.fetch = function (input, init) {
try {
if (typeof input === 'string' && !/^[a-z]+:\/\//i.test(input) && input.indexOf('//') !== 0) {
input = new URL(input, cleanBase()).href;
} else if (input instanceof Request && !/^[a-z]+:\/\//i.test(input.url)) {
input = new Request(new URL(input.url, cleanBase()).href, input);
}
} catch (_) { /* fall through to native */ }
return _fetch(input, init);
};
})();
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Search — Costa Rica Directory</title>
<meta name="description" content="Search 25,000+ Costa Rica businesses by name, address, region, or province." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Search the Costa Rica Directory" />
<meta property="og:description" content="25,000+ businesses across all 7 provinces. Find tourism, rentals, food, retail, services." />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[
{"@type":"ListItem","position":1,"name":"Home","item":"https://costarica.agentabrams.com/"},
{"@type":"ListItem","position":2,"name":"Search","item":"https://costarica.agentabrams.com/search"}
]}
</script>
<script>(function(){try{var t=localStorage.getItem('cr-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<style>
:root{--bg:#fafaf7;--fg:#0e1015;--muted:#5a6270;--line:#e3e0d6;--card:#fff;--card-line:#ebe7da;--accent:#0a7a3a;--accent-2:#c2a85a;--cols:4}
[data-theme="dark"]{--bg:#0e1015;--fg:#f3f1ea;--muted:#9aa3b2;--line:#23262d;--card:#15181f;--card-line:#262932;--accent:#3ec07a;--accent-2:#d8c074}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none} a:hover{color:var(--accent)}
.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1320px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-weight:700;font-size:18px} .brand .pin{color:var(--accent)}
.nav-links{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.nav-links a.active{color:var(--fg);font-weight:600}
.ml-auto{margin-left:auto} .icon-btn{appearance:none;background:transparent;color:inherit;border:1px solid var(--line);border-radius:999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
main{max-width:1100px;margin:0 auto;padding:32px 22px 48px}
h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:0 0 12px}
.qbar{display:flex;gap:8px;margin-bottom:8px}
.qbar input{flex:1;background:var(--card);color:var(--fg);border:1px solid var(--card-line);border-radius:12px;padding:14px 16px;font-size:16px}
.qbar input:focus{outline:none;border-color:var(--accent)}
.qbar button{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:0 22px;font-weight:700;font-size:15px;cursor:pointer}
.qhint{color:var(--muted);font-size:13px;margin-bottom:24px}
.group{margin:28px 0}
.group h2{margin:0 0 12px;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.group .count{color:var(--muted);font-size:13px;font-weight:400}
.pgrid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px}
@media(max-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:4px 0 20px}
.controls .ctrl{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.controls select{background:var(--card);color:var(--fg);border:1px solid var(--card-line);border-radius:8px;padding:6px 10px;font-size:13px}
.controls input[type=range]{accent-color:var(--accent)}
.pcard{background:var(--card);border:1px solid var(--card-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease}
.pcard:hover{transform:translateY(-2px)}
.pcard .pi{aspect-ratio:1.4/1;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--card)), color-mix(in srgb, var(--accent-2) 22%, var(--card)));overflow:hidden}
.pcard .pi img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pb{padding:10px 12px}
.pcard .pn{font-weight:700;line-height:1.2;font-size:14px}
.pcard .pmeta{color:var(--muted);font-size:12px;margin-top:2px}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.rcard{background:var(--card);border:1px solid var(--card-line);border-radius:12px;overflow:hidden;display:flex}
.rcard .ri{width:96px;flex:0 0 96px;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--card)), color-mix(in srgb, var(--accent-2) 24%, var(--card)));overflow:hidden}
.rcard .ri img{width:100%;height:100%;object-fit:cover;display:block}
.rcard .rb{padding:10px 14px;display:flex;flex-direction:column;justify-content:center}
.rcard .rn{font-weight:700;line-height:1.2}
.rcard .rm{color:var(--muted);font-size:12px;margin-top:2px}
.pvgrid{display:flex;flex-wrap:wrap;gap:8px}
.pvchip{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.empty{color:var(--muted);font-size:14px;padding:14px;border:1px dashed var(--line);border-radius:12px}
.skel{height:120px;background:linear-gradient(110deg,var(--card) 8%,var(--bg) 18%,var(--card) 33%);background-size:200% 100%;animation:s 1.6s linear infinite;border-radius:12px}
@keyframes s{0%{background-position:200% 0}100%{background-position:-200% 0}}
</style>
</head>
<body>
<header class="nav"><div class="nav-in">
<a class="brand" href="/"><span class="pin">●</span> Costa Rica Directory</a>
<nav class="nav-links">
<a href="/">Browse</a>
<a href="/provinces">Provinces</a>
<a href="/verticals">Verticals</a>
<a href="/search" class="active">Search</a>
<a href="/stats">Stats</a>
<a href="/about">About</a>
</nav>
<div class="ml-auto"><button class="icon-btn" id="themeBtn" aria-label="Theme">◐</button></div>
</div></header>
<main>
<h1>Search the directory</h1>
<form id="qform" class="qbar" autocomplete="off">
<input type="search" id="q" name="q" placeholder='Try "tamarindo", "rappi", "san josé", "soda"…' />
<button type="submit">Search</button>
</form>
<p class="qhint">Searches names, addresses, descriptions, regions, and provinces. Type at least 2 characters.</p>
<div class="controls" id="controls" hidden>
<div class="ctrl"><label for="sort">Sort</label>
<select id="sort">
<option value="relevance">Relevance</option>
<option value="name">Name A→Z</option>
<option value="verified">Registered first</option>
</select>
</div>
<div class="ctrl"><label for="cols">Density</label>
<input id="cols" type="range" min="2" max="6" step="1" value="4" />
</div>
</div>
<div id="out"></div>
</main>
<script>
const themeBtn=document.getElementById('themeBtn');
themeBtn.addEventListener('click',()=>{const cur=document.documentElement.getAttribute('data-theme')||'light';const nx=cur==='light'?'dark':'light';document.documentElement.setAttribute('data-theme',nx);try{localStorage.setItem('cr-theme',nx);}catch{}});
const qInput=document.getElementById('q');
const out=document.getElementById('out');
const controls=document.getElementById('controls');
const sortSel=document.getElementById('sort');
const colsInput=document.getElementById('cols');
const params=new URLSearchParams(location.search);
if(params.get('q')) qInput.value=params.get('q');
// Density: restore persisted column count
(function(){try{const c=localStorage.getItem('cr-cols');if(c){const n=Math.min(Math.max(parseInt(c,10)||4,2),6);document.documentElement.style.setProperty('--cols',n);colsInput.value=n;}}catch{}})();
colsInput.addEventListener('input',e=>{document.documentElement.style.setProperty('--cols',e.target.value);try{localStorage.setItem('cr-cols',e.target.value);}catch{}});
let lastData=null,lastQ='';
function sortPlaces(places){
const arr=places.slice();
const s=sortSel.value;
if(s==='name') arr.sort((a,b)=>(a.name||'').localeCompare(b.name||''));
else if(s==='verified') arr.sort((a,b)=>(b.cedula_juridica?1:0)-(a.cedula_juridica?1:0)||(a.name||'').localeCompare(b.name||''));
return arr; // 'relevance' keeps API order
}
sortSel.addEventListener('change',()=>{if(lastData)render(lastQ,lastData);});
let abort;
function run(q){
if(!q||q.length<2){out.innerHTML='';controls.hidden=true;return;}
if(abort) abort.abort();
abort=new AbortController();
out.innerHTML='<div class="skel"></div>';
fetch('/api/search?q='+encodeURIComponent(q),{signal:abort.signal}).then(r=>r.json()).then(d=>render(q,d)).catch(e=>{if(e.name!=='AbortError') out.innerHTML=`<p class="empty">Search failed: ${e.message}</p>`;});
}
function render(q,d){
lastData=d;lastQ=q;
controls.hidden=!(d.places&&d.places.length);
const sections=[];
if(d.provinces.length){
sections.push(`<section class="group"><h2>Provinces <span class="count">${d.provinces.length}</span></h2>
<div class="pvgrid">${d.provinces.map(p=>`<a class="pvchip" href="/pr/${p.slug}">${p.name}</a>`).join('')}</div></section>`);
}
if(d.regions.length){
sections.push(`<section class="group"><h2>Regions <span class="count">${d.counts.regions} match${d.counts.regions===1?'':'es'}</span></h2>
<div class="rgrid">${d.regions.map(r=>`
<a class="rcard" href="/r/${r.slug}">
<div class="ri">${r.image_url?`<img loading="lazy" alt="${r.name}" src="${r.image_url}" />`:''}</div>
<div class="rb"><div class="rn">${r.name}</div><div class="rm">${r.province} · ${(r.n||0).toLocaleString()} listings</div></div>
</a>`).join('')}</div></section>`);
}
if(d.places.length){
const more=d.counts.places>d.places.length?`<a href="/?q=${encodeURIComponent(q)}" style="color:var(--accent);font-weight:600;font-size:13px">see all ${d.counts.places.toLocaleString()} →</a>`:'';
sections.push(`<section class="group"><h2>Listings <span class="count">${d.counts.places.toLocaleString()} match${d.counts.places===1?'':'es'}</span> ${more}</h2>
<div class="pgrid">${sortPlaces(d.places).map(p=>{
const img=p.image_url||p.region_image_url||'';
return `<a class="pcard" href="/p/${p.slug}">
<div class="pi">${img?`<img loading="lazy" alt="${p.name}" src="${img}" />`:''}</div>
<div class="pb"><div class="pn">${p.name}</div><div class="pmeta">${p.region_name||''}${p.region_name&&p.vertical?' · ':''}${p.vertical||''}</div></div>
</a>`;}).join('')}</div></section>`);
}
if(!sections.length){
out.innerHTML=`<p class="empty">No matches for "${q}". Try a shorter term, a region name, or browse <a href="/provinces" style="color:var(--accent)">by province</a>.</p>`;
return;
}
out.innerHTML=sections.join('');
}
document.getElementById('qform').addEventListener('submit',e=>{e.preventDefault();const q=qInput.value.trim();const u=new URL(location);u.searchParams.set('q',q);history.replaceState({},'',u);run(q);});
let t;qInput.addEventListener('input',()=>{clearTimeout(t);t=setTimeout(()=>{const q=qInput.value.trim();const u=new URL(location);if(q)u.searchParams.set('q',q);else u.searchParams.delete('q');history.replaceState({},'',u);run(q);},200);});
if(qInput.value) run(qInput.value);
qInput.focus();
</script>
</body>
</html>