/ brutalist / br-onb-broker.jsx
br-onb-broker.jsx
  1  // Broker onboarding dossier (Form 05). Bureaucratic tone.
  2  // 3 artboards: accreditation & bond, book & mandate, oath of fair dealing.
  3  
  4  function OnbBroker1() {
  5    return (
  6      <BRPage width={1280} minHeight={2000}>
  7        <BRNav active="home" cartCount={0} onNav={()=>{}}/>
  8        <div style={{padding:"32px 60px 20px"}}>
  9          <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}>
 10            <div>
 11              <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 05 · BROKER'S DOSSIER · PAGE 1 OF 3 · ACCREDITATION</div>
 12              <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:62, letterSpacing:-0.5, textTransform:"uppercase"}}>Broker's Dossier</div>
 13              <div style={{fontFamily:"IBM Plex Sans", fontSize:14, color:BR.ink2, marginTop:4, maxWidth:700, lineHeight:1.5}}>
 14                Accreditation is by examination and surety bond. Brokers trade under their own name and are personally liable for warranties of title on every lot dispatched. False particulars void license per §412.B.
 15              </div>
 16            </div>
 17            <BRStamp rotate={-7}>UNACCREDITED</BRStamp>
 18          </div>
 19        </div>
 20        <div style={{padding:"10px 60px"}}>
 21          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10, marginBottom:20}}>
 22            {[["01","Accreditation","IN HAND"],["02","Book & Mandate","PENDING"],["03","Oath of Fair Dealing","PENDING"]].map(([n,t,s],i)=>(
 23              <div key={n} style={{border:`2px solid ${BR.ink}`, padding:"8px 12px", background:i===0?BR.ink:BR.paper, color:i===0?BR.paper:BR.ink}}>
 24                <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, opacity:0.7}}>PAGE {n}</div>
 25                <div style={{display:"flex", justifyContent:"space-between"}}>
 26                  <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, letterSpacing:2, textTransform:"uppercase"}}>{t}</div>
 27                  <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2}}>· {s}</div>
 28                </div>
 29              </div>
 30            ))}
 31          </div>
 32          <div style={{display:"grid", gridTemplateColumns:"1fr 360px", gap:40}}>
 33            <div>
 34              <BRH n="05.01">Broker particulars</BRH>
 35              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
 36                {[["Accredited name","SAREN · M · BOLT"],["Trading style","BOLT & SYNDICATES"],["Coalition ID","CID-4-881-09041-R"],["Licence registry","CBR-884-G4"],["Home exchange","STRATA·G-4 PRIMARY"],["Years on the floor","9"],["Transponder","saren@bolt.fleet"],["Preferred desks","G-4 · H-2 · C-1"]].map(([k,v])=>(
 37                  <div key={k}>
 38                    <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, color:BR.mute}}>{k.toUpperCase()}</div>
 39                    <div style={{border:`2px solid ${BR.ink}`, background:BR.paper2, padding:"8px 10px", fontFamily:"IBM Plex Mono", fontSize:12, marginTop:3}}>{v}</div>
 40                  </div>
 41                ))}
 42              </div>
 43              <BRH n="05.02">Examination · Coalition Brokerage Board</BRH>
 44              <div style={{border:`2px solid ${BR.ink}`, padding:14}}>
 45                <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:12}}>
 46                  {[["I · Title","PASS · 94"],["II · Escrow","PASS · 88"],["III · Warranty","PASS · 91"],["IV · Ethics","PASS · 97"]].map(([k,v])=>(
 47                    <div key={k}>
 48                      <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>PAPER {k.toUpperCase()}</div>
 49                      <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:18, color:BR.green, marginTop:2, letterSpacing:1}}>{v}</div>
 50                    </div>
 51                  ))}
 52                </div>
 53                <div style={{marginTop:10, paddingTop:8, borderTop:`1px solid ${BR.ink}`, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>EXAMINED 2396.091 · BOARD ASSESSOR KIR-7 · RE-EXAM IN 5 YRS</div>
 54              </div>
 55              <BRH n="05.03">Surety bond posted</BRH>
 56              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10}}>
 57                {[["Surety","7,500,000 ℂ"],["Underwriter","BRELMIR & CO."],["Bond no.","SUR-884-44012"],["Posted","2396.091"],["Expires","2397.091"],["Claims open","0"]].map(([k,v])=>(
 58                  <div key={k} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px"}}>
 59                    <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>{k.toUpperCase()}</div>
 60                    <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:15, marginTop:2, letterSpacing:1}}>{v}</div>
 61                  </div>
 62                ))}
 63              </div>
 64              <BRH n="05.04">Disciplinary register</BRH>
 65              <div style={{border:`2px solid ${BR.ink}`, padding:0, background:BR.paper2}}>
 66                <div style={{padding:"24px", textAlign:"center", fontFamily:"Oswald", fontWeight:700, fontSize:22, letterSpacing:3, color:BR.green, textTransform:"uppercase"}}>— NO ENTRIES ON FILE —</div>
 67                <div style={{padding:"6px 14px", borderTop:`1px solid ${BR.ink}`, fontFamily:"IBM Plex Mono", fontSize:10, color:BR.mute, letterSpacing:2}}>CHECKED 2396.114 · COALITION DISCIPLINARY REGISTRAR</div>
 68              </div>
 69            </div>
 70            <div>
 71              <div style={{border:`2px solid ${BR.ink}`, padding:14, background:BR.paper2}}>
 72                <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>BROKER PLATE</div>
 73                <div style={{aspectRatio:"1/1.2", background:`repeating-linear-gradient(45deg, ${BR.paper} 0 8px, ${BR.paper2} 8px 16px)`, border:`2px solid ${BR.ink}`, display:"flex", alignItems:"center", justifyContent:"center"}}>
 74                  <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:2, color:BR.mute}}>PHOTO · 2395.202</div>
 75                </div>
 76                <div style={{marginTop:10, display:"grid", gridTemplateColumns:"auto 1fr", gap:8, fontFamily:"IBM Plex Mono", fontSize:11}}>
 77                  <div style={{color:BR.mute}}>LIC</div><div>CBR-884-G4</div>
 78                  <div style={{color:BR.mute}}>SIG</div><div style={{fontFamily:"Caveat", fontSize:17}}>S. Bolt</div>
 79                  <div style={{color:BR.mute}}>TIER</div><div>SENIOR · IX</div>
 80                </div>
 81              </div>
 82              <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12}}>
 83                <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>REFERENCES</div>
 84                {[["I. Kehl · Desk G-4","WRITTEN"],["VLK-2 · Registrar","VERBAL"],["T. Oro · Forge rep","WRITTEN"]].map(([k,v])=>(
 85                  <div key={k} style={{display:"flex", justifyContent:"space-between", padding:"4px 0", borderBottom:`1px dotted ${BR.ink}33`, fontFamily:"IBM Plex Mono", fontSize:10}}>
 86                    <span style={{color:BR.ink2}}>{k.toUpperCase()}</span>
 87                    <span style={{color:BR.green, fontWeight:600}}>· {v}</span>
 88                  </div>
 89                ))}
 90              </div>
 91              <div style={{marginTop:14, padding:"10px 14px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, textAlign:"center"}}>PROCEED TO BOOK →</div>
 92            </div>
 93          </div>
 94        </div>
 95        <BRFooter/>
 96      </BRPage>
 97    );
 98  }
 99  
100  function OnbBroker2() {
101    return (
102      <BRPage width={1280} minHeight={2000}>
103        <BRNav active="home" cartCount={0} onNav={()=>{}}/>
104        <div style={{padding:"32px 60px 20px"}}>
105          <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}>
106            <div>
107              <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 05 · PAGE 2 OF 3 · BOOK & MANDATE</div>
108              <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:62, letterSpacing:-0.5, textTransform:"uppercase"}}>Book & Mandate</div>
109            </div>
110          </div>
111        </div>
112        <div style={{padding:"10px 60px"}}>
113          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:10, marginBottom:20}}>
114            {[["01","Accreditation","SIGNED"],["02","Book & Mandate","IN HAND"],["03","Oath of Fair Dealing","PENDING"]].map(([n,t,s],i)=>(
115              <div key={n} style={{border:`2px solid ${BR.ink}`, padding:"8px 12px", background:i===1?BR.ink:BR.paper, color:i===1?BR.paper:BR.ink}}>
116                <div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2, opacity:0.7}}>PAGE {n}</div>
117                <div style={{display:"flex", justifyContent:"space-between"}}><div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, letterSpacing:2}}>{t.toUpperCase()}</div><div style={{fontFamily:"IBM Plex Mono", fontSize:9, letterSpacing:2}}>· {s}</div></div>
118              </div>
119            ))}
120          </div>
121          <div style={{display:"grid", gridTemplateColumns:"1fr 360px", gap:40}}>
122            <div>
123              <BRH n="05.05">First lots on your book</BRH>
124              <div style={{border:`2px solid ${BR.ink}`, padding:0}}>
125                <div style={{display:"grid", gridTemplateColumns:"50px 1.2fr 1fr 1fr 120px 100px", borderBottom:`2px solid ${BR.ink}`, background:BR.ink, color:BR.paper}}>
126                  {["#","SERIAL · HULL","CONSIGNOR","CLASS","RESERVE","STATE"].map(h=>(
127                    <div key={h} style={{padding:"8px 10px", fontFamily:"Oswald", fontWeight:700, fontSize:10, letterSpacing:2}}>{h}</div>
128                  ))}
129                </div>
130                {[
131                  ["01","KRV-IC-2849-AX · ASHBORN","Kehl Holdings","Interceptor","1,200,000 ℂ","DRAFT"],
132                  ["02","VNT-CH-1044-BM · MAULSTONE","Oro Forge","Hauler","720,000 ℂ","INKED"],
133                  ["03","HEL-YT-7731-XR · WAYFARER","A. Nava","Yacht","1,850,000 ℂ","DRAFT"],
134                  ["04","OBS-EX-5519-TC · LONG LOOK","Explorer's Guild","Explorer","2,040,000 ℂ","DRAFT"],
135                ].map((r,i)=>(
136                  <div key={r[0]} style={{display:"grid", gridTemplateColumns:"50px 1.2fr 1fr 1fr 120px 100px", borderBottom:`1px dotted ${BR.ink}44`, background:i%2?BR.paper2:BR.paper, fontFamily:"IBM Plex Mono", fontSize:11}}>
137                    {r.map((c,j)=><div key={j} style={{padding:"8px 10px"}}>{j===5?<BRChip rust={c==="DRAFT"} ok={c==="INKED"}>{c}</BRChip>:c}</div>)}
138                  </div>
139                ))}
140              </div>
141              <BRH n="05.06">Commission schedule</BRH>
142              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr 1fr", gap:10}}>
143                {[["≤ 500 kℂ","6.0%"],["500 k–2 Mℂ","4.5%"],["2–10 Mℂ","3.0%"],["> 10 Mℂ","1.75%"]].map(([k,v])=>(
144                  <div key={k} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px"}}>
145                    <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>BAND · {k.toUpperCase()}</div>
146                    <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:26, marginTop:2, letterSpacing:1}}>{v}</div>
147                  </div>
148                ))}
149              </div>
150              <BRH n="05.07">Operating ceilings</BRH>
151              <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:10}}>
152                {[["Concurrent lots on book","50"],["Per-lot reserve ceiling","15,000,000 ℂ"],["Sectors of accreditation","G-4 · H-2 · C-1"],["Escrow handling","COALITION-BONDED"],["Payment lag tolerated","72 HRS"],["Arbitration forum","COMMONS · §12"]].map(([k,v])=>(
153                  <div key={k} style={{border:`2px solid ${BR.ink}`, padding:"10px 12px"}}>
154                    <div style={{fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2}}>{k.toUpperCase()}</div>
155                    <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:16, marginTop:2, letterSpacing:1}}>{v}</div>
156                  </div>
157                ))}
158              </div>
159            </div>
160            <div>
161              <div style={{border:`2px solid ${BR.ink}`, padding:14}}>
162                <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>CONSIGNOR INVITES</div>
163                {["Kehl Holdings","Oro Forge","Asa Nava","Explorer's Guild"].map(c=>(
164                  <div key={c} style={{display:"grid", gridTemplateColumns:"1fr auto", padding:"5px 0", borderBottom:`1px dotted ${BR.ink}33`, fontFamily:"IBM Plex Mono", fontSize:11}}>
165                    <span>{c}</span><span style={{color:BR.rust, letterSpacing:2}}>· DISPATCHED</span>
166                  </div>
167                ))}
168                <div style={{marginTop:10, padding:"8px 10px", border:`2px solid ${BR.ink}`, fontFamily:"Oswald", fontWeight:700, fontSize:11, letterSpacing:2, textAlign:"center"}}>+ ADD CONSIGNOR</div>
169              </div>
170              <div style={{border:`2px solid ${BR.ink}`, padding:14, marginTop:12, background:BR.paper2}}>
171                <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>DESK ASSIGNMENT</div>
172                <div style={{fontFamily:"IBM Plex Mono", fontSize:11, padding:"3px 0"}}><span style={{color:BR.mute}}>PRIMARY</span> CERES-II · G-4</div>
173                <div style={{fontFamily:"IBM Plex Mono", fontSize:11, padding:"3px 0"}}><span style={{color:BR.mute}}>LEAD</span> IMARI KEHL</div>
174                <div style={{fontFamily:"IBM Plex Mono", fontSize:11, padding:"3px 0"}}><span style={{color:BR.mute}}>CHANNEL</span> STRATA-G4-47</div>
175              </div>
176              <div style={{marginTop:14, padding:"10px 14px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, textAlign:"center"}}>PROCEED TO OATH →</div>
177            </div>
178          </div>
179        </div>
180        <BRFooter/>
181      </BRPage>
182    );
183  }
184  
185  function OnbBroker3() {
186    return (
187      <BRPage width={1280} minHeight={1700}>
188        <BRNav active="home" cartCount={0} onNav={()=>{}}/>
189        <div style={{padding:"32px 60px 20px"}}>
190          <div style={{display:"flex", justifyContent:"space-between", borderBottom:`3px solid ${BR.ink}`, paddingBottom:12}}>
191            <div>
192              <div style={{fontFamily:"IBM Plex Mono", fontSize:10, letterSpacing:3, color:BR.rust}}>FORM 05 · PAGE 3 OF 3 · OATH OF FAIR DEALING</div>
193              <div style={{fontFamily:"Oswald", fontWeight:900, fontSize:62, letterSpacing:-0.5, textTransform:"uppercase"}}>Oath of Fair Dealing</div>
194            </div>
195            <BRStamp rotate={-5} color={BR.green}>CEREMONIAL</BRStamp>
196          </div>
197        </div>
198        <div style={{padding:"10px 60px"}}>
199          <div style={{display:"grid", gridTemplateColumns:"1fr 340px", gap:40}}>
200            <div style={{border:`4px double ${BR.ink}`, padding:"28px 34px", background:BR.paper2, position:"relative"}}>
201              <div style={{position:"absolute", top:-16, left:24, background:BR.paper, padding:"0 10px", fontFamily:"Oswald", fontWeight:900, fontSize:14, letterSpacing:4}}>OATH · §12.04</div>
202              <div style={{fontFamily:"IBM Plex Sans", fontSize:16, lineHeight:1.75, fontStyle:"italic"}}>
203                I, <span style={{fontFamily:"Caveat", fontStyle:"normal", fontSize:22, color:BR.rust, borderBottom:`1px solid ${BR.ink}`, padding:"0 8px"}}>Saren Bolt</span>, seeking accreditation as a broker of bonded hulls under Coalition licence CBR-884-G4, do solemnly affirm:
204                <br/><br/>
205                — That I shall <strong>warrant every title I dispatch</strong>, declare every defect known to me, and withhold no material fact from any buyer;
206                <br/><br/>
207                — That I shall <strong>charge only the published commission</strong>, take no back-consideration from forges or yards, and shelter no lot from inspection;
208                <br/><br/>
209                — That I shall hold all escrow funds in Coalition-bonded accounts, release no remittance before clearance, and remit to the consignor within seventy-two hours of settlement; and
210                <br/><br/>
211                — That upon finding of malfeasance by the Disciplinary Registrar, I submit to suspension or revocation of my licence and forfeiture of my surety.
212                <br/><br/>
213                <strong>So sworn, so licensed, so bonded.</strong>
214              </div>
215              <div style={{marginTop:34, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:30}}>
216                {[["Broker","Saren Bolt","2396.114.0846Z"],["Registrar","VLK-2","2396.114.0847Z"],["Underwriter","Brelmir · J.K.","2396.114.0847Z"]].map(([l,n,t])=>(
217                  <div key={l}><div style={{height:34, borderBottom:`2px solid ${BR.ink}`, fontFamily:"Caveat", fontSize:24, paddingLeft:6}}>{n}</div><div style={{display:"flex", justifyContent:"space-between", fontFamily:"IBM Plex Mono", fontSize:9, color:BR.mute, letterSpacing:2, marginTop:4}}><span>{l.toUpperCase()}</span><span>{t}</span></div></div>
218                ))}
219              </div>
220            </div>
221            <div>
222              <div style={{border:`2px solid ${BR.ink}`, padding:14}}>
223                <div style={{fontFamily:"Oswald", fontWeight:700, fontSize:12, letterSpacing:3, borderBottom:`1px solid ${BR.ink}`, paddingBottom:6, marginBottom:8}}>ACCREDITATION FEES</div>
224                {[["License fee","1,200 ℂ"],["Surety levy","450 ℂ"],["Seal inscription","120 ℂ"]].map(([k,v])=>(
225                  <div key={k} style={{display:"flex", justifyContent:"space-between", padding:"3px 0", fontFamily:"IBM Plex Mono", fontSize:11}}>
226                    <span style={{color:BR.mute}}>{k}</span><span style={{fontWeight:600}}>{v}</span>
227                  </div>
228                ))}
229                <div style={{borderTop:`2px solid ${BR.ink}`, marginTop:8, paddingTop:6, display:"flex", justifyContent:"space-between", fontFamily:"Oswald", fontSize:15, fontWeight:700, letterSpacing:2}}>
230                  <span>TOTAL</span><span>1,770 ℂ</span>
231                </div>
232              </div>
233              <div style={{marginTop:14, padding:"14px 14px", background:BR.rust, color:BR.paper, fontFamily:"Oswald", fontWeight:900, fontSize:14, letterSpacing:3, textAlign:"center"}}>INSCRIBE & LICENSE →</div>
234            </div>
235          </div>
236        </div>
237        <BRFooter/>
238      </BRPage>
239    );
240  }
241  
242  Object.assign(window, { OnbBroker1, OnbBroker2, OnbBroker3 });