br-broker.jsx
1 // Brutalist BROKER COMMS THREAD — a dossier-style conversation between 2 // buyer and broker. Telegram-paper left column, live-thread right column, 3 // attachments bar, stamped verdict footer. 4 5 function BRBroker({ onNav }) { 6 const ship = makeShip("KRV-IC-2849-AX"); 7 8 const thread = [ 9 { side:"broker", t:"0812Z", who:"S. ORIN (STRATA⁄FLEET)", role:"BROKER · Lic 44-01", body: 10 "Commodore — received your interest in KRV-IC-2849-AX. Hull last re-plated 2394.212 at Krovas Ceres; Q-drive is original. I can have the lot cleared for dry-dock inspection within 3 cycles. Terms below." }, 11 { side:"buyer", t:"0820Z", who:"CMDR O. VEYR", role:"BUYER · Tier-3", body: 12 "Confirmed. What's the delta on the tactical loadout vs. standard? And — is the prior owner reachable for a hull history call?" }, 13 { side:"broker", t:"0828Z", who:"S. ORIN", role:"BROKER · Lic 44-01", body: 14 "Tactical adds ₵3.30M over standard — Tier-3 hardpoints, uprated cooling loop, flare bay. Prior owner was the 3rd Expeditionary; their logs are bonded but I have them on file (attached). No live call — unit was decommissioned per §403." }, 15 { side:"buyer", t:"0833Z", who:"CMDR O. VEYR", role:"BUYER · Tier-3", body: 16 "Any cosmetic or structural flags I should know about? I want this signed off before I commit to tactical." }, 17 { side:"broker", t:"0845Z", who:"S. ORIN", role:"BROKER · Lic 44-01", body: 18 "Clean on structural. One cosmetic dent on the port-side strake (photo attached). Offered at ₵18.65M standard with full bonding. Shall I proceed to bind escrow?" }, 19 { side:"buyer", t:"0848Z", who:"CMDR O. VEYR", role:"BUYER · Tier-3", body: 20 "Proceed with tactical. Escrow through Stellar Bank Ceres-II. Send the bonded instrument to the usual comms ID." }, 21 { side:"broker", t:"0851Z", who:"S. ORIN", role:"BROKER · Lic 44-01", body: 22 "Filed. Form 7B drawn, instrument 4912-7841-0204-3318 referenced. Bay 22-E reserved for 2396.116. My compliments on the selection, Commodore." }, 23 ]; 24 25 return ( 26 <BRPage minHeight={2000}> 27 <BRNav active="broker" cartCount={0} onNav={onNav}/> 28 29 {/* HEADER */} 30 <div style={{padding:"30px 40px 20px", borderBottom:`4px double ${BR.ink}`, display:"flex", justifyContent:"space-between", alignItems:"flex-end"}}> 31 <div> 32 <div style={{fontFamily:"IBM Plex Mono", fontSize:11, letterSpacing:3, color:BR.mute, textTransform:"uppercase"}}>FORM 18 · BROKERED CORRESPONDENCE · ENCRYPTED Q-KEY 4096</div> 33 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:92, lineHeight:0.9, letterSpacing:-2, textTransform:"uppercase", marginTop:6}}>Dispatch</div> 34 <div style={{fontFamily:"IBM Plex Mono", fontSize:12, color:BR.ink2, marginTop:8, letterSpacing:1.2}}> 35 THREAD T-2396-11404 · RE: KRV-IC-2849-AX · OPENED 2396.114.0812Z · 7 MESSAGES 36 </div> 37 </div> 38 <div style={{display:"flex", gap:10}}> 39 <BRStamp rotate={-6} color={BR.green}>ENCRYPTED</BRStamp> 40 <BRStamp rotate={5}>BONDED</BRStamp> 41 </div> 42 </div> 43 44 <div style={{display:"grid", gridTemplateColumns:"300px 1fr 280px"}}> 45 {/* LEFT — parties + dossier */} 46 <div style={{borderRight:`1px solid ${BR.ink}`, padding:"24px 22px", background:BR.paper2}}> 47 <BRH n="01">Parties</BRH> 48 {[ 49 ["S. ORIN", "STRATA⁄FLEET · Ceres G-4", "Broker · Lic 44-01", BR.ink], 50 ["O. VEYR", "7th Expeditionary · LOG", "Buyer · Tier-3", BR.rust], 51 ["J. HOLLISTER","Coalition Notary", "Seal 4481", BR.green], 52 ].map(([n, o, r, dot], i) => ( 53 <div key={i} style={{padding:"10px 0", borderBottom:`1px dotted ${BR.ink}33`, display:"flex", gap:10}}> 54 <div style={{width:30, height:30, border:`2px solid ${BR.ink}`, background:BR.paper, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"Oswald", fontWeight:900, fontSize:11, letterSpacing:1, position:"relative"}}> 55 {n.split(" ").map(x=>x[0]).join("").slice(0,2)} 56 <div style={{position:"absolute", bottom:-3, right:-3, width:8, height:8, background:dot, borderRadius:"50%", border:`1px solid ${BR.paper}`}}/> 57 </div> 58 <div style={{flex:1}}> 59 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:13, letterSpacing:1.5, textTransform:"uppercase"}}>{n}</div> 60 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1}}>{o}</div> 61 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, letterSpacing:1, marginTop:1}}>{r}</div> 62 </div> 63 </div> 64 ))} 65 66 <div style={{height:20}}/> 67 <BRH n="02">Hull in Question</BRH> 68 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper, padding:"10px 12px"}}> 69 <div style={{width:"100%", height:74, border:`1px solid ${BR.ink}33`, position:"relative"}}> 70 <div style={{position:"absolute", inset:"10% 6%"}}> 71 <ShipSilhouette ship={ship} stroke={BR.ink} glow={false} strokeWidth={1.2} detail="mid"/> 72 </div> 73 </div> 74 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:14, letterSpacing:1, textTransform:"uppercase", marginTop:8}}>{ship.model}</div> 75 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1, marginTop:2}}>{ship.serial} · {ship.cls.name}</div> 76 <BRSpec k="List" v={`₵${formatCred(ship.price)}`}/> 77 <BRSpec k="Mass" v={`${ship.mass} kt`}/> 78 <BRSpec k="Jump" v={`${ship.jump} ly`}/> 79 </div> 80 81 <div style={{height:20}}/> 82 <BRH n="03">Attachments</BRH> 83 {[ 84 ["Hull-history ledger","PDF","412 kB","bonded"], 85 ["Port-strake dent", "IMG","1.1 MB",""], 86 ["Q-drive cert.", "PDF","88 kB", "bonded"], 87 ["Escrow term sheet", "PDF","212 kB","bonded"], 88 ].map(([n,t,s,tag], i) => ( 89 <div key={i} style={{display:"flex", alignItems:"center", gap:10, padding:"8px 10px", border:`1.5px solid ${BR.ink}`, background:BR.paper, marginBottom:6}}> 90 <div style={{width:28, height:34, border:`1.5px solid ${BR.ink}`, display:"flex", alignItems:"center", justifyContent:"center", fontFamily:"Oswald", fontWeight:900, fontSize:9, letterSpacing:1}}>{t}</div> 91 <div style={{flex:1, minWidth:0}}> 92 <div style={{fontFamily:"IBM Plex Sans", fontSize:12, color:BR.ink, whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{n}</div> 93 <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:1}}>{s}{tag && " · " + tag.toUpperCase()}</div> 94 </div> 95 </div> 96 ))} 97 </div> 98 99 {/* CENTER — thread */} 100 <div style={{padding:"26px 36px"}}> 101 <BRH n="04">Correspondence</BRH> 102 103 <div style={{display:"flex", flexDirection:"column", gap:18}}> 104 {thread.map((m, i) => ( 105 <div key={i} style={{display:"flex", justifyContent: m.side === "buyer" ? "flex-end" : "flex-start"}}> 106 <div style={{maxWidth:620, width:"100%"}}> 107 <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:6}}> 108 <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:2, textTransform:"uppercase", color: m.side === "buyer" ? BR.rust : BR.ink}}>{m.who}</div> 109 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1.5}}>{m.role} · {m.t}</div> 110 </div> 111 <div style={{ 112 border: `2px solid ${BR.ink}`, 113 background: m.side === "buyer" ? BR.paper2 : BR.paper, 114 borderLeft: m.side === "buyer" ? `6px solid ${BR.rust}` : `6px solid ${BR.ink}`, 115 padding:"14px 18px", 116 fontFamily:"IBM Plex Sans", fontSize:13.5, lineHeight:1.6, color:BR.ink, 117 }}> 118 {m.body} 119 {i === 2 && ( 120 <div style={{marginTop:10, display:"flex", gap:8}}> 121 <div style={{padding:"4px 10px", border:`1.5px solid ${BR.ink}`, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:1}}>⎘ hull-history.pdf</div> 122 </div> 123 )} 124 {i === 4 && ( 125 <div style={{marginTop:10, display:"flex", gap:8}}> 126 <div style={{padding:"4px 10px", border:`1.5px solid ${BR.ink}`, fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:1}}>⎘ port-strake.img</div> 127 <BRChip>₵18.65M standard</BRChip> 128 </div> 129 )} 130 {i === 6 && ( 131 <div style={{marginTop:12}}> 132 <BRStamp color={BR.green} rotate={-4}>BINDING</BRStamp> 133 </div> 134 )} 135 </div> 136 </div> 137 </div> 138 ))} 139 </div> 140 141 {/* COMPOSER */} 142 <div style={{marginTop:28}}> 143 <BRH n="05">Reply</BRH> 144 <div style={{border:`2px solid ${BR.ink}`, background:BR.paper}}> 145 <div style={{padding:"8px 12px", borderBottom:`1px solid ${BR.ink}`, display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:1.5, textTransform:"uppercase"}}> 146 <span>FROM · VEYR.O@7EXP.COALITION</span> 147 <span>Q-KEY 4096 · CYPHER ENGAGED</span> 148 </div> 149 <textarea 150 defaultValue="Confirm receipt. Requesting one final photo of the starboard forge-mark before binding." 151 style={{width:"100%", minHeight:90, padding:14, border:"none", background:"transparent", fontFamily:"IBM Plex Sans", fontSize:13.5, lineHeight:1.6, color:BR.ink, outline:"none", resize:"vertical"}} 152 /> 153 <div style={{padding:"10px 12px", borderTop:`1px solid ${BR.ink}`, display:"flex", justifyContent:"space-between", alignItems:"center"}}> 154 <div style={{display:"flex", gap:8}}> 155 {["ATTACH","QUOTE","TERM SHEET"].map(l => ( 156 <button key={l} style={{padding:"6px 10px", border:`1.5px solid ${BR.ink}`, background:"transparent", fontFamily:"Oswald", fontWeight:700, fontSize:10, letterSpacing:2, cursor:"pointer"}}>{l}</button> 157 ))} 158 </div> 159 <button style={{padding:"10px 22px", background:BR.ink, color:BR.paper, border:"none", fontFamily:"Oswald", fontWeight:900, fontSize:12, letterSpacing:3, cursor:"pointer"}}>▸ TRANSMIT</button> 160 </div> 161 </div> 162 </div> 163 </div> 164 165 {/* RIGHT — deal state */} 166 <div style={{borderLeft:`1px solid ${BR.ink}`, padding:"24px 22px"}}> 167 <BRH n="06">Deal State</BRH> 168 <div style={{border:`2px solid ${BR.ink}`, padding:"14px 16px", background:BR.paper2}}> 169 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2, textTransform:"uppercase"}}>STAGE</div> 170 <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:22, letterSpacing:-0.5, color:BR.ink, marginTop:2}}>ESCROW BINDING</div> 171 <div style={{marginTop:10, display:"flex", flexDirection:"column", gap:6}}> 172 {[ 173 ["INTRODUCTION","✓", BR.green], 174 ["NEGOTIATION", "✓", BR.green], 175 ["DUE DILIGENCE","✓", BR.green], 176 ["ESCROW", "●", BR.rust], 177 ["NOTARIZATION", "—", BR.mute], 178 ["HANDOFF", "—", BR.mute], 179 ].map(([l, i, c]) => ( 180 <div key={l} style={{display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:11, color:BR.ink2}}> 181 <span>{l}</span> 182 <span style={{color:c, fontWeight:700}}>{i}</span> 183 </div> 184 ))} 185 </div> 186 </div> 187 188 <div style={{height:20}}/> 189 <BRH n="07">Terms on Table</BRH> 190 <BRSpec k="Config" v="TACTICAL"/> 191 <BRSpec k="Price" v={`₵${formatCred(Math.round(ship.price*1.18))}`}/> 192 <BRSpec k="Method" v="Stellar Escrow"/> 193 <BRSpec k="ETA" v="2396.116"/> 194 <BRSpec k="Bay" v="22-E · Ceres"/> 195 196 <div style={{height:20}}/> 197 <BRH n="08">Audit Trail</BRH> 198 <div style={{fontFamily:"IBM Plex Mono", fontSize:10, color:BR.ink2, letterSpacing:0.5, lineHeight:1.8}}> 199 <div><span style={{color:BR.mute}}>0812Z</span> Thread opened</div> 200 <div><span style={{color:BR.mute}}>0828Z</span> Attachment · hull-history.pdf</div> 201 <div><span style={{color:BR.mute}}>0845Z</span> Offer ₵18.65M noted</div> 202 <div><span style={{color:BR.mute}}>0848Z</span> Tactical confirmed</div> 203 <div><span style={{color:BR.mute}}>0851Z</span> Form 7B filed</div> 204 <div style={{color:BR.rust}}><span style={{color:BR.mute}}>0852Z</span> Escrow pending clearance</div> 205 </div> 206 207 <div style={{marginTop:22}}> 208 <button onClick={()=>onNav("receipt")} style={{width:"100%", padding:"16px 0", background:BR.ink, color:BR.paper, border:"none", fontFamily:"Oswald", fontWeight:900, fontSize:12, letterSpacing:3, cursor:"pointer"}}>▸ VIEW RECEIPT</button> 209 <button onClick={()=>onNav("pay")} style={{width:"100%", marginTop:8, padding:"12px 0", background:"transparent", color:BR.ink, border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:3, cursor:"pointer"}}>REMITTANCE FORM</button> 210 </div> 211 </div> 212 </div> 213 214 <BRFooter/> 215 </BRPage> 216 ); 217 } 218 219 Object.assign(window, { BRBroker });