// Audience-focused lens TEASERS
// These panels are intentionally LIGHT — hero metrics only. They exist to entice
// the viewer into opening the full deep-dive drawer.
// Rule of thumb: 3 big numbers, one narrative trend, one CTA. No tables, no progress bars.

// ── Hero metric tile ──────────────────────────────────────────────
// Optional `tag` is a 2-letter source badge (FA/FP/CU) — per the 2026-04-21
// sourcing brief, every number shown to Columbia must tie to an identifiable
// source document.
function HeroMetric({ value, unit, label, delta, deltaColor='#34d399', sub, tag }) {
  const tagColors = {
    FA: { bg:'rgba(52,211,153,.15)',  fg:'#6ee7b7', br:'rgba(52,211,153,.4)' },
    FP: { bg:'rgba(251,191,36,.15)',  fg:'#fcd34d', br:'rgba(251,191,36,.4)' },
    CU: { bg:'rgba(96,165,250,.15)',  fg:'#93c5fd', br:'rgba(96,165,250,.4)' },
  };
  const tc = tag && tagColors[tag];
  return (
    <div style={{ padding:'16px 14px', position:'relative',
                   background:'rgba(255,255,255,.025)',
                   border:'1px solid rgba(148,163,184,.14)',
                   borderRadius:10 }}>
      {tc && (
        <div style={{ position:'absolute', top:8, right:8,
                       fontSize:8.5, fontWeight:800, letterSpacing:.5,
                       padding:'2px 5px', borderRadius:3,
                       background:tc.bg, color:tc.fg,
                       border:`1px solid ${tc.br}` }}>{tag}</div>
      )}
      <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:.7,
                     color:'#94a3b8', fontWeight:600, marginBottom:8,
                     paddingRight: tc ? 28 : 0 }}>
        {label}
      </div>
      <div style={{ display:'flex', alignItems:'baseline', gap:4 }}>
        <div style={{ fontSize:30, fontWeight:700, color:'white', letterSpacing:-1,
                       lineHeight:1, fontVariantNumeric:'tabular-nums' }}>
          {value}
        </div>
        {unit && (
          <div style={{ fontSize:14, fontWeight:600, color:'#cbd5e1', letterSpacing:-.3 }}>
            {unit}
          </div>
        )}
      </div>
      {(delta || sub) && (
        <div style={{ marginTop:6, fontSize:11, color: deltaColor,
                       fontWeight:500, display:'flex', alignItems:'center', gap:6 }}>
          {delta && <span>{delta}</span>}
          {sub && <span style={{ color:'#94a3b8' }}>{sub}</span>}
        </div>
      )}
    </div>
  );
}

// Compact one-liner bar (for quick relational context)
function NarrativeLine({ icon, text, accent='#60a5fa' }) {
  return (
    <div className="mdc-narrative-line"
         style={{ display:'flex', alignItems:'center', gap:9,
                   padding:'10px 12px',
                   background:`linear-gradient(90deg, ${accent}14, transparent)`,
                   borderLeft:`2px solid ${accent}`,
                   borderRadius:'4px 8px 8px 4px',
                   fontSize:11.5, lineHeight:1.4 }}>
      <span style={{ fontSize:14 }}>{icon}</span>
      <span style={{ flex:1 }}>{text}</span>
    </div>
  );
}

// Deep-dive CTA at the bottom of each teaser
function DeepDiveCta({ label, accent }) {
  return (
    <div style={{ marginTop:14, padding:'12px 14px',
                   background:`linear-gradient(135deg, ${accent}22, ${accent}08)`,
                   border:`1px solid ${accent}40`,
                   borderRadius:10,
                   display:'flex', alignItems:'center', justifyContent:'space-between',
                   cursor:'default' }}>
      <div>
        <div style={{ fontSize:11, color:'white', fontWeight:600, letterSpacing:-.1 }}>
          {label}
        </div>
        <div style={{ fontSize:10, color:'#94a3b8', marginTop:2 }}>
          Double-click to open deep dive
        </div>
      </div>
      <div style={{ fontSize:18, color: accent }}>→</div>
    </div>
  );
}

// ── OPERATOR TEASER ──────────────────────────────────────────────
window.OperatorPanel = function OperatorPanel({ sites, onPin }) {
  const sitesLive     = sites.filter(s=>s.phase==='Live' || s.phase==='Commissioning').length;
  const sitesPlanned  = sites.length;
  const permitsPending = sites.filter(s=>s.permit==='Pending').length;
  const risksOpen      = sites.filter(s=>s.rag==='red').length +
                         sites.filter(s=>s.rag==='amber').length;

  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:12 }}>
        <HeroMetric
          label="Permit Cycle"
          value="94" unit="d"
          delta="▼ 16d vs benchmark"
          deltaColor="#34d399"
          sub="· 110d industry avg"/>
        <HeroMetric
          label="Portfolio Uptime"
          value="99.98" unit="%"
          delta="▲ above 99.9% SLA"
          deltaColor="#34d399"/>
      </div>

      <HeroMetric
        label="Active Construction"
        value={`${sitesLive}/${sitesPlanned}`}
        delta={`${permitsPending} permits pending · ${risksOpen} risks open`}
        deltaColor={risksOpen>0 ? '#fbbf24' : '#34d399'}/>

      <div style={{ marginTop:12, display:'flex', flexDirection:'column', gap:7 }}>
        <NarrativeLine icon="⚡" accent="#34d399"
          text="4.4 MW utility across Phase 1 · 2.7 MW sellable post-PUE (1.6 avg)"/>
        <NarrativeLine icon="📋" accent="#fbbf24"
          text="23 open RFIs · 9 aging > 14 days"/>
        <NarrativeLine icon="👷" accent="#60a5fa"
          text="Querétaro 15d behind · Nogales 2nd amendment filed"/>
      </div>

      <DeepDiveCta label="Operational Health, Permits, RFIs, Risks" accent="#34d399"/>
    </div>
  );
};

// ── INVESTOR TEASER ──────────────────────────────────────────────
// Per 2026-04-21 sourcing brief: every tile must tie to one of three source
// docs — Farah Actuals [FA], Farah Plan [FP], Columbia UW [CU]. Tiles without
// a valid source were dropped (Levered IRR 19.4%, Equity Multiple 2.8x bull,
// Portfolio Payback 42mo, Top-3 tenants 86%).
window.InvestorPanel = function InvestorPanel({ sites, onPin }) {
  const committed = sites.reduce((a,s)=>a+(s.capex||0),0);
  const deployed  = sites.reduce((a,s)=>a+(s.spent||0),0);
  const deployPct = Math.round((deployed/committed)*100);

  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:12 }}>
        <HeroMetric
          tag="CU"
          label="Columbia MOIC"
          value="4.1" unit="x"
          delta="base case @ 2031 exit"
          deltaColor="#60a5fa"/>
        <HeroMetric
          tag="FA"
          label="Q1 Revenue"
          value="$3.23" unit="M"
          delta="▲ 94% gross margin"
          deltaColor="#34d399"
          sub="· $494K net income"/>
      </div>

      <HeroMetric
        tag="FP"
        label="Capital Deployed"
        value={`$${deployed.toFixed(1)}M`}
        delta={`${deployPct}% of $19.0M Phase 1`}
        deltaColor="#34d399"
        sub="· Q1 CIP: +$0.98M [FA]"/>

      <div style={{ marginTop:12, display:'flex', flexDirection:'column', gap:7 }}>
        <NarrativeLine icon="🏢" accent="#22d3ee"
          text="$8.48M land secured across 6 sites + El Paso Adjacent Parcel [FP]"/>
        <NarrativeLine icon="⚡" accent="#34d399"
          text="Utility $4.3M/MW · 4,425 kW utility · 2,726 kW sellable (PUE 1.6 avg) [FP]"/>
        <NarrativeLine icon="📈" accent="#c084fc"
          text="Columbia entry 15.0x → exit 18.0x · 2031 EV $486M · Equity Value $451.5M [CU]"/>
      </div>

      <DeepDiveCta label="Where MDC Is · Where MDC Is Going · How Columbia Sees It" accent="#c084fc"/>
    </div>
  );
};