/* global React */
const { useState: uS, useMemo: uM } = React;
const { Icon, Avatar, Selo, ClassifPill, Sparkline, Radar, Trail, BarRow, MapCS,
  TalentCard, TalentDetail, ProjectCard, OpCard, MatchCard, NetworkGraph, shade } = window;

// ============ DASHBOARD (Comitê) ============
function DashboardView({state, setState, onSelectTalento, onSelectProjeto}) {
  const [heatmap, setHeatmap] = uS('talentos');
  const [focusedMun, setFocusedMun] = uS(null);

  const totals = uM(() => {
    const t = window.TALENTOS, p = window.PROJETOS_INOV, o = window.OPORTUNIDADES;
    return {
      talentos: t.length, projetos: p.length,
      mentores: window.MENTORES.length, eventos: o.length,
      mei: t.length * 1.4 | 0,
      conexoes: window.CONEXOES.length,
    };
  }, []);

  // List ordered by heatmap
  const cityList = uM(() => {
    const data = window.densidadePorMunicipio(heatmap);
    return window.MUNICIPALITIES
      .map(m => ({ ...m, count: data[m.id] || 0 }))
      .sort((a, b) => b.count - a.count);
  }, [heatmap]);
  const maxCity = cityList[0]?.count || 1;

  return <div>
    {/* Hero KPIs */}
    <div className="kpi-grid">
      <div className="kpi"><div className="kpi-accent"/>
        <div className="kpi-label">Talentos cadastrados</div>
        <div className="kpi-value">{totals.talentos}</div>
        <span className="kpi-delta"><Icon name="arrowUp" size={12}/> +18 nos últimos 30 dias</span>
        <div className="kpi-spark"><Sparkline data={window.SERIE_CADASTROS} w={70} h={26}/></div>
      </div>
      <div className="kpi" data-color="violet"><div className="kpi-accent"/>
        <div className="kpi-label">Projetos / startups</div>
        <div className="kpi-value">{totals.projetos}</div>
        <span className="kpi-delta"><Icon name="arrowUp" size={12}/> +3 este trimestre</span>
        <div className="kpi-spark"><Sparkline data={window.SERIE_PROJETOS} w={70} h={26} color="#7C3AED"/></div>
      </div>
      <div className="kpi" data-color="amber"><div className="kpi-accent"/>
        <div className="kpi-label">Mentores ativos</div>
        <div className="kpi-value">{totals.mentores}</div>
        <span className="kpi-delta"><Icon name="arrowUp" size={12}/> 74 mentorias ativas</span>
        <div className="kpi-spark" style={{color:'#F59E0B'}}><Icon name="users" size={26}/></div>
      </div>
      <div className="kpi" data-color="green"><div className="kpi-accent"/>
        <div className="kpi-label">Conexões geradas</div>
        <div className="kpi-value">{totals.conexoes}</div>
        <span className="kpi-delta"><Icon name="arrowUp" size={12}/> 7 matches semana</span>
        <div className="kpi-spark" style={{color:'#10B981'}}><Icon name="network" size={26}/></div>
      </div>
      <div className="kpi" data-color="teal"><div className="kpi-accent"/>
        <div className="kpi-label">Oportunidades abertas</div>
        <div className="kpi-value">{totals.eventos}</div>
        <span className="kpi-delta"><Icon name="calendar" size={12}/> Hackathon em 32 dias</span>
        <div className="kpi-spark" style={{color:'#06B6D4'}}><Sparkline data={window.SERIE_EVENTOS} w={70} h={26} color="#06B6D4"/></div>
      </div>
    </div>

    {/* Map dual view */}
    <div className="card" style={{padding:0, marginBottom:14}}>
      <div className="map-shell" style={{border:0, boxShadow:'none'}}>
        <div className="map-canvas">
          <MapCS heatmap={heatmap} focused={focusedMun} onSelect={setFocusedMun}/>
          <div className="map-toolbar">
            {[{k:'talentos',l:'Calor de talentos'},{k:'projetos',l:'Calor de projetos'},
              {k:'eventos',l:'Calor de eventos'},{k:'mr',l:'Microrregiões'}].map(t => (
              <div key={t.k} className={`map-tool ${heatmap===t.k?'active':''}`}
                onClick={() => setHeatmap(t.k)}>{t.l}</div>
            ))}
          </div>
          <div className="map-legend">
            <div className="map-legend-h">{heatmap==='mr' ? 'Microrregiões' : 'Densidade'}</div>
            {heatmap==='mr' ? Object.entries(window.MR_NAMES).map(([k,n]) => (
              <div key={k} className="map-legend-row">
                <span className="map-legend-dot" style={{background:window.MR_COLORS[k]}}/>{n}
              </div>
            )) : <>
              <div className="map-legend-row"><span className="map-legend-dot" style={{background:'#E5F0FC'}}/>Sem registro</div>
              <div className="map-legend-row"><span className="map-legend-dot" style={{background:'#9CC4F4'}}/>Baixa</div>
              <div className="map-legend-row"><span className="map-legend-dot" style={{background:'#3D8FF1'}}/>Média</div>
              <div className="map-legend-row"><span className="map-legend-dot" style={{background:'#0B5FBE'}}/>Alta</div>
            </>}
          </div>
        </div>
        <div className="map-side">
          <div className="map-side-h">
            <h3>Ranking por município</h3>
            <div className="sub">{({talentos:'Talentos cadastrados',projetos:'Projetos ativos',
              eventos:'Eventos realizados',mr:'Por microrregião'})[heatmap]}</div>
          </div>
          {cityList.map(m => (
            <div key={m.id} className={`mun-row ${focusedMun===m.id?'active':''}`}
              onClick={() => setFocusedMun(m.id)}>
              <span className="badge badge-mr" style={{
                background: window.MR_COLORS[m.mr]+'22',
                color: shade(window.MR_COLORS[m.mr],-.25)}}>{m.mr}</span>
              <div style={{flex:1, minWidth:0}}>
                <div className="mun-name">{m.nome}{m.isPolo && ' ●'}</div>
                <div className="mun-meta">{(m.pop/1000).toFixed(1)}k hab · IDH {m.idh.toFixed(2)}</div>
              </div>
              <div className="mun-bar"><i style={{width:(m.count/maxCity*100)+'%'}}/></div>
              <div className="mun-count">{m.count}</div>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* Match feed + sidebar */}
    <div className="feed-grid">
      <div>
        <div className="section-title">
          <Icon name="spark" size={18}/> Sugestões de match — esta semana
          <span className="section-sub" style={{marginLeft:'auto'}}>Geradas pela plataforma · 7 novas</span>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {window.MATCHES.slice(0,5).map((m, i) => <MatchCard key={i} m={m}/>)}
        </div>
      </div>
      <div className="dash-col">
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Distribuição por setor</div>
              <div className="card-sub">Projetos ativos por área de inovação</div>
            </div>
          </div>
          {(() => {
            const counts = {};
            window.PROJETOS_INOV.forEach(p => counts[p.setor] = (counts[p.setor]||0)+1);
            const max = Math.max(...Object.values(counts));
            return window.SETORES_INOV.filter(s => counts[s.id])
              .sort((a,b) => counts[b.id] - counts[a.id])
              .map(s => <BarRow key={s.id} name={s.nome} value={counts[s.id]} max={max} color={s.cor}/>);
          })()}
        </div>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Próximos eventos</div>
              <div className="card-sub">3 nos próximos 60 dias</div>
            </div>
            <span className="card-link">Ver todos →</span>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {window.OPORTUNIDADES.slice(0,3).map(o => (
              <div key={o.id} style={{display:'flex', gap:10, alignItems:'center', padding:8,
                borderRadius:9, background:'#F8FAFC', cursor:'pointer'}}>
                <div style={{width:42, textAlign:'center'}}>
                  <div style={{fontFamily:'Outfit', fontWeight:700, fontSize:18, lineHeight:1, color:'#0B5FBE'}}>
                    {o.dias_restantes}
                  </div>
                  <div style={{fontSize:9.5, color:'#64748B', textTransform:'uppercase', letterSpacing:'.06em'}}>dias</div>
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontWeight:600, fontSize:13}}>{o.nome}</div>
                  <div style={{fontSize:11.5, color:'#64748B'}}>{o.data} · {o.cidade}</div>
                </div>
                <span className="op-tipo" data-t={o.tipo} style={{margin:0}}>{o.tipo}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Top talentos da semana</div>
              <div className="card-sub">Maior pontuação ganha</div>
            </div>
          </div>
          {window.TALENTOS.slice().sort((a,b)=>b.pontos-a.pontos).slice(0,4).map((t,i) => (
            <div key={t.id} onClick={() => onSelectTalento(t.id)}
              style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0',
                borderBottom: i<3 ? '1px solid #F1F5F9' : 0, cursor:'pointer'}}>
              <div style={{fontFamily:'Outfit', fontWeight:700, color:'#94A3B8', width:18}}>{i+1}</div>
              <Avatar name={t.nome} initials={t.avatar} size="sm"/>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:600, fontSize:13}}>{t.nome}</div>
                <div style={{fontSize:11.5, color:'#64748B'}}>{t.cidade} · {t.curso}</div>
              </div>
              <div style={{fontFamily:'JetBrains Mono', fontSize:12, fontWeight:700}}>{t.pontos}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>;
}
window.DashboardView = DashboardView;

// ============ TALENTOS ============
function TalentosView({onSelectTalento}) {
  const [filtro, setFiltro] = uS('todos');
  const [setor, setSetor] = uS(null);

  const filtered = uM(() => {
    let ts = window.TALENTOS;
    if (filtro !== 'todos') ts = ts.filter(t => t.classificacao === filtro);
    if (setor) ts = ts.filter(t => t.interesses.includes(setor));
    return ts;
  }, [filtro, setor]);

  return <div>
    <div className="page-head">
      <div>
        <h2 className="page-title">Talentos</h2>
        <div className="page-sub">{filtered.length} talentos cadastrados na rede regional</div>
      </div>
      <div className="page-actions">
        <button className="btn btn-ghost"><Icon name="filter" size={14}/> Filtros</button>
        <button className="btn btn-primary"><Icon name="plus" size={14}/> Cadastrar talento</button>
      </div>
    </div>
    <div className="chips">
      <span className={`chip ${filtro==='todos'?'active':''}`} onClick={() => setFiltro('todos')}>
        Todos <span className="chip-count">{window.TALENTOS.length}</span>
      </span>
      {window.CLASSIFICACOES.map(c => {
        const n = window.TALENTOS.filter(t => t.classificacao === c.id).length;
        return <span key={c.id} className={`chip ${filtro===c.id?'active':''}`}
          onClick={() => setFiltro(c.id)}>
          {c.nome} <span className="chip-count">{n}</span>
        </span>;
      })}
    </div>
    <div className="chips" style={{marginTop:-4}}>
      <span className={`chip ${!setor?'active':''}`} onClick={() => setSetor(null)}>
        Todos os setores
      </span>
      {window.SETORES_INOV.map(s => (
        <span key={s.id} className={`chip ${setor===s.id?'active':''}`}
          onClick={() => setSetor(setor===s.id ? null : s.id)}>
          {s.nome}
        </span>
      ))}
    </div>
    <div className="talent-grid">
      {filtered.map(t => <TalentCard key={t.id} t={t} onClick={() => onSelectTalento(t.id)}/>)}
    </div>
  </div>;
}
window.TalentosView = TalentosView;

// ============ PROJETOS ============
function ProjetosView({onSelectProjeto}) {
  return <div>
    <div className="page-head">
      <div>
        <h2 className="page-title">Projetos & Startups</h2>
        <div className="page-sub">{window.PROJETOS_INOV.length} iniciativas em desenvolvimento no Centro-Sul</div>
      </div>
      <div className="page-actions">
        <button className="btn btn-primary"><Icon name="plus" size={14}/> Cadastrar projeto</button>
      </div>
    </div>
    <div className="op-grid">
      {window.PROJETOS_INOV.map(p => <ProjectCard key={p.id} p={p} onClick={() => onSelectProjeto(p.id)}/>)}
    </div>
  </div>;
}
window.ProjetosView = ProjetosView;

// ============ REDE ============
function RedeView({onSelectTalento, onSelectProjeto}) {
  const [focused, setFocused] = uS(null);
  const handleSelect = (id) => {
    setFocused(id);
    if (id.startsWith('t')) onSelectTalento(id);
    else if (id.startsWith('p')) onSelectProjeto(id);
  };
  return <div>
    <div className="page-head">
      <div>
        <h2 className="page-title">Rede de inovação</h2>
        <div className="page-sub">Visualização de conexões entre talentos, projetos, mentores e empresas</div>
      </div>
      <div className="page-actions">
        <button className="btn btn-ghost"><Icon name="filter" size={14}/> Filtrar tipos</button>
        <button className="btn btn-soft"><Icon name="eye" size={14}/> Mostrar isolados</button>
      </div>
    </div>
    <NetworkGraph focusedId={focused} onSelect={handleSelect}/>
    <div style={{marginTop:14}} className="dash-grid">
      <div className="card">
        <div className="card-head">
          <div className="card-title">Top mentores por mentorias ativas</div>
          <span className="card-link">Ver todos →</span>
        </div>
        {window.MENTORES.slice().sort((a,b)=>b.mentorados-a.mentorados).slice(0,5).map(m => (
          <div key={m.id} style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', borderBottom:'1px solid #F1F5F9'}}>
            <Avatar name={m.nome} initials={m.avatar} size="sm" color="#F59E0B"/>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontWeight:600, fontSize:13}}>{m.nome}</div>
              <div style={{fontSize:11.5, color:'#64748B'}}>{m.org} · {m.cidade}</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontFamily:'JetBrains Mono', fontWeight:700, fontSize:13}}>{m.mentorados}</div>
              <div style={{fontSize:10, color:'#94A3B8'}}>mentorados</div>
            </div>
          </div>
        ))}
      </div>
      <div className="card">
        <div className="card-head">
          <div className="card-title">Empresas com demandas ativas</div>
        </div>
        {window.EMPRESAS.map(e => (
          <div key={e.id} style={{padding:'10px 0', borderBottom:'1px solid #F1F5F9'}}>
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <div style={{width:32, height:32, borderRadius:7, background:'#10B98122',
                display:'grid', placeItems:'center', color:'#065F46'}}>
                <Icon name="building" size={15}/>
              </div>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:600, fontSize:13}}>{e.nome}</div>
                <div style={{fontSize:11.5, color:'#64748B'}}>{e.cidade}</div>
              </div>
            </div>
            <div style={{fontSize:12, color:'#475569', marginTop:6, paddingLeft:42}}>{e.busca}</div>
          </div>
        ))}
      </div>
    </div>
  </div>;
}
window.RedeView = RedeView;

// ============ OPORTUNIDADES ============
function OportunidadesView({onSelect}) {
  return <div>
    <div className="page-head">
      <div>
        <h2 className="page-title">Oportunidades</h2>
        <div className="page-sub">Editais, hackathons, programas e eventos abertos</div>
      </div>
      <div className="page-actions">
        <button className="btn btn-primary"><Icon name="plus" size={14}/> Publicar oportunidade</button>
      </div>
    </div>
    <div className="op-grid">
      {window.OPORTUNIDADES.map(o => <OpCard key={o.id} o={o} onClick={() => onSelect && onSelect(o)}/>)}
    </div>
  </div>;
}
window.OportunidadesView = OportunidadesView;

// ============ MEU PERFIL (Talento) ============
function MeuPerfilView({talentoId, onOpenProjeto}) {
  const t = window.findTalento(talentoId || 't2');
  if (!t) return null;
  const setor = window.SETORES_INOV.find(s => s.id === t.interesses[0]);
  const projeto = t.projetoAtivo ? window.findProjeto(t.projetoAtivo) : null;
  return <div>
    <div className="card" style={{
      background:'linear-gradient(135deg, #0E3F84, #0B5FBE)', color:'#fff', border:0, padding:'28px 32px'}}>
      <div style={{display:'flex', gap:22, alignItems:'flex-start'}}>
        <Avatar name={t.nome} initials={t.avatar} size="xl"/>
        <div style={{flex:1, paddingTop:6}}>
          <div style={{display:'flex', gap:6, marginBottom:8}}>
            <span className="badge" style={{background:'rgba(255,255,255,.15)', color:'#fff'}}>
              {t.mr} · {t.cidade}
            </span>
            <span className="badge" style={{background:'#06B6D4', color:'#fff'}}>
              {window.CLASSIFICACOES.find(c=>c.id===t.classificacao)?.nome}
            </span>
          </div>
          <h2 style={{fontSize:30, fontFamily:'Outfit', color:'#fff'}}>{t.nome}</h2>
          <div style={{color:'rgba(255,255,255,.78)', marginTop:4, fontSize:14}}>
            {t.curso} · {t.instituicao}
          </div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{fontSize:11, color:'rgba(255,255,255,.7)', textTransform:'uppercase', letterSpacing:'.08em'}}>
            Pontos de evolução
          </div>
          <div style={{fontFamily:'Outfit', fontSize:42, fontWeight:600, lineHeight:1}}>{t.pontos}</div>
          <div style={{fontSize:11, color:'rgba(255,255,255,.7)', marginTop:4}}>
            {(() => {
              const next = window.CLASSIFICACOES.find(c => t.pontos < c.faixa[0]);
              return next ? `${next.faixa[0] - t.pontos} pts para ${next.nome}` : 'Nível máximo!';
            })()}
          </div>
        </div>
      </div>
    </div>

    <div style={{marginTop:14}}>
      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Sua trilha de evolução</div>
            <div className="card-sub">Cada selo conquistado adiciona pontos</div>
          </div>
        </div>
        <Trail points={t.pontos}/>
      </div>
    </div>

    <div className="dash-grid" style={{marginTop:14}}>
      <div className="dash-col">
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Sugestões para você</div>
              <div className="card-sub">Oportunidades e conexões personalizadas</div>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {window.MATCHES.filter(m => m.b === t.id || m.a === t.id).slice(0,3).map((m, i) => (
              <MatchCard key={i} m={m}/>
            ))}
            {window.OPORTUNIDADES.slice(0,2).map(o => (
              <div key={o.id} className="match-card">
                <div className="accent" style={{background:'#10B981'}}/>
                <div>
                  <span className="mc-tag" style={{background:'#D1FAE5', color:'#065F46'}}>
                    <Icon name="trophy" size={11}/> Oportunidade aberta
                  </span>
                  <div style={{fontWeight:600, fontFamily:'Outfit', fontSize:15, marginTop:8}}>{o.nome}</div>
                  <div className="mc-reason">{o.descricao}</div>
                  <div style={{marginTop:8, fontSize:12, color:'#475569'}}>
                    <Icon name="calendar" size={11}/> {o.data} · <Icon name="trophy" size={11}/> {o.premio}
                  </div>
                </div>
                <div className="mc-actions">
                  <button className="btn btn-soft btn-sm">Inscrever</button>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">Histórico de inovação</div></div>
          <div className="tl">
            {t.historico.map((h, i) => (
              <div key={i} className="tl-item">
                <div className="tl-dot"/>
                <div>
                  <div className="tl-tipo">{h.tipo}</div>
                  <div className="tl-titulo">{h.titulo}</div>
                  <div className="tl-resultado">{h.resultado}</div>
                </div>
                <div className="tl-side">{h.ano} · +{h.pontos}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="dash-col">
        <div className="card">
          <div className="card-head"><div className="card-title">5 dimensões do talento</div></div>
          <Radar dim={t.dim} size={220} color={setor.cor}/>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">Selos conquistados</div></div>
          <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
            {t.selos.map(id => <Selo key={id} id={id}/>)}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">Habilidades</div></div>
          <div style={{display:'flex', flexWrap:'wrap', gap:5}}>
            {t.habilidades.map(h => <span key={h} className="skill-tag">{h}</span>)}
          </div>
        </div>
        {projeto && (
          <div className="card" style={{cursor:'pointer'}} onClick={() => onOpenProjeto(projeto.id)}>
            <div className="card-head"><div className="card-title">Projeto ativo</div></div>
            <div style={{display:'flex', alignItems:'center', gap:12}}>
              <div style={{width:42, height:42, borderRadius:9, background:setor.cor+'22',
                display:'grid', placeItems:'center', fontWeight:700, color:shade(setor.cor,-.25), fontFamily:'Outfit'}}>
                {projeto.nome.slice(0,2).toUpperCase()}
              </div>
              <div style={{flex:1}}>
                <div style={{fontWeight:600}}>{projeto.nome}</div>
                <div style={{fontSize:12, color:'#64748B'}}>{projeto.fase}</div>
              </div>
              <Icon name="arrowRight" size={16}/>
            </div>
          </div>
        )}
      </div>
    </div>
  </div>;
}
window.MeuPerfilView = MeuPerfilView;

// ============ EMPRESA / INSTITUIÇÃO / MENTOR (lighter views, role-specific) ============
function EmpresaView({onSelectTalento}) {
  return <div>
    <div className="page-head">
      <div>
        <h2 className="page-title">Buscar talentos</h2>
        <div className="page-sub">Encontre profissionais e projetos para sua empresa</div>
      </div>
    </div>
    <div className="dash-grid">
      <div>
        <div className="section-title"><Icon name="spark" size={18}/> Matches sugeridos para sua empresa</div>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {window.MATCHES.filter(m => m.tipo==='empresa-talento' || m.tipo==='projeto-talento').slice(0,4).map((m,i) =>
            <MatchCard key={i} m={m}/>)}
        </div>
      </div>
      <div className="dash-col">
        <div className="card">
          <div className="card-head"><div className="card-title">Suas demandas publicadas</div></div>
          <div style={{padding:'8px 0'}}>
            <div style={{fontWeight:600, fontSize:13}}>Estagiário de processos</div>
            <div style={{fontSize:11.5, color:'#64748B', marginTop:2}}>14 candidaturas · publicada 8 dias</div>
          </div>
          <div style={{padding:'8px 0', borderTop:'1px solid #F1F5F9'}}>
            <div style={{fontWeight:600, fontSize:13}}>Designer industrial</div>
            <div style={{fontSize:11.5, color:'#64748B', marginTop:2}}>6 candidaturas · publicada 3 dias</div>
          </div>
          <button className="btn btn-soft" style={{width:'100%', marginTop:10, justifyContent:'center'}}>
            <Icon name="plus" size={14}/> Publicar nova demanda
          </button>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">Pool de talentos</div></div>
          {window.TALENTOS.slice(0,5).map(t => (
            <div key={t.id} onClick={() => onSelectTalento(t.id)}
              style={{display:'flex', alignItems:'center', gap:10, padding:'8px 0', cursor:'pointer'}}>
              <Avatar name={t.nome} initials={t.avatar} size="sm"/>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontWeight:600, fontSize:13}}>{t.nome}</div>
                <div style={{fontSize:11.5, color:'#64748B'}}>{t.curso}</div>
              </div>
              <button className="btn btn-ghost btn-sm">Ver</button>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>;
}
window.EmpresaView = EmpresaView;