`public/broker.html`

83 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Broker · Sublease Marketplace</title>
<style>
  :root{--ink:#14181d;--mut:#6b7480;--line:#e7e9ee;--bg:#fbfbfc;--accent:#1a5f3c;--gold:#b08a3e;--cols:4}
  *{box-sizing:border-box}body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--ink);background:var(--bg)}
  a{color:inherit;text-decoration:none}.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
  header.top{border-bottom:1px solid var(--line);background:#fff}.top .wrap{display:flex;align-items:center;height:60px;gap:16px}
  .top a.back{color:var(--mut);font-size:14px}
  .head{background:linear-gradient(135deg,#14181d,#233041);color:#fff;padding:40px 0}
  .head img{height:52px;max-width:230px;object-fit:contain;object-position:left;background:#fff;padding:10px 14px;border-radius:10px}
  .head h1{margin:16px 0 4px;font-size:26px}.head p{color:#c6cdd6;margin:0}
  .head .tags{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
  .badge{font-size:11px;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.14);color:#fff;text-transform:uppercase;letter-spacing:.05em}
  .badge.high{background:#b3261e}
  section{padding:30px 0}h2{font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);margin:0 0 16px}
  .controls{display:flex;gap:14px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
  select,input[type=search]{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
  .dens{margin-left:auto;color:var(--mut);font-size:13px;display:flex;gap:8px;align-items:center}
  .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:14px}
  .card{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
  .card .b{padding:12px 13px}.card .t{font-weight:600;font-size:14px}.card .a{color:var(--mut);font-size:12.5px;margin-top:3px}
  .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.chip{background:#f4f6f8;border-radius:6px;padding:2px 7px;font-size:12px;color:#41505f}
  .empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;padding:30px;text-align:center;color:var(--mut)}
  .fin{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;color:var(--ink)}
  .fin h3{margin:0 0 8px}
</style></head><body>
<header class="top"><div class="wrap"><a class="back" href="/">← All brokers</a></div></header>
<div class="head"><div class="wrap" id="head"></div></div>
<section><div class="wrap">
  <div id="finBlock"></div>
  <div id="listBlock" style="display:none">
    <h2>Current listings — <span id="cnt"></span></h2>
    <div class="controls">
      <input type="search" id="q" placeholder="Filter…">
      <select id="sort"><option value="newest">Newest</option><option value="size_desc">Size ↓</option><option value="city">City A→Z</option></select>
      <label class="dens">Density <input type="range" id="dens" min="2" max="6" value="4"></label>
    </div>
    <div class="grid" id="grid"></div>
  </div>
</div></section>
<script>
const $=s=>document.querySelector(s),slug=location.pathname.split('/').pop();
const fmtSF=n=>n?Number(n).toLocaleString()+' SF':'—';
let L=[];
async function boot(){
  const d=await fetch('/api/sponsors/'+slug).then(r=>r.json());
  if(d.error){$('#head').innerHTML='<h1>Not found</h1>';return;}
  const s=d.sponsor;
  $('#head').innerHTML=`<img src="${s.logo_path}" onerror="this.style.display='none'">
    <h1>${s.name}</h1><p>${s.tagline||''}</p>
    <div class="tags"><span class="badge">${s.kind}</span>
      <span class="badge">${s.role.replace('_',' ')}</span>
      ${s.tos_risk==='high'?'<span class="badge high">ToS risk: high</span>':''}
      ${s.website?`<a class="badge" href="${s.website}" target="_blank" rel="noopener">website ↗</a>`:''}</div>`;
  if(s.role==='financing_partner'){
    $('#finBlock').innerHTML=`<div class="fin"><h3>Financing partner</h3>
      <p>${s.name} sponsors sublease deals through commercial real estate lending — it does not list space directly.
      ${s.notes||''}</p><p style="color:var(--mut)">Use this partner to finance a sublease or buildout sourced from any broker on the marketplace.</p></div>`;
    return;
  }
  L=d.listings; $('#listBlock').style.display='';
  $('#cnt').textContent=L.length+' space'+(L.length==1?'':'s');
  ['q','sort'].forEach(id=>$('#'+id).addEventListener('input',render));
  $('#dens').addEventListener('input',e=>document.documentElement.style.setProperty('--cols',e.target.value));
  render();
}
function render(){
  const q=$('#q').value.toLowerCase(),so=$('#sort').value;
  let rows=L.filter(l=>`${l.title} ${l.address} ${l.city}`.toLowerCase().includes(q));
  rows.sort({size_desc:(a,b)=>(b.size_sf||0)-(a.size_sf||0),city:(a,b)=>(a.city||'').localeCompare(b.city||''),newest:(a,b)=>b.id-a.id}[so]);
  $('#grid').innerHTML=rows.length?rows.map(l=>`<div class="card"><div class="b">
    <div class="t">${l.title||'Sublease space'}</div>
    <div class="a">${[l.address,l.city].filter(Boolean).join(', ')||l.city||''}</div>
    <div class="meta"><span class="chip">${l.space_type||'—'}</span><span class="chip">${fmtSF(l.size_sf)}</span>
      <span class="chip">${l.price_amount?'$'+Number(l.price_amount).toLocaleString()+' '+(l.price_unit||''):(l.price_unit||'Call')}</span></div>
    ${l.source_url?`<div class="meta"><a class="chip" href="${l.source_url}" target="_blank" rel="noopener noreferrer">View ↗</a></div>`:''}
    </div></div>`).join(''):`<div class="empty">No listings crawled yet for ${slug}. Run its broker agent to populate.</div>`;
}
boot();
</script></body></html>