`public/broker-profile.html`

103 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}
  *{box-sizing:border-box}body{margin:0;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;color:var(--ink);background:var(--bg)}
  a{color:var(--accent);text-decoration:none}.wrap{max-width:760px;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}
  .top a{color:var(--mut);font-size:14px}
  .head{background:linear-gradient(135deg,#14181d,#233041);color:#fff;padding:38px 0}
  .head h1{margin:0 0 4px;font-size:26px}.head .firm{color:#c6cdd6;font-size:15px}
  .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}
  .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin:24px 0}
  .row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
  .row:last-child{border-bottom:0}.row .k{width:120px;color:var(--mut);flex:none}
  .cta{display:inline-block;margin-top:8px;background:var(--accent);color:#fff;padding:9px 16px;border-radius:8px;font-weight:600;font-size:14px}
  .muted{color:var(--mut)}
</style></head><body>
<header class="top"><div class="wrap"><a href="/#brokers">← Broker directory</a></div></header>
<div class="head"><div class="wrap" id="head"></div></div>
<div class="wrap"><div class="card" id="body"></div>

  <div class="card" id="claimBlock">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap">
      <div><b>Is this you?</b> <span class="muted">Claim this profile to keep your name, contact and info accurate.</span></div>
      <button class="cta" id="claimBtn" style="border:0;cursor:pointer">Claim this profile</button>
    </div>
    <form id="claimForm" style="display:none;margin-top:16px">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
        <label>Your name*<input name="name" required></label>
        <label>Email*<input name="email" type="email" required></label>
        <label>Phone<input name="phone"></label>
        <label>Title<input name="title" placeholder="e.g. Senior Vice President"></label>
        <label>Firm<input name="firm"></label>
        <label>Website<input name="website" placeholder="https://"></label>
        <label style="grid-column:1/3">LinkedIn<input name="linkedin" placeholder="https://linkedin.com/in/…"></label>
        <label style="grid-column:1/3">Bio<textarea name="bio" rows="3" placeholder="Short professional bio"></textarea></label>
        <label style="grid-column:1/3">Corrections / notes<textarea name="corrections" rows="2" placeholder="Anything on this profile that's wrong?"></textarea></label>
        <label style="grid-column:1/3;display:flex;gap:8px;align-items:center;font-size:13.5px"><input type="checkbox" name="is_self" style="width:auto"> I confirm I am this person or an authorized representative.</label>
      </div>
      <button class="cta" type="submit" style="border:0;cursor:pointer;margin-top:12px">Submit claim for review</button>
      <div id="claimMsg" class="muted" style="margin-top:10px;font-size:13px"></div>
    </form>
  </div>

  <p class="muted" style="font-size:12.5px">Broker contact data aggregated from public commercial-real-estate sources (CRUnifiedDB). Claims are reviewed before any profile change is published. Verify before transacting.</p>
</div>
<style>
  #claimForm label{display:flex;flex-direction:column;font-size:12.5px;color:var(--mut);gap:4px}
  #claimForm input,#claimForm textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink)}
</style>
<script>
const id=location.pathname.split('/').pop();
(async()=>{
  const d=await fetch('/api/brokers/'+id).then(r=>r.json()).catch(()=>({}));
  if(!d.broker){document.getElementById('head').innerHTML='<h1>Broker not found</h1>';document.getElementById('body').innerHTML='';return;}
  const b=d.broker;
  document.getElementById('head').innerHTML=`<h1>${b.name}</h1><div class="firm">${b.firm||''}</div>
    <div class="tags">${b.agent_type?`<span class="badge">${b.agent_type}</span>`:''}
      ${b.total_assets?`<span class="badge">${b.total_assets} listings tracked</span>`:''}</div>`;
  const row=(k,v)=>v?`<div class="row"><span class="k">${k}</span><span>${v}</span></div>`:'';
  document.getElementById('body').innerHTML=
    row('Firm',b.firm)+
    row('Phone',b.phone?`<a href="tel:${b.phone}">${b.phone}</a>`:'')+
    row('Email',b.email?`<a href="mailto:${b.email}">${b.email}</a>`:'')+
    row('Website',b.website?`<a href="${b.website}" target="_blank" rel="noopener">${b.website}</a>`:'')+
    row('LinkedIn',b.linkedin?`<a href="${b.linkedin}" target="_blank" rel="noopener">profile ↗</a>`:'')+
    row('Office',b.office_addr)+
    row('Specialties',b.specialties)+
    row('Crexi profile',b.profile_url?`<a href="${b.profile_url}" target="_blank" rel="noopener">crexi.com/brokers ↗</a>`:'')+
    (b.email?`<a class="cta" href="mailto:${b.email}">Contact ${b.name.split(' ')[0]}</a>`
      :(b.profile_url?`<a class="cta" href="${b.profile_url}" target="_blank" rel="noopener">Contact on Crexi ↗</a>`:''));
})();
// reflect account state on the claim block
fetch('/api/auth/me').then(r=>r.json()).then(m=>{
  const block=document.querySelector('#claimBlock > div > div');
  if(m.user){
    if(block) block.innerHTML=`<b>Is this you?</b> <span class="muted">Signed in as ${m.user.email} — your claim will be linked to your account.</span>`;
    const em=document.querySelector('#claimForm input[name=email]'); if(em){em.value=m.user.email;}
  } else if(block){
    block.innerHTML=`<b>Is this you?</b> <span class="muted">Claim this profile to keep it accurate. <a href="/account">Sign in</a> to link it to your account.</span>`;
  }
}).catch(()=>{});
document.getElementById('claimBtn').addEventListener('click',()=>{
  const f=document.getElementById('claimForm'); f.style.display=f.style.display==='none'?'block':'none';
});
document.getElementById('claimForm').addEventListener('submit',async(e)=>{
  e.preventDefault();
  const fd=Object.fromEntries(new FormData(e.target).entries());
  fd.is_self=e.target.is_self.checked;
  const msg=document.getElementById('claimMsg');
  msg.textContent='Submitting…';
  try{
    const r=await fetch('/api/brokers/'+id+'/claim',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(fd)});
    const j=await r.json();
    if(j.ok){ e.target.reset(); msg.style.color='#1a7a44'; msg.textContent='✓ Claim submitted — our team will review it before any change goes live.'; }
    else { msg.style.color='#b3261e'; msg.textContent='✗ '+(j.error||'Could not submit'); }
  }catch(err){ msg.style.color='#b3261e'; msg.textContent='✗ Network error — try again.'; }
});
</script></body></html>