`public/search.html`

145 lines
<!doctype html>
<html lang="en" data-theme="light">
<head>
  <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}
    [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(auto-fill,minmax(220px,1fr));gap:12px}
    .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 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 params=new URLSearchParams(location.search);
    if(params.get('q')) qInput.value=params.get('q');

    let abort;
    function run(q){
      if(!q||q.length<2){out.innerHTML='';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){
      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">${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>