// Deep-dive drawer — the evidence layer behind the summary strip.
//
// Two layouts, keyed by lens:
//
//   InvestorDeepDive  — what a Columbia IC / LP reader needs to underwrite
//     Per 2026-04-21 plain-english audit, trimmed to what earns its pixels:
//     1. Development Yield & Capital Efficiency  · PROMOTED to lead — this is
//         Patrick's #1 lens, the value-creation metric he came out of CFO seat
//         reading every morning. Build-to-core's whole thesis lives here.
//     2. Portfolio-Level Return Profile  · IRR / MOIC / Payback / DSCR
//         (Equity Multiple dropped — redundant with MOIC)
//     3. Per-Site Return Metrics          · IRR / MOIC / Payback only
//         (DSCR dropped — covenant lives at portfolio level)
//     4. NOI Ramp — Portfolio             · committed vs forecast by year
//     5. Tenant Credit & Concentration    · Top-1 and Top-3 merged
//     6. Exit Scenarios (Yr 5)            · three paths + probabilities.
//         Cap-rate assumptions demoted to footnote — Patrick re-marks himself
//     7. Variance to Underwriting         · the "hitting the plan" report card,
//         graded against the Dec '25 Columbia base case
//
//     Removed entirely:
//       — Capital Stack & Sources (Columbia tracks to the penny internally)
//       — JV & LP Allocations (Columbia IS Fund III; showing back own terms)
//
//   OperatorDeepDive  — what a GP / construction exec needs to steer delivery
//     1. Stewardship Headline             · capital deployed vs plan +
//         portfolio-weighted schedule slip; the "on budget / on schedule"
//         signal that must lead, not trail
//     2. Operational Health — Portfolio   · uptime, PUE, MTTR, tickets
//     3. Permit Cycle by Jurisdiction     · per-site cycle times
//     4. Change Orders & Cost Variance    · 4 KPIs + top-3 driver pills
//     5. Active Risks & Workforce        · elevated above RFI/Power —
//         risk transparency up front builds trust; burying it reads as evasive
//     6. RFI Aging & Commissioning        · single open-RFI tile + milestones;
//         full aging detail lives in the operational log, not the IC deck
//     7. Power Ramp & Interconnect        · full-width closer with the ramp chart
//
// Both grids are 2-column; `span={2}` promotes a card to full-width. The drawer
// itself is handled by the parent — this file just renders the contents.

// ── Atoms ────────────────────────────────────────────────────────
// Source-tag palette — keyed to the three data lenses in the sourcing brief:
//   FA · Farah Actuals (Q1 2026 P&L / BS / CF)  — green
//   FP · Farah Plan    (Growth Project Summary) — amber
//   CU · Columbia UW   (May 2025 Valuation)     — blue
const TAG_COLORS = {
  FA: { bg:'rgba(52,211,153,.15)',  fg:'#6ee7b7', br:'rgba(52,211,153,.4)',  accent:'#34d399' },
  FP: { bg:'rgba(251,191,36,.15)',  fg:'#fcd34d', br:'rgba(251,191,36,.4)',  accent:'#fbbf24' },
  CU: { bg:'rgba(96,165,250,.15)',  fg:'#93c5fd', br:'rgba(96,165,250,.4)',  accent:'#60a5fa' },
};

function SourceTag({ tag }) {
  const tc = TAG_COLORS[tag]; if (!tc) return null;
  return (
    <span style={{ fontSize:8.5, fontWeight:800, letterSpacing:.5,
                    padding:'2px 5px', borderRadius:3, marginLeft:6,
                    background:tc.bg, color:tc.fg,
                    border:`1px solid ${tc.br}`, verticalAlign:'middle' }}>{tag}</span>
  );
}

// Block header — visually distinct, color-coded left-border per the brief.
// When `collapsible`, renders an Expand/Collapse pill that controls a group of
// cards beneath it (the parent manages the show/hide state).
function BlockHeader({ tag, title, subtitle, collapsible=false, collapsed=false, onToggle }) {
  const tc = TAG_COLORS[tag];
  return (
    <div style={{ gridColumn:'span 2', marginTop:6, marginBottom:-4 }}>
      <div style={{ display:'flex', alignItems:'center', gap:12,
                     padding:'10px 14px',
                     background:`linear-gradient(90deg, ${tc.bg}, transparent 60%)`,
                     borderLeft:`4px solid ${tc.accent}`,
                     borderRadius:'3px 8px 8px 3px',
                     cursor: collapsible ? 'pointer' : 'default' }}
           onClick={collapsible ? onToggle : undefined}>
        <div style={{ fontSize:10, fontWeight:800, letterSpacing:.8,
                       color:tc.fg, padding:'3px 7px',
                       background:tc.bg, border:`1px solid ${tc.br}`,
                       borderRadius:4 }}>{tag}</div>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:14, fontWeight:700, color:'white', letterSpacing:-.2 }}>{title}</div>
          <div style={{ fontSize:10.5, color:'#94a3b8', marginTop:1 }}>{subtitle}</div>
        </div>
        {collapsible && (
          <button type="button"
            onClick={(e) => { e.stopPropagation(); onToggle && onToggle(); }}
            style={{ fontSize:10, color: collapsed ? tc.fg : '#cbd5e1',
                      letterSpacing:.6, textTransform:'uppercase', fontWeight:700,
                      display:'inline-flex', alignItems:'center', gap:6,
                      userSelect:'none', cursor:'pointer',
                      padding:'6px 11px', borderRadius:6,
                      background: collapsed ? tc.bg : 'rgba(148,163,184,.12)',
                      border: `1px solid ${collapsed ? tc.br : 'rgba(148,163,184,.2)'}`,
                      transition:'all .15s' }}>
            {collapsed ? 'Expand' : 'Collapse'}
            <span style={{ fontSize:8, opacity:.8,
                            transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
                            transition:'transform .2s' }}>▼</span>
          </button>
        )}
      </div>
    </div>
  );
}

function DDCard({ title, tag, children, span=1, collapsible=false, defaultCollapsed=true, summary=null }) {
  const tc = tag ? TAG_COLORS[tag] : { accent:'#60a5fa' };
  const [collapsed, setCollapsed] = React.useState(collapsible ? defaultCollapsed : false);

  const togglePill = (e) => {
    e.stopPropagation();
    setCollapsed(c => !c);
  };

  return (
    <div style={{ gridColumn:`span ${span}`, background:'rgba(255,255,255,.025)',
                   border:'1px solid rgba(148,163,184,.18)', borderRadius:12,
                   padding: collapsed ? '12px 16px 14px' : '14px 16px',
                   transition:'background .15s, border-color .15s, padding .2s',
                   position:'relative' }}>
      <div style={{ display:'flex', alignItems:'center', gap:8,
                     marginBottom: collapsed ? 0 : 12,
                     paddingBottom: collapsed ? 0 : 10,
                     borderBottom: collapsed ? 'none' : '1px solid rgba(148,163,184,.12)',
                     transition:'margin .2s, padding .2s' }}>
        <span style={{ width:3, height:13, background:tc.accent, borderRadius:2 }}/>
        <span style={{ fontSize:12, fontWeight:700, color:'white', letterSpacing:-.1, flex:1 }}>{title}</span>
        {tag && <SourceTag tag={tag}/>}
        {collapsible && (
          <button type="button" onClick={togglePill}
            title={collapsed ? 'Expand details' : 'Collapse to summary'}
            style={{ fontSize:9.5, color: collapsed ? tc.fg || '#93c5fd' : '#64748b',
                      letterSpacing:.6, textTransform:'uppercase', fontWeight:700,
                      display:'inline-flex', alignItems:'center', gap:5,
                      marginLeft:4, userSelect:'none', cursor:'pointer',
                      padding:'4px 9px', borderRadius:6,
                      background: collapsed ? (tc.bg || 'rgba(96,165,250,.12)') : 'rgba(148,163,184,.08)',
                      border: `1px solid ${collapsed ? (tc.br || 'rgba(96,165,250,.3)') : 'rgba(148,163,184,.15)'}`,
                      transition:'all .15s' }}
            onMouseEnter={e => { e.currentTarget.style.filter = 'brightness(1.2)'; }}
            onMouseLeave={e => { e.currentTarget.style.filter = 'none'; }}>
            {collapsed ? 'Expand' : 'Collapse'}
            <span style={{ fontSize:8, opacity:.8,
                            transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)',
                            transition:'transform .2s' }}>▼</span>
          </button>
        )}
      </div>
      {collapsed && summary && (
        <div style={{ paddingTop:8 }}>{summary}</div>
      )}
      {!collapsed && children}
    </div>
  );
}

function MetricBig({ label, value, sub, subC='#94a3b8' }) {
  return (
    <div>
      <div style={{ fontSize:9, textTransform:'uppercase', letterSpacing:.6,
                     color:'#94a3b8', fontWeight:600 }}>{label}</div>
      <div style={{ fontSize:24, fontWeight:700, color:'white', letterSpacing:-.5,
                     lineHeight:1.1, marginTop:2 }}>{value}</div>
      {sub && <div style={{ fontSize:10.5, color:subC, marginTop:2, fontWeight:500 }}>{sub}</div>}
    </div>
  );
}

function MetricRow({ label, value, sub, c='white' }) {
  return (
    <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between',
                   padding:'7px 0', borderTop:'1px solid rgba(148,163,184,.08)' }}>
      <div>
        <div style={{ color:'#cbd5e1', fontSize:11.5, fontWeight:500 }}>{label}</div>
        {sub && <div style={{ color:'#64748b', fontSize:10, marginTop:1 }}>{sub}</div>}
      </div>
      <div style={{ color:c, fontSize:13, fontWeight:700, fontVariantNumeric:'tabular-nums' }}>{value}</div>
    </div>
  );
}

function MiniBar({ label, pct, value, color='#22d3ee' }) {
  return (
    <div style={{ marginBottom:8 }}>
      <div style={{ display:'flex', justifyContent:'space-between', fontSize:10.5,
                     marginBottom:3 }}>
        <span style={{ color:'#cbd5e1' }}>{label}</span>
        <span style={{ color:'white', fontWeight:600, fontVariantNumeric:'tabular-nums' }}>{value}</span>
      </div>
      <div style={{ height:5, background:'rgba(148,163,184,.15)', borderRadius:3, overflow:'hidden' }}>
        <div style={{ width:pct+'%', height:'100%', background:color, borderRadius:3 }}/>
      </div>
    </div>
  );
}

// Compact row shown in a card's collapsed state — one line of key metrics.
// Value typography sized to read at glance from across the drawer.
function CondensedRow({ items }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:4, flexWrap:'wrap' }}>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && (
            <span style={{ width:1, height:34, background:'rgba(148,163,184,.15)',
                            margin:'0 6px' }}/>
          )}
          <div style={{ display:'flex', flexDirection:'column', gap:2, flex:'1 1 0',
                         minWidth:0 }}>
            <span style={{ fontSize:10, color:'#94a3b8', textTransform:'uppercase',
                            letterSpacing:.6, fontWeight:600,
                            whiteSpace:'nowrap', overflow:'hidden',
                            textOverflow:'ellipsis' }}>{it.l}</span>
            <span style={{ fontSize:22, fontWeight:700, color:it.c || 'white',
                            letterSpacing:-.5, lineHeight:1.1,
                            fontVariantNumeric:'tabular-nums' }}>{it.v}</span>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

// ── INVESTOR DEEP DIVE ────────────────────────────────────────────
// Re-architected per 2026-04-21 sourcing brief into three traceable blocks.
// Every tile carries a [FA] / [FP] / [CU] source tag; tiles without a valid
// source were deleted (not placeheld).
//
//   Block 1 — Where MDC Is            · [FA] Farah Actuals (Q1 2026)
//   Block 2 — Where MDC Is Going      · [FP] Farah Plan (Growth Project Summary)
//   Block 3 — How Columbia Sees It    · [CU] Columbia UW (May 2025 Valuation)
window.InvestorDeepDive = function InvestorDeepDive({ sites, onPin }) {
  const [cuCollapsed, setCuCollapsed] = React.useState(true);
  // Per-site capex + capacity only — synthetic IRR/MOIC/Payback/DSCR formulas
  // deleted per brief. These pull from the Farah Plan source doc.
  const siteByKey = Object.fromEntries(sites.map(s => [s.key, s]));
  const planSites = [
    { key:'ElPaso',      label:'ELP Expansion',           capex:'$3.7M',  kw:1250, pue:1.8, rfs:'Dec 2026', pri:1, noi29:'58.2%', yld:'17.2%' },
    { key:'Brownsville', label:'Brownsville',             capex:'$1.3M',  kw: 375, pue:1.6, rfs:'Q3 2027',  pri:2, noi29:'63.7%', yld:'27.0%' },
    { key:'Queretaro',   label:'Querétaro',               capex:'$3.9M',  kw: 900, pue:1.6, rfs:'Mar 2027', pri:3, noi29:'—',     yld:'—', note:'in process · ~$14M scenario' },
    { key:'MCA2',        label:'MCA 2nd Floor',           capex:'$0.5M',  kw: 375, pue:1.5, rfs:'Jan 2027', pri:4, noi29:'68.1%', yld:'153%' },
    { key:'Veracruz',    label:'CLS Veracruz',            capex:'$4.5M',  kw: 900, pue:1.6, rfs:'Jun 2027', pri:5, noi29:'53.6%', yld:'3.6%' },
    { key:'Cancun',      label:'CLS Cancún',              capex:'$4.6M',  kw: 750, pue:1.6, rfs:'Jun 2027', pri:6, noi29:'55.4%', yld:'4.0%' },
    { key:'Nogales',     label:'Nogales Expansion',       capex:'$1.0M',  kw: 250, pue:1.5, rfs:'Dec 2026', pri:7, noi29:'71.9%', yld:'64.8%' },
  ];

  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14,
                   padding:18, overflowY:'auto', height:'100%' }}>

      {/* ── HEADLINE ECONOMICS — the two numbers Patrick leads with ── */}
      <div style={{ gridColumn:'span 2',
                     background:'linear-gradient(135deg, rgba(52,211,153,.08) 0%, rgba(96,165,250,.06) 55%, rgba(16,20,28,0) 100%)',
                     border:'1px solid rgba(52,211,153,.22)',
                     borderRadius:14, padding:'18px 22px',
                     position:'relative', overflow:'visible' }}>
        <div style={{ position:'absolute', inset:0,
                       background:'radial-gradient(circle at 15% 30%, rgba(52,211,153,.12), transparent 45%)',
                       pointerEvents:'none' }}/>
        <div style={{ position:'relative' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:14 }}>
            <span style={{ fontSize:9, fontWeight:800, letterSpacing:1.2,
                            color:'#34d399', textTransform:'uppercase' }}>
              ▲ The Value-Creation Thesis</span>
            <span style={{ flex:1, height:1,
                            background:'linear-gradient(90deg, rgba(52,211,153,.3), transparent)' }}/>
            <span style={{ fontSize:9, color:'#64748b', letterSpacing:.5,
                            textTransform:'uppercase' }}>Headline Economics</span>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:28,
                         alignItems:'stretch' }}>

            {/* Hero 1: Development Yield — Patrick's #1 number */}
            <div style={{ borderLeft:'3px solid #34d399', paddingLeft:16,
                           display:'flex', flexDirection:'column', justifyContent:'center' }}>
              <div style={{ fontSize:9.5, textTransform:'uppercase', letterSpacing:.8,
                             color:'#6ee7b7', fontWeight:700, marginBottom:6 }}>
                Development Yield
              </div>
              <div style={{ fontSize:48, fontWeight:800, color:'white',
                             letterSpacing:-1.8, lineHeight:1, fontVariantNumeric:'tabular-nums' }}>
                14.3<span style={{ fontSize:30, color:'#34d399' }}>%</span>
              </div>
              <div style={{ fontSize:11, color:'#cbd5e1', marginTop:8, lineHeight:1.45 }}>
                Phase 1 blended <b style={{ color:'white' }}>stabilized NOI / CapEx</b>
                <span style={{ color:'#64748b' }}> · range 3.6%–153% across 7 sites</span>
              </div>
            </div>

            {/* Hero 2: Cost per MW — standalone number, no market comp */}
            <div style={{ borderLeft:'3px solid #60a5fa', paddingLeft:16,
                           display:'flex', flexDirection:'column', justifyContent:'center' }}>
              <div style={{ fontSize:9.5, textTransform:'uppercase', letterSpacing:.8,
                             color:'#93c5fd', fontWeight:700, marginBottom:6 }}>
                Cost to Build / MW Sellable
              </div>
              <div style={{ fontSize:48, fontWeight:800, color:'white',
                             letterSpacing:-1.8, lineHeight:1, fontVariantNumeric:'tabular-nums' }}>
                ~$7.0<span style={{ fontSize:30, color:'#60a5fa' }}>M</span>
              </div>
              <div style={{ fontSize:11, color:'#cbd5e1', marginTop:8, lineHeight:1.45 }}>
                <b style={{ color:'white' }}>$19.0M</b> Phase 1 capex &divide; <b style={{ color:'white' }}>2,726 kW</b> sellable
                <span style={{ color:'#64748b' }}> · skilled-trade arbitrage on the border</span>
              </div>
            </div>
          </div>

          {/* ── QRO spotlight — the next build's unit economics ── */}
          <div style={{ marginTop:16, padding:'14px 16px',
                         background:'linear-gradient(135deg, rgba(251,191,36,.08), rgba(52,211,153,.05))',
                         border:'1px solid rgba(251,191,36,.25)',
                         borderRadius:10 }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
              <span style={{ fontSize:9, fontWeight:800, letterSpacing:1,
                              color:'#0f1420', background:'#fbbf24',
                              padding:'3px 8px', borderRadius:4 }}>QRO SPOTLIGHT</span>
              <span style={{ fontSize:12, fontWeight:700, color:'white', letterSpacing:-.2 }}>
                What the next build looks like — MDC Querétaro
              </span>
              <span style={{ flex:1 }}/>
              <span style={{ fontSize:9.5, color:'#94a3b8', fontStyle:'italic' }}>
                Anchored by Meta (1 MW) + Tencent LOI (1 MW) · 3 MW shell day-one
              </span>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14 }}>
              <div>
                <div style={{ fontSize:9, textTransform:'uppercase', letterSpacing:.6,
                               color:'#fbbf24', fontWeight:700 }}>Build Cost (3 MW)</div>
                <div style={{ fontSize:22, fontWeight:800, color:'white',
                               marginTop:3, fontVariantNumeric:'tabular-nums' }}>$21M</div>
                <div style={{ fontSize:10, color:'#94a3b8', marginTop:1 }}>3 MW × ~$7M/MW · full shell</div>
              </div>
              <div>
                <div style={{ fontSize:9, textTransform:'uppercase', letterSpacing:.6,
                               color:'#fbbf24', fontWeight:700 }}>Meter Rate</div>
                <div style={{ fontSize:22, fontWeight:800, color:'white',
                               marginTop:3, fontVariantNumeric:'tabular-nums' }}>$220<span style={{ fontSize:13, color:'#94a3b8' }}>/kW·mo</span></div>
                <div style={{ fontSize:10, color:'#6ee7b7', marginTop:1 }}>~2× typical US tier-1 rate</div>
              </div>
              <div>
                <div style={{ fontSize:9, textTransform:'uppercase', letterSpacing:.6,
                               color:'#fbbf24', fontWeight:700 }}>Meta 1 MW Alone</div>
                <div style={{ fontSize:22, fontWeight:800, color:'white',
                               marginTop:3, fontVariantNumeric:'tabular-nums' }}>$2.64M<span style={{ fontSize:13, color:'#94a3b8' }}>/yr</span></div>
                <div style={{ fontSize:10, color:'#94a3b8', marginTop:1 }}>base commit · investment-grade credit</div>
              </div>
              <div>
                <div style={{ fontSize:9, textTransform:'uppercase', letterSpacing:.6,
                               color:'#34d399', fontWeight:700 }}>Yield on Meta Only</div>
                <div style={{ fontSize:22, fontWeight:800, color:'#34d399',
                               marginTop:3, fontVariantNumeric:'tabular-nums' }}>~12%</div>
                <div style={{ fontSize:10, color:'#6ee7b7', marginTop:1 }}>fills to 3 MW → path to ~30%</div>
              </div>
            </div>
          </div>

          {/* Unified takeaway — centered bottom rail tying both numbers together */}
          <div style={{ marginTop:14, paddingTop:12,
                         borderTop:'1px solid rgba(148,163,184,.12)',
                         display:'flex', alignItems:'center', gap:14 }}>
            <span style={{ fontSize:9.5, color:'#fbbf24', fontWeight:800,
                            letterSpacing:.8, textTransform:'uppercase',
                            whiteSpace:'nowrap' }}>The Arbitrage</span>
            <div style={{ flex:1, fontSize:12, color:'#e2e8f0', lineHeight:1.5 }}>
              Build at <b style={{ color:'#34d399' }}>double-digit dev yields</b> on below-market per-MW costs — then exit to institutional capital at <b style={{ color:'#fbbf24' }}>~8% cap rates</b>. The <b style={{ color:'white' }}>6–9 pt spread</b> is where equity value is created.
            </div>
            <span style={{ fontSize:9, color:'#64748b', letterSpacing:.3,
                            whiteSpace:'nowrap', textAlign:'right' }}>
              Sources: <b style={{ color:'#6ee7b7' }}>FP</b> Farah Plan · <b style={{ color:'#93c5fd' }}>CU</b> Columbia UW
            </span>
          </div>
        </div>
      </div>

      {/* ── BLOCK 1 — Where MDC Is [FA] ───────────────────────── */}
      <BlockHeader tag="FA"
        title="Where MDC Is"
        subtitle="Farah Actuals · Q1 2026 P&L / Balance Sheet / Cash Flow"/>

      <DDCard title="Q1 2026 Actuals" tag="FA" span={2}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16 }}>
          <MetricBig label="Q1 Revenue" value="$3.23M"
                      sub="▲ $3,227,806 booked" subC="#34d399"/>
          <MetricBig label="Q1 Gross Margin" value="93.8%"
                      sub="▲ high-margin MSR" subC="#34d399"/>
          <MetricBig label="Q1 NOI" value="$881K"
                      sub="annualized $3.53M" subC="#94a3b8"/>
          <MetricBig label="Q1 Net Income" value="$494K"
                      sub="$493,510 after-tax" subC="#34d399"/>
          <MetricBig label="CIP Δ (Q1)" value="+$976K"
                      sub="Jan $617K → Mar $1.59M" subC="#34d399"/>
        </div>
        <div style={{ marginTop:12, paddingTop:10,
                       borderTop:'1px solid rgba(148,163,184,.1)',
                       fontSize:10.5, color:'#94a3b8', lineHeight:1.6 }}>
          CIP = construction-in-progress capitalized during the quarter.
          Tracks against the <b style={{ color:'white' }}>$19.0M Phase 1</b> plan [FP]
          (<b style={{ color:'white' }}>$5.5M</b> land · <b style={{ color:'white' }}>$13.5M</b> construction &amp; equipment).
        </div>
      </DDCard>

      {/* ── BLOCK 2 — Where MDC Is Going [FP] ──────────────────── */}
      <BlockHeader tag="FP"
        title="Where MDC Is Going"
        subtitle="Farah Plan · MDC Growth Project Summary"/>

      <DDCard title="Phase 1 Capital & Capacity" tag="FP" span={2}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16 }}>
          <MetricBig label="Phase 1 Capex" value="$19.04M"
                      sub="17.5M scenario · per plan" subC="#94a3b8"/>
          <MetricBig label="Utility Capacity" value="4,425 kW"
                      sub="post-PUE 2,726 kW sellable" subC="#60a5fa"/>
          <MetricBig label="Cost / MW Sellable" value="$7.0M"
                      sub="~half typical US build cost" subC="#6ee7b7"/>
          <MetricBig label="Land Secured" value="$8.48M"
                      sub="6 sites + El Paso Adj Parcel" subC="#34d399"/>
        </div>
      </DDCard>

      <DDCard title="Per-Site Capex, Capacity & RFS" tag="FP" span={2}
        collapsible
        summary={
          <CondensedRow items={[
            { l:'Sites',       v:'7',       c:'white'   },
            { l:'Total Capex', v:'$19.0M',  c:'white'   },
            { l:'Next RFS',    v:'Dec 2026', c:'#34d399' },
            { l:'Avg PUE',     v:'1.6',     c:'#60a5fa' },
          ]}/>
        }>
        <div style={{ display:'grid',
                       gridTemplateColumns:'30px 1.4fr .7fr .6fr .7fr .7fr .8fr',
                       fontSize:9, textTransform:'uppercase', letterSpacing:.4,
                       color:'#64748b', fontWeight:700, padding:'0 0 7px',
                       borderBottom:'1px solid rgba(148,163,184,.12)' }}>
          <div>#</div>
          <div>Site</div>
          <div style={{ textAlign:'right' }}>CapEx</div>
          <div style={{ textAlign:'right' }}>kW</div>
          <div style={{ textAlign:'right' }}>NOI '29</div>
          <div style={{ textAlign:'right' }}>Yield</div>
          <div style={{ textAlign:'right' }}>RFS</div>
        </div>
        {planSites.map(s=>(
          <div key={s.key}
               data-no-collapse
               onClick={()=>siteByKey[s.key] && onPin(s.key)}
               style={{ display:'grid',
                         gridTemplateColumns:'30px 1.4fr .7fr .6fr .7fr .7fr .8fr',
                         alignItems:'center', padding:'8px 0',
                         cursor: siteByKey[s.key] ? 'pointer' : 'default',
                         borderTop:'1px solid rgba(148,163,184,.06)',
                         fontSize:11.5 }}>
            <div style={{ color:'#64748b', fontWeight:700,
                           fontVariantNumeric:'tabular-nums' }}>{s.pri}</div>
            <div>
              <div style={{ color:'white', fontWeight:600 }}>{s.label}</div>
              {s.note && <div style={{ color:'#94a3b8', fontSize:9.5, marginTop:1, fontStyle:'italic' }}>{s.note}</div>}
            </div>
            <div style={{ color:'#cbd5e1', textAlign:'right',
                           fontVariantNumeric:'tabular-nums', fontWeight:600 }}>{s.capex}</div>
            <div style={{ color:'#cbd5e1', textAlign:'right',
                           fontVariantNumeric:'tabular-nums' }}>
              {s.kw ? s.kw.toLocaleString() : '—'}</div>
            <div style={{ color:'#cbd5e1', textAlign:'right',
                           fontVariantNumeric:'tabular-nums', fontWeight:600 }}>{s.noi29}</div>
            <div style={{ color: s.yld === '—' ? '#94a3b8' : '#34d399',
                           textAlign:'right',
                           fontVariantNumeric:'tabular-nums', fontWeight:700 }}>{s.yld}</div>
            <div style={{ color:'#94a3b8', textAlign:'right', fontSize:11 }}>{s.rfs}</div>
          </div>
        ))}
        <div style={{ marginTop:10, fontSize:10, color:'#64748b', fontStyle:'italic',
                       lineHeight:1.5 }}>
          CapEx and per-site NOI / Yield per Farah (Apr 2026). Yield = stabilized NOI / CapEx.
          Click a site to pin on map.
        </div>
      </DDCard>

      {/* ── BLOCK 3 — How Columbia Sees It [CU] ────────────────── */}
      <BlockHeader tag="CU"
        title="The Exit Thesis"
        subtitle={cuCollapsed
          ? 'Columbia base case · May 2025 · expand for valuation, tranches, EBITDA ramp'
          : 'Columbia Capital · May 2025 Valuation Analysis'}
        collapsible
        collapsed={cuCollapsed}
        onToggle={() => setCuCollapsed(c => !c)}/>

      {cuCollapsed && (
        <div style={{ gridColumn:'span 2',
                       background:'rgba(96,165,250,.05)',
                       border:'1px solid rgba(96,165,250,.2)',
                       borderRadius:12, padding:'16px 18px' }}>
          <CondensedRow items={[
            { l:'Entry',      v:'15.0x',  c:'white'   },
            { l:'Exit',       v:'18.0x',  c:'#60a5fa' },
            { l:'MOIC',       v:'4.1x',   c:'#34d399' },
            { l:'2031 EV',    v:'$486M',  c:'#60a5fa' },
            { l:'Total Equity', v:'$50M', c:'white'   },
            { l:'Col @ Exit', v:'45.9%',  c:'#60a5fa' },
            { l:'2031 EBITDA', v:'$21.1M', c:'#34d399' },
          ]}/>
        </div>
      )}

      {!cuCollapsed && (<DDCard title="Valuation & Returns" tag="CU" span={2}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16 }}>
          <MetricBig label="Entry Multiple" value="15.0x"
                      sub="EV / LQA EBITDA" subC="#94a3b8"/>
          <MetricBig label="Exit Multiple" value="18.0x"
                      sub="assumed at 2031" subC="#60a5fa"/>
          <MetricBig label="Columbia MOIC" value="4.1x"
                      sub="▲ cash-on-cash @ exit" subC="#34d399"/>
          <MetricBig label="2031 Enterprise Value" value="$486M"
                      sub="Equity Value $451.5M" subC="#60a5fa"/>
        </div>
        <div style={{ marginTop:12, paddingTop:10,
                       borderTop:'1px solid rgba(148,163,184,.1)',
                       fontSize:10.5, color:'#94a3b8', lineHeight:1.6 }}>
          Comp median <b style={{ color:'white' }}>17.5x</b> (private) ·
          <b style={{ color:'white' }}> 24.3x</b> (hyperscale).
          2031 LQA EBITDA <b style={{ color:'white' }}>$27.0M</b> ·
          Net Debt at exit <b style={{ color:'white' }}>$34.6M</b>.
        </div>
      </DDCard>)}

      {!cuCollapsed && (<DDCard title="Tranche Schedule & Ownership" tag="CU" span={2}>
        <div style={{ display:'grid', gridTemplateColumns:'40px 1fr .9fr .9fr 1fr',
                       fontSize:9, textTransform:'uppercase', letterSpacing:.4,
                       color:'#64748b', fontWeight:700, padding:'0 0 7px',
                       borderBottom:'1px solid rgba(148,163,184,.12)' }}>
          <div>#</div>
          <div>Close</div>
          <div style={{ textAlign:'right' }}>Equity</div>
          <div style={{ textAlign:'right' }}>Matching Debt</div>
          <div style={{ textAlign:'right' }}>Columbia Own%</div>
        </div>
        {[
          { n:1, d:'Mar 2025', eq:'$20M', dbt:'$20M', own:'33.2%' },
          { n:2, d:'Mar 2027', eq:'$20M', dbt:'$20M', own:'43.4%' },
          { n:3, d:'Mar 2029', eq:'$10M', dbt:'$10M', own:'45.9%' },
        ].map(r=>(
          <div key={r.n} style={{ display:'grid',
                                    gridTemplateColumns:'40px 1fr .9fr .9fr 1fr',
                                    alignItems:'center', padding:'8px 0',
                                    borderTop:'1px solid rgba(148,163,184,.06)',
                                    fontSize:11.5 }}>
            <div style={{ color:'#64748b', fontWeight:700 }}>T{r.n}</div>
            <div style={{ color:'white', fontWeight:600 }}>{r.d}</div>
            <div style={{ color:'#cbd5e1', textAlign:'right', fontWeight:600,
                            fontVariantNumeric:'tabular-nums' }}>{r.eq}</div>
            <div style={{ color:'#cbd5e1', textAlign:'right',
                            fontVariantNumeric:'tabular-nums' }}>{r.dbt}</div>
            <div style={{ color:'#60a5fa', textAlign:'right', fontWeight:700,
                            fontVariantNumeric:'tabular-nums' }}>{r.own}</div>
          </div>
        ))}
        <div style={{ display:'flex', gap:14, marginTop:12, paddingTop:10,
                        borderTop:'1px solid rgba(148,163,184,.1)', fontSize:11,
                        color:'#94a3b8', flexWrap:'wrap' }}>
          <span>Total Equity <b style={{ color:'white' }}>$50M</b></span>
          <span>Matching Debt <b style={{ color:'white' }}>$50M</b></span>
          <span style={{ marginLeft:'auto' }}>
            Ownership at exit: Columbia <b style={{ color:'#60a5fa' }}>45.9%</b> ·
            Juan <b style={{ color:'white' }}>54.1%</b>
          </span>
        </div>
      </DDCard>)}

      {!cuCollapsed && (<DDCard title="EBITDA Ramp — Underwriting" tag="CU" span={2}>
        <EBITDARamp/>
        <div style={{ marginTop:8, fontSize:10.5, color:'#94a3b8' }}>
          Columbia base-case EBITDA ramp: 2025 <b style={{color:'white'}}>$2.7M</b> →
          2026 <b style={{color:'white'}}>$3.4M</b> →
          2027 <b style={{color:'white'}}>$5.6M</b> →
          2028 <b style={{color:'white'}}>$8.4M</b> →
          2029 <b style={{color:'white'}}>$11.6M</b> →
          2030 <b style={{color:'white'}}>$16.2M</b> →
          2031 <b style={{color:'#34d399'}}>$21.1M</b>
        </div>
      </DDCard>)}

    </div>
  );
};

function EBITDARamp() {
  // Columbia UW EBITDA ramp 2025 → 2031 [CU source].
  // ResizeObserver ensures the SVG renders at native resolution regardless of
  // parent width.
  const yrs = ['2025','2026','2027','2028','2029','2030','2031'];
  const ebitda = [2.7, 3.4, 5.6, 8.4, 11.6, 16.2, 21.1];
  const wrapRef = React.useRef(null);
  const [W, setW] = React.useState(1100);
  React.useEffect(() => {
    if (!wrapRef.current) return;
    const ro = new ResizeObserver(([e]) => {
      setW(Math.max(400, Math.round(e.contentRect.width)));
    });
    ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);
  const H=200, pad={l:42, r:18, t:14, b:28};
  const maxY = 24;
  const xs = i => pad.l + (i/(yrs.length-1))*(W-pad.l-pad.r);
  const ys = v => H-pad.b - (v/maxY)*(H-pad.t-pad.b);
  const pts = ebitda.map((v,i)=>`${xs(i)},${ys(v)}`).join(' ');
  const barW = Math.max(12, (W-pad.l-pad.r)/yrs.length*0.55);

  return (
    <div ref={wrapRef} style={{ width:'100%' }}>
    <svg viewBox={`0 0 ${W} ${H}`} width={W} height={H}
         style={{ display:'block', width:'100%' }}>
      <defs>
        <linearGradient id="ebitda-f" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#60a5fa" stopOpacity=".85"/>
          <stop offset="1" stopColor="#60a5fa" stopOpacity=".15"/>
        </linearGradient>
      </defs>
      {/* grid */}
      {[0,5,10,15,20].map(v=>(
        <g key={v}>
          <line x1={pad.l} x2={W-pad.r} y1={ys(v)} y2={ys(v)}
                stroke="rgba(148,163,184,.12)" strokeDasharray="3,4"/>
          <text x={pad.l-6} y={ys(v)+3} fill="#64748b" fontSize="9" textAnchor="end">${v}M</text>
        </g>
      ))}
      {/* bars */}
      {ebitda.map((v,i)=>(
        <rect key={i} x={xs(i)-barW/2} y={ys(v)} width={barW}
              height={ys(0)-ys(v)} fill="url(#ebitda-f)" rx="2"/>
      ))}
      {/* ramp line */}
      <polyline points={pts} fill="none" stroke="#93c5fd" strokeWidth="2"/>
      {/* dots + labels */}
      {ebitda.map((v,i)=>(
        <g key={i}>
          <circle cx={xs(i)} cy={ys(v)} r="3" fill="#60a5fa"
                   stroke="#0a0e1a" strokeWidth="1.5"/>
          <text x={xs(i)} y={ys(v)-8} fill="white" fontSize="10"
                textAnchor="middle" fontWeight="700"
                fontVariantNumeric="tabular-nums">${v}M</text>
        </g>
      ))}
      {/* x labels */}
      {yrs.map((y,i)=>(
        <text key={y} x={xs(i)} y={H-6} fill="#94a3b8" fontSize="10"
              textAnchor="middle" fontWeight="600">{y}</text>
      ))}
    </svg>
    </div>
  );
}


// ── OPERATOR DEEP DIVE ────────────────────────────────────────────
window.OperatorDeepDive = function OperatorDeepDive({ sites, onPin }) {
  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14,
                   padding:18, overflowY:'auto', height:'100%' }}>

      {/* Stewardship Headline — "on budget, on schedule" is the single most
          important signal for an investor reader. It belongs at the top. */}
      <div style={{ gridColumn:'span 2',
                     background:'linear-gradient(135deg, rgba(34,211,238,.08), rgba(124,58,237,.06))',
                     border:'1px solid rgba(148,163,184,.22)', borderRadius:14,
                     padding:'18px 20px',
                     display:'grid', gridTemplateColumns:'1fr 1fr', gap:24 }}>
        {/* Capital deployed vs plan */}
        <div>
          <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:.7,
                         color:'#94a3b8', fontWeight:700 }}>
            Capital Deployed vs Plan
          </div>
          <div style={{ fontSize:30, fontWeight:700, color:'white', letterSpacing:-.7,
                         lineHeight:1.1, marginTop:6,
                         fontVariantNumeric:'tabular-nums' }}>
            $7.6M <span style={{ color:'#64748b', fontSize:18, fontWeight:600 }}>of $19.0M</span>
          </div>
          <div style={{ fontSize:11.5, color:'#34d399', marginTop:6, fontWeight:600 }}>
            ▲ Phase 1 build · 40% committed · +$5.98M land closed
          </div>
          {/* Deployed (solid) / Committed-unfunded (mid) / Remaining (dim) */}
          <div style={{ marginTop:12, height:8, borderRadius:5, overflow:'hidden',
                         display:'flex', background:'rgba(148,163,184,.12)' }}>
            <div style={{ width:'40%', background:'linear-gradient(90deg, #7c3aed, #c084fc)' }}/>
            <div style={{ width:'60%', background:'rgba(124,58,237,.35)' }}/>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between',
                         fontSize:9.5, color:'#94a3b8', marginTop:5, fontWeight:500 }}>
            <span><span style={{ color:'#c084fc' }}>■</span> Deployed $7.6M</span>
            <span><span style={{ color:'#7c3aed', opacity:.7 }}>■</span> Phase 1 $19.0M</span>
            <span><span style={{ color:'#64748b' }}>■</span> Full plan $37.3M</span>
          </div>
        </div>

        {/* Schedule slip */}
        <div style={{ borderLeft:'1px solid rgba(148,163,184,.15)', paddingLeft:24 }}>
          <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:.7,
                         color:'#94a3b8', fontWeight:700 }}>
            Schedule Slip (Portfolio-Wtd)
          </div>
          <div style={{ fontSize:30, fontWeight:700, color:'white', letterSpacing:-.7,
                         lineHeight:1.1, marginTop:6,
                         fontVariantNumeric:'tabular-nums' }}>
            -8 <span style={{ color:'#64748b', fontSize:18, fontWeight:600 }}>days</span>
          </div>
          <div style={{ fontSize:11.5, color:'#fbbf24', marginTop:6, fontWeight:600 }}>
            ● 8d net behind · 5 sites on/ahead, 2 behind
          </div>
          <div style={{ marginTop:12, display:'flex', gap:6 }}>
            {[{c:'#34d399',n:5,l:'On/ahead'},{c:'#fbbf24',n:2,l:'Behind'}].map(b=>(
              <div key={b.l} style={{ flex:b.n, padding:'6px 9px',
                                         background:b.c+'18', borderLeft:`2px solid ${b.c}`,
                                         borderRadius:'2px 6px 6px 2px' }}>
                <div style={{ color:b.c, fontSize:13, fontWeight:700, lineHeight:1 }}>{b.n}</div>
                <div style={{ color:'#94a3b8', fontSize:9.5, marginTop:2 }}>{b.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Top-line ops */}
      <DDCard title="Operational Health — Portfolio" accent="#34d399" span={2}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16 }}>
          <MetricBig label="Uptime SLA (YTD)" value="99.984%"
                      sub="target 99.98%" subC="#34d399"/>
          <MetricBig label="Avg Permit Cycle" value="94 days"
                      sub="benchmark 110d" subC="#34d399"/>
          <MetricBig label="Open RFIs" value="23"
                      sub="9 aging > 14d" subC="#fbbf24"/>
          <MetricBig label="Change Orders" value="$1.28M"
                      sub="3.7% of budget" subC="#94a3b8"/>
          <MetricBig label="Commissioning" value="62%"
                      sub="of milestones hit" subC="#60a5fa"/>
        </div>
      </DDCard>

      {/* Permit cycle per jurisdiction */}
      <DDCard title="Permit Cycle by Jurisdiction" accent="#fbbf24">
        {[
          { j:'El Paso County, TX',       days:68,  n:'Complete · Q1',       c:'#34d399' },
          { j:'City of Querétaro, MX',    days:142, n:'SEMARNAT pending',    c:'#fbbf24' },
          { j:'Quintana Roo, MX',         days:97,  n:'Land-use approved',   c:'#34d399' },
          { j:'Veracruz State',           days:88,  n:'Under review',        c:'#60a5fa' },
          { j:'Sonora, MX',               days:161, n:'2nd amendment filed', c:'#ef4444' },
          { j:'Cameron County, TX',       days:54,  n:'Approved',            c:'#34d399' },
          { j:'Hidalgo County, TX',       days:72,  n:'Approved',            c:'#34d399' },
        ].map((r,i)=>(
          <div key={i} style={{ padding:'8px 0',
                                  borderTop: i===0 ? 'none' : '1px solid rgba(148,163,184,.08)' }}>
            <div style={{ display:'flex', justifyContent:'space-between',
                            alignItems:'baseline', marginBottom:4 }}>
              <span style={{ color:'white', fontSize:11.5, fontWeight:600 }}>{r.j}</span>
              <span style={{ color:r.c, fontSize:12, fontWeight:700,
                              fontVariantNumeric:'tabular-nums' }}>{r.days}d</span>
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div style={{ flex:1, height:4, background:'rgba(148,163,184,.14)',
                              borderRadius:2, overflow:'hidden' }}>
                <div style={{ width:Math.min(100, r.days/200*100)+'%', height:'100%',
                                background:r.c, borderRadius:2 }}/>
              </div>
              <span style={{ color:'#94a3b8', fontSize:10 }}>{r.n}</span>
            </div>
          </div>
        ))}
      </DDCard>

      {/* Change orders */}
      <DDCard title="Change Orders & Cost Variance" accent="#ef4444">
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginBottom:12 }}>
          {[
            { l:'Total Value', v:'$1.28M', c:'white', t:'27 orders YTD' },
            { l:'Budget Impact', v:'+3.7%', c:'#fbbf24', t:'within 5% buffer' },
            { l:'Disputed', v:'$142K', c:'#ef4444', t:'3 open w/ GC' },
            { l:'Approved & Closed', v:'24', c:'#34d399', t:'89% close rate' },
          ].map((k,i)=>(
            <div key={i} style={{ background:'rgba(148,163,184,.07)', borderRadius:8,
                                    padding:'10px 11px' }}>
              <div style={{ fontSize:9.5, textTransform:'uppercase', letterSpacing:.5,
                             color:'#94a3b8', fontWeight:600 }}>{k.l}</div>
              <div style={{ fontSize:18, fontWeight:700, color:k.c, letterSpacing:-.4,
                             marginTop:3 }}>{k.v}</div>
              <div style={{ fontSize:9.5, color:'#64748b', marginTop:2 }}>{k.t}</div>
            </div>
          ))}
        </div>
        {/* Top 3 CO Drivers — compressed from the prior line-item list */}
        <div style={{ display:'flex', alignItems:'center', gap:8,
                       paddingTop:10, borderTop:'1px solid rgba(148,163,184,.1)',
                       flexWrap:'wrap', justifyContent:'flex-end' }}>
          <span style={{ fontSize:9, textTransform:'uppercase', letterSpacing:.5,
                          color:'#94a3b8', fontWeight:700, marginRight:'auto' }}>
            Top 3 CO Drivers
          </span>
          {[
            { l:'Querétaro HVAC', v:'+$340K' },
            { l:'Nogales utility', v:'+$215K' },
            { l:'Veracruz vault',  v:'+$180K' },
          ].map(p=>(
            <span key={p.l} style={{ background:'rgba(239,68,68,.12)',
                                       border:'1px solid rgba(239,68,68,.25)',
                                       borderRadius:6, padding:'4px 9px',
                                       display:'inline-flex', gap:6, alignItems:'center',
                                       fontSize:10.5 }}>
              <span style={{ color:'white', fontWeight:600 }}>{p.l}</span>
              <span style={{ color:'#fca5a5', fontWeight:700,
                              fontVariantNumeric:'tabular-nums' }}>{p.v}</span>
            </span>
          ))}
        </div>
      </DDCard>

      {/* Active risks & trades — elevated: sits directly below Change Orders.
          Risk transparency builds trust; burying it reads as evasive. */}
      <DDCard title="Active Risks & Workforce" accent="#ef4444">
        <div style={{ fontSize:11, textTransform:'uppercase', letterSpacing:.55,
                       color:'white', fontWeight:700, marginBottom:8,
                       borderLeft:'3px solid #ef4444', paddingLeft:8 }}>
          Top Risks
        </div>
        {sites.filter(s=>s.rag!=='green').map((s,i)=>(
          <div key={s.key} onClick={()=>onPin(s.key)}
               style={{ display:'flex', gap:9, alignItems:'flex-start', padding:'7px 0',
                         borderTop: i===0 ? 'none' : '1px solid rgba(148,163,184,.08)',
                         cursor:'pointer' }}>
            <span className={`rag-dot rag-${s.rag}`} style={{ marginTop:4, flexShrink:0 }}/>
            <div style={{ flex:1 }}>
              <div style={{ color:'white', fontSize:11.5, fontWeight:600 }}>{s.name.split(',')[0]}</div>
              <div style={{ color:'#94a3b8', fontSize:10, marginTop:1 }}>{s.ragReason}</div>
            </div>
          </div>
        ))}
        <div style={{ height:1, background:'rgba(148,163,184,.12)', margin:'10px 0' }}/>
        <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:.5,
                       color:'#94a3b8', fontWeight:700, marginBottom:6 }}>
          Trade Availability
        </div>
        <MiniBar label="Electrical (journeymen)" pct={74} value="OK · 2 crews" color="#34d399"/>
        <MiniBar label="HVAC mechanical"          pct={48} value="Tight · Nogales" color="#fbbf24"/>
        <MiniBar label="Fiber splicers"           pct={88} value="OK · surplus"    color="#34d399"/>
        <MiniBar label="Civil / earthworks"       pct={31} value="Constrained · QRO" color="#ef4444"/>
      </DDCard>

      {/* RFI aging */}
      <DDCard title="RFI Aging & Commissioning" accent="#60a5fa">
        <div style={{ background:'rgba(148,163,184,.07)', borderRadius:10,
                       padding:'14px 16px', marginBottom:14,
                       display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:9.5, textTransform:'uppercase', letterSpacing:.5,
                           color:'#94a3b8', fontWeight:600 }}>Open RFIs</div>
            <div style={{ fontSize:32, fontWeight:700, color:'white', letterSpacing:-.7,
                           lineHeight:1.1, marginTop:2,
                           fontVariantNumeric:'tabular-nums' }}>23</div>
            <div style={{ fontSize:10.5, color:'#fbbf24', marginTop:4, fontWeight:500 }}>
              ● 3 aging &gt;30d · full aging detail in operational log
            </div>
          </div>
        </div>
        <div style={{ fontSize:10.5, color:'#94a3b8', letterSpacing:.3,
                       textTransform:'uppercase', fontWeight:700, marginBottom:6 }}>
          Commissioning Milestones
        </div>
        <MiniBar label="Factory Acceptance Tests" pct={82} value="14/17" color="#34d399"/>
        <MiniBar label="Site Acceptance Tests"    pct={54} value=" 7/13" color="#60a5fa"/>
        <MiniBar label="Integrated Systems Tests" pct={31} value=" 4/13" color="#fbbf24"/>
        <MiniBar label="Tenant Fit-Out Ready"     pct={22} value=" 2/9"  color="#a78bfa"/>
      </DDCard>

      {/* Power & interconnect — final row, full-width */}
      <DDCard title="Power Ramp & Interconnect" accent="#22d3ee" span={2}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 2fr', gap:16, alignItems:'center' }}>
          <MetricBig label="Utility MW" value="4.4 MW" sub="Phase 1 capacity constructed" subC="#60a5fa"/>
          <MetricBig label="Sellable MW" value="2.7 MW" sub="post-PUE (1.6 avg)" subC="#22d3ee"/>
          <div>
            <PowerRamp/>
            <div style={{ marginTop:6, fontSize:10, color:'#94a3b8' }}>
              <span style={{ color:'#34d399', fontWeight:700 }}>■</span> Energized ·
              <span style={{ color:'#60a5fa', fontWeight:700, marginLeft:4 }}>■</span> Contracted ·
              <span style={{ color:'#94a3b8', marginLeft:4 }}>━━</span> Target
            </div>
          </div>
        </div>
      </DDCard>



    </div>
  );
};

function PowerRamp() {
  const qs = ['Q2·26','Q3·26','Q4·26','Q1·27','Q2·27','Q3·27','Q4·27'];
  const energized = [4.0, 6.2, 8.2,  9.8, 11.2, 13.0, 14.0];
  const target    = [4.0, 7.0, 9.5, 11.5, 13.5, 14.0, 14.0];
  const wrapRef = React.useRef(null);
  const [W, setW] = React.useState(700);
  React.useEffect(() => {
    if (!wrapRef.current) return;
    const ro = new ResizeObserver(([e]) => {
      setW(Math.max(320, Math.round(e.contentRect.width)));
    });
    ro.observe(wrapRef.current);
    return () => ro.disconnect();
  }, []);
  const H=140, pad={l:36, r:12, t:10, b:24};
  const maxY=16;
  const xs = i => pad.l + (i/(qs.length-1))*(W-pad.l-pad.r);
  const ys = v => H-pad.b - (v/maxY)*(H-pad.t-pad.b);
  const pts = arr => arr.map((v,i)=>`${xs(i)},${ys(v)}`).join(' ');

  return (
    <div ref={wrapRef} style={{ width:'100%' }}>
    <svg viewBox={`0 0 ${W} ${H}`} width={W} height={H}
         style={{ display:'block', width:'100%' }}>
      {[0,4,8,12,16].map(v=>(
        <g key={v}>
          <line x1={pad.l} x2={W-pad.r} y1={ys(v)} y2={ys(v)}
                stroke="rgba(148,163,184,.1)" strokeDasharray="3,4"/>
          <text x={pad.l-6} y={ys(v)+3} fill="#64748b" fontSize="9" textAnchor="end">{v}MW</text>
        </g>
      ))}
      <polyline points={pts(target)} fill="none" stroke="#94a3b8" strokeWidth="1.5" strokeDasharray="4,4"/>
      <polyline points={pts(energized)} fill="none" stroke="#34d399" strokeWidth="2.5"/>
      {energized.map((v,i)=>(
        <circle key={i} cx={xs(i)} cy={ys(v)} r="3" fill="#34d399"
                 stroke="#0a0e1a" strokeWidth="1.5"/>
      ))}
      {qs.map((q,i)=>(
        <text key={q} x={xs(i)} y={H-6} fill="#94a3b8" fontSize="9.5" textAnchor="middle" fontWeight="600">{q}</text>
      ))}
    </svg>
    </div>
  );
}