/* SEL.IA — Busca Integrada (didactic + dynamic concept, loops).
   A narrated 4-step flow: pesquisa → varre todas as fontes → 3 visões →
   processo unificado. Less app-realism, more explanation + motion. */

const BI_SEARCH = "termo de intimação";

const BI_SOURCES = [
  { id:"sei",  label:"SEI",                 color:"#7c3aed", icon:"filesearch", n:379 },
  { id:"dir",  label:"Diretoria",           color:"#2563eb", icon:"users",      n:46 },
  { id:"dou",  label:"DOU",                  color:"#16a34a", icon:"newspaper",  n:58 },
  { id:"ses",  label:"Sessões Públicas",    color:"#f59e0b", icon:"clipboard",  n:21 },
  { id:"part", label:"Participação Pública", color:"#d91965", icon:"message",    n:9 },
];

const BI_STEPS = {
  search: { n:1, text:"Pesquise qualquer termo" },
  scan:   { n:2, text:"A SEL.IA varre todas as fontes regulatórias ao mesmo tempo" },
  lista:  { n:3, text:"Veja os resultados em lista…" },
  timeline:{ n:3, text:"…ou na linha do tempo…" },
  grafo:  { n:3, text:"…ou no grafo de conexões entre processos" },
  process:{ n:4, text:"Abra um processo: tudo dos módulos, reunido num só lugar" },
};

const BI_LISTA = [
  { pn:"48500.003331/2024-72", tipo:"Fiscalização da Distribuição — ENEL SP", badges:[["sei","#7c3aed"],["dir","#2563eb"],["dou","#16a34a"],["ses","#f59e0b"]] },
  { pn:"48500.018871/2025-31", tipo:"Monitoramento da Comercialização", badges:[["dir","#2563eb"],["dou","#16a34a"],["ses","#f59e0b"]] },
  { pn:"48500.003289/2023-17", tipo:"Fiscalização da Geração", badges:[["dir","#2563eb"],["dou","#16a34a"]] },
];

const BI_GRAPH_IDS = ["48500.0188/25","48500.0032/23","48500.0157/26","48500.0094/26","48500.0228/25","48500.0070/26","48500.0311/25","48500.0052/26"];
const BI_GRAPH_NODES = BI_GRAPH_IDS.map((id, i) => ({ id, angle: (i / BI_GRAPH_IDS.length) * Math.PI * 2 - Math.PI / 2 }));

const BI_MODAL_SECTIONS = [
  { id:"sei", src:"SEI", color:"#7c3aed", icon:"filesearch", n:379, line:"Apuração das falhas na distribuição após eventos climáticos — avaliação do plano de recuperação.", open:"Abrir o processo no SEI", dest:"Processo no SEI", tag:"48500.003331/2024-72" },
  { id:"dir", src:"Diretoria", color:"#2563eb", icon:"users", n:4, line:"Termo de Intimação nº 49/2024 — Relatório de Falhas e Transgressões ao Contrato de Concessão.", open:"Abrir no módulo Diretores", dest:"Módulo Diretores", tag:"Termo de Intimação nº 49/2024" },
  { id:"dou", src:"DOU", color:"#16a34a", icon:"newspaper", n:2, line:"Despachos nº 1.468 e nº 1.214 publicados no Diário Oficial.", open:"Abrir o despacho no portal", dest:"Portal do DOU", tag:"Despacho nº 1.468" },
  { id:"ses", src:"Sessões Públicas", color:"#f59e0b", icon:"clipboard", n:2, line:"Distribuído em 2 sessões públicas de relatoria da Diretoria.", open:"Abrir a sessão pública", dest:"Sessão Pública", tag:"6ª Sessão Pública" },
];

/* Crisp native HTML mockups, faithful to the real product screens */
const FullModule = ({ id }) => {
  if (id === "dir") return (
    <div className="fm fm-dir">
      <div className="fm-sec2"><LandIcon name="filetext" size={15}/>Informações Gerais</div>
      <div className="fm-infobox">
        <div className="fm-ig"><div className="fm-k">Número do Processo:</div><div className="fm-v">48500003331202472</div></div>
        <div className="fm-ig"><div className="fm-k">Data de Início:</div><div className="fm-v">04 de novembro de 2025</div></div>
        <div className="fm-ig"><div className="fm-k">Assunto:</div><div className="fm-v">Termo de Intimação</div></div>
        <div className="fm-ig"><div className="fm-k">Área Temática:</div><div><span className="fm-pill" style={{background:"rgba(37,99,235,0.12)",color:"#2563eb"}}>Distribuição</span></div></div>
        <div className="fm-ig"><div className="fm-k">Status Atual:</div><div><span className="fm-pill" style={{background:"rgba(37,99,235,0.12)",color:"#2563eb"}}>Parcialmente Deliberado</span></div></div>
        <div className="fm-ig"><div className="fm-k">Relator:</div><div className="fm-v">Agnes Maria de Aragão da Costa</div></div>
      </div>
      <div className="fm-sec2"><LandIcon name="filetext" size={15}/>Resumo do Processo</div>
      <div className="fm-resumo">
        Termo de Intimação nº 49/2024, lavrado pela Superintendência de Fiscalização Técnica dos Serviços de Energia Elétrica – SFT, que trata do Relatório de Falhas e Transgressões à legislação e ao Contrato de Concessão da Enel Distribuição São Paulo – Enel SP (Eletropaulo Metropolitana Eletricidade de São Paulo S.A.).
        <div className="fm-resumo-meta">Discutido em 4 reuniões</div>
      </div>
      <div className="fm-sec2"><LandIcon name="clock" size={15}/>Linha do Tempo</div>
      <div className="fm-rpo">
        {[["RPO 38",false],["RPO 4",false],["RPO 6",false],["RPO 7",true]].map((r,i)=>(
          <div key={i} className="fm-rpo-node"><span className="fm-rpo-line"/><span className={"fm-rpo-dot"+(r[1]?" on":"")}/><span className={"fm-rpo-lbl"+(r[1]?" on":"")}>{r[0]}</span></div>
        ))}
      </div>
    </div>
  );
  if (id === "dou") return (
    <div className="fm fm-dou">
      <div className="fm-doutop">
        <div style={{display:"flex",gap:10}}><span className="fm-ghostbtn"><LandIcon name="arrow" size={12} style={{transform:"rotate(180deg)"}}/>Voltar ao Portal</span><span className="fm-ghostbtn"><LandIcon name="filetext" size={12}/>Baixar PDF</span></div>
        <span className="fm-ghostbtn">Relatório DOU - 29/04/2026 ⌄</span>
      </div>
      <div className="fm-h1" style={{marginTop:14}}>Diário Oficial - 29/04/2026</div>
      <div className="fm-doumeta"><span>📅 29/04/2026</span><span>📄 44 atos</span><span style={{color:"#d91965",fontWeight:700}}>★ 4 destaques</span></div>
      <div className="fm-douintro">
        <div style={{fontWeight:800,color:"#102b4e",marginBottom:6,display:"flex",alignItems:"center",gap:7}}><LandIcon name="sparkles" size={14} style={{color:"#2563eb"}}/>Resumo do Dia — Gerado por IA</div>
        No dia 29 de abril de 2026, a ANEEL autorizou o início da operação em teste de várias unidades geradoras solares e homologou reajustes tarifários anuais e revisões periódicas que impactarão os consumidores das distribuidoras envolvidas.
        <div className="fm-douintro-meta"><span>44 atos processados</span><span>44 enriquecidos por IA</span></div>
      </div>
      <div className="fm-filters">
        {[["Todos","44",true],["Distribuição","16"],["Transmissão","5"],["Geração","9"],["Comercialização","3"]].map((f,i)=>(
          <span key={i} className={"fm-filter"+(f[2]?" on":"")}>{f[0]} <b>({f[1]})</b></span>
        ))}
      </div>
      <div className="fm-cats">
        {["Encargos Setoriais (12)","Concessões e Geração (7)","Tarifas e Revisões (6)","Infraestrutura e Obras (4)","Receitas Transmissão (1)"].map((c,i)=>(
          <span key={i} className="fm-cat">{c}</span>
        ))}
      </div>
      <div className="fm-sec2" style={{color:"#102b4e",fontSize:16}}><LandIcon name="star" size={15} style={{color:"#d91965"}}/>Destaques para Você <span className="fm-pill" style={{background:"rgba(217,25,101,0.12)",color:"#d91965"}}>4</span></div>
      <div className="fm-doucard">
        <span className="fm-pill" style={{background:"#d91965",color:"#fff",alignSelf:"flex-start"}}>★ Destaque</span>
        <div className="fm-v" style={{fontSize:15,marginTop:8}}>DESPACHO Nº 1.468, DE 28 DE ABRIL DE 2026</div>
        <div className="fm-k">Ministério de Minas e Energia</div>
        <div style={{fontSize:13,color:"#3a4048",lineHeight:1.6,marginTop:10}}>O DIRETOR-GERAL DA AGÊNCIA NACIONAL DE ENERGIA ELÉTRICA – ANEEL, com fundamento no que consta do <b style={{color:"#102b4e"}}>Processo nº 48500.903331/2024-72</b>, decide: conhecer do pedido de efeito suspensivo apresentado pela Eletropaulo Metropolitana Eletricidade de São Paulo S/A, no Pedido de Reconsideração interposto contra o Despacho ANEEL nº 1.214/2026, de 7 de abril de 2026, e negar-lhe provimento…</div>
        <div className="fm-k" style={{color:"#d91965",fontWeight:700,marginTop:8}}>Ver mais</div>
      </div>
    </div>
  );
  if (id === "ses") return (
    <div className="fm fm-ses">
      <div className="fm-h1" style={{fontSize:17,textTransform:"uppercase"}}>Lista da 42ª Sessão Pública Ordinária de Distribuição de Processos aos Diretores-Relatores</div>
      <div className="fm-doumeta"><span>📅 25 de outubro de 2024</span><span>🕐 17h</span><span>📍 Sede ANEEL · Brasília-DF</span></div>
      <div className="fm-sescols">
        <div className="fm-card" style={{flex:1}}>
          <div className="fm-cardhd"><span><LandIcon name="filetext" size={14}/> Lista de Processos</span><span className="fm-k">26 processos</span></div>
          <div className="fm-search">Buscar por processo, assunto ou área…</div>
          <div className="fm-proc" style={{borderColor:"rgba(217,25,101,0.4)"}}><div className="fm-v">48500.003331/2024-72</div><div className="fm-k" style={{marginTop:3}}><b>Relator:</b> Agnes Maria de Aragão da Costa</div><div className="fm-k" style={{marginTop:2}}><b>Assunto:</b> Termo de Intimação nº 49/2024, lavrado pela SFT, que trata do Relatório de Falhas e Transgressões ao Contrato de Concessão da Eletropaulo (Enel SP).</div></div>
          <div className="fm-proc"><div className="fm-v">48500.003418/2024-40</div><div className="fm-k" style={{marginTop:3}}><b>Relator:</b> Agnes Maria de Aragão da Costa</div><div className="fm-k" style={{marginTop:2}}><b>Assunto:</b> Transferência da concessão regida pelo Contrato de Concessão…</div></div>
        </div>
        <div className="fm-card" style={{flex:1}}>
          <div className="fm-cardhd"><span><LandIcon name="users" size={14}/> Distribuição por Diretor</span><span className="fm-k">3 diretores</span></div>
          {[["Agnes Maria de Aragão da Costa",58,"#ef9b3f"],["Fernando Luiz Mosna F. da Silva",23,"#5a8e3a"],["Ricardo Lavorato Tili",19,"#5a8e3a"]].map((d,i)=>(
            <div key={i} className="fm-barrow"><div className="fm-barlbl"><span>{d[0]}</span><span className="fm-k">{d[1]}%</span></div><div className="fm-bartrack"><span style={{width:d[1]+"%",background:d[2]}}/></div></div>
          ))}
          <div className="fm-cardhd" style={{marginTop:16}}><span><LandIcon name="grid" size={14}/> Distribuição por Área</span><span className="fm-k">4 áreas</span></div>
          {[["Concessões, Permissões e Autorizações",73,"#7c3aed"],["Diretoria Colegiada — DIRC-ANEEL",19,"#2563eb"],["Não informado",4,"#aab0b6"]].map((d,i)=>(
            <div key={i} className="fm-barrow"><div className="fm-barlbl"><span>{d[0]}</span><span className="fm-k">{d[1]}%</span></div><div className="fm-bartrack"><span style={{width:d[1]+"%",background:d[2]}}/></div></div>
          ))}
        </div>
      </div>
    </div>
  );
  // sei
  return (
    <div className="fm fm-sei">
      <div className="fm-card">
        <div className="fm-cardhd"><span className="fm-v" style={{fontSize:18}}>48500.903331/2024-72 <span className="fm-pill" style={{background:"rgba(31,154,102,0.14)",color:"#1f9a66"}}>Em andamento</span></span><span className="fm-k">Ver no SEI ↗</span></div>
        <div className="fm-k" style={{marginTop:4}}>Fiscalização da Distribuição: Processo Administrativo Sancionador</div>
        <div style={{fontSize:13,color:"#3a4048",margin:"10px 0",lineHeight:1.5}}>Apuração das falhas da ENEL SP na prestação do serviço de distribuição após eventos climáticos extremos, com avaliação do plano de recuperação e eventual recomendação de caducidade da concessão.</div>
        <div className="fm-igrow"><div><div className="fm-k">Unidade</div><div className="fm-v">SFT</div></div><div><div className="fm-k">Interessados</div><div className="fm-v">ELETROPAULO METROPOLITANA ELETRICIDADE DE SÃO PAULO S.A.</div></div></div>
        <div className="fm-igrow" style={{marginTop:8}}><div><div className="fm-k">Início</div><div className="fm-v">14/10/2024</div></div><div><div className="fm-k">Última mov.</div><div className="fm-v">01/06/2026</div></div><div><div className="fm-k">Atualização</div><div className="fm-v">08/06/2026</div></div></div>
      </div>
      <div className="fm-card" style={{borderLeft:"3px solid #d91965"}}>
        <div className="fm-cardhd"><span style={{display:"flex",alignItems:"center",gap:9}}><span className="fm-iaico"><LandIcon name="sparkles" size={14}/></span><span><div className="fm-v">Visão Geral do Processo</div><div className="fm-k">Resumo do processo gerado por IA</div></span></span></div>
        <div className="fm-v" style={{fontSize:16,marginTop:10}}>RELATÓRIO TÉCNICO CONSOLIDADO</div>
        <div className="fm-k">Processo SEI nº 48500903331202472</div>
        <div className="fm-k" style={{textAlign:"center",color:"#d91965",fontWeight:700,marginTop:10}}>Ver completo ⌄</div>
      </div>
      <div className="fm-stats">
        {[["Documentos","379","filetext"],["Duração","602 dias","clock"],["Status","Ativo","chart"]].map((s,i)=>(
          <div key={i} className="fm-stat"><div><div className="fm-k">{s[0]}</div><div className="fm-statv">{s[1]}</div></div><span className="fm-statico"><LandIcon name={s[2]} size={16}/></span></div>
        ))}
      </div>
    </div>
  );
};

const useCount = (target, run, dur = 900) => {
  const [v, setV] = React.useState(0);
  React.useEffect(() => {
    if (!run) { setV(0); return; }
    let raf, start;
    const step = (t) => { if (!start) start = t; const p = Math.min(1, (t - start) / dur); setV(Math.round(target * (1 - Math.pow(1 - p, 3)))); if (p < 1) raf = requestAnimationFrame(step); };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [run]);
  return v;
};

const BuscaScene = ({ hideTitle = false }) => {
  const [typed, setTyped] = React.useState("");
  const [phase, setPhase] = React.useState("search"); // search → scan → lista → timeline → grafo → process
  const [lit, setLit] = React.useState(0);            // sources lit during scan
  const [graphN, setGraphN] = React.useState(0);
  const [clickCenter, setClickCenter] = React.useState(false);
  const [modalIn, setModalIn] = React.useState(false);
  const [fullView, setFullView] = React.useState(-1);   // index of module opened full-screen
  const [cycle, setCycle] = React.useState(0);
  const pausedRef = React.useRef(false);
  const fullRef = React.useRef(-1);
  React.useEffect(() => { fullRef.current = fullView; }, [fullView]);

  const total = useCount(324, phase !== "search" && phase !== "scan" || lit >= BI_SOURCES.length, 1100);

  React.useEffect(() => {
    const T = []; const push = (fn, ms) => T.push(setTimeout(fn, ms));
    setTyped(""); setPhase("search"); setLit(0); setGraphN(0); setClickCenter(false); setModalIn(false); setFullView(-1);
    for (let i = 1; i <= BI_SEARCH.length; i++) push(() => setTyped(BI_SEARCH.slice(0, i)), 600 + i * 55);
    const tEnd = 600 + BI_SEARCH.length * 55;
    push(() => setPhase("scan"), tEnd + 400);
    for (let i = 1; i <= BI_SOURCES.length; i++) push(() => setLit(i), tEnd + 700 + i * 520);
    const scanEnd = tEnd + 700 + BI_SOURCES.length * 520 + 700;
    push(() => setPhase("lista"), scanEnd);
    push(() => setPhase("timeline"), scanEnd + 2600);
    push(() => { setPhase("grafo"); }, scanEnd + 5200);
    for (let i = 1; i <= BI_GRAPH_NODES.length; i++) push(() => setGraphN(i), scanEnd + 5400 + i * 110);
    push(() => setClickCenter(true), scanEnd + 7600);   // "click" the central process
    push(() => { setPhase("process"); setClickCenter(false); }, scanEnd + 8300);
    push(() => setModalIn(true), scanEnd + 8360);
    // self-restart — but NEVER while the user is hovering or has a module open
    const tryCycle = () => {
      if (pausedRef.current || fullRef.current >= 0) { T.push(setTimeout(tryCycle, 2500)); }
      else setCycle((c) => c + 1);
    };
    push(tryCycle, scanEnd + 19000);
    return () => T.forEach(clearTimeout);
  }, [cycle]);

  const step = BI_STEPS[phase] || BI_STEPS.search;
  const showResults = phase === "lista" || phase === "timeline" || phase === "grafo" || phase === "process";
  const VIEWS = [["lista","Lista","grid"],["timeline","Timeline","clock"],["grafo","Grafo","grid"]];
  const viewActive = (phase === "process") ? "grafo" : phase;

  return (
    <div className="bi-scene"
      onMouseEnter={() => { pausedRef.current = true; }}
      onMouseLeave={() => { pausedRef.current = false; }}>
      <div className="bi-head">
        {!hideTitle && (
          <div className="bi-title">
            <div className="ico"><LandIcon name="search" size={20}/></div>
            <div><div className="t">Busca Integrada</div><div className="s">Um termo. Todas as fontes do setor elétrico, conectadas.</div></div>
          </div>
        )}
        <div className="bi-searchrow" style={{marginTop: hideTitle ? 0 : 16}}>
          <div className={"bi-search" + (typed && phase === "search" ? " focus" : "")}>
            <LandIcon name="search" size={18} style={{color:"#9aa0a6"}}/>
            {typed ? <span>{typed}{phase === "search" && typed.length < BI_SEARCH.length && <span className="caret-dark"/>}</span> : <span className="ph">Buscar por empresa, número de processo, assunto…</span>}
          </div>
          <div className={"bi-btn-buscar" + (phase === "scan" ? " click" : "")}>Buscar</div>
        </div>
      </div>

      {/* didactic step caption */}
      <div className="bi-caption">
        <span className="bi-stepnum">{step.n}</span>
        <span className="bi-steptext" key={phase}>{step.text}</span>
        {showResults && <span className="bi-resbadge"><b>{total}</b>&nbsp;processos encontrados</span>}
      </div>

      {/* view selector — clearly user-selectable (Lista / Timeline / Grafo) */}
      {showResults && (
        <div className="bi-viewtabs">
          <span className="bi-viewtabs-lbl">Visualizar como:</span>
          {VIEWS.map(([id, label, ic]) => (
            <button key={id}
              className={"bi-viewtab" + (viewActive === id ? " on" : "")}
              onClick={() => { if (phase !== "process") setPhase(id); }}>
              <LandIcon name={ic} size={14}/>{label}
            </button>
          ))}
        </div>
      )}

      <div className="bi-body">
        {/* STEP 2 — scan all sources */}
        <div className={"bi-pane bi-scan" + (phase === "scan" ? " show" : "")}>
          {BI_SOURCES.map((s, i) => (
            <ScanCard key={s.id} s={s} on={lit > i}/>
          ))}
        </div>

        {/* STEP 3a — LISTA */}
        <div className={"bi-pane bi-lista2" + (phase === "lista" ? " show" : "")}>
          {BI_LISTA.map((r, i) => (
            <div className="bi-card2" key={r.pn} style={{animationDelay:`${i*140}ms`}}>
              <div className="bi-card2-ico"><LandIcon name="filesearch" size={18}/></div>
              <div className="bi-card2-main">
                <div className="pn">{r.pn}</div>
                <div className="tipo">{r.tipo}</div>
              </div>
              <div className="bi-card2-badges">
                {r.badges.map(([k,c]) => (
                  <span key={k} className="bi-srcdot" style={{background:c}} title={k}><LandIcon name={({sei:"filesearch",dir:"users",dou:"newspaper",ses:"clipboard"})[k]} size={11}/></span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* STEP 3b — TIMELINE */}
        <div className={"bi-pane bi-tl2" + (phase === "timeline" ? " show" : "")}>
          {BI_LISTA.map((r, i) => (
            <div className="bi-tl2-row" key={r.pn}>
              <div className="bi-tl2-label">{r.pn}</div>
              <div className="bi-tl2-track">
                <div className="bi-tl2-line"/>
                {r.badges.map(([k,c], j) => (
                  <span key={k} className={"bi-tl2-dot" + (phase === "timeline" ? " show" : "")} style={{ left:`${18 + j*30}%`, background:c, transitionDelay:`${i*120 + j*160}ms` }}><LandIcon name={({sei:"filesearch",dir:"users",dou:"newspaper",ses:"clipboard"})[k]} size={11}/></span>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* STEP 3c — GRAFO */}
        <div className={"bi-pane bi-graph" + (phase === "grafo" ? " show" : "")}>
          <svg viewBox="0 0 1000 460" preserveAspectRatio="none">
            {BI_GRAPH_NODES.map((n, i) => {
              const cx = 500 + Math.cos(n.angle) * 340, cy = 230 + Math.sin(n.angle) * 175;
              return <line key={i} x1="500" y1="230" x2={cx} y2={cy} stroke={i < graphN ? "rgba(217,25,101,0.3)" : "transparent"} strokeWidth="2"/>;
            })}
          </svg>
          {BI_GRAPH_NODES.map((n, i) => (
            <div key={i} className={"bi-gnode2" + (i < graphN ? " show" : "")} style={{ left:`${50 + Math.cos(n.angle)*34}%`, top:`${50 + Math.sin(n.angle)*38}%`, transitionDelay:`${i*40}ms` }}>{n.id}</div>
          ))}
          <div className={"bi-gcenter" + (clickCenter ? " click" : "")}>
            <div className="pn">48500.003331/2024-72</div>
            <div className="lbl">{clickCenter ? "abrindo processo…" : "ENEL SP · 8 processos correlacionados"}</div>
          </div>
        </div>
      </div>

      {/* STEP 4 — unified process modal */}
      {phase === "process" && (
        <div className={"bi-modal-overlay" + (modalIn ? " in" : "")}>
          <div className="bi-modal bi-modal-didactic">
            <div className="bi-modal-head"><LandIcon name="filesearch" size={17}/><div className="t">Processo 48500.003331/2024-72</div></div>
            <div className="bi-modal-inner2">
              <div className="bi-modal-lead">Tudo o que a SEL.IA encontrou sobre este processo, <b>reunido dos 4 módulos</b>. Clique em um bloco para abrir direto no módulo de origem:</div>
              {BI_MODAL_SECTIONS.map((s, i) => (
                <div className="bi-unicard" key={i} onClick={() => setFullView(i)}>
                  <div className="bi-modcard-ico" style={{background:s.color+"1a",color:s.color}}><LandIcon name={s.icon} size={15}/></div>
                  <div style={{flex:1,minWidth:0}}>
                    <div className="bi-unihead"><span className="src">{s.src}</span><span className="badge" style={{background:s.color+"1a",color:s.color}}>{s.n}</span></div>
                    <div className="line">{s.line}</div>
                  </div>
                  <div className="bi-unicta" style={{color:"#fff", background:s.color}}>
                    <LandIcon name="eye" size={14}/>Clique para ver no módulo
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* full-screen module view — the result of clicking a block */}
          {fullView >= 0 && (
            <div className="bi-full" key={fullView}>
              <div className="bi-full-bar" style={{background: BI_MODAL_SECTIONS[fullView].color}}>
                <span className="bi-full-back" onClick={() => setFullView(-1)}><LandIcon name="arrow" size={14} style={{transform:"rotate(180deg)"}}/>Voltar à busca</span>
                <LandIcon name={BI_MODAL_SECTIONS[fullView].icon} size={15}/>
                <span className="bi-full-title">{BI_MODAL_SECTIONS[fullView].dest}</span>
                <span className="bi-full-tag">{BI_MODAL_SECTIONS[fullView].tag}</span>
              </div>
              <div className="bi-full-img">
                <FullModule id={BI_MODAL_SECTIONS[fullView].id}/>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

const ScanCard = ({ s, on }) => {
  const v = useCount(s.n, on, 800);
  return (
    <div className={"bi-scard" + (on ? " on" : "")} style={on ? { borderColor: s.color } : null}>
      <div className="bi-scard-ico" style={on ? { background: s.color, color: "#fff" } : null}><LandIcon name={s.icon} size={20}/></div>
      <div className="bi-scard-label">{s.label}</div>
      <div className="bi-scard-count" style={on ? { color: s.color } : null}>{on ? v : "—"}</div>
      <div className="bi-scard-sub">{on ? "menções encontradas" : "varrendo…"}</div>
    </div>
  );
};

window.BuscaScene = BuscaScene;

/* Responsive embed: scales 1200×700 scene to the container width. */
const BuscaEmbed = (props) => {
  const ref = React.useRef(null);
  const [box, setBox] = React.useState({ scale: 1, left: 0 });
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const fit = () => { const w = el.clientWidth; const scale = w / 1200; setBox({ scale, left: Math.max(0, (w - 1200 * scale) / 2) }); };
    fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ width:"100%", height: 700 * box.scale, position:"relative", overflow:"hidden" }}>
      <div style={{ position:"absolute", top:0, left:box.left, width:1200, height:700, transform:`scale(${box.scale})`, transformOrigin:"top left" }}>
        <BuscaScene {...props}/>
      </div>
    </div>
  );
};
window.BuscaEmbed = BuscaEmbed;