/* ============================================================
   SKYVIDYA v8 — Serviços contínuos (componentes)
   - ServiceFrame: anatomia comum no topo
   - AntiGreenwashingView: módulo cheio (elegibilidade · 01/02/03 · kit)
   - EnsoRadarV2: fontes + exposição agregada + ponte Protocolo + routing
   - EconPipelineView: pipeline 5 etapas · 01/02/03 · event-study
   Sobrescreve as exportações do v4 (mesmas chaves EnsoRadar/EconFeed)
   ============================================================ */
const { useState, useMemo } = React;

/* ---------- frame comum: "Serviço vs Módulo" ---------- */
function ServiceFrame({ kind, eyebrow, title, sub, sources, children }) {
  return (
    <div className="svc-wrap fade-up">
      <div className="svc-anatomy">
        <div className="svc-anatomy-h">
          <span className="mono eyebrow">// SERVIÇO · ECG EXTERNO DO PORTFÓLIO</span>
          <span className="svc-vs mono">
            <em className="svc-vs-mod">MÓDULO</em> avalia o que está no ativo
            <span className="svc-vs-sep">·</span>
            <em className="svc-vs-svc">SERVIÇO</em> monitora o que vem em cima
          </span>
        </div>
        <div className="svc-anatomy-grid">
          {SKY.SERVICE_ANATOMY.map((a, i) => (
            <div className="svc-anatomy-c" key={i}>
              <span className="svc-anatomy-ic"><Icon name={a.ic} size={13} /></span>
              <div><b>{a.t}</b><em>{a.d}</em></div>
            </div>
          ))}
        </div>
      </div>
      {sources && (
        <div className="svc-sources">
          <span className="mono eyebrow">// FONTES E PIPELINE</span>
          <div className="svc-sources-list">
            {sources.map((s, i) => (
              <span className="svc-src" key={i}>
                <span className="src-led" />
                <b>{s.label}</b>
                <em className="mono">{s.org}{s.data ? " · " + s.data : ""}</em>
              </span>
            ))}
          </div>
        </div>
      )}
      {children}
    </div>
  );
}

/* ---------- card 01/02/03 (gramática invariante) ---------- */
function GramCard({ n, tone, title, lead, children }) {
  return (
    <div className={"gram-card tone-" + tone}>
      <div className="gram-h">
        <span className="gram-n mono">{n}</span>
        <b>{title}</b>
      </div>
      {lead && <p className="gram-lead">{lead}</p>}
      {children}
    </div>
  );
}

/* ============================================================
   ANTI-GREENWASHING · módulo cheio
   ============================================================ */
function AntiGreenwashingView({ chat, access, onNav }) {
  const C = SKY.AG_CICLO;
  const totalPass = SKY.AG_CRITERIA.filter((c) => c.pass).length;
  const total = SKY.AG_CRITERIA.length;
  const canIssue = access && (access.id === "gestor" || access.id === "admin");
  const [issued, setIssued] = useState(false);

  return (
    <ServiceFrame
      kind="ag"
      sources={[
        { label:"PRODES · DETER · MapBiomas",     org:"INPE", data:"2026-06-08" },
        { label:"SiCAR",                          org:"SFB",  data:"2026-06-01" },
        { label:"IBAMA · ICMBio · SEMAs",         org:"federal+estados", data:"2026-06-08" },
        { label:"Lista trabalho escravo",         org:"MTE",  data:"2026-06-08" },
        { label:"TI · UC · Quilombola",           org:"FUNAI · INCRA · MMA", data:"2026-05-15" },
      ]}
    >
      {/* Banner regra que protege o produto */}
      <div className="ag-rule">
        <Icon name="alert" size={14} color="var(--sv-coral)" />
        <span>{SKY.AG_REGRA}</span>
      </div>

      {/* Cobertura comunicável */}
      <div className="ag-cover">
        <div className="ag-cover-l">
          <span className="mono eyebrow">// COBERTURA COMUNICÁVEL</span>
          <h3>
            <b className="tnum coral">{C.diagnostico.elegiveis}</b>
            <span className="ag-cover-of">de {C.diagnostico.total}</span>
            ativos da carteira são <span className="serif-it">Elegíveis Selo</span> na janela atual
          </h3>
          <p>Recomputado a cada ciclo. Revogação automática quando qualquer critério cair.</p>
        </div>
        <div className="ag-cover-r">
          <div className="ag-pct tnum coral">{C.diagnostico.coberturaPct}<small>%</small></div>
          <span className="mono">carteira comunicável</span>
        </div>
      </div>

      {/* Critérios de elegibilidade */}
      <div className="v2-card ag-criteria brackets">
        <div className="v2-card-h mono">
          <span>CRITÉRIOS · PASS/FAIL · {totalPass} DE {total} ATENDIDOS</span>
          <span className="mono soft" style={{ fontSize:9 }}>RECOMPUTADO A CADA CICLO</span>
        </div>
        <div className="ag-crit-list">
          {SKY.AG_CRITERIA.map((c) => (
            <div className={"ag-crit-row" + (c.pass ? " pass" : " fail")} key={c.id}>
              <span className="ag-crit-led">
                <Icon name={c.pass ? "check" : "x"} size={12} />
              </span>
              <div className="ag-crit-meta">
                <b>{c.label}</b>
                <span className="mono">{c.fonte} · {c.janela}</span>
              </div>
              <div className="ag-crit-trail">
                <span className="mono">cena {c.cena}</span>
                <span className="mono soft">ingestão {c.ingest}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 01/02/03 grammar */}
      <div className="gram-grid">
        <GramCard n="01" tone="coral" title="Diagnóstico · status corrente">
          <p className="gram-body">{C.diagnostico.txt}</p>
          <div className="gram-foot">
            <span><b className="tnum">{C.diagnostico.elegiveis}/{C.diagnostico.total}</b> ativos</span>
            <span><b className="tnum">{C.diagnostico.coberturaPct}%</b> carteira</span>
            <span><b>{C.diagnostico.janela}</b> sem alerta</span>
          </div>
        </GramCard>
        <GramCard n="02" tone="warn" title="Preditivo · risco de revogação em 90 dias">
          <p className="gram-body">{C.preditivo.txt}</p>
          <div className="gram-foot">
            <span><b className="tnum">{C.preditivo.fronteira}</b> em fronteira</span>
            <span><b className="tnum">{C.preditivo.carVencendo}</b> CAR a vencer</span>
            <span><b className="tnum warnc">{C.preditivo.probRevog}%</b> p(revogação)</span>
          </div>
        </GramCard>
        <GramCard n="03" tone="cyan" title="Prescritivo · o que fazer, comunicar, evitar">
          <p className="gram-body">{C.prescritivo.txt}</p>
          <div className="gram-foot">
            <span><b className="tnum up">{C.prescritivo.comunicar}</b> comunicar</span>
            <span><b className="tnum warnc">{C.prescritivo.aguardar}</b> aguardar</span>
            <span className="ag-evitar"><Icon name="alert" size={11} /> evitar: <em>{C.prescritivo.evitar}</em></span>
          </div>
        </GramCard>
      </div>

      {/* Selo + página pública */}
      <div className="v2-card ag-seal-card">
        <div className="v2-card-h mono">
          <span>SELO DIGITAL + PÁGINA PÚBLICA · /verify/{"{hash}"}</span>
          {canIssue && (
            <button className={"btn " + (issued ? "btn-cyan" : "btn-primary")} onClick={() => setIssued(true)}>
              <Icon name={issued ? "check" : "share"} size={13} /> {issued ? "Selo emitido · publicado" : "Emitir 8 selos (lastro forte)"}
            </button>
          )}
        </div>
        <div className="ag-seal-body">
          <div className="ag-seal-page">
            <div className="ag-seal-h">
              <img src="assets/sky-mark.png" alt="" className="vf-mark" />
              <div>
                <b>Verificação pública de conformidade</b>
                <span className="mono">skyvidya.ai/verify/a7c91e · QR code · sem login</span>
              </div>
              <span className="selo-pill mono s-ativo">Ativo</span>
            </div>
            <div className="ag-seal-evid">
              {SKY.AG_CRITERIA.slice(0, 4).map((c, i) => (
                <div className="vf-ev" key={i}>
                  <span className="esg-led ok"><Icon name="check" size={11} /></span>
                  <span className="vf-ev-t">{c.label}</span>
                  <span className="mono vf-ev-s">{c.fonte.split(" · ")[0]} · {c.cena}</span>
                </div>
              ))}
            </div>
            <p className="vf-note mono">REVOGAÇÃO AUTOMÁTICA · CLAIMS SEMPRE DATADOS · LASTRO AUDITÁVEL ATÉ A FONTE</p>
          </div>
        </div>
      </div>

      {/* Kit de pauta */}
      <div className="v2-card ag-pauta-card">
        <div className="v2-card-h mono">
          <span>KIT DE PAUTA · CLAIMS SEMPRE DATADOS</span>
          <span className="mono soft" style={{ fontSize:9 }}>GERADO POR IA · GESTOR ASSINA ANTES DE PUBLICAR</span>
        </div>
        <div className="ag-pauta-list">
          {SKY.AG_PAUTA.map((p, i) => (
            <div className="ag-pauta-row" key={i}>
              <div className="ag-pauta-meta">
                <span className="mono ag-pauta-canal">{p.canal}</span>
                <span className="mono ag-pauta-data">{p.data}</span>
              </div>
              <blockquote className="ag-pauta-claim">"{p.claim}"</blockquote>
              <div className="ag-pauta-lastro mono"><Icon name="info" size={11} color="var(--sv-cyan)" /> {p.lastro}</div>
              <div className="ag-pauta-cta mono">→ verificar em skyvidya.ai/verify/{p.verifyHash}</div>
            </div>
          ))}
        </div>
      </div>

      <button className="btn btn-cyan svc-ai-cta" onClick={() => chat.askFree("Gere o kit de pauta de junho para os 8 ativos com selo + safra registrada.")}>
        <Icon name="sparkles" size={13} /> Gerar pauta com IA
      </button>
    </ServiceFrame>
  );
}

/* ============================================================
   RADAR ENSO · upgrade
   ============================================================ */
const ENSO_SCALES_V2 = [
  { id: "h3-4", label: "Estado", res: "H3-4", free: true },
  { id: "h3-5", label: "Mesorregião", res: "H3-5", free: true },
  { id: "h3-6", label: "Município", res: "H3-6", free: true },
  { id: "h3-7", label: "Sub-município", res: "H3-7", free: false },
  { id: "h3-8", label: "Propriedade", res: "H3-8", free: false },
];

function OniSparkV2() {
  const { oniSeries, labels } = SKY.ENSO;
  const W = 360, H = 110, PAD = 18;
  const x = (i) => PAD + (i / (oniSeries.length - 1)) * (W - PAD * 2);
  const y = (v) => H / 2 - (v / 2) * (H / 2 - PAD);
  const path = oniSeries.map((v, i) => (i === 0 ? "M" : "L") + x(i).toFixed(1) + " " + y(v).toFixed(1)).join(" ");
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display: "block" }}>
      <line x1={PAD} x2={W - PAD} y1={y(0)} y2={y(0)} stroke="var(--rule)" strokeWidth="1" />
      <line x1={PAD} x2={W - PAD} y1={y(-0.8)} y2={y(-0.8)} stroke="var(--sv-cyan)" strokeWidth="0.8" strokeDasharray="3 3" opacity="0.6" />
      <text x={W - PAD} y={y(-0.8) - 4} textAnchor="end" className="chart-axis" fill="var(--sv-cyan)">gatilho −0,8</text>
      <path d={path} fill="none" stroke="var(--sv-coral)" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
      {oniSeries.map((v, i) => <circle key={i} cx={x(i)} cy={y(v)} r="2.2" fill="var(--sv-coral)" />)}
      {labels.map((l, i) => i % 2 === 0 && <text key={l + i} x={x(i)} y={H - 3} textAnchor="middle" className="chart-axis">{l}</text>)}
    </svg>
  );
}

function EnsoHexMapV2({ locked }) {
  const cells = useMemo(() => {
    const out = []; const R = 13, w = Math.sqrt(3) * R, h = 1.5 * R;
    let row = 0;
    for (let yy = 14; yy < 220; yy += h) {
      const off = (row % 2) * (w / 2);
      for (let xx = 14; xx < 380; xx += w) {
        const cx = xx + off, cy = yy;
        const an = Math.sin(cx * 0.02 + 1) * Math.cos(cy * 0.025) - (cx > 180 && cy > 110 ? 0.55 : 0);
        let pts = "";
        for (let i = 0; i < 6; i++) {
          const a = Math.PI / 180 * (60 * i - 90);
          pts += (cx + R * Math.cos(a)).toFixed(1) + "," + (cy + R * Math.sin(a)).toFixed(1) + " ";
        }
        out.push({ pts: pts.trim(), an });
      }
      row++;
    }
    return out;
  }, []);
  const color = (an) => an < -0.45 ? "var(--risk-critical)" : an < -0.15 ? "var(--risk-high)" : an < 0.15 ? "var(--risk-medium)" : "var(--risk-low)";
  return (
    <div className="enso-map">
      <svg viewBox="0 0 396 232" width="100%" style={{ display: "block" }}>
        {cells.map((c, i) => (
          <polygon key={i} points={c.pts} fill={color(c.an)} fillOpacity={locked ? 0.22 : 0.66} stroke="var(--bg-void)" strokeWidth="1" />
        ))}
      </svg>
      {locked && (
        <div className="enso-lock">
          <Icon name="scan" size={16} color="var(--sv-coral)" />
          <span>Resolução sub-município disponível no plano <b>PRO</b></span>
        </div>
      )}
      <span className="mono enso-map-cap">ANOMALIA DE PRECIPITAÇÃO · SET–MAI · RECORTE SUL</span>
    </div>
  );
}

function EnsoRadar({ chat, onNav }) {
  const [scale, setScale] = useState("h3-6");
  const [upg, setUpg] = useState(null);
  const [protoApplied, setProtoApplied] = useState(false);
  const E = SKY.ENSO;
  const X = SKY.ENSO_EXPOSURE;
  const locked = !(ENSO_SCALES_V2.find((s) => s.id === scale) || {}).free;
  return (
    <ServiceFrame kind="enso" sources={SKY.ENSO_SOURCES}>
      {/* fase + scale + map */}
      <div className="enso-top">
        <div className="v2-card enso-phase brackets">
          <span className="gik-l">Fase atual</span>
          <span className="enso-fase">{E.fase}</span>
          <div className="enso-oni">
            <span className="mono">ONI</span>
            <b className="tnum" style={{ color: "var(--sv-coral)" }}>{E.oni}</b>
            <span className="mono">· persistência {X.persistencia}% até {X.horizonte}</span>
          </div>
          <OniSparkV2 />
          <div className="enso-consensus mono">CONSENSO NOAA + ECMWF · RECÁLCULO MENSAL</div>
        </div>
        <div className="v2-card" style={{ padding: 14 }}>
          <div className="enso-scales">
            <span className="gik-l" style={{ marginBottom: 8, display: "block" }}>Escala H3</span>
            {ENSO_SCALES_V2.map((s) => (
              <button key={s.id} className={"h3g-row" + (scale === s.id ? " on" : "") + (s.free ? "" : " locked")}
                onClick={() => s.free ? setScale(s.id) : setUpg({ label: s.label, res: s.res })}>
                <span className={"bmc" + (scale === s.id ? " on" : "")} />
                <span className="h3g-l">{s.label}</span>
                <span className="mono h3g-r">{s.res}</span>
                {s.free ? <span className="h3g-free mono">grátis</span> : <span className="h3g-lock mono">PRO</span>}
              </button>
            ))}
          </div>
          <EnsoHexMapV2 locked={locked} />
        </div>
      </div>

      {/* gramática */}
      <div className="gram-grid enso-gram">
        <GramCard n="01" tone="coral" title="Diagnóstico · o que está acontecendo">
          <p className="gram-body">{E.diagnostico}</p>
        </GramCard>
        <GramCard n="02" tone="warn" title="Preditivo · o que vem">
          <p className="gram-body">{E.preditivo}</p>
          <div className="gram-foot">
            <span><b className="tnum">{X.persistencia}%</b> persistência</span>
            <span><b className="tnum warnc">{X.impactoProd}%</b> {X.cultura} · {X.recorte}</span>
            <span><b className="tnum">{X.probDecreto}%</b> p(decreto S2ID)</span>
          </div>
        </GramCard>
        <GramCard n="03" tone="cyan" title="Prescritivo · o que fazer">
          <p className="gram-body">{E.prescritivo}</p>
        </GramCard>
      </div>

      {/* exposição agregada — a visão que resseguradora paga caro */}
      <div className="v2-card enso-exposure brackets">
        <div className="v2-card-h mono">
          <span>EXPOSIÇÃO AGREGADA DO PORTFÓLIO · POR REGIÃO</span>
          <span className="mono soft" style={{ fontSize:9 }}>A VISÃO QUE A RESSEGURADORA PAGA CARO</span>
        </div>
        <div className="enso-exp-list">
          {X.regioes.map((r) => (
            <div className={"enso-exp-row sev-" + r.sev} key={r.reg}>
              <span className="enso-exp-led" />
              <b className="enso-exp-reg">{r.reg}</b>
              <span className="enso-exp-bar">
                <i style={{ width: Math.min(100, Math.abs(r.anom) * 5) + "%" }} />
              </span>
              <span className="enso-exp-anom tnum">{r.anom}%</span>
              <span className="mono enso-exp-ativos"><b className="tnum">{r.ativos}</b> ativos</span>
            </div>
          ))}
        </div>
        <div className="enso-irrig mono">
          <Icon name="drop" size={12} color="var(--sv-cyan)" />
          <span><b className="tnum">{X.glebasIrrigaveis.toLocaleString("pt-BR")}</b> glebas com potencial de irrigação mapeado · priorizar manejo proativo</span>
        </div>
      </div>

      {/* ponte com Protocolo */}
      <div className={"v2-card enso-bridge" + (protoApplied ? " applied" : "")}>
        <div className="enso-bridge-l">
          <span className="mono eyebrow">// PONTE COM PROTOCOLO</span>
          <h4>{X.sugestaoProto}</h4>
          <p>Propõe edição no protocolo vigente "Subscrição Agro — Sul 26/27 v1.3". Gestor aprova; entra em vigor versionado.</p>
        </div>
        <div className="enso-bridge-r">
          {protoApplied ? (
            <button className="btn btn-cyan" onClick={() => onNav && onNav("protocolos")}>
              <Icon name="check" size={13} /> Aplicado · ver no Protocolo
            </button>
          ) : (
            <button className="btn btn-primary" onClick={() => setProtoApplied(true)}>
              <Icon name="target" size={13} /> Aplicar no Protocolo
            </button>
          )}
        </div>
      </div>

      {/* routing de alertas por papel */}
      <div className="v2-card enso-routing">
        <div className="v2-card-h mono"><span>ALERTAS ROTEADOS POR PAPEL</span></div>
        <div className="enso-route-list">
          {SKY.ENSO_ROUTING.map((r) => (
            <div className="enso-route-row" key={r.papel}>
              <b>{r.papel}</b>
              <span className="mono">{r.via}</span>
              <em>{r.ver}</em>
            </div>
          ))}
        </div>
      </div>

      <button className="btn btn-cyan svc-ai-cta" onClick={() => chat.askFree("Qual a exposição do portfólio à La Niña por região e cultura?")}>
        <Icon name="sparkles" size={13} /> Analisar exposição com IA
      </button>
      <UpgradeModal scale={upg} onClose={() => setUpg(null)} />
    </ServiceFrame>
  );
}

/* ============================================================
   IMPACTOS ECONÔMICOS · pipeline + event-study
   ============================================================ */
function EconFeed({ chat, onNav }) {
  const F = SKY.ECON_EVENT_FOCUS;
  const D = SKY.ECON_DECLARATIONS[0];
  return (
    <ServiceFrame
      kind="econ"
      sources={[
        { label:"Notícias · deep research",  org:"Reuters · Globo Rural · Climatempo", data:"contínuo" },
        { label:"ComexStat",                 org:"MDIC", data:"mensal" },
        { label:"B3 · CME · FOB",            org:"bolsas",  data:"intra-day" },
        { label:"Decretos calamidade",       org:"S2ID",   data:"diário" },
      ]}
    >
      {/* pipeline 5 etapas */}
      <div className="v2-card econ-pipeline brackets">
        <div className="v2-card-h mono">
          <span>PIPELINE · 5 ETAPAS AUDITÁVEIS</span>
          <span className="mono soft" style={{ fontSize:9 }}>EVENTO → CADEIA → PREÇO → FLUXO → EXPOSIÇÃO</span>
        </div>
        <div className="econ-pipe-grid">
          {SKY.ECON_PIPELINE.map((s, i) => (
            <div className="econ-pipe-step" key={s.id}>
              <span className="econ-pipe-n mono">{s.n}</span>
              <b>{s.t}</b>
              <em>{s.d}</em>
              {i < SKY.ECON_PIPELINE.length - 1 && <span className="econ-pipe-arrow">→</span>}
            </div>
          ))}
        </div>
      </div>

      {/* evento em foco · gramática 01/02/03 */}
      <div className="econ-focus">
        <div className="econ-focus-h">
          <span className="mod-tag coral">EVENTO EM FOCO</span>
          <h3>{F.titulo}</h3>
          <span className="mono soft">{F.cultura} · {F.decretos} decretos S2ID</span>
        </div>

        <GramCard n="01" tone="coral" title="Diagnóstico · o que aconteceu, com evidência">
          <p className="gram-body">{F.diagnostico.txt}</p>
          <div className="econ-evid-grid">
            {F.diagnostico.fontes.map((e, i) => (
              <div className="econ-evid" key={i}>
                <span className="mono ec-src">{e.fonte} · {e.data}</span>
                <span className="ec-txt">{e.txt}</span>
              </div>
            ))}
          </div>
          <div className="econ-signals">
            {F.diagnostico.sinais.map((s, i) => (
              <span className="econ-sig" key={i}>
                <span className="mono">SINAL</span>
                <b className="tnum" style={{ color: s.delta > 0 ? "var(--risk-low)" : "var(--risk-critical)" }}>
                  {s.delta > 0 ? "+" : ""}{s.delta}
                </b>
                <em>{s.ativo} · {s.unidade}</em>
              </span>
            ))}
          </div>
        </GramCard>

        <GramCard n="02" tone="warn" title="Preditivo · impacto estimado · IC">
          <p className="gram-body">{F.preditivo.txt}</p>
          <div className="econ-band-grid">
            <BandStat label="Produtividade · milho 2ª" lo={F.preditivo.bandaProd[0]} hi={F.preditivo.bandaProd[1]} unit="%" tone="bad" />
            <BandStat label="Preço · soja em 30 dias" lo={F.preditivo.bandaPreco[0]} hi={F.preditivo.bandaPreco[1]} unit="%" tone="good" />
            <div className="econ-band">
              <span className="mono econ-band-l">n análogos · IC</span>
              <b className="tnum">{F.preditivo.n}<small> · {F.preditivo.ic}%</small></b>
              <em>{F.preditivo.fluxo}</em>
            </div>
          </div>
        </GramCard>

        <GramCard n="03" tone="cyan" title="Prescritivo · no seu portfólio">
          <p className="gram-body">{F.prescritivo.txt}</p>
          <div className="econ-acoes">
            {F.prescritivo.acoes.map((a, i) => (
              <div className={"econ-acao-row tipo-" + a.tipo} key={i}>
                <span className="mono">{a.tipo.toUpperCase()}</span>
                <b>{a.alvo}</b>
                <em>{a.detalhe}</em>
              </div>
            ))}
          </div>
        </GramCard>
      </div>

      {/* ComexStat fluxo */}
      <div className="v2-card econ-flow">
        <div className="v2-card-h mono">
          <span>FLUXO · COMEXSTAT · MT EXPORTADAS</span>
          <span className="mono soft" style={{ fontSize:9 }}>EM MILHÕES DE TONELADAS</span>
        </div>
        <ComexBars data={SKY.ECON_COMEX} />
      </div>

      {/* declaração · event-study (o ponto sensível) */}
      <div className="v2-card econ-decl brackets">
        <div className="v2-card-h mono">
          <span>DECLARAÇÃO PÚBLICA · EVENT-STUDY</span>
          <span className="mono" style={{ fontSize:9, color:"var(--sv-coral)" }}>NARRA PADRÃO · NÃO ACUSA CAUSA</span>
        </div>
        <div className="econ-decl-body">
          <div className="econ-decl-h">
            <h4>{D.titulo}</h4>
            <span className="mono">{D.fonte} · {D.data}</span>
          </div>
          <p className="gram-body">{D.txt}</p>
          <div className="econ-decl-stats">
            <div className="econ-band"><span className="mono">D+0</span><b className="tnum" style={{ color: D.d0 < 0 ? "var(--risk-critical)" : "var(--risk-low)" }}>{D.d0 > 0 ? "+" : ""}{D.d0}%</b><em>contrato mais líquido</em></div>
            <BandStat label={"Mediana · " + D.janela} lo={D.dCiLow} hi={D.dCiHigh} unit="%" tone="warn" sub={"IC 80% · n=" + D.n} />
            <div className="econ-band"><span className="mono">Volume</span><b className="tnum">{D.vol}</b><em>vs. média</em></div>
            <div className="econ-band">
              <span className="mono">Sua exposição</span>
              <b className="tnum" style={{ color: D.exposicaoDireta.ativosJanela30d > 0 ? "var(--sv-coral)" : "var(--fg-soft)" }}>{D.exposicaoDireta.ativosJanela30d}</b>
              <em>ativos em janela · {D.exposicaoDireta.acao}</em>
            </div>
          </div>
          <div className="econ-decl-disclaimer mono">
            <Icon name="info" size={11} color="var(--sv-coral)" /> Correlação é reportada, jamais causalidade. Cada card carrega n da amostra histórica, ICs e disclaimer estatístico.
          </div>
        </div>
      </div>

      {/* API mention */}
      <div className="v2-card econ-api">
        <div className="econ-api-l">
          <span className="mono eyebrow">// API · /portfolio/exposure</span>
          <h4><code>POST /portfolio/exposure</code></h4>
          <p>Recebe um evento, devolve a lista de ativos atingidos com magnitude estimada. Integra com ERPs e sistemas do cliente. Contrato MCP/REST único; mesma autenticação e billing dos demais módulos.</p>
        </div>
        <div className="econ-api-r mono">
          <span className="econ-api-method">POST</span>
          <code>/v1/portfolio/exposure</code>
          <pre>{`{
  "event": { "type": "geada", "data": "2026-06-08",
             "regiao": "Oeste PR" },
  "carteira_id": "irb-sul-2627"
}`}</pre>
        </div>
      </div>

      <button className="btn btn-cyan svc-ai-cta" onClick={() => chat.askFree("Resuma o impacto da geada de 08/JUN no portfólio: cadeia, sinais, ativos expostos, ações.")}>
        <Icon name="sparkles" size={13} /> Analisar evento com IA
      </button>
    </ServiceFrame>
  );
}

/* ---- banda com IC ---- */
function BandStat({ label, lo, hi, unit, tone, sub }) {
  const c = tone === "bad" ? "var(--risk-critical)" : tone === "good" ? "var(--risk-low)" : "var(--sv-warn)";
  return (
    <div className="econ-band">
      <span className="mono econ-band-l">{label}</span>
      <b className="tnum" style={{ color: c }}>
        {lo > 0 ? "+" : ""}{lo}{unit} <span className="econ-band-arr">↔</span> {hi > 0 ? "+" : ""}{hi}{unit}
      </b>
      <em>{sub || "banda estimada"}</em>
    </div>
  );
}

/* ---- ComexStat bars ---- */
function ComexBars({ data }) {
  const max = Math.max(...data.map((d) => d.soja + d.milho));
  return (
    <div className="comex-bars">
      {data.map((d) => {
        const total = d.soja + d.milho;
        return (
          <div className="comex-col" key={d.mes}>
            <div className="comex-stack" style={{ height: (total / max) * 100 + "%" }}>
              <span className="comex-seg soja" style={{ height: (d.soja / total) * 100 + "%" }} title={"Soja " + d.soja + " MT"} />
              <span className="comex-seg milho" style={{ height: (d.milho / total) * 100 + "%" }} title={"Milho " + d.milho + " MT"} />
            </div>
            <span className="mono comex-mes">{d.mes}</span>
            <span className="mono comex-total tnum">{total.toFixed(1)}</span>
          </div>
        );
      })}
      <div className="comex-legend">
        <span><i className="soja" /> Soja</span>
        <span><i className="milho" /> Milho</span>
      </div>
    </div>
  );
}

// override v4 exports (mesmas chaves usadas pelo dispatcher)
Object.assign(window, { EnsoRadar, EconFeed, AntiGreenwashingView, ServiceFrame, GramCard });