/* global React, ReactDOM */
/* Application screens — 5 page mockups for the institutional site */

const { useState: useStateApp, useEffect: useEffectApp, useRef: useRefApp } = React;

/* ============================================================
   SHARED HEADER (used in every screen)
============================================================ */
function AppHeader({ active }) {
  const links = ['Institucional', 'Soluções', 'IDPE em Números', 'Transparência', 'Publicações'];
  return (
    <header className="h-header">
      <img className="h-header__logo" src="assets/logos/fg/idpe-horizontal-fechada-cinza.png" alt="IDPE" />
      <nav className="h-nav">
        {links.map(l => (
          <a key={l} href="#" className={l === active ? 'is-active' : ''}>{l}</a>
        ))}
        <button className="btn btn--primary btn--sm">Fale com o IDPE</button>
      </nav>
    </header>
  );
}

/* ============================================================
   SHARED FOOTER
============================================================ */
function AppFooter() {
  return (
    <footer className="h-footer">
      <div className="h-footer__top">
        <div className="h-footer__brand">
          <img src="assets/logos/fg/idpe-horizontal-fechada-cinza.png" alt="IDPE" />
          <p>Instituto de Desenvolvimento de Parcerias Estratégicas. Estruturamos projetos públicos e privados para municípios de pequeno e médio porte.</p>
        </div>
        <div className="h-footer__col"><h4>Institucional</h4><ul><li><a href="#">Sobre o IDPE</a></li><li><a href="#">Governança</a></li><li><a href="#">Compliance</a></li><li><a href="#">Imprensa</a></li></ul></div>
        <div className="h-footer__col"><h4>Soluções</h4><ul><li><a href="#">Obras públicas</a></li><li><a href="#">Licitações</a></li><li><a href="#">PPPs &amp; Concessões</a></li><li><a href="#">Investidores</a></li></ul></div>
        <div className="h-footer__col"><h4>Contato</h4><ul><li><a href="#">contato@idpe.org.br</a></li><li><a href="#">+55 82 9816-0006</a></li><li><a href="#">Maceió · AL</a></li><li><a href="#">LinkedIn</a></li></ul></div>
      </div>
      <div className="h-footer__bottom">
        <span>© 2026 IDPE — Instituto de Desenvolvimento de Parcerias Estratégicas.</span>
        <span>CNPJ 00.000.000/0001-00</span>
      </div>
    </footer>
  );
}

/* ============================================================
   1. INSTITUCIONAL
============================================================ */
function Institucional() {
  return (
    <div className="app-screen">
      <AppHeader active="Institucional" />

      <section className="ap-hero">
        <div className="ap-hero__eyebrow">Institucional / Sobre o IDPE</div>
        <h1 className="ap-hero__title">Um instituto técnico para municípios que querem entregar.</h1>
        <p className="ap-hero__lead">Nascemos para resolver um problema concreto: prefeituras de pequeno e médio porte raramente têm corpo técnico para estruturar contratos de longo prazo. Sem essa estrutura, projetos de infraestrutura não saem do papel — ou saem mal.</p>
      </section>

      <section className="ap-section">
        <div className="ap-section__head">
          <div>
            <div className="ap-section__eyebrow">/ 01 — Princípios</div>
            <h2 className="ap-section__title">No que acreditamos.</h2>
          </div>
          <p className="ap-section__intro">Quatro princípios guiam todo projeto que aceitamos. Não são valores de parede — definem quando dizemos não a um cliente, qual matriz de risco propomos e que indicadores ficam em contrato.</p>
        </div>
        <div className="values">
          <div className="value">
            <span className="value__num">/ 01 — Rigor técnico</span>
            <h3 className="value__title">Modelagem que sobrevive a uma auditoria do TCU.</h3>
            <p className="value__desc">Cada premissa documentada, cada cálculo rastreável, cada cenário de risco testado. Trabalhamos como se cada projeto fosse parar no tribunal de contas — porque vai.</p>
          </div>
          <div className="value">
            <span className="value__num">/ 02 — Independência</span>
            <h3 className="value__title">Sem vínculo com construtoras ou operadoras.</h3>
            <p className="value__desc">Não recebemos comissão de fornecedores. Nosso único cliente é o órgão público que nos contrata — ou o investidor que estrutura uma operação com a anuência do órgão.</p>
          </div>
          <div className="value">
            <span className="value__num">/ 03 — Tradução</span>
            <h3 className="value__title">Tornar o complexo executável.</h3>
            <p className="value__desc">Um edital de PPP tem 400 páginas. Nosso trabalho é traduzir o tecnicismo em decisões claras para prefeitos, secretários e vereadores — e em obrigações fiscalizáveis para o concessionário.</p>
          </div>
          <div className="value">
            <span className="value__num">/ 04 — Continuidade</span>
            <h3 className="value__title">Acompanhamos depois da posse.</h3>
            <p className="value__desc">Projetos de longo prazo atravessam mandatos. Estruturamos governança que sobrevive à transição política e mantemos o suporte técnico durante toda a execução.</p>
          </div>
          <div className="value" style={{gridColumn: 'span 2', background: 'var(--idpe-cobalt-950)', color: '#fff'}}>
            <span className="value__num">/ 05 — Transparência radical</span>
            <h3 className="value__title" style={{color:'#fff'}}>Tudo público, do contrato ao indicador mensal.</h3>
            <p className="value__desc" style={{color:'var(--idpe-cobalt-200)'}}>Publicamos relatórios técnicos completos de todos os projetos concluídos. Nossos contratos com órgãos públicos, nossos honorários e nossas decisões metodológicas estão na seção <strong style={{color:'#fff'}}>Transparência</strong> deste site.</p>
          </div>
          <div className="value">
            <span className="value__num">/ 06 — Foco</span>
            <h3 className="value__title">Municípios M e P.</h3>
            <p className="value__desc">Não atuamos com capitais nem com a União. Nosso impacto está nas cidades de 50 mil a 800 mil habitantes — onde a estrutura técnica falta mais e o ganho marginal é maior.</p>
          </div>
        </div>
      </section>

      <section className="ap-section ap-section--paper">
        <div className="ap-section__head">
          <div>
            <div className="ap-section__eyebrow">/ 02 — Trajetória</div>
            <h2 className="ap-section__title">Sete anos de operação.</h2>
          </div>
          <p className="ap-section__intro">De um escritório em Maceió a uma operação em nove estados. Os marcos que importam.</p>
        </div>
        <div className="timeline">
          <div className="timeline-item">
            <div className="timeline-item__year">/ 2018</div>
            <h3 className="timeline-item__title">Fundação do IDPE</h3>
            <p className="timeline-item__desc">Constituído como instituto técnico independente em Maceió, por um grupo de engenheiros, advogados e economistas com passagens pelo BNDES e por secretarias estaduais.</p>
          </div>
          <div className="timeline-item">
            <div className="timeline-item__year">/ 2019</div>
            <h3 className="timeline-item__title">Primeiro contrato municipal</h3>
            <p className="timeline-item__desc">Estruturação de PMI para concessão de saneamento em município alagoano de 80 mil habitantes. O modelo virou referência regional.</p>
          </div>
          <div className="timeline-item">
            <div className="timeline-item__year">/ 2021</div>
            <h3 className="timeline-item__title">Nova Lei de Licitações</h3>
            <p className="timeline-item__desc">Liderança em treinamento técnico de 1.200 servidores municipais sobre a Lei 14.133/21, em parceria com tribunais de contas estaduais.</p>
          </div>
          <div className="timeline-item">
            <div className="timeline-item__year">/ 2023</div>
            <h3 className="timeline-item__title">Concessão de iluminação metropolitana</h3>
            <p className="timeline-item__desc">Modelagem da maior PPP de iluminação pública do Nordeste — 380 mil pontos em 14 cidades, R$ 1,1 bi de investimento privado.</p>
          </div>
          <div className="timeline-item">
            <div className="timeline-item__year">/ 2025</div>
            <h3 className="timeline-item__title">Operação em 9 estados</h3>
            <p className="timeline-item__desc">87 municípios atendidos. Abertura de núcleos técnicos em Recife, Fortaleza e Goiânia para atendimento descentralizado.</p>
          </div>
        </div>
      </section>

      <section className="ap-section">
        <div className="ap-section__head">
          <div>
            <div className="ap-section__eyebrow">/ 03 — Governança</div>
            <h2 className="ap-section__title">Quem responde por cada projeto.</h2>
          </div>
          <p className="ap-section__intro">Estrutura técnica enxuta, com responsáveis nominais por cada frente. Conselho consultivo formado por ex-membros de tribunais de contas e ex-secretários municipais.</p>
        </div>
        <div className="gov-grid">
          {[
            ['Diretora-Presidente','LM','Engenheira civil. PhD em finanças públicas pela FGV. 14 anos no BNDES.'],
            ['Diretor Técnico','RA','Advogado. Especialista em Lei 14.133/21 e regimes de PPP.'],
            ['Diretora de Operações','PC','Economista. Ex-secretária de Planejamento de capital nordestina.'],
            ['Conselho Consultivo','+5','Ex-ministros de TCEs e ex-secretários municipais. Reuniões trimestrais.'],
          ].map((p,i) => (
            <div key={i} className="gov-person">
              <div className="gov-person__avatar">{p[1]}</div>
              <div className="gov-person__role">{p[0]}</div>
              <div className="gov-person__name">{p[0] === 'Conselho Consultivo' ? '5 conselheiros' : 'Nome do(a) responsável'}</div>
              <p className="gov-person__bio">{p[2]}</p>
            </div>
          ))}
        </div>
      </section>

      <AppFooter />
    </div>
  );
}

/* ============================================================
   2. SOLUÇÕES
============================================================ */
function Solucoes() {
  const solutions = [
    {
      num: '01',
      title: 'Planejamento de obras públicas.',
      desc: 'Estruturação técnica completa — do diagnóstico territorial à matriz de riscos — para que o projeto saia da gaveta com segurança jurídica e viabilidade financeira comprovadas.',
      items: ['Diagnóstico territorial', 'Anteprojeto e projeto básico', 'Plano de aquisição de áreas', 'Matriz de riscos', 'Cronograma físico-financeiro', 'Estudos ambientais preliminares'],
    },
    {
      num: '02',
      title: 'Consultoria em licitações.',
      desc: 'Aplicação prática da Nova Lei de Licitações em editais que aguentam impugnação. Redação técnica integrada à jurídica — sem o ruído entre escritórios separados.',
      items: ['Edital sob Lei 14.133/21', 'Termo de referência', 'Pareceres jurídicos', 'Suporte à comissão', 'Resposta a impugnações', 'Defesa em TCE/TCU'],
    },
    {
      num: '03',
      title: 'Gestão de projetos PPP & Concessões.',
      desc: 'Modelagem completa de Parcerias Público-Privadas administrativas, patrocinadas e concessões comuns. Da proposta de PMI ao acompanhamento dos KPIs em contrato.',
      items: ['Proposta de PMI', 'Modelagem econômico-financeira', 'Plano de negócios', 'Audiência e consulta pública', 'Edital e contrato de concessão', 'Indicadores de desempenho'],
    },
    {
      num: '04',
      title: 'Estruturação para investidores.',
      desc: 'Para fundos, infra-builders e construtoras: validação técnica de oportunidades de PPP, due diligence em projetos de outros estruturadores e suporte na proposta vencedora.',
      items: ['Mapeamento de oportunidades', 'Due diligence técnica', 'Análise de risco-retorno', 'Suporte à proposta', 'Compliance LGPD e antitruste', 'Acompanhamento pós-assinatura'],
    },
  ];
  return (
    <div className="app-screen">
      <AppHeader active="Soluções" />

      <section className="ap-hero">
        <div className="ap-hero__eyebrow">Soluções / Quatro frentes integradas</div>
        <h1 className="ap-hero__title">Quatro frentes. Um único time técnico.</h1>
        <p className="ap-hero__lead">Trabalhamos como um escritório integrado: engenheiros, advogados e economistas no mesmo projeto, do diagnóstico à fiscalização. Isso elimina a fricção entre consultorias separadas — e o custo invisível dela.</p>
      </section>

      <section className="ap-section">
        {solutions.map(s => (
          <div className="solution" key={s.num}>
            <div>
              <div className="solution__num">{s.num}</div>
            </div>
            <div>
              <h2 className="solution__title">{s.title}</h2>
              <p className="solution__desc">{s.desc}</p>
              <ul className="solution__list">
                {s.items.map(i => <li key={i}>{i}</li>)}
              </ul>
              <a href="#" className="btn btn--ghost" style={{marginTop:32}}>Conhecer metodologia</a>
            </div>
          </div>
        ))}
      </section>

      <section className="ap-section ap-section--ink">
        <div className="ap-section__head">
          <div>
            <div className="ap-section__eyebrow">/ Para investidores</div>
            <h2 className="ap-section__title">Pipeline de oportunidades em municípios M e P.</h2>
          </div>
          <p className="ap-section__intro">Cadastramos investidores qualificados no nosso pipeline trimestral de oportunidades. Recebemos demanda de municípios; conectamos com fundos, construtoras e operadores que tenham apetite para o ticket e setor.</p>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, marginTop:48}}>
          <div>
            <div style={{fontSize:'var(--fs-eyebrow)',letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--accent)',fontWeight:600,marginBottom:16}}>Como funciona</div>
            <ol style={{paddingLeft:0,listStyle:'none',display:'grid',gap:16}}>
              <li style={{display:'flex',gap:16}}><strong style={{color:'var(--accent)',minWidth:24}}>01</strong><span style={{color:'var(--idpe-cobalt-200)',lineHeight:1.7}}>Você se cadastra com perfil e ticket de interesse.</span></li>
              <li style={{display:'flex',gap:16}}><strong style={{color:'var(--accent)',minWidth:24}}>02</strong><span style={{color:'var(--idpe-cobalt-200)',lineHeight:1.7}}>Recebe relatório trimestral com oportunidades em modelagem.</span></li>
              <li style={{display:'flex',gap:16}}><strong style={{color:'var(--accent)',minWidth:24}}>03</strong><span style={{color:'var(--idpe-cobalt-200)',lineHeight:1.7}}>Solicita aprofundamento técnico das que se encaixam.</span></li>
              <li style={{display:'flex',gap:16}}><strong style={{color:'var(--accent)',minWidth:24}}>04</strong><span style={{color:'var(--idpe-cobalt-200)',lineHeight:1.7}}>O IDPE estrutura a operação com transparência total.</span></li>
            </ol>
          </div>
          <div style={{background:'var(--idpe-cobalt-900)',padding:40,border:'1px solid var(--idpe-cobalt-800)'}}>
            <div style={{fontSize:'var(--fs-eyebrow)',letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--accent)',fontWeight:600,marginBottom:24}}>Cadastro qualificado</div>
            <div style={{display:'grid',gap:20}}>
              <div className="field"><label className="field__label" style={{color:'rgba(255,255,255,0.7)'}}>Razão social</label><input className="field__input" style={{background:'transparent',color:'#fff',borderBottomColor:'rgba(255,255,255,0.3)'}} placeholder="Fundo, gestora ou empresa" /></div>
              <div className="field"><label className="field__label" style={{color:'rgba(255,255,255,0.7)'}}>Ticket de interesse</label><select className="field__select" style={{background:'transparent',color:'#fff',borderBottomColor:'rgba(255,255,255,0.3)'}}><option>R$ 50–200 mi</option><option>R$ 200–500 mi</option><option>R$ 500 mi – 1 bi</option><option>Acima de R$ 1 bi</option></select></div>
              <button className="btn btn--accent" style={{marginTop:8}}>Solicitar acesso</button>
            </div>
          </div>
        </div>
      </section>

      <AppFooter />
    </div>
  );
}

/* ============================================================
   3. IDPE EM NÚMEROS — Brazil map + counters
============================================================ */
function EmNumeros() {
  // Animated counters
  const useCounter = (target, suffix = '') => {
    const [val, setVal] = useStateApp(0);
    useEffectApp(() => {
      let raf, start;
      const dur = 1400;
      const step = (t) => {
        if (!start) start = t;
        const p = Math.min((t - start) / dur, 1);
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(target * eased);
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
      return () => cancelAnimationFrame(raf);
    }, [target]);
    return val;
  };
  const v1 = useCounter(4.2);
  const v2 = useCounter(87);
  const v3 = useCounter(142);
  const v4 = useCounter(96);

  // States with active operations
  const stateData = {
    AL: {name:'Alagoas',          count:18},
    PE: {name:'Pernambuco',       count:14},
    CE: {name:'Ceará',            count:12},
    BA: {name:'Bahia',            count:11},
    PB: {name:'Paraíba',          count: 9},
    RN: {name:'R.G. do Norte',    count: 7},
    SE: {name:'Sergipe',          count: 6},
    GO: {name:'Goiás',            count: 6},
    MG: {name:'Minas Gerais',     count: 4},
  };
  const activeStates = Object.keys(stateData);

  // Cidades onde IDPE atuou (lon, lat reais → projetados pelo BR_PROJ exposto em br-paths.js)
  // Inclui a sede em Maceió com flag isHQ.
  const cities = [
    { name: 'Maceió',          uf: 'AL', lon: -35.7350, lat:  -9.6498, isHQ: true },
    { name: 'Arapiraca',       uf: 'AL', lon: -36.6611, lat:  -9.7528 },
    { name: 'Palmeira dos Índios', uf: 'AL', lon: -36.6286, lat: -9.4061 },
    { name: 'Recife',          uf: 'PE', lon: -34.8770, lat:  -8.0476 },
    { name: 'Caruaru',         uf: 'PE', lon: -35.9760, lat:  -8.2853 },
    { name: 'Petrolina',       uf: 'PE', lon: -40.5030, lat:  -9.3891 },
    { name: 'Fortaleza',       uf: 'CE', lon: -38.5267, lat:  -3.7172 },
    { name: 'Sobral',          uf: 'CE', lon: -40.3489, lat:  -3.6886 },
    { name: 'Juazeiro do Norte', uf:'CE', lon: -39.3158, lat:  -7.2128 },
    { name: 'Salvador',        uf: 'BA', lon: -38.5014, lat: -12.9714 },
    { name: 'Feira de Santana', uf:'BA', lon: -38.9663, lat: -12.2664 },
    { name: 'Vitória da Conquista', uf:'BA', lon: -40.8389, lat: -14.8617 },
    { name: 'João Pessoa',     uf: 'PB', lon: -34.8631, lat:  -7.1195 },
    { name: 'Campina Grande',  uf: 'PB', lon: -35.8811, lat:  -7.2306 },
    { name: 'Natal',           uf: 'RN', lon: -35.2110, lat:  -5.7945 },
    { name: 'Mossoró',         uf: 'RN', lon: -37.3439, lat:  -5.1875 },
    { name: 'Aracaju',         uf: 'SE', lon: -37.0731, lat: -10.9472 },
    { name: 'Itabaiana',       uf: 'SE', lon: -37.4250, lat: -10.6856 },
    { name: 'Goiânia',         uf: 'GO', lon: -49.2532, lat: -16.6864 },
    { name: 'Anápolis',        uf: 'GO', lon: -48.9527, lat: -16.3267 },
    { name: 'Catalão',         uf: 'GO', lon: -47.9450, lat: -18.1656 },
    { name: 'Uberlândia',      uf: 'MG', lon: -48.2772, lat: -18.9186 },
    { name: 'Montes Claros',   uf: 'MG', lon: -43.8617, lat: -16.7286 },
    { name: 'Juiz de Fora',    uf: 'MG', lon: -43.3503, lat: -21.7642 },
  ];

  // Estado de UI do mapa
  const [hoveredUF, setHoveredUF] = useStateApp(null);
  const [hoveredCity, setHoveredCity] = useStateApp(null);
  const [tooltip, setTooltip] = useStateApp(null); // {x, y, title, sub}
  const mapWrapRef = useRefApp(null);

  const showStateTooltip = (uf, e) => {
    const d = stateData[uf];
    if (!d || !mapWrapRef.current) return;
    const rect = mapWrapRef.current.getBoundingClientRect();
    setTooltip({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      title: d.name,
      sub: `${d.count} ${d.count === 1 ? 'município atendido' : 'municípios atendidos'}`,
      kind: 'state',
    });
  };
  const showCityTooltip = (c, e) => {
    if (!mapWrapRef.current) return;
    const rect = mapWrapRef.current.getBoundingClientRect();
    setTooltip({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      title: c.name,
      sub: c.isHQ ? `${c.uf} · Sede institucional` : `${c.uf} · Município atendido`,
      kind: c.isHQ ? 'hq' : 'city',
    });
  };
  const moveTooltip = (e) => {
    if (!mapWrapRef.current || !tooltip) return;
    const rect = mapWrapRef.current.getBoundingClientRect();
    setTooltip(t => t && ({ ...t, x: e.clientX - rect.left, y: e.clientY - rect.top }));
  };
  const hideTooltip = () => setTooltip(null);

  // Garante que BR_PATHS foi carregado antes do primeiro render
  const PATHS = (typeof window !== 'undefined' && window.BR_PATHS) || {};
  const VIEWBOX = (typeof window !== 'undefined' && window.BR_VIEWBOX) || '0 0 1000 900';
  const PROJ = (typeof window !== 'undefined' && window.BR_PROJ) || ((lon,lat)=>[0,0]);
  const ORDER = ['RR','AP','AM','PA','MA','CE','RN','PB','PE','AL','SE','BA','PI','TO','AC','RO','MT','GO','DF','MG','ES','RJ','SP','MS','PR','SC','RS'];

  return (
    <div className="app-screen">
      <AppHeader active="IDPE em Números" />

      <section className="ap-hero">
        <div className="ap-hero__eyebrow">IDPE em Números / Edição 2026</div>
        <h1 className="ap-hero__title">A operação, em números públicos.</h1>
        <p className="ap-hero__lead">Sete anos de operação resumidos. Cada métrica desta página é auditável: trazemos o link para o relatório-fonte ao lado de cada número. Nada inventado, nada arredondado para soar maior.</p>
      </section>

      <section className="ap-section">
        <div className="numbers-hero">
          <div className="num-cell">
            <div className="num-cell__label">/ 01 — Volume estruturado</div>
            <div className="num-cell__big">R$ {v1.toFixed(1).replace('.',',')}<span> bi</span></div>
            <div className="num-cell__sub">em valor de contrato de obras e concessões modeladas</div>
          </div>
          <div className="num-cell">
            <div className="num-cell__label">/ 02 — Municípios atendidos</div>
            <div className="num-cell__big">{Math.round(v2)}</div>
            <div className="num-cell__sub">em 9 estados, com 100% no porte M e P</div>
          </div>
          <div className="num-cell">
            <div className="num-cell__label">/ 03 — Editais publicados</div>
            <div className="num-cell__big">{Math.round(v3)}</div>
            <div className="num-cell__sub">desde 2018, com 0 anulações por vício técnico</div>
          </div>
        </div>
      </section>

      <section className="ap-section ap-section--paper">
        <div className="ap-section__head">
          <div>
            <div className="ap-section__eyebrow">/ Mapa de atuação</div>
            <h2 className="ap-section__title">Onde estamos.</h2>
          </div>
          <p className="ap-section__intro">Concentração inicial no Nordeste, com expansão recente para Goiás e Minas. Estados em cobalto têm projetos em curso ou concluídos no último triênio. Passe o cursor sobre cada ponto para detalhar a cidade.</p>
        </div>

        <div className="map-wrap" ref={mapWrapRef} onMouseMove={moveTooltip}>
          <div className={`map-svg ${hoveredUF ? 'is-focused' : ''}`}>
            {/* Métricas de cabeçalho do mapa */}
            <div className="map-meta">
              <div className="map-meta__cell">
                <div className="map-meta__label">/ Estados ativos</div>
                <div className="map-meta__value">{activeStates.length}<span>/26 + DF</span></div>
              </div>
              <div className="map-meta__cell">
                <div className="map-meta__label">/ Cidades pingadas</div>
                <div className="map-meta__value">{cities.length}<span> pontos</span></div>
              </div>
              <div className="map-meta__cell">
                <div className="map-meta__label">/ Sede</div>
                <div className="map-meta__value map-meta__value--small">Maceió / AL</div>
              </div>
            </div>

            <svg viewBox={VIEWBOX} preserveAspectRatio="xMidYMid meet" className="map-svg__svg" role="img" aria-label="Mapa do Brasil com áreas de atuação do IDPE">
              <defs>
                {/* Hachura sutil para indicar 'não-ativo' em pixel-perfect */}
                <pattern id="map-hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
                  <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="1" />
                </pattern>
                <radialGradient id="map-pulse-grad" cx="50%" cy="50%" r="50%">
                  <stop offset="0%"  stopColor="var(--accent)" stopOpacity="0.55" />
                  <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                </radialGradient>
              </defs>

              {/* 1) Estados ─ ordem fixa para que estados pequenos do NE fiquem por cima */}
              <g className="map-states">
                {ORDER.filter(uf => PATHS[uf]).map(uf => {
                  const isActive = activeStates.includes(uf);
                  const isHovered = hoveredUF === uf;
                  return (
                    <path
                      key={uf}
                      d={PATHS[uf].d}
                      data-uf={uf}
                      className={`map-state-path ${isActive ? 'is-active' : ''} ${isHovered ? 'is-hovered' : ''}`}
                      onMouseEnter={(e) => { setHoveredUF(uf); if (isActive) showStateTooltip(uf, e); }}
                      onMouseLeave={() => { setHoveredUF(null); hideTooltip(); }}
                      tabIndex={isActive ? 0 : -1}
                      role={isActive ? 'button' : undefined}
                      aria-label={isActive ? `${PATHS[uf].name}: ${stateData[uf].count} municípios atendidos` : PATHS[uf].name}
                    />
                  );
                })}
              </g>

              {/* 2) Pulsos (apenas estados ativos) */}
              <g className="map-pulses" aria-hidden="true">
                {cities.map((c, i) => {
                  const [px, py] = PROJ(c.lon, c.lat);
                  return (
                    <g key={`pulse-${i}`} transform={`translate(${px}, ${py})`} className={`map-pulse ${c.isHQ ? 'map-pulse--hq' : ''}`}>
                      <circle r="3" className="map-pulse__ring" style={{ animationDelay: `${(i % 6) * 0.35}s` }} />
                      <circle r="3" className="map-pulse__ring map-pulse__ring--2" style={{ animationDelay: `${(i % 6) * 0.35 + 1.0}s` }} />
                    </g>
                  );
                })}
              </g>

              {/* 3) Pins clicáveis */}
              <g className="map-pins">
                {cities.map((c, i) => {
                  const [px, py] = PROJ(c.lon, c.lat);
                  const isH = hoveredCity === i;
                  return (
                    <g
                      key={`pin-${i}`}
                      transform={`translate(${px}, ${py})`}
                      className={`map-pin ${c.isHQ ? 'map-pin--hq' : ''} ${isH ? 'is-hovered' : ''}`}
                      onMouseEnter={(e) => { setHoveredCity(i); setHoveredUF(c.uf); showCityTooltip(c, e); }}
                      onMouseLeave={() => { setHoveredCity(null); setHoveredUF(null); hideTooltip(); }}
                      tabIndex={0}
                      role="button"
                      aria-label={`${c.name}, ${c.uf}${c.isHQ ? ' — sede institucional' : ''}`}
                    >
                      {c.isHQ && <circle r="14" className="map-pin__halo" />}
                      <circle r={c.isHQ ? 7 : 4.5} className="map-pin__core" />
                      <circle r={c.isHQ ? 3 : 2}   className="map-pin__dot" />
                    </g>
                  );
                })}
              </g>
            </svg>

            {/* Legenda de leitura do mapa */}
            <div className="map-key">
              <div className="map-key__item"><span className="map-key__swatch map-key__swatch--active" /> Estado com atuação</div>
              <div className="map-key__item"><span className="map-key__swatch map-key__swatch--idle" /> Sem registro recente</div>
              <div className="map-key__item"><span className="map-key__swatch map-key__swatch--pin" /> Município atendido</div>
              <div className="map-key__item"><span className="map-key__swatch map-key__swatch--hq" /> Sede IDPE</div>
            </div>

            {/* Tooltip flutuante */}
            {tooltip && (
              <div
                className={`map-tooltip map-tooltip--${tooltip.kind}`}
                style={{ left: tooltip.x, top: tooltip.y }}
                role="tooltip"
              >
                <div className="map-tooltip__title">{tooltip.title}</div>
                <div className="map-tooltip__sub">{tooltip.sub}</div>
              </div>
            )}
          </div>

          <div className="map-legend">
            <div className="map-legend__title">/ Concentração por estado</div>
            {Object.entries(stateData)
              .sort((a,b) => b[1].count - a[1].count)
              .map(([uf,d]) => {
                const max = Math.max(...Object.values(stateData).map(s => s.count));
                const pct = Math.round((d.count / max) * 100);
                const isOn = hoveredUF === uf;
                return (
                  <div
                    className={`map-state ${isOn ? 'is-on' : ''}`}
                    key={uf}
                    onMouseEnter={() => setHoveredUF(uf)}
                    onMouseLeave={() => setHoveredUF(null)}
                  >
                    <div className="map-state__row">
                      <span className="map-state__name">{d.name} <span className="map-state__uf">{uf}</span></span>
                      <span className="map-state__count">{d.count} <span>municípios</span></span>
                    </div>
                    <div className="map-state__bar"><span style={{ width: `${pct}%` }} /></div>
                  </div>
                );
              })}
          </div>
        </div>
      </section>

      <section className="ap-section">
        <div className="ap-section__head">
          <div>
            <div className="ap-section__eyebrow">/ Setores</div>
            <h2 className="ap-section__title">Distribuição por área de atuação.</h2>
          </div>
          <p className="ap-section__intro">Saneamento e iluminação concentram dois terços do volume. A diversificação para mobilidade urbana é o foco do plano de operação 2026.</p>
        </div>

        {/* Horizontal bar chart */}
        <div style={{display:'grid', gap:24}}>
          {[
            ['Saneamento básico', 38, 'R$ 1,6 bi'],
            ['Iluminação pública', 28, 'R$ 1,2 bi'],
            ['Mobilidade urbana', 14, 'R$ 590 mi'],
            ['Resíduos sólidos', 11, 'R$ 460 mi'],
            ['Equipamentos públicos', 6, 'R$ 250 mi'],
            ['Outros', 3, 'R$ 130 mi'],
          ].map(([label, pct, val]) => (
            <div key={label} style={{display:'grid', gridTemplateColumns:'200px 1fr 100px', alignItems:'center', gap:24}}>
              <span style={{fontWeight:600, fontSize:'var(--fs-body-sm)'}}>{label}</span>
              <div style={{height:32, background:'var(--idpe-paper-200)', position:'relative'}}>
                <div style={{height:'100%', width:`${pct}%`, background:'var(--primary)', display:'flex', alignItems:'center', paddingLeft:12, color:'#fff', fontFamily:'var(--font-mono)', fontSize:11, fontWeight:600}}>{pct}%</div>
              </div>
              <span style={{fontFamily:'var(--font-mono)', fontSize:'var(--fs-body-sm)', color:'var(--accent)', fontWeight:600, textAlign:'right'}}>{val}</span>
            </div>
          ))}
        </div>
      </section>

      <AppFooter />
    </div>
  );
}

/* ============================================================
   4. TRANSPARÊNCIA
============================================================ */
function Transparencia() {
  const docs = [
    ['Relatório Anual de Atividades 2025', 'Relatórios anuais', '14/03/2026', 'PDF · 18 MB'],
    ['Demonstrações Financeiras 2025', 'Financeiro', '14/03/2026', 'PDF · 4 MB'],
    ['Relatório Técnico — Iluminação Metropolitana', 'Casos', '02/02/2026', 'PDF · 32 MB'],
    ['Política de Compliance Anticorrupção', 'Compliance', '12/01/2026', 'PDF · 1 MB'],
    ['Tabela de honorários por modalidade', 'Financeiro', '08/01/2026', 'PDF · 0.8 MB'],
    ['Relatório Anual de Atividades 2024', 'Relatórios anuais', '15/03/2025', 'PDF · 16 MB'],
    ['Código de Conduta IDPE', 'Compliance', '20/02/2025', 'PDF · 1 MB'],
    ['Demonstrações Financeiras 2024', 'Financeiro', '14/03/2025', 'PDF · 4 MB'],
  ];

  return (
    <div className="app-screen">
      <AppHeader active="Transparência" />

      <section className="ap-hero">
        <div className="ap-hero__eyebrow">Transparência / Acesso público</div>
        <h1 className="ap-hero__title">Tudo o que somos, em PDF.</h1>
        <p className="ap-hero__lead">Acreditamos em transparência radical. Esta página reúne nossos relatórios anuais, demonstrações financeiras, política de compliance e a tabela de honorários por modalidade. Atualizada mensalmente.</p>
      </section>

      <section className="ap-section">
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:1, background:'var(--rule)', border:'1px solid var(--rule)', marginBottom:64}}>
          {[
            ['Relatórios anuais', '8 documentos'],
            ['Financeiro', '12 documentos'],
            ['Compliance', '5 documentos'],
            ['Casos concluídos', '23 documentos'],
          ].map(([t,c]) => (
            <button key={t} style={{background:'var(--bg)', padding:'24px 28px', border:0, textAlign:'left', cursor:'pointer', fontFamily:'var(--font-sans)'}}>
              <div style={{fontSize:'var(--fs-eyebrow)',letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--accent)',fontWeight:600}}>{t}</div>
              <div style={{fontSize:'var(--fs-body)', fontWeight:600, marginTop:8}}>{c}</div>
            </button>
          ))}
        </div>

        <div style={{display:'flex', gap:16, marginBottom:32, alignItems:'center', flexWrap:'wrap'}}>
          <div className="field" style={{flex:1, minWidth:300, marginBottom:0}}>
            <label className="field__label">Buscar documento</label>
            <input className="field__input" placeholder="Ex: relatório anual, compliance, contrato..." />
          </div>
          <div className="field" style={{minWidth:200, marginBottom:0}}>
            <label className="field__label">Categoria</label>
            <select className="field__select"><option>Todas</option><option>Relatórios anuais</option><option>Financeiro</option><option>Compliance</option></select>
          </div>
          <div className="field" style={{minWidth:160, marginBottom:0}}>
            <label className="field__label">Ano</label>
            <select className="field__select"><option>Todos</option><option>2026</option><option>2025</option><option>2024</option></select>
          </div>
        </div>

        <table className="docs-table">
          <thead>
            <tr>
              <th>Documento</th>
              <th>Categoria</th>
              <th>Publicado</th>
              <th>Formato</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {docs.map((d,i) => (
              <tr key={i}>
                <td className="doc-name">{d[0]}</td>
                <td style={{color:'var(--fg-muted)'}}>{d[1]}</td>
                <td style={{fontFamily:'var(--font-mono)', fontSize:13, color:'var(--fg-muted)'}}>{d[2]}</td>
                <td style={{fontFamily:'var(--font-mono)', fontSize:13, color:'var(--fg-muted)'}}>{d[3]}</td>
                <td style={{textAlign:'right'}}><a href="#" className="doc-link">Baixar →</a></td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      <section className="ap-section ap-section--ink">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'start'}}>
          <div>
            <div className="ap-section__eyebrow">/ Lei de Acesso à Informação</div>
            <h2 className="ap-section__title">Pedidos LAI &amp; canal de denúncias.</h2>
            <p className="ap-section__intro" style={{marginTop:24}}>Embora o IDPE seja entidade privada, adotamos voluntariamente os procedimentos da Lei 12.527/11. Pedidos de informação são respondidos em até 20 dias corridos.</p>
          </div>
          <div style={{background:'var(--idpe-cobalt-900)', padding:40, border:'1px solid var(--idpe-cobalt-800)'}}>
            <div style={{fontSize:'var(--fs-eyebrow)',letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--accent)',fontWeight:600,marginBottom:16}}>Canais</div>
            <div style={{display:'grid', gap:16, fontSize:'var(--fs-body-sm)', color:'var(--idpe-cobalt-200)'}}>
              <div><strong style={{color:'#fff'}}>Pedido LAI:</strong> lai@idpe.org.br</div>
              <div><strong style={{color:'#fff'}}>Denúncias (sigiloso):</strong> ouvidoria@idpe.org.br</div>
              <div><strong style={{color:'#fff'}}>Telefone:</strong> +55 82 9816-0006</div>
              <div><strong style={{color:'#fff'}}>Endereço:</strong> Av. Fernandes Lima, 3084 — Maceió/AL</div>
            </div>
            <button className="btn btn--accent" style={{marginTop:32}}>Abrir pedido LAI</button>
          </div>
        </div>
      </section>

      <AppFooter />
    </div>
  );
}

/* ============================================================
   5. PUBLICAÇÕES
============================================================ */
function Publicacoes() {
  const posts = [
    {cat:'Análise', date:'24 mar 2026', readTime:'12 min', title:'O que muda na PPP de saneamento depois do Marco Regulatório de 2024.', excerpt:'Três anos depois da nova lei, mapeamos os efeitos práticos sobre os contratos em estruturação no Nordeste. O que esperar até 2027.', feat:true},
    {cat:'Caso', date:'18 mar 2026', readTime:'8 min', title:'Como modelamos a iluminação de 14 cidades.', excerpt:'O detalhamento técnico da PPP que substituiu 380 mil pontos.'},
    {cat:'Opinião', date:'12 mar 2026', readTime:'6 min', title:'Lei 14.133 três anos depois.', excerpt:'O que aprendemos em 142 editais publicados sob a nova lei.'},
    {cat:'Análise', date:'08 mar 2026', readTime:'10 min', title:'Concessões em municípios pequenos: tem mercado?', excerpt:'Por que cidades de 50 a 200 mil habitantes estão sendo redescobertas por fundos.'},
    {cat:'Caso', date:'01 mar 2026', readTime:'7 min', title:'Resíduos sólidos no semiárido.', excerpt:'Modelagem regional de aterro e coleta para um consórcio de 9 municípios.'},
  ];

  return (
    <div className="app-screen">
      <AppHeader active="Publicações" />

      <section className="ap-hero">
        <div className="ap-hero__eyebrow">Publicações / Análises técnicas</div>
        <h1 className="ap-hero__title">Pensamento técnico, em forma editorial.</h1>
        <p className="ap-hero__lead">Análises, casos e opiniões da equipe IDPE sobre estruturação de obras públicas, licitações e parcerias. Material técnico, sem comunicação institucional disfarçada.</p>
      </section>

      <section className="ap-section">
        <div style={{display:'flex', gap:24, marginBottom:48, paddingBottom:24, borderBottom:'1px solid var(--rule)', alignItems:'center', flexWrap:'wrap'}}>
          {['Tudo', 'Análises', 'Casos', 'Opiniões', 'Notas técnicas'].map((t,i) => (
            <button key={t} className={i===0 ? 'btn btn--secondary btn--sm' : 'btn btn--ghost'} style={{padding:'8px 16px'}}>{t}</button>
          ))}
          <div style={{marginLeft:'auto', fontSize:'var(--fs-eyebrow)',letterSpacing:'var(--tr-eyebrow)',textTransform:'uppercase',color:'var(--fg-muted)'}}>48 publicações</div>
        </div>

        <div className="pub-grid">
          {posts.map((p,i) => (
            <a key={i} href="#" className={`pub-card ${p.feat ? 'pub-card--feature' : ''}`}>
              <div className="pub-card__cover">
                <span className="pub-card__cover-cat">{p.cat}</span>
              </div>
              <div className="pub-card__body">
                <div className="pub-card__meta">{p.date} · {p.readTime}</div>
                <h3 className="pub-card__title">{p.title}</h3>
                <p className="pub-card__excerpt">{p.excerpt}</p>
                <span className="pub-card__more">Ler →</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      <section className="ap-section">
        <div className="newsletter">
          <div>
            <h3>Receba o boletim trimestral.</h3>
            <p>Análises, oportunidades de PPP em estruturação e o calendário de editais que estamos acompanhando. Sem ruído. Quatro edições por ano.</p>
          </div>
          <form className="newsletter__form" onSubmit={e=>e.preventDefault()}>
            <input type="email" placeholder="seu.email@orgao.gov.br" />
            <button className="btn btn--accent">Assinar</button>
          </form>
        </div>
      </section>

      <AppFooter />
    </div>
  );
}

/* ============================================================
   MOUNT — each screen mounts to its own container
============================================================ */
window.Institucional = Institucional;
window.Solucoes = Solucoes;
window.EmNumeros = EmNumeros;
window.Transparencia = Transparencia;
window.Publicacoes = Publicacoes;

[
  ['inst-mount', Institucional],
  ['solu-mount', Solucoes],
  ['num-mount', EmNumeros],
  ['transp-mount', Transparencia],
  ['pub-mount', Publicacoes],
].forEach(([id, Comp]) => {
  const el = document.getElementById(id);
  if (el) ReactDOM.createRoot(el).render(<Comp />);
});