/* SEL.IA Landing — module showcase cards with mini previews */

const ModuleShowcase = () => {
  return (
    <div className="modules-grid">
      <div className="module-card span-7 fade-up">
        <div className="module-icon" style={{background:"linear-gradient(135deg,rgba(217,25,101,0.12),rgba(239,64,91,0.12))",color:"#d91965"}}>
          <LandIcon name="message" size={22}/>
        </div>
        <h3>Chat Regulatório</h3>
        <p>Pergunte em linguagem natural sobre PRODIST, PRORET e qualquer norma da ANEEL. Respostas com citações verificáveis e Deep Search em fontes oficiais.</p>
        <div className="preview" style={{padding:0,overflow:"hidden"}}>
          <ChatMiniPreview/>
        </div>
      </div>

      <div className="module-card span-5 fade-up">
        <div className="module-icon" style={{background:"rgba(16,43,78,0.08)",color:"#102b4e"}}>
          <LandIcon name="users" size={22}/>
        </div>
        <h3>Diretores ANEEL</h3>
        <p>Análise comportamental e padrões de votação dos diretores da agência. Antecipe decisões da Diretoria Colegiada.</p>
        <div className="preview">
          <DirectorsPreview/>
        </div>
      </div>

      <div className="module-card span-5 fade-up">
        <div className="module-icon" style={{background:"rgba(0,66,122,0.10)",color:"#00427a"}}>
          <LandIcon name="filesearch" size={22}/>
        </div>
        <h3>Processos SEI</h3>
        <p>Pesquise, acompanhe e receba alertas de processos administrativos. Notificação em tempo real quando há andamento.</p>
        <div className="preview">
          <SeiPreview/>
        </div>
      </div>

      <div className="module-card span-7 fade-up">
        <div className="module-icon" style={{background:"linear-gradient(135deg,rgba(217,25,101,0.12),rgba(239,64,91,0.12))",color:"#d91965"}}>
          <LandIcon name="newspaper" size={22}/>
        </div>
        <h3>Portal Regulatório</h3>
        <p>Newsletters, DOU e reuniões da ANEEL em um só lugar. Resumos diários por IA com priorização baseada nos seus interesses.</p>
        <div className="preview">
          <PortalPreview/>
        </div>
      </div>

      <div className="module-card span-12 fade-up">
        <div style={{display:"flex",alignItems:"flex-start",gap:24,flexWrap:"wrap"}}>
          <div style={{flex:"1 1 320px",minWidth:280}}>
            <div className="module-icon" style={{background:"rgba(16,43,78,0.08)",color:"#102b4e"}}>
              <LandIcon name="target" size={22}/>
            </div>
            <h3>Participação Social</h3>
            <p>Acompanhe audiências e consultas públicas da ANEEL. Receba alertas de prazos críticos e templates para contribuições técnicas.</p>
            <div style={{display:"flex",gap:8,flexWrap:"wrap",marginTop:12}}>
              <span className="tag blue">12 consultas abertas</span>
              <span className="tag">3 com prazo esta semana</span>
            </div>
          </div>
          <div style={{flex:"1 1 360px",minWidth:300}}>
            <ParticipationPreview/>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ----- mini previews ----- */

const ChatMiniPreview = () => {
  const [n, setN] = React.useState(8);
  React.useEffect(() => {
    const id = setInterval(() => setN(v => 8 + Math.floor(Math.random() * 6)), 2400);
    return () => clearInterval(id);
  }, []);
  return (
    <div style={{padding:14,background:"#fff",fontSize:12}}>
      <div style={{display:"flex",gap:8,marginBottom:10}}>
        <div style={{width:20,height:20,borderRadius:9999,background:"#102b4e",color:"#fff",fontSize:8,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>GS</div>
        <div style={{flex:1,fontSize:12,color:"#0a0a0a",fontWeight:500}}>Como a REH 3.262/24 afeta o reajuste tarifário?</div>
      </div>
      <div style={{display:"flex",gap:8}}>
        <div style={{width:20,height:20,borderRadius:9999,background:"linear-gradient(135deg,#d91965,#ef405b)",color:"#fff",fontSize:7,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>AI</div>
        <div style={{flex:1}}>
          <div style={{fontSize:11,color:"#58595b",lineHeight:1.5,marginBottom:8}}>
            A REH 3.262/24 estabelece o índice de reposicionamento tarifário em 7,87%. Localizei <strong className="count-shift" key={n} style={{color:"#102b4e"}}>{n} fontes</strong> e analisei os votos da Diretoria.
          </div>
          <div style={{display:"flex",gap:4,flexWrap:"wrap"}}>
            <CitationChip label="REH 3.262" type="aneel"/>
            <CitationChip label="Voto Sandoval" type="sei"/>
            <CitationChip label="DOU 04/24" type="dou"/>
          </div>
        </div>
      </div>
    </div>
  );
};

const DirectorsPreview = () => {
  const data = [
    { n:"Sandoval Feitosa", role:"Diretor-Geral", v: 92, color:"#d91965" },
    { n:"Hélvio Guerra",    role:"Diretor",       v: 78, color:"#102b4e" },
    { n:"Agnes da Costa",   role:"Diretora",      v: 85, color:"#00427a" },
  ];
  return (
    <div style={{display:"flex",flexDirection:"column",gap:10}}>
      {data.map((d, i) => (
        <div key={i} style={{display:"flex",alignItems:"center",gap:10}}>
          <div style={{width:24,height:24,borderRadius:9999,background:d.color,color:"#fff",fontSize:9,fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
            {d.n.split(" ").map(s=>s[0]).slice(0,2).join("")}
          </div>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:12,fontWeight:600,color:"#102b4e",letterSpacing:"-0.01em"}}>{d.n}</div>
            <div style={{height:4,background:"rgba(16,43,78,0.06)",borderRadius:9999,marginTop:4,overflow:"hidden"}}>
              <div style={{width:`${d.v}%`,height:"100%",background:d.color,borderRadius:9999,transition:"width 800ms ease"}}/>
            </div>
          </div>
          <div style={{fontSize:11,fontWeight:600,color:d.color,fontVariantNumeric:"tabular-nums"}}>{d.v}%</div>
        </div>
      ))}
      <div style={{fontSize:10,color:"#9aa0a6",marginTop:4}}>Alinhamento com a posição majoritária (últimos 90 dias)</div>
    </div>
  );
};

const SeiPreview = () => {
  const items = [
    { id:"48500.000123/2024-01", title:"Revisão tarifária — CPFL Paulista", state:"andamento", color:"#d91965" },
    { id:"48500.000456/2024-72", title:"PRORET módulo 7 — submódulo 7.1",   state:"prazo",     color:"#ef405b" },
    { id:"48500.000789/2024-11", title:"Consulta pública nº 042/24",         state:"novo",      color:"#102b4e" },
  ];
  return (
    <div style={{display:"flex",flexDirection:"column",gap:8}}>
      {items.map((it,i)=>(
        <div key={i} style={{display:"flex",alignItems:"flex-start",gap:8,padding:"6px 0",borderBottom: i<2?"1px solid rgba(16,43,78,0.06)":"none"}}>
          <div className="pulse-dot" style={{width:6,height:6,borderRadius:9999,background:it.color,marginTop:6,flexShrink:0,animationDelay:`${i*0.3}s`}}/>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:12,fontWeight:600,color:"#102b4e",lineHeight:1.3,marginBottom:2}}>{it.title}</div>
            <div style={{fontSize:10,color:"#9aa0a6",fontVariantNumeric:"tabular-nums"}}>SEI {it.id}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const PortalPreview = () => {
  const news = [
    { tag:"DOU", color:"#d91965", title:"ANEEL aprova REH 3.262/24 — reajuste de 7,87%", time:"há 2h" },
    { tag:"ANEEL", color:"#102b4e", title:"Reunião pública 14/05 — pauta de bandeiras tarifárias", time:"há 5h" },
    { tag:"Newsletter", color:"#00427a", title:"Resumo semanal — 12 normas, 4 audiências, 38 processos", time:"ontem" },
  ];
  return (
    <div style={{display:"flex",flexDirection:"column",gap:10}}>
      {news.map((it,i)=>(
        <div key={i} style={{display:"flex",alignItems:"flex-start",gap:10}}>
          <span style={{
            padding:"2px 8px",borderRadius:4,
            background:`${it.color}15`,color:it.color,
            fontSize:9,fontWeight:700,letterSpacing:"0.04em",textTransform:"uppercase",
            flexShrink:0
          }}>{it.tag}</span>
          <div style={{flex:1,minWidth:0}}>
            <div style={{fontSize:12,fontWeight:600,color:"#102b4e",lineHeight:1.35}}>{it.title}</div>
            <div style={{fontSize:10,color:"#9aa0a6",marginTop:2}}>{it.time}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const ParticipationPreview = () => {
  return (
    <div style={{
      background:"#fafbfc",
      border:"1px solid rgba(16,43,78,0.06)",
      borderRadius:10,
      padding:16
    }}>
      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
        <div>
          <div style={{fontSize:11,color:"#9aa0a6",letterSpacing:"0.06em",textTransform:"uppercase",fontWeight:600,marginBottom:4}}>Consulta Pública nº 042/24</div>
          <div style={{fontSize:14,fontWeight:700,color:"#102b4e",letterSpacing:"-0.01em"}}>Aprimoramento do PRODIST</div>
        </div>
        <span className="tag" style={{background:"rgba(239,64,91,0.10)",color:"#ef405b"}}>3 dias</span>
      </div>
      <div style={{height:6,background:"rgba(16,43,78,0.06)",borderRadius:9999,overflow:"hidden",marginBottom:12}}>
        <div style={{width:"72%",height:"100%",background:"linear-gradient(90deg,#d91965,#ef405b)",borderRadius:9999}}/>
      </div>
      <div style={{display:"flex",justifyContent:"space-between",fontSize:11,color:"#58595b"}}>
        <span>72% do prazo decorrido</span>
        <span style={{fontVariantNumeric:"tabular-nums"}}>encerra 02/05</span>
      </div>
    </div>
  );
};

window.ModuleShowcase = ModuleShowcase;
