/* global React */
// ============================================================
// COTHON — the flagship product Mir built, presented as proof of
// what the practice can ship. Contains:
//  · narrative + live RFP-reading card
//  · full animated product mockup (browser chrome, auto-walks pipeline)
// ============================================================

function Cothon() {
  const mailto = 'mailto:management@mirconsulting.ca?subject=Cothon%20Early%20Access%20Request';
  return (
    <Section id="cothon" py={104} style={{background:'rgba(16,49,90,0.28)'}}>
      {/* Header */}
      <div className="cothon-head" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:60, alignItems:'end', marginBottom:56}}>
        <Reveal>
          <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:18}}>
            <img src="assets/Cothon.png" width={36} height={36} alt="Cothon"/>
            <Eyebrow color="var(--cothon-coral)" mark>From our lab</Eyebrow>
          </div>
          <h2 style={{fontSize:'clamp(34px, 4.4vw, 58px)', fontWeight:600, letterSpacing:'-0.025em', lineHeight:1.04, margin:0}}>
            Cothon: the pattern,<br/>
            <span className="serif-italic" style={{color:'var(--cothon-sand)', fontWeight:400}}>productized.</span>
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <p style={{fontSize:17, color:'var(--cothon-sand)', lineHeight:1.6, margin:0, maxWidth:500, justifySelf:'end'}}>
            The Sawa engagement proved every company bidding on contracts needs the same
            capabilities. So we built them into a product. Cothon is procurement intelligence:
            it discovers, reads, and scores government and commercial tenders. Now in early access.
          </p>
        </Reveal>
      </div>

      {/* Row 1: narrative + live RFP card */}
      <Reveal delay={160}>
        <div className="cothon-split" style={{display:'grid', gridTemplateColumns:'0.92fr 1.08fr', gap:44, alignItems:'center', marginBottom:64}}>
          <div>
            <div style={{display:'inline-flex', alignItems:'center', gap:9, padding:'6px 13px', borderRadius:9999, border:'1px solid rgba(239,141,136,0.3)', background:'rgba(239,141,136,0.07)', fontSize:11.5, color:'var(--cothon-coral)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', marginBottom:22}}>
              <span className="live-dot" style={{width:6, height:6, borderRadius:9999, background:'var(--cothon-coral)'}}/>
              NOW IN EARLY ACCESS
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:18}}>
              {[
                { Icon: Search,   t:'Smart discovery', d:'AI matches live opportunities to your capabilities and past performance, so you never miss a relevant bid.' },
                { Icon: FileText, t:'Instant analysis', d:'Upload a 100-page RFP and get requirements, deliverables, and compliance risks in minutes, not days.' },
                { Icon: Target,   t:'Win intelligence', d:'Win probability, price benchmarks, and competitor signal on every tender, so you bid only what you can win.' },
              ].map(f => (
                <div key={f.t} style={{display:'flex', gap:14}}>
                  <div style={{flexShrink:0, width:40, height:40, borderRadius:10, background:'rgba(13,43,82,0.7)', border:'1px solid var(--cothon-navy-border)', display:'flex', alignItems:'center', justifyContent:'center'}}>
                    <f.Icon size={18} color="var(--cothon-coral)"/>
                  </div>
                  <div>
                    <div style={{fontSize:16, fontWeight:600, marginBottom:5}}>{f.t}</div>
                    <div style={{fontSize:13.5, color:'var(--cothon-sand)', lineHeight:1.55}}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{marginTop:30}}>
              <CTAButton href={mailto}>Get early access</CTAButton>
            </div>
          </div>
          <RFPReadingCard/>
        </div>
      </Reveal>

      {/* Row 2: full product mockup */}
      <Reveal delay={120}>
        <div style={{textAlign:'center', marginBottom:28}}>
          <Eyebrow color="var(--cothon-sand)">Live product · hover any opportunity</Eyebrow>
        </div>
        <ProductMockup/>
      </Reveal>
    </Section>
  );
}

// ============================================================
// RFP READING CARD — a 104-page RFP read in real time.
// ============================================================
const RFP_REQS = [
  { t:'FedRAMP authorization', s:'meet',    note:'Reliability + SOC 2' },
  { t:'Bilingual support (EN/FR)', s:'meet', note:'In scope' },
  { t:'24/7 incident response', s:'partial', note:'Add on-call tier' },
  { t:'5+ years public-sector', s:'meet',   note:'8 yrs · 17 contracts' },
  { t:'Data residency: Canada', s:'meet',  note:'ca-central-1' },
  { t:'FedRAMP High boundary', s:'gap',     note:'Not yet authorized' },
  { t:'Accessibility WCAG 2.1 AA', s:'meet', note:'Audited' },
  { t:'On-site delivery, Ottawa', s:'partial', note:'Hybrid proposed' },
];
const STATUS = {
  meet:    { color:'var(--cothon-mint)',    label:'Fully Meets',    Icon: () => <CheckCirc size={13} color="var(--cothon-mint)"/> },
  partial: { color:'#FCD37C',               label:'Partially Meets',Icon: () => <Alert size={13} color="#FCD37C"/> },
  gap:     { color:'var(--cothon-coral)',   label:'Cannot Meet',    Icon: () => <XCirc size={13} color="var(--cothon-coral)"/> },
};

function RFPReadingCard() {
  const [step, setStep] = React.useState(0);
  const [progress, setProgress] = React.useState(0);
  const [phase, setPhase] = React.useState('reading');
  const total = RFP_REQS.length;

  React.useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setStep(total); setProgress(100); setPhase('done'); return; }
    let raf, alive = true;
    let local = 0, revealed = 0, holdUntil = 0, mode = 'reading';
    const tick = (now) => {
      if (!alive) return;
      if (mode === 'reading') {
        local += 0.0045;
        const p = Math.min(1, local);
        setProgress(Math.round(p * 100));
        const shouldReveal = Math.floor(p * total);
        if (shouldReveal > revealed) { revealed = shouldReveal; setStep(revealed); }
        if (p >= 1) { setStep(total); mode = 'done'; setPhase('done'); holdUntil = now + 3400; }
      } else if (mode === 'done') {
        if (now > holdUntil) { mode = 'fade'; setPhase('reset'); holdUntil = now + 600; }
      } else if (mode === 'fade') {
        if (now > holdUntil) { local = 0; revealed = 0; setStep(0); setProgress(0); mode = 'reading'; setPhase('reading'); }
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => { alive = false; cancelAnimationFrame(raf); };
  }, []);

  const shown = RFP_REQS.slice(0, step);
  const met = shown.filter(r => r.s === 'meet').length;
  const ringScore = step === total
    ? Math.round((RFP_REQS.filter(r=>r.s==='meet').length/total)*100)
    : Math.round((met/Math.max(1,step))*100*(step/total));

  return (
    <div style={{
      position:'relative',
      background:'linear-gradient(180deg, rgba(16,49,90,0.96), rgba(13,43,82,0.96))',
      border:'1px solid var(--cothon-navy-border)', borderRadius:16, overflow:'hidden',
      boxShadow:'0 40px 80px -28px rgba(0,0,0,0.6), 0 0 0 1px rgba(239,141,136,0.05)',
    }}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'13px 16px', borderBottom:'1px solid var(--cothon-navy-border)', background:'rgba(13,43,82,0.7)'}}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <span className="live-dot" style={{width:6, height:6, borderRadius:9999, background:'var(--cothon-coral)'}}/>
          <span style={{fontSize:11, color:'var(--cothon-sand)', textTransform:'uppercase', letterSpacing:'0.14em', fontFamily:'JetBrains Mono, monospace'}}>Reading RFP</span>
        </div>
        <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, color:'var(--cothon-sand)', letterSpacing:'0.08em', display:'flex', gap:8, alignItems:'center'}}>
          <FileText size={12} color="var(--cothon-sand)"/> RFP-2024-IT-0892.pdf · 104 pp
        </div>
      </div>

      <div style={{padding:'18px 20px 20px'}}>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10}}>
          <div style={{fontSize:11, fontFamily:'JetBrains Mono, monospace', color:'var(--cothon-sand)', letterSpacing:'0.1em'}}>
            {phase==='done' ? 'EXTRACTION COMPLETE' : 'EXTRACTING REQUIREMENTS'}
          </div>
          <div style={{fontSize:11, fontFamily:'JetBrains Mono, monospace', color:'var(--cothon-cream)'}}>
            {step}<span style={{color:'var(--cothon-sand)'}}>/{total} · {Math.round(progress*1.04)} clauses</span>
          </div>
        </div>
        <div style={{height:4, borderRadius:9999, background:'rgba(13,43,82,0.8)', overflow:'hidden', marginBottom:18}}>
          <div style={{height:'100%', width:`${progress}%`, background:'linear-gradient(90deg, #EF8D88, #D68A59)', transition:'width 90ms linear', boxShadow:'0 0 10px rgba(239,141,136,0.5)'}}/>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'108px 1fr', gap:16, alignItems:'start'}}>
          <ComplianceRing score={ringScore} />
          <div style={{display:'flex', flexDirection:'column', gap:5, minHeight:248}}>
            {RFP_REQS.map((r, i) => {
              const visible = i < step;
              const st = STATUS[r.s];
              return (
                <div key={i} style={{
                  display:'flex', alignItems:'center', gap:8, padding:'6px 9px',
                  background:'rgba(13,43,82,0.55)',
                  border:`1px solid ${visible ? 'var(--cothon-navy-border)' : 'transparent'}`,
                  borderRadius:6,
                  opacity: visible ? 1 : 0,
                  transform: visible ? 'translateY(0)' : 'translateY(6px)',
                  transition:'opacity 360ms var(--ease-out), transform 360ms var(--ease-out), border-color 360ms',
                }}>
                  <st.Icon/>
                  <span style={{flex:1, fontSize:12, color:'var(--cothon-cream)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{r.t}</span>
                  <span style={{fontSize:9.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', whiteSpace:'nowrap'}}>{r.note}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{marginTop:16, paddingTop:14, borderTop:'1px solid var(--cothon-navy-border)', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{fontSize:11, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', display:'flex', alignItems:'center', gap:7}}>
            <Clock size={12} color="var(--cothon-sand)"/> {phase==='done' ? 'Read in 38s · was 2 days' : 'Reading 104 pages…'}
          </div>
          <div style={{fontSize:11, color:'var(--cothon-coral)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.04em', display:'flex', alignItems:'center', gap:6}}>
            Draft response <Arrow size={11} color="var(--cothon-coral)"/>
          </div>
        </div>
      </div>
    </div>
  );
}

function ComplianceRing({ score }) {
  const R = 40, C = 2 * Math.PI * R;
  const pct = Math.max(0, Math.min(100, score));
  const dash = (pct / 100) * C;
  return (
    <div style={{position:'relative', width:108, height:108, display:'flex', alignItems:'center', justifyContent:'center'}}>
      <svg width="108" height="108" viewBox="0 0 108 108" style={{transform:'rotate(-90deg)'}}>
        <circle cx="54" cy="54" r={R} fill="none" stroke="rgba(31,62,105,0.9)" strokeWidth="7"/>
        <defs>
          <linearGradient id="ringgrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#EF8D88"/><stop offset="100%" stopColor="#D68A59"/>
          </linearGradient>
        </defs>
        <circle cx="54" cy="54" r={R} fill="none" stroke="url(#ringgrad)" strokeWidth="7"
          strokeLinecap="round" strokeDasharray={`${dash} ${C}`}
          style={{transition:'stroke-dasharray 500ms var(--ease-out)'}}/>
      </svg>
      <div style={{position:'absolute', textAlign:'center'}}>
        <div style={{fontSize:26, fontWeight:700, letterSpacing:'-0.03em', lineHeight:1, fontVariantNumeric:'tabular-nums'}}>
          <Gradient>{pct}<span style={{fontSize:13}}>%</span></Gradient>
        </div>
        <div style={{fontSize:8.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.1em', marginTop:3}}>FIT SCORE</div>
      </div>
    </div>
  );
}

// ============================================================
// PRODUCT MOCKUP — animated opportunities board in browser chrome.
// ============================================================
const OPPS = [
  { id:'PWGSC-IT-0892', title:'IT infrastructure modernization', dept:'Public Works · PWGSC', value:'$2,500,000', gsin:'N7030', days:13, win:62, rec:'BID',
    price:{ target:'$2.31M', pos:0.58 }, drivers:[['Capability',92],['Incumbent fit',78],['Past wins',65],['GSIN match',71]], bidders:[['CGI Group','HIGH','#FCA5A5'],['Bell Canada','HIGH','#FCA5A5'],['Deloitte','MED','#FCD37C']] },
  { id:'DND-ENG-0451', title:'Engineering advisory services', dept:'Defence · DND', value:'$1,180,000', gsin:'R0199', days:21, win:48, rec:'WATCH',
    price:{ target:'$1.05M', pos:0.44 }, drivers:[['Capability',74],['Incumbent fit',41],['Past wins',58],['GSIN match',66]], bidders:[['Stantec','HIGH','#FCA5A5'],['WSP','MED','#FCD37C'],['AECOM','MED','#FCD37C']] },
  { id:'CRA-DATA-0233', title:'Data platform & analytics', dept:'Revenue · CRA', value:'$3,400,000', gsin:'D0302', days:6, win:71, rec:'BID',
    price:{ target:'$3.12M', pos:0.63 }, drivers:[['Capability',88],['Incumbent fit',69],['Past wins',83],['GSIN match',77]], bidders:[['Accenture','MED','#FCD37C'],['IBM','HIGH','#FCA5A5']] },
  { id:'TBS-SEC-0118', title:'Security operations centre', dept:'Treasury · TBS', value:'$960,000', gsin:'D0306', days:31, win:34, rec:'PASS',
    price:{ target:'$0.88M', pos:0.36 }, drivers:[['Capability',52],['Incumbent fit',28],['Past wins',39],['GSIN match',44]], bidders:[['KPMG','HIGH','#FCA5A5'],['EY','HIGH','#FCA5A5'],['Mandiant','HIGH','#FCA5A5']] },
];
const REC_STYLE = {
  BID:   { color:'var(--cothon-mint)',   bg:'rgba(163,235,177,0.10)', bd:'rgba(163,235,177,0.35)' },
  WATCH: { color:'#FCD37C',              bg:'rgba(252,211,124,0.10)', bd:'rgba(252,211,124,0.35)' },
  PASS:  { color:'var(--cothon-sand)',   bg:'rgba(194,178,128,0.10)', bd:'rgba(194,178,128,0.30)' },
};

function ProductMockup() {
  const [active, setActive] = React.useState(0);
  const [hovering, setHovering] = React.useState(false);
  const [ref, seen] = useInView({ threshold: 0.3 });

  React.useEffect(() => {
    if (!seen || hovering) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;
    const id = setInterval(() => setActive(a => (a + 1) % OPPS.length), 2600);
    return () => clearInterval(id);
  }, [seen, hovering]);

  const opp = OPPS[active];

  return (
    <div ref={ref} style={{
      borderRadius:16, overflow:'hidden', border:'1px solid var(--cothon-navy-border)', background:'var(--cothon-navy-panel)',
      boxShadow:'0 50px 100px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(239,141,136,0.04)',
      opacity: seen ? 1 : 0, transform: seen ? 'scale(1)' : 'scale(0.985)',
      transition:'opacity 800ms var(--ease-out), transform 800ms var(--ease-out)',
    }}>
      <div style={{display:'flex', alignItems:'center', gap:14, padding:'12px 16px', borderBottom:'1px solid var(--cothon-navy-border)', background:'rgba(13,43,82,0.7)'}}>
        <div style={{display:'flex', gap:7}}>
          {['#EF8D88','#FCD37C','#A3EBB1'].map(c => <span key={c} style={{width:11, height:11, borderRadius:9999, background:c, opacity:0.85}}/>)}
        </div>
        <div style={{flex:1, maxWidth:380, margin:'0 auto', height:28, borderRadius:7, background:'rgba(13,43,82,0.8)', border:'1px solid var(--cothon-navy-border)', display:'flex', alignItems:'center', gap:8, padding:'0 12px', fontSize:11.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace'}}>
          <Lock size={11} color="var(--cothon-sand)"/> app.cothon.ca/opportunities
        </div>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <Bell size={14} color="var(--cothon-sand)"/>
          <span style={{width:22, height:22, borderRadius:9999, background:'linear-gradient(135deg,#EF8D88,#D68A59)'}}/>
        </div>
      </div>

      <div className="mockup-body" style={{display:'grid', gridTemplateColumns:'1.35fr 1fr', minHeight:430}}>
        <div style={{borderRight:'1px solid var(--cothon-navy-border)', padding:'16px 16px 18px'}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14}}>
            <div style={{display:'flex', alignItems:'center', gap:9}}>
              <span style={{fontSize:15, fontWeight:600}}>Opportunities</span>
              <span style={{fontSize:11, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', padding:'2px 7px', borderRadius:9999, border:'1px solid var(--cothon-navy-border)'}}>1,247 live</span>
            </div>
            <div style={{display:'flex', alignItems:'center', gap:8, fontSize:11, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace'}}>
              <Search size={13} color="var(--cothon-sand)"/> Sorted by win prob
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 64px 52px', gap:10, padding:'0 10px 8px', fontSize:9.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.1em', borderBottom:'1px solid var(--cothon-navy-border)'}}>
            <span>OPPORTUNITY</span><span style={{textAlign:'right'}}>WIN %</span><span style={{textAlign:'right'}}>REC</span>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:6, marginTop:8}}>
            {OPPS.map((o, i) => {
              const on = i === active;
              const rs = REC_STYLE[o.rec];
              return (
                <div key={o.id}
                  onMouseEnter={() => { setHovering(true); setActive(i); }}
                  onMouseLeave={() => setHovering(false)}
                  style={{
                    display:'grid', gridTemplateColumns:'1fr 64px 52px', gap:10, alignItems:'center',
                    padding:'11px 10px', borderRadius:8, cursor:'pointer',
                    background: on ? 'rgba(239,141,136,0.07)' : 'transparent',
                    border:`1px solid ${on ? 'rgba(239,141,136,0.35)' : 'transparent'}`,
                    transition:'background 200ms, border-color 200ms',
                    opacity: seen ? 1 : 0,
                    transform: seen ? 'translateX(0)' : 'translateX(-10px)',
                    transitionDelay: `${i * 90 + 200}ms`,
                  }}>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:13, fontWeight:500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{o.title}</div>
                    <div style={{fontSize:10.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', marginTop:3}}>{o.dept} · {o.days}d left</div>
                  </div>
                  <div style={{textAlign:'right', fontSize:15, fontWeight:700, fontVariantNumeric:'tabular-nums', color: on ? 'var(--cothon-coral)':'var(--cothon-cream)'}}>{o.win}</div>
                  <div style={{textAlign:'right'}}>
                    <span style={{fontSize:9, fontFamily:'JetBrains Mono, monospace', fontWeight:600, letterSpacing:'0.06em', padding:'3px 7px', borderRadius:9999, color:rs.color, background:rs.bg, border:`1px solid ${rs.bd}`}}>{o.rec}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{padding:'16px 18px 18px', background:'rgba(13,43,82,0.45)', position:'relative'}}>
          <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:14}}>
            <Sparkle size={13} color="var(--cothon-coral)"/>
            <span style={{fontSize:11, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.12em'}}>BID INTELLIGENCE</span>
          </div>
          <DetailPane key={opp.id} opp={opp} />
        </div>
      </div>
    </div>
  );
}

function DetailPane({ opp }) {
  return (
    <div style={{animation:'fadeUp 420ms var(--ease-out) both'}}>
      <div style={{fontSize:10.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', marginBottom:5}}>{opp.id} · GSIN {opp.gsin}</div>
      <div style={{fontSize:17, fontWeight:600, letterSpacing:'-0.01em', lineHeight:1.2}}>{opp.title}</div>
      <div style={{fontSize:12, color:'var(--cothon-sand)', marginTop:5, marginBottom:16}}>{opp.value} · {opp.days} days left</div>

      <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:7}}>
        <span style={{fontSize:10, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.1em'}}>WIN PROBABILITY</span>
        <span style={{fontSize:22, fontWeight:700, fontVariantNumeric:'tabular-nums'}}><Gradient>{opp.win}<span style={{fontSize:12}}>%</span></Gradient></span>
      </div>
      <div style={{height:5, borderRadius:9999, background:'rgba(13,43,82,0.8)', overflow:'hidden', marginBottom:16}}>
        <div style={{height:'100%', width:`${opp.win}%`, background:'linear-gradient(90deg,#EF8D88,#D68A59)', transition:'width 600ms var(--ease-out)'}}/>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'9px 16px', marginBottom:16}}>
        {opp.drivers.map(([l,v]) => (
          <div key={l}>
            <div style={{display:'flex', justifyContent:'space-between', marginBottom:4}}>
              <span style={{fontSize:10.5, color:'var(--cothon-cream)'}}>{l}</span>
              <span style={{fontSize:10.5, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace'}}>{v}</span>
            </div>
            <div style={{height:3, borderRadius:9999, background:'rgba(13,43,82,0.8)', overflow:'hidden'}}>
              <div style={{height:'100%', width:`${v}%`, background: v>70?'var(--cothon-mint)':v>50?'#FCD37C':'var(--cothon-coral)', transition:'width 600ms var(--ease-out)'}}/>
            </div>
          </div>
        ))}
      </div>

      <div style={{marginBottom:14}}>
        <div style={{display:'flex', justifyContent:'space-between', marginBottom:8}}>
          <span style={{fontSize:10, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.1em'}}>PRICE BENCHMARK</span>
          <span style={{fontSize:11, color:'var(--cothon-cream)', fontFamily:'JetBrains Mono, monospace'}}>{opp.price.target} target</span>
        </div>
        <div style={{position:'relative', height:8}}>
          <div style={{position:'absolute', top:3, left:0, right:0, height:3, background:'rgba(13,43,82,0.9)', borderRadius:9999}}/>
          <div style={{position:'absolute', top:3, left:'30%', width:'38%', height:3, background:'rgba(239,141,136,0.3)', borderRadius:9999}}/>
          <div style={{position:'absolute', top:0, left:`${opp.price.pos*100}%`, width:2, height:9, background:'var(--cothon-coral)', transition:'left 600ms var(--ease-out)'}}/>
        </div>
      </div>

      <div>
        <div style={{fontSize:10, color:'var(--cothon-sand)', fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.1em', marginBottom:8}}>LIKELY BIDDERS</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
          {opp.bidders.map(([n,t,c]) => (
            <span key={n} style={{display:'inline-flex', alignItems:'center', gap:6, padding:'4px 9px', borderRadius:9999, background:'rgba(13,43,82,0.7)', border:'1px solid var(--cothon-navy-border)', fontSize:11, color:'var(--cothon-cream)'}}>
              {n}<span style={{fontSize:8.5, fontFamily:'JetBrains Mono, monospace', color:c, letterSpacing:'0.06em'}}>{t}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Cothon });