/* ============================================================
   SKYVIDYA — GEO MapView (MapLibre GL + deck.gl H3 + h3-js)
   Full-bleed observatory map, SACI-style.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const BASEMAPS = {
  dark:  { label:"Escuro",  tiles:["https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png","https://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png","https://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"], attr:"© OpenStreetMap © CARTO" },
  light: { label:"Claro",   tiles:["https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png","https://c.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"], attr:"© OpenStreetMap © CARTO" },
  sat:   { label:"Satélite",tiles:["https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"], attr:"© Esri" },
};

const COLOR_MODES = [
  { id:"score", label:"Score composto" },
  { id:"esg",   label:"Risco ESG" },
  { id:"sinist",label:"Sinistralidade" },
  { id:"ndvi",  label:"NDVI · vigor" },
];

const MAP_LAYERS = [
  { id:"hex",       label:"Células H3 · score", always:true, opacity:true },
  { id:"municipios",label:"Municípios · 184", opacity:true },
  { id:"contour",   label:"Contorno área de estudo", opacity:true },
  { id:"manchas",   label:"Manchas críticas (sinistr.)" },
  { id:"pescarias", label:"Top Leads (Nível A)", note:"top leads", opacity:true },
  { id:"anomalias", label:"Anomalias · Passo Fundo", note:"fraude", opacity:true },
];

/* geospatial storyline — each chapter sets the map lens, flies, and frames an insight */
const STORYLINE = [
  { id:"diag",  n:"01", title:"Diagnóstico", lead:"Onde o risco se concentra", lens:"score",  layers:{manchas:true,anomalias:true},
    fly:{ lng:-53.5, lat:-26.7, zoom:6.4 },
    insight:"O Triângulo das Bermudas concentra o resultado: três regiões, um padrão. O score composto revela onde a carteira deteriora." },
  { id:"vigor", n:"02", title:"Vigor da safra", lead:"NDVI · Sentinel-2", lens:"ndvi", layers:{manchas:false},
    fly:{ lng:-53.5, lat:-26.7, zoom:6.4 },
    insight:"A lente NDVI separa a terra que performa da que definha. Vigor estável é o primeiro sinal de uma boa subscrição." },
  { id:"sin",   n:"03", title:"Sinistralidade", lead:"10 anos de perdas", lens:"sinist", layers:{manchas:true},
    fly:{ lng:-54.0, lat:-25.0, zoom:7 },
    insight:"Dez anos de Proagro desenham as manchas vermelhas — perdas recorrentes que a média regional esconde, mas a célula expõe." },
  { id:"fraude",n:"04", title:"Anomalias", lead:"Cluster Passo Fundo", lens:"score", layers:{anomalias:true,manchas:false},
    fly:{ lng:-52.7, lat:-28.0, zoom:7.6 },
    insight:"Decretos sem lastro econômico (ComexStat) sugerem calamidade declarada, não desastre físico. A subscrição deve separar o fato do registro." },
  { id:"pesc",  n:"05", title:"Top Leads", lead:"Nível A em zona ruim", lens:"score", layers:{pescarias:true,manchas:false},
    fly:{ lng:-53.5, lat:-25.0, zoom:7 },
    insight:"Boas ilhas afogadas em médias ruins. O score por gleba devolve crédito a produtores que a estatística agregada penaliza." },
];

function buildStyle(active) {
  const srcs = {}, lyrs = [{ id:"bg", type:"background", paint:{ "background-color":"#06070A" } }];
  Object.entries(BASEMAPS).forEach(([k, b]) => {
    srcs[k] = { type:"raster", tiles:b.tiles, tileSize:256, attribution:b.attr };
    lyrs.push({ id:"r-"+k, type:"raster", source:k, layout:{ visibility: k===active?"visible":"none" }, paint:{ "raster-opacity": k==="sat"?0.92:1 } });
  });
  return { version:8, sources:srcs, layers:lyrs };
}

function MapView({ chat, tweaks, storyline, scope, onUpgrade }) {
  const mapEl = useRef(null);
  const mapRef = useRef(null);
  const overlayRef = useRef(null);
  const [ready, setReady] = useState(false);
  const [hover, setHover] = useState(null);
  const [tip, setTip] = useState({ x:0, y:0 });
  const [selected, setSelected] = useState(null);
  const [chapter, setChapter] = useState(null);
  const selRef = useRef(null);
  const cellsRef = useRef([]);
  const userPickedBasemap = useRef(false);

  /* panel collapse state */
  const [ctrlCollapsed, setCtrlCollapsed] = useState(false);
  const [insightCollapsed, setInsightCollapsed] = useState(false);

  /* H3 scale selector (merged from H3GatePanel) */
  const [h3Scale, setH3Scale] = useState("municipio");

  // theme-follow: switch basemap to match light/dark unless user overrode it
  useEffect(() => {
    const applyTheme = () => {
      if (userPickedBasemap.current) return;
      const th = (document.documentElement.dataset.theme || "dark");
      const want = th === "light" ? "light" : "dark";
      if (tweaks && tweaks.setTweak && (tweaks.basemap === "dark" || tweaks.basemap === "light")) {
        tweaks.setTweak("basemap", want);
      }
    };
    applyTheme();
    window.addEventListener("sky-theme", applyTheme);
    return () => window.removeEventListener("sky-theme", applyTheme);
  }, [tweaks && tweaks.basemap]);

  const setTweak = tweaks && tweaks.setTweak ? tweaks.setTweak : () => {};
  const basemap = (tweaks && tweaks.basemap) || "dark";
  const colorMode = (tweaks && tweaks.colorMode) || "score";
  const opacity = ((tweaks && tweaks.hexOpacity) || 82) / 100;
  const [layerState, setLayerState] = useState({ hex:true, municipios:true, contour:true, manchas:true, pescarias:false, anomalias:true });
  const [layerOpa, setLayerOpa] = useState({ municipios:0.6, contour:0.9, pescarias:0.92, anomalias:1 });
  function setLayerOpacity(id, v) {
    if (id === "hex") { setTweak("hexOpacity", v); return; }
    setLayerOpa((s) => ({ ...s, [id]: v / 100 }));
  }
  function layerOpacityVal(id) {
    if (id === "hex") return Math.round(opacity * 100);
    return Math.round((layerOpa[id] != null ? layerOpa[id] : 1) * 100);
  }

  const cellColor = useCallback((c, mode) => {
    const a = Math.round(opacity*255);
    if (mode==="score")  return SKY.levelColor(c.level, a);
    if (mode==="esg")    return SKY.seqColor(c.comp.esg/100, a);
    if (mode==="ndvi")   return SKY.seqColor((c.ndvi-0.40)/0.45, a);
    if (mode==="sinist") return SKY.seqColor(1 - c.sinistros/70, a);
    return SKY.levelColor(c.level, a);
  }, [opacity]);

  const buildLayers = useCallback(() => {
    const cells = cellsRef.current;
    if (!window.deck || !cells.length) return [];
    const L = [];
    const sel = selRef.current;
    const showManchas = layerState.manchas;

    if (layerState.hex) {
      L.push(new deck.H3HexagonLayer({
        id:"hex", data:cells, pickable:true, extruded:false, filled:true, stroked:true,
        getHexagon:d=>d.h3,
        getFillColor:d=>{
          if (showManchas && !(d.level==="critical"||d.level==="high")) {
            const col = cellColor(d, colorMode); return [col[0],col[1],col[2],Math.round(col[3]*0.35)];
          }
          return cellColor(d, colorMode);
        },
        getLineColor:d=> sel && sel.h3===d.h3 ? [246,244,238,255] : (showManchas && (d.level==="critical"||d.level==="high")) ? [255,92,46,220] : [6,7,10,150],
        getLineWidth:d=> sel && sel.h3===d.h3 ? 3 : 1,
        lineWidthUnits:"pixels", lineWidthMinPixels:0.5,
        updateTriggers:{ getFillColor:[colorMode,opacity,showManchas], getLineColor:[sel&&sel.h3,showManchas], getLineWidth:[sel&&sel.h3] },
        onClick:(info)=>{ if (info.object){ setSelected(info.object); selRef.current=info.object; } },
        onHover:(info)=>{ setHover(info.object||null); if(info.x!=null) setTip({x:info.x,y:info.y}); },
      }));
    }
    if (layerState.anomalias) {
      const fr = cells.filter(c=>c.fraude);
      const a = Math.round((layerOpa.anomalias != null ? layerOpa.anomalias : 1) * 255);
      L.push(new deck.H3HexagonLayer({ id:"anom", data:fr, extruded:false, filled:false, stroked:true,
        getHexagon:d=>d.h3, getLineColor:[255,92,46,a], lineWidthUnits:"pixels", getLineWidth:2.4, lineWidthMinPixels:2,
        updateTriggers:{ getLineColor:[layerOpa.anomalias] } }));
    }
    if (layerState.pescarias) {
      const ps = cells.filter(c=>c.lisa.k==="HL" && c.tierA>0);
      const a = Math.round((layerOpa.pescarias != null ? layerOpa.pescarias : 1) * 235);
      L.push(new deck.ScatterplotLayer({ id:"pesc", data:ps, getPosition:d=>[d.lng,d.lat],
        getRadius:600, radiusUnits:"meters", radiusMinPixels:3, radiusMaxPixels:7,
        getFillColor:[78,210,210,a], stroked:true, getLineColor:[6,7,10,255], lineWidthMinPixels:1,
        updateTriggers:{ getFillColor:[layerOpa.pescarias] } }));
    }
    if (layerState.municipios && SKY.municipiosGeoJSON && SKY.municipiosGeoJSON()) {
      const a = Math.round((layerOpa.municipios != null ? layerOpa.municipios : 0.6) * 180);
      L.push(new deck.GeoJsonLayer({ id:"municipios", data:SKY.municipiosGeoJSON(), stroked:true, filled:false,
        getLineColor:[120,120,140,a], lineWidthUnits:"pixels", getLineWidth:0.8, lineWidthMinPixels:0.6,
        updateTriggers:{ getLineColor:[layerOpa.municipios] } }));
    }
    if (layerState.contour) {
      const a = Math.round((layerOpa.contour != null ? layerOpa.contour : 1) * 230);
      L.push(new deck.GeoJsonLayer({ id:"contour", data:SKY.regionGeoJSON(), stroked:true, filled:false,
        getLineColor:[255,92,46,a], lineWidthUnits:"pixels", getLineWidth:2.2, lineWidthMinPixels:1.8,
        updateTriggers:{ getLineColor:[layerOpa.contour] } }));
    }
    return L;
  }, [layerState, layerOpa, colorMode, opacity, cellColor]);

  useEffect(() => {
    if (!window.maplibregl || !window.h3 || !window.deck) return;
    let _cells = SKY.buildGeoCells(window.h3);
    if (scope === "cliente") {
      _cells = _cells.filter((c) => c.region === "Oeste PR" && c.lat > -25.1 && c.lng < -53.3);
    }
    cellsRef.current = _cells;
    const map = new maplibregl.Map({
      container: mapEl.current,
      style: buildStyle("dark"),
      center: scope === "cliente" ? [-53.85, -24.75] : [-53.5, -26.7],
      zoom: scope === "cliente" ? 8.0 : 6.4, minZoom: 5, maxZoom: 11,
      attributionControl: false, dragRotate: false,
    });
    mapRef.current = map;
    map.addControl(new maplibregl.AttributionControl({ compact:true }), "bottom-right");
    map.addControl(new maplibregl.NavigationControl({ showCompass:false }), "bottom-right");
    map.on("load", () => {
      try {
        const overlay = new deck.MapboxOverlay({ interleaved:false, layers: buildLayers() });
        overlayRef.current = overlay;
        map.addControl(overlay);
        setReady(true);
      } catch(err){}
    });
    return () => { try { map.remove(); } catch(e){} };
  }, []);

  useEffect(() => { if (overlayRef.current) overlayRef.current.setProps({ layers: buildLayers() }); }, [buildLayers, ready, selected]);

  useEffect(() => {
    const map = mapRef.current; if (!map || !ready) return;
    Object.keys(BASEMAPS).forEach((k)=>{ if (map.getLayer("r-"+k)) map.setLayoutProperty("r-"+k, "visibility", k===basemap?"visible":"none"); });
  }, [basemap, ready]);

  const roll = useMemo(()=> ready ? SKY.rollup(cellsRef.current) : null, [ready]);
  const flyTo = useCallback((c)=>{ if(mapRef.current) mapRef.current.flyTo({ center:[c.lng,c.lat], zoom:8.2, duration:900 }); }, []);

  function goChapter(i) {
    const ch = STORYLINE[i]; if (!ch) return;
    setChapter(i);
    setTweak("colorMode", ch.lens);
    setLayerState((s) => ({ ...s, manchas:false, anomalias:false, pescarias:false, ...ch.layers }));
    if (ch.fly && mapRef.current) mapRef.current.flyTo({ center:[ch.fly.lng, ch.fly.lat], zoom:ch.fly.zoom, duration:1100 });
    setSelected(null); selRef.current = null;
  }
  const activeChapter = chapter == null ? 0 : chapter;

  function closeSel(){ setSelected(null); selRef.current=null; }
  const legendIsSeq = colorMode!=="score";

  return (
    <div className={"geo-map" + (selected ? " has-sel" : "")}>
      <div className="geo-canvas" ref={mapEl} />
      {scope === "cliente" && (
        <div className="map-scope-banner mono"><span className="msb-dot" /> RECORTE: ATIVOS VINCULADOS AO CPF 044·······-XX · CAMADAS PÚBLICAS MANTIDAS</div>
      )}
      {!ready && <div className="geo-loading"><span className="led-spin" /> <span className="mono">triangulando fontes · Earth AI Data Cube</span></div>}

      {/* ===== LEFT: MAPA BASE — storyline + basemap + lente + camadas + legenda + H3 ===== */}
      <div className={"geo-panel geo-ctrl" + (ctrlCollapsed ? " collapsed" : "")}>
        <div className="panel-header">
          {!ctrlCollapsed && <span className="panel-title">Mapa base</span>}
          <button className="panel-tog" onClick={()=>setCtrlCollapsed(v=>!v)} title={ctrlCollapsed?"Expandir":"Recolher"}>
            {ctrlCollapsed ? "›" : "‹"}
          </button>
        </div>

        <div className="ctrl-body">
          {/* 1. Storyline geoespacial — no topo */}
          <div className="cs">
            <div className="ct">Storyline geoespacial</div>
            <div className="gi-sl-dots" style={{marginBottom:10}}>
              {STORYLINE.map((ch,i)=>(
                <button key={ch.id} className={"gi-sl-dot"+(activeChapter===i?" on":"")}
                  title={ch.title} onClick={()=>goChapter(i)} />
              ))}
            </div>
            <div className="gi-chapters">
              {STORYLINE.map((ch,i)=>(
                <button key={ch.id} className={"gi-chap"+(activeChapter===i?" on":"")} onClick={()=>goChapter(i)}>
                  <span className="gic-n mono">{ch.n}</span>
                  <span className="gic-t">{ch.title}</span>
                </button>
              ))}
            </div>
          </div>

          {/* 2. Basemap */}
          <div className="cs">
            <div className="ct">Mapa base</div>
            <div className="bmr-list">
              {Object.entries(BASEMAPS).map(([k,b])=>(
                <div key={k} className="bmr" onClick={()=>{ userPickedBasemap.current=true; setTweak("basemap", k); }}>
                  <span className={"bmc"+(basemap===k?" on":"")} /><span className="bml">{b.label}</span>
                </div>
              ))}
            </div>
          </div>

          {/* 3. Lente */}
          <div className="cs">
            <div className="ct">Lente · cor dos hexágonos</div>
            <div className="cmode">
              {COLOR_MODES.map(m=>(
                <button key={m.id} className={colorMode===m.id?"on":""} onClick={()=>setTweak("colorMode", m.id)}>{m.label}</button>
              ))}
            </div>
          </div>

          {/* 4. Camadas */}
          <div className="cs">
            <div className="ct">Camadas</div>
            {MAP_LAYERS.map(l=>{
              const on = !!layerState[l.id];
              const opVal = layerOpacityVal(l.id);
              return (
                <div className="lr" key={l.id}>
                  <div className="lt">
                    <span className={"ltg"+(on?" on":"")} role="switch" aria-checked={on}
                      onClick={()=>{ if(l.always) return; setLayerState(s=>({...s,[l.id]:!s[l.id]})); }} />
                    <span className="ll">{l.label}{l.note && <em> · {l.note}</em>}</span>
                  </div>
                  {on && l.opacity && (
                    <input type="range" min="15" max="100" value={opVal} className="ops"
                      style={{ "--val": opVal+"%" }} onChange={e=>setLayerOpacity(l.id, +e.target.value)} />
                  )}
                </div>
              );
            })}
          </div>

          {/* 5. Legenda */}
          <div className="cs">
            <div className="ct">{(COLOR_MODES.find(m=>m.id===colorMode)||{}).label}</div>
            {legendIsSeq ? (
              <div className="ls">
                <div className="lbar" style={{background:"linear-gradient(90deg,#1E1F4A,#2C3A8A,#2A6FA8,#1FA7B0,#5FD6A4,#D9F37C,#FFFAA8)"}} />
                <div className="llb"><span>baixo</span><span>alto</span></div>
              </div>
            ) : (
              <div className="ls">
                {[["critical","Crítico","<40"],["high","Alto","40–60"],["medium","Médio","60–85"],["low","Baixo","≥85"]].map(([lv,nm,rg])=>(
                  <div className="li" key={lv}><span className="lsw" style={{background:`rgb(${SKY.levelColor(lv).slice(0,3).join(",")})`}} /><span style={{flex:1}}>{nm}</span><span className="mono" style={{fontSize:9.5,opacity:.7}}>{rg}</span></div>
                ))}
              </div>
            )}
          </div>

          {/* 6. Escala H3 · acesso — no rodapé */}
          {SKY.H3_SCALES && (
            <div className="cs">
              <div className="ct">Escala H3 · acesso</div>
              {SKY.H3_SCALES.map((s)=>{
                const locked = !s.free;
                const on = h3Scale===s.id;
                return (
                  <button key={s.id} className={"h3g-row"+(on?" on":"")+(locked?" locked":"")}
                    onClick={()=>locked ? (onUpgrade && onUpgrade(s)) : setH3Scale(s.id)}>
                    <span className={"bmc"+(on?" on":"")} />
                    <span className="h3g-l">{s.label}</span>
                    <span className="mono h3g-r">{s.res}</span>
                    {locked ? <span className="h3g-lock mono">🔒 PRO</span> : <span className="h3g-free mono">grátis</span>}
                  </button>
                );
              })}
              <p className="h3g-note">Estado e município são gratuitos. Sub-município é privado/pago.</p>
            </div>
          )}
        </div>
      </div>

      {/* ===== RIGHT: MAPA RISCO AGROCLIMÁTICO — insight sidebar ===== */}
      <aside className={"geo-insight" + (insightCollapsed ? " collapsed" : "")}>
        <div className="panel-header insight-header">
          <button className="panel-tog" onClick={()=>setInsightCollapsed(v=>!v)} title={insightCollapsed?"Expandir":"Recolher"}>
            {insightCollapsed ? "‹" : "›"}
          </button>
          {!insightCollapsed && <span className="panel-title">Risco agroclimático</span>}
        </div>
        <div className="gi-scroll">
          <div className="eyebrow">// MAPA · RISCO AGROCLIMÁTICO</div>
          <h2 className="gi-title">Risco por célula H3 <span className="serif-it">— Triângulo das Bermudas</span></h2>
          <p className="gi-sub">Score composto por gleba hexagonal (H3-L6 · ~36 km²). SICOR + Proagro + decretos de calamidade, janela de 10 anos.</p>

          {roll && (
            <>
              <div className="gi-kpis">
                <div className="gi-kpi"><span className="gik-l">Zona crítica</span><span className="gik-v coral tnum">{roll.critPct}<small>%</small></span></div>
                <div className="gi-kpi"><span className="gik-l">Zona segura</span><span className="gik-v tnum" style={{color:"var(--risk-low)"}}>{roll.safePct}<small>%</small></span></div>
                <div className="gi-kpi"><span className="gik-l">Score médio</span><span className="gik-v tnum">{roll.avg}<small>/100</small></span></div>
                <div className="gi-kpi"><span className="gik-l">Células</span><span className="gik-v tnum">{roll.total}</span></div>
              </div>

              <div className="gi-rule" />
              <div className="gi-mono">Breakdown regional · 5s</div>
              {SKY.regionalRisk.map((rg) => (
                <div className="gi-row" key={rg.regiao} onClick={() => chat.askPrompt(rg.tendencia === "anomaly" ? "fraude" : "deteriorando")}>
                  <span className="gir-name">{rg.regiao} <span className="mono soft" style={{fontSize:9}}>{rg.uf}</span></span>
                  <span className="gir-meta"><ScorePill score={rg.score} width={32} /><TrendTag tendencia={rg.tendencia} /></span>
                </div>
              ))}
            </>
          )}

          <div className="gi-rule" />
          {(() => {
            const ch = STORYLINE[activeChapter] || STORYLINE[0];
            return (
              <div className="gi-story">
                <div className="gis-eyebrow">
                  <span className="eyebrow" style={{color:"var(--sv-cyan)"}}>// INSIGHT</span>
                  <span className="mono gis-ch">{ch.n} · {ch.title}</span>
                </div>
                <h3 className="gis-title">{ch.lead}</h3>
                <p className="gis-body">{ch.insight}</p>
              </div>
            );
          })()}
        </div>
      </aside>

      {/* hover tooltip */}
      {hover && !selected && (
        <div className="hex-tip" style={{ left:tip.x+16, top:tip.y+16 }}>
          <div className="ht-row"><span className="mono ht-code">{hover.h3.slice(0,9)}…</span><span className={"ht-lv lv-"+hover.level}>{hover.level==="critical"?"crítico":hover.level==="high"?"alto":hover.level==="medium"?"médio":"baixo"}</span></div>
          <div className="ht-score">Score <b style={{color:`rgb(${SKY.levelColor(hover.level).slice(0,3).join(",")})`}}>{hover.score}</b><span className="soft">/100</span> · {hover.region}</div>
        </div>
      )}

      {/* inspector */}
      {selected && <HexInspector cell={selected} onClose={closeSel} chat={chat} onFly={flyTo} />}
    </div>
  );
}

/* ---------- multi-section inspector + insight ---------- */
function CompBar({ label, src, v }) {
  const color = v>=85?"var(--risk-low)":v>=60?"var(--risk-medium)":v>=40?"var(--risk-high)":"var(--risk-critical)";
  return (
    <div className="comp-row">
      <div className="comp-meta"><b>{label}</b><em className="mono">{src}</em></div>
      <div className="comp-track"><i style={{ width:v+"%", background:color }} /></div>
      <span className="comp-val mono" style={{color}}>{v}</span>
    </div>
  );
}

function HexInspector({ cell, onClose, chat, onFly }) {
  const levelLabel = cell.level==="critical"?"ALTO RISCO":cell.level==="high"?"RISCO ELEVADO":cell.level==="medium"?"MODERADO":"BAIXO RISCO";
  const scoreColor = `rgb(${SKY.levelColor(cell.level).slice(0,3).join(",")})`;
  useEffect(()=>{ onFly && onFly(cell); }, [cell.h3]);
  return (
    <div className="hex-inspector fade-up">
      <div className="insp-head">
        <span className="mono insp-code">ÁREA H3 · {cell.h3}</span>
        <button className="hp-close" onClick={onClose}><Icon name="x" size={14} /></button>
      </div>
      <div className="insp-scroll">
        <div className="insp-score">
          <span className="is-lab mono" style={{color:scoreColor}}>{levelLabel}</span>
          <span className="is-val tnum" style={{color:scoreColor}}>{cell.score}<small>/100</small></span>
        </div>

        <div className="insp-sec">
          <div className="insp-sec-h"><span className="mono">01 · diagnóstico</span></div>
          <div className="kv"><span>Região</span><b>{cell.region} · {cell.uf}</b></div>
          <div className="kv"><span>Cultura predominante</span><b>{cell.cultura}</b></div>
          <div className="kv"><span>Tipo de solo</span><b>{cell.solo}</b></div>
          <div className="kv"><span>Manejo</span><b>{cell.irrigado?"Irrigado":"Sequeiro"}</b></div>
          <div className="kv"><span>Operações SICOR · 5s</span><b className="tnum">{cell.sicor}</b></div>
          <div className="kv"><span>Sinistros Proagro</span><b className="tnum">{cell.sinistros}%</b></div>
          <div className="kv"><span>Decretos calamidade · 30a</span><b className="tnum">{cell.decretos}</b></div>
          <div className="kv"><span>NDVI médio</span><b className="tnum">{cell.ndvi}</b></div>
        </div>

        <div className="insp-sec">
          <div className="insp-sec-h"><span className="mono">02 · preditivo — 9 componentes cais</span></div>
          {SKY.COMPONENT_DEFS.map(d=> <CompBar key={d.id} label={d.label} src={d.src} v={cell.comp[d.id]} />)}
        </div>

        <div className="insp-sec">
          <div className="insp-sec-h"><span className="mono">03 · contexto espacial (lisa)</span></div>
          <div className={"lisa-tag tone-"+cell.lisa.tone}>
            <span className="lisa-k mono">{cell.lisa.label}</span>
            <span className="lisa-desc">{cell.lisa.desc}</span>
          </div>
          <div className="kv" style={{marginTop:10}}><span>Base de dados</span><b className={cell.dataQ<70?"warnc":""}>{cell.dataVintage}</b></div>
          <div className="kv"><span>Qualidade da base</span><b className="tnum" style={{color: cell.dataQ<70?"var(--sv-warn)":"var(--risk-low)"}}>{cell.dataQ}%</b></div>
        </div>

        <div className="insp-sec">
          <div className="insp-sec-h"><span className="mono">04 · prescritivo</span></div>
          <div className="presc-row"><ActionTag acao={cell.acao} /></div>
          <p className="presc-txt">{
            cell.fraude ? "Anomalia ComexStat: decretos sem impacto econômico correspondente. Bloquear subscrição; exigir vistoria presencial antes de operar."
            : cell.lisa.k==="HL" ? `${cell.tierA} propriedades Nível A em zona regional inferior — capturar com franquia reduzida (20%), destacada do tratamento regional.`
            : cell.level==="low" ? "Operável sob protocolo padrão. Franquia e gatilho conforme nível A/B."
            : `Condicionar subscrição a gatilho elevado (${cell.level==="critical"?55:45}%) e vistoria amostral. Reavaliar na próxima safra.`
          }</p>
        </div>

        <div className="insp-insight">
          <span className="eyebrow">// insight</span>
          <p className="ins-lead">{cell.level==="critical"||cell.level==="high"
            ? <>O risco aqui é <span className="serif-it">estrutural</span>, não pontual.</>
            : cell.lisa.k==="HL" ? <>Boa terra <span className="serif-it">afogada</span> em médias ruins.</>
            : <>Território <span className="serif-it">operável</span> sob critério.</>}</p>
          <p className="ins-body">{cell.fraude
            ? "O padrão de decretos sem lastro econômico (ComexStat) sugere declaração política de calamidade, não desastre físico. A subscrição deve separar o fato do registro."
            : cell.lisa.k==="HL" ? "A média regional penaliza produtores que performam. O score por gleba devolve a eles o crédito que a estatística agregada esconde."
            : "Score composto de 9 fatores físicos e econômicos — não taxa. A decisão é de franquia e gatilho, não de preço."}</p>
        </div>

        <button className="btn btn-primary insp-cta" onClick={()=>chat.askGeoHex(cell)}>
          <Icon name="sparkles" size={13} /> Analisar com IA
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { MapView });