// Acquisition pipeline — P1 / P2 / P3 targets, succession risk, deal stages.

function Acquisition({setRoute}){
  const acq = window.ACQ;
  const stages = ['Source','Heirs outreach','Nurture','Diligence','LOI','Closed'];
  const tiers = ['P1','P2','P3'];

  return (
    <AdminShell route="acq" setRoute={setRoute} title="Acquisition pipeline" breadcrumb="NETWORK · LEGACY + SUCCESSION"
      actions={<>
        <button className="btn gh">Watchlist export</button>
        <button className="btn k">Run succession sweep</button>
        <button className="btn g">+ Add target</button>
      </>}>

      <div className="split-4" style={{marginBottom:18}}>
        <Stat n={acq.length} l="Watchlist · total" d="6 P1 · 9 P2 · 5 P3"/>
        <Stat n="3"   l="In diligence" d="Wilmington Journal lead"/>
        <Stat n="1"   l="Heirs outreach" d="Carolina Times" up={false}/>
        <Stat n="$240K" l="Capital reserved" d="legacy preservation fund"/>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:18,alignItems:'flex-start'}}>
        <Card title="Pipeline · by tier" meta="prioritized">
          <table className="tbl" style={{marginLeft:-14,marginRight:-14,width:'calc(100% + 28px)'}}>
            <thead><tr><th>ID</th><th>TARGET</th><th>CITY</th><th>TIER</th><th>STAGE</th><th className="r">FIT</th><th>SUCCESSION</th><th className="r">LAST</th></tr></thead>
            <tbody>
              {acq.map(a=>(
                <tr key={a.id}>
                  <td className="id">{a.id}</td>
                  <td>
                    <div style={{fontSize:12.5,fontWeight:600}}>{a.target}</div>
                    <div style={{fontSize:11,color:'var(--mute)',marginTop:2,maxWidth:340,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{a.reason}</div>
                  </td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{a.city}</td>
                  <td><Pill k={a.tier==='P1'?'bad':a.tier==='P2'?'warn':'muted'}>{a.tier}</Pill></td>
                  <td className="mono" style={{fontSize:10.5,letterSpacing:'.04em'}}>{a.stage}</td>
                  <td className="r"><Score n={a.fit}/></td>
                  <td>
                    <Pill k={a.succession==='Critical'?'bad':a.succession==='High'?'warn':a.succession==='Medium'?'info':'muted'}>{a.succession}</Pill>
                  </td>
                  <td className="r mono num" style={{fontSize:10.5,color:'var(--mute)'}}>{a.last}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>

        <div style={{display:'flex',flexDirection:'column',gap:18}}>
          <Card title="Stage distribution">
            {stages.map(st=>{
              const n = acq.filter(a=>a.stage===st).length;
              return (
                <div key={st} style={{display:'grid',gridTemplateColumns:'130px 1fr 24px',gap:10,alignItems:'center',padding:'6px 0'}}>
                  <span className="mono" style={{fontSize:10.5,color:'var(--ink-2)',letterSpacing:'.06em',textTransform:'uppercase'}}>{st}</span>
                  <div className="prog"><div className="fill navy" style={{width:`${(n/acq.length)*100}%`,background:'var(--navy)'}}></div></div>
                  <span className="mono num" style={{fontSize:11,textAlign:'right',fontWeight:600}}>{n}</span>
                </div>
              );
            })}
          </Card>

          <Card title="Legacy preservation · capital">
            <div className="eyebrow">FUND BALANCE</div>
            <div className="serif num" style={{fontSize:38,fontWeight:700,letterSpacing:'-.01em',lineHeight:1,marginTop:6,color:'var(--gold-2)'}}>$240,000</div>
            <div className="mono" style={{fontSize:10,color:'var(--mute)',letterSpacing:'.08em',marginTop:6}}>10% NETWORK FUND · YTD ALLOCATED</div>
            <div style={{height:1,background:'var(--rule-line)',margin:'14px 0'}}></div>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <Use t="Wilmington Journal · digitization match" v="$80,000" c="green"/>
              <Use t="Carolina Times · revival study" v="$45,000" c="navy"/>
              <Use t="Goldsboro Globe · diligence retainer" v="$18,000" c="navy"/>
              <Use t="Unallocated" v="$97,000" c="muted"/>
            </div>
          </Card>

          <Card title="Diligence checklist · WJ">
            {[
              ['Editorial archive scope confirmed','ok'],
              ['Family ownership tree mapped','ok'],
              ['Foundation partner identified','ok'],
              ['Q4 financial review','warn'],
              ['Real-estate / IP inventory','warn'],
              ['Pilot revenue match agreement','open'],
            ].map(([t,c])=>(
              <div key={t} style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:8,padding:'5px 0',alignItems:'center'}}>
                <span style={{width:14,height:14,display:'flex',alignItems:'center',justifyContent:'center',color:c==='ok'?'var(--green)':c==='warn'?'var(--gold-2)':'var(--mute)',fontSize:13}}>{c==='ok'?'✓':c==='warn'?'!':'○'}</span>
                <span style={{fontSize:12}}>{t}</span>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </AdminShell>
  );
}

function Use({t,v,c}){
  return (
    <div style={{display:'grid',gridTemplateColumns:'1fr auto',gap:10,padding:'5px 0',borderBottom:'1px solid var(--rule-line)'}}>
      <span style={{fontSize:12}}>{t}</span>
      <span className="mono num" style={{fontSize:11.5,fontWeight:600,color:c==='green'?'var(--green)':c==='navy'?'var(--navy)':'var(--mute)'}}>{v}</span>
    </div>
  );
}

window.Acquisition = Acquisition;