<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ── BASIC SEO ──────────────────────────────────────────── -->
  <meta charset="utf-8" />
  <title>Pickle Hunters | Ultimate Pickle & Ferment Directory</title>
  <meta name="description"
        content="Browse every pickle shop, Jewish deli, fermenter and farmers-market vendor we’ve found across the U.S.—with photos, hours and Google-Maps links." />
  <link rel="canonical" href="https://picklehunters.org/"/>

  <!-- Social cards -->
  <meta property="og:type"        content="website"/>
  <meta property="og:title"       content="Pickle Hunters Directory"/>
  <meta property="og:description" content="Discover amazing pickles & fermented foods across the U.S."/>
  <meta property="og:url"         content="https://picklehunters.org/"/>
  <meta property="og:image"       content="https://picklehunters.org/images/seo-cover.jpg"/>
  <meta name="twitter:card"       content="summary_large_image"/>

  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    :root{--gap:.9rem;--card-shadow:0 2px 6px rgba(0,0,0,.08)}
    *{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#fafafa;color:#222}
    header{background:#204b2a;color:#fff;padding:1rem;text-align:center}
    h1{margin:0;font-size:2rem}h2{margin:.35rem 0 0;font-weight:400;font-size:1.1rem}
    main{max-width:1280px;margin:0 auto;padding:1rem}
    #search-box{width:100%;max-width:420px;font-size:1rem;padding:.55rem 1rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:5px}
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--gap)}

    .card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow);display:flex;flex-direction:column;transition:transform .15s}
    .card:hover{transform:translateY(-3px)}
    .card img{width:100%;height:180px;object-fit:cover;background:#ddd}
    .info{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.4rem}
    h3{margin:.2rem 0;font-size:1.2rem;line-height:1.25}
    h3 a{color:#204b2a;text-decoration:none}h3 a:hover{text-decoration:underline}
    .stars{font-size:.9rem;color:#e0a11e;margin-left:.25rem}
    .location{font-size:.9rem;color:#555}
    .desc{font-size:.92rem}
    .items{font-size:.85rem;margin:.4rem 0 .2rem}
    .hours,.phone,.address{font-size:.8rem;color:#444}
    .credit{font-size:.75rem;color:#777;margin-top:auto}
    .hidden{display:none!important}#end-msg{text-align:center;margin:2rem 0;color:#666;display:none}
  </style>
</head>

<body>
  <header>
    <h1>Pickle Hunters Directory</h1>
    <h2>Every pickle, deli & fermenter we can find 🥒</h2>
  </header>

  <main>
    <input id="search-box" type="search" placeholder="Search by vendor, city, item…" aria-label="Search directory"/>
    <div id="grid" class="grid" aria-live="polite" aria-busy="false"></div>
    <p id="end-msg">You’ve reached the end — check back soon for new cucumbers!</p>
  </main>

  <!-- JSON-LD template -->
  <script id="schema-template" type="application/ld+json">
  { "@context":"https://schema.org", "@type":"ItemList", "itemListElement":[] }
  </script>

  <script>
  (async ()=>{
    const grid=document.getElementById('grid'),
          search=document.getElementById('search-box'),
          end=document.getElementById('end-msg'),
          schema=JSON.parse(document.getElementById('schema-template').textContent);

    let offset=0,busy=false,done=false,pos=0;

    const stars=rank=>rank?`<span class="stars">${'★'.repeat(Math.round(rank))}</span>`:'';

    const makeCard=v=>{
      const art=document.createElement('article');
      art.className='card';
      const searchBlob=[v.name,v.citystate,v.text,v.ItemsDesc,v.ItemsList,v.Address].join(' ').toLowerCase();
      art.dataset.search=searchBlob;

      /* Hours: join non-empty lines */
      const hrs=['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
          .map(d=>v[`${d}_hours`]).filter(Boolean).join(' · ');
      const items=v.ItemsDesc||v.ItemsList?`${v.ItemsDesc||''}${v.ItemsDesc&&v.ItemsList?': ':''}${v.ItemsList||''}`:'';

      art.innerHTML=`
        <img src="/images/${v.image_key||''}" alt="${v.name} pickles">
        <div class="info">
          <h3><a href="${v.gmaps_URL||'#'}" target="_blank" rel="noopener">${v.name}${stars(v.Rank)}</a></h3>
          <p class="location">${v.citystate}</p>
          ${v.text?`<p class="desc">${v.text}</p>`:''}
          ${items?`<p class="items"><strong>Specialties:</strong> ${items}</p>`:''}
          ${hrs?`<p class="hours"><strong>Hours:</strong> ${hrs}</p>`:''}
          ${v.Phone?`<p class="phone"><strong>Phone:</strong> ${v.Phone}</p>`:''}
          ${v.Address?`<p class="address"><strong>Address:</strong> ${v.Address}</p>`:''}
          ${v.photo_credit?`<p class="credit">Photo: ${v.photo_credit}</p>`:''}
        </div>`;

      /* Add to JSON-LD */
      schema.itemListElement.push({
        "@type":"ListItem",
        "position":++pos,
        "name":v.name,
        "image":"https://picklehunters.org/images/"+v.image_key,
        "url":v.gmaps_URL||"https://picklehunters.org/#"+v.id,
        "address":v.Address||undefined,
        "telephone":v.Phone||undefined
      });
      return art;
    };

    async function load(){
      if(busy||done) return; busy=true; grid.setAttribute('aria-busy','true');
      try{
        const r=await fetch(`/api/venues?limit=40&offset=${offset}`);
        const {items,next}=await r.json();
        items.forEach(v=>grid.appendChild(makeCard(v)));
        if(next===null){done=true;end.style.display='block'}
        offset=next??offset;
      }catch(e){console.error(e)}
      busy=false; grid.setAttribute('aria-busy','false');
    }

    /* first batch */
    await load();
    /* inject JSON-LD */
    const ld=document.createElement('script');
    ld.type='application/ld+json'; ld.textContent=JSON.stringify(schema);
    document.head.appendChild(ld);

    /* infinite scroll */
    addEventListener('scroll',()=>{
      if(busy||done) return;
      if(innerHeight+scrollY>=document.body.offsetHeight-400) load();
    });

    /* search filter */
    search.addEventListener('input',e=>{
      const q=e.target.value.trim().toLowerCase();
      [...grid.children].forEach(c=>{
        c.classList.toggle('hidden', q && !c.dataset.search.includes(q));
      });
      grid.scrollIntoView({behavior:'smooth'});
    });
  })();
  </script>
</body>
</html>