// Cities — BlockUrb Smart City (B2G vertical for prefeituras)
function CitiesHero() {
  const { tr } = useT();
  return (
    <section style={{padding:"120px var(--gutter) 80px"}}>
      <div className="shell">
        <div style={{display:"flex", justifyContent:"space-between", marginBottom: 48}}>
          <Reveal as="span" className="coord">DOC. 004/B2G · REV 04.26</Reveal>
          <Reveal as="span" className="coord">{tr("SMART CITY · PREFEITURAS","SMART CITY · CITY HALLS")}</Reveal>
        </div>
        <Reveal as="span" className="eyebrow" style={{display:"inline-flex", marginBottom: 32}}>BLOCKURB SMART CITY · B2G</Reveal>
        <h1 className="display" style={{fontSize:"clamp(56px, 8vw, 116px)", margin:"0 0 40px"}}>
          <SplitReveal text={tr(["O setor público,", {em:" finalmente operável"}, "como software."],["The public sector,", {em:" finally operable"}, "as software."],["El sector público,", {em:" por fin operable"}, "como software."],["Avalik sektor,", {em:" lõpuks juhitav"}, "nagu tarkvara."],["公共部门，", {em:" 终于可以像软件"}, "一样运行。"])}/>
        </h1>
        <div style={{display:"grid", gridTemplateColumns:"1.2fr 1fr", gap: 64, alignItems:"end"}}>
          <Reveal delay={300}>
            <p style={{fontSize: 19, lineHeight: 1.55, color:"var(--ink-soft)", margin: 0}}>
              {tr("BlockUrb Smart City é a vertical B2G do ecossistema. Atende prefeituras, secretarias e órgãos de planejamento com ferramentas de cidade inteligente: digitalização de cadastros e mapas, IA para monitoramento urbano, modernização de processos de licenciamento e fiscalização. É a frente que entrega tecnologia para quem decide o uso do solo.","BlockUrb Smart City is the ecosystem's B2G vertical. It serves city halls, departments and planning bodies with smart-city tools: digitization of registries and maps, AI for urban monitoring, modernization of permitting and enforcement processes. It is the front that delivers technology to those who decide land use.")}
            </p>
          </Reveal>
          <Reveal delay={500}>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <Magnetic><a className="btn btn--ink" href="#offers">{tr("Soluções para o município","Solutions for your city")} <span className="arrow">→</span></a></Magnetic>
              <Magnetic><a className="btn btn--ghost" href="#pilots">{tr("Pilotos em curso","Live pilots")}</a></Magnetic>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PainsSection() {
  const { tr } = useT();
  return (
    <section className="section section--dark">
      <div className="shell">
        <SectionHead dark index="01" kicker={tr("O DIAGNÓSTICO","THE DIAGNOSIS")} title={tr(["A cidade brasileira", {em:" roda em PDF."}],["The city still", {em:" runs on PDF."}],["La ciudad todavía", {em:" funciona en PDF."}],["Linn töötab endiselt", {em:" PDF-il."}],["城市至今", {em:" 仍跑在 PDF 上。"}])} sub={tr("A maioria das prefeituras ainda gere uso do solo em planilhas, processos físicos e mapas desatualizados. O resultado é fila para licenciar, fila para fiscalizar e fila para arrecadar.","Most city halls still manage land use on spreadsheets, paper processes and outdated maps. The result is queues to permit, queues to enforce and queues to collect.")}/>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid #28322C"}}>
          {[
            [tr("Cadastro defasado","Outdated registry"), tr("Plantas genéricas, áreas urbanas mal mapeadas, sobreposição de matrículas e zoneamento ignorando ocupação real.","Generic plans, poorly mapped urban areas, overlapping deeds and zoning that ignores actual occupation.")],
            [tr("Licenciamento moroso","Slow permitting"), tr("Processos físicos, decisões discricionárias e pareceres em sequência travam obras por anos.","Paper processes, discretionary decisions and sequential reviews stall projects for years.")],
            [tr("Fiscalização reativa","Reactive enforcement"), tr("Sem monitoramento contínuo, irregularidades só são identificadas quando viram problema social.","Without continuous monitoring, violations are only caught once they become a social problem.")],
            [tr("Arrecadação subutilizada","Underused revenue"), tr("ITBI, IPTU progressivo e contribuições de melhoria deixados na mesa por falta de base cadastral confiável.","ITBI, progressive IPTU and betterment levies left on the table for lack of a reliable registry base.")],
            [tr("Dados em silos","Siloed data"), tr("Cada secretaria mantém sua planilha. Cruzamentos entre obras, meio ambiente e habitação são manuais — quando acontecem.","Each department keeps its own spreadsheet. Cross-referencing works, environment and housing is manual — when it happens at all.")],
            [tr("Custo político alto","High political cost"), tr("Servidores e gestores são responsabilizados por decisões cuja base de informação é frágil ou inexistente.","Officials and managers are held accountable for decisions whose information base is fragile or nonexistent.")],
          ].map(([t, d], i) => (
            <Reveal key={i} delay={i*60} style={{
              padding:"32px 28px",
              borderRight: (i % 3 < 2) ? "1px solid #28322C" : "none",
              borderBottom: i < 3 ? "1px solid #28322C" : "none",
              minHeight: 220,
            }}>
              <span className="mono" style={{color:"oklch(0.78 0.08 145)"}}>{`PROB · 0${i+1}`}</span>
              <h3 style={{fontFamily:"var(--font-display)", fontSize: 26, color:"#F4F1EA", margin:"14px 0 12px", lineHeight: 1.1}}>{t}</h3>
              <p style={{margin:0, color:"color-mix(in srgb, #F4F1EA 70%, transparent)", fontSize: 14, lineHeight: 1.55}}>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function OffersSection() {
  const { tr } = useT();
  const ofertas = [
    {
      id:"01",
      name:tr("Cadastro Digital","Digital Registry"),
      lead:tr("Mapa cadastral municipal, georreferenciado e vivo.","A municipal cadastral map — georeferenced and live."),
      desc:tr("Importação e validação de dados existentes (planta cadastral, RIP, base do IBGE), sobreposição com imagens de satélite e drone, e camadas vivas de uso e ocupação. Integração nativa com ITBI, IPTU e habite-se.","Import and validation of existing data (cadastral plans, RIP, IBGE base), overlay with satellite and drone imagery, and live layers of use and occupation. Native integration with ITBI, IPTU and occupancy permits."),
      bullets:[tr("Geocodificação massiva","Mass geocoding"), tr("Sobreposição multi-camada","Multi-layer overlay"), tr("Validação por IA de inconsistências","AI validation of inconsistencies"), tr("API pública para o cidadão","Public API for citizens")],
    },
    {
      id:"02",
      name:tr("Licenciamento Inteligente","Smart Permitting"),
      lead:tr("Aprovações em semanas, não anos.","Approvals in weeks, not years."),
      desc:tr("Workflow digital de licenciamento — alvarás, habite-se, projetos urbanísticos, RRT — com regras programáveis em código. Pareceres paralelizados, prazos auditáveis, decisões com trilha completa.","Digital permitting workflow — permits, occupancy certificates, urban-planning projects, RRT — with rules programmable in code. Parallelized reviews, auditable deadlines, decisions with a full trail."),
      bullets:[tr("Workflow programável por secretaria","Workflow programmable per department"), tr("Análise técnica assistida por IA","AI-assisted technical analysis"), tr("Trilha completa para o TCM","Full audit trail for the TCM"), tr("Portal único do projetista","Single portal for designers")],
    },
    {
      id:"03",
      name:tr("Monitoramento por IA","AI Monitoring"),
      lead:tr("A cidade que se vê, todos os dias.","The city that sees itself, every day."),
      desc:tr("Análise contínua de imagens orbitais e aéreas com modelos próprios — detecção de obras irregulares, desmatamento urbano, ocupações em áreas de risco e mudanças no uso do solo. Alertas direcionados às secretarias responsáveis.","Continuous analysis of orbital and aerial imagery with proprietary models — detecting illegal construction, urban deforestation, occupation of risk areas and land-use changes. Alerts routed to the responsible departments."),
      bullets:[tr("Detecção de obra irregular em até 48h","Illegal-build detection within 48h"), tr("Alertas de risco ambiental","Environmental-risk alerts"), tr("Histórico temporal por quadra","Time history per block"), tr("Indicadores de adensamento","Densification indicators")],
    },
    {
      id:"04",
      name:tr("Planejamento Urbano","Urban Planning"),
      lead:tr("Plano diretor que vira política, não documento.","A master plan that becomes policy, not a document."),
      desc:tr("Plataformas de simulação para revisão de plano diretor, zoneamento, instrumentos urbanísticos e operações urbanas consorciadas. Cenários comparáveis, impacto fiscal estimado e participação social digital.","Simulation platforms for master-plan revision, zoning, urban-planning instruments and joint urban operations. Comparable scenarios, estimated fiscal impact and digital public participation."),
      bullets:[tr("Simulação de zoneamento alternativo","Alternative-zoning simulation"), tr("Estimativa de arrecadação por cenário","Revenue estimate per scenario"), tr("Consultas públicas digitais","Digital public consultations"), tr("Modelos 3D do território","3D territory models")],
    },
  ];
  return (
    <section className="section" id="offers" style={{borderTop:"1px solid var(--line)"}}>
      <div className="shell">
        <SectionHead index="02" kicker={tr("O QUE ENTREGAMOS","WHAT WE DELIVER")} title={tr(["Quatro produtos.", {em:" Uma camada única."}],["Four products.", {em:" One single layer."}],["Cuatro productos.", {em:" Una única capa."}],["Neli toodet.", {em:" Üks ühtne kiht."}],["四款产品。", {em:" 一个统一图层。"}])} sub={tr("As ofertas funcionam isoladamente — uma prefeitura pode contratar só Cadastro Digital. Mas o valor real aparece quando rodam integradas.","The offers work standalone — a city can hire just Digital Registry. But the real value appears when they run integrated.")}/>
        <div style={{display:"grid", gap: 0, borderTop:"1px solid var(--line)"}}>
          {ofertas.map((o, i) => (
            <div key={o.id} style={{
              display:"grid", gridTemplateColumns:"180px 1fr 1.2fr 1fr", gap: 32,
              padding:"40px 0", borderBottom:"1px solid var(--line)",
              alignItems:"start",
            }}>
              <Reveal as="div" className="mono" style={{paddingTop: 8, color:"var(--accent-ink)"}}>OFERTA · {o.id}</Reveal>
              <Reveal delay={100}>
                <h3 style={{fontFamily:"var(--font-display)", fontSize: 40, lineHeight: 1, margin:"0 0 12px"}}>{o.name}</h3>
                <p style={{fontSize: 17, lineHeight: 1.4, fontFamily:"var(--font-display)", color:"var(--ink-soft)", margin: 0}}>{o.lead}</p>
              </Reveal>
              <Reveal delay={200} style={{fontSize: 14, lineHeight: 1.6, color:"var(--ink-soft)"}}>{o.desc}</Reveal>
              <Reveal delay={300}>
                <ul style={{listStyle:"none", padding:0, margin:0, fontSize: 12, fontFamily:"var(--font-mono)"}}>
                  {o.bullets.map((b, j) => (
                    <li key={j} style={{padding:"8px 0", borderTop: j === 0 ? "none" : "1px solid var(--line)", color:"var(--ink)", display:"flex", gap: 8}}>
                      <span style={{color:"var(--accent-ink)"}}>+</span>{b}
                    </li>
                  ))}
                </ul>
              </Reveal>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PilotsSection() {
  const { tr } = useT();
  return (
    <section className="section" id="pilots">
      <div className="shell">
        <SectionHead index="03" kicker={tr("PILOTOS","PILOTS")} title={tr(["Cidades que já estão", {em:" rodando com a gente."}],["Cities already", {em:" running with us."}],["Ciudades que ya están", {em:" funcionando con nosotros."}],["Linnad, mis juba", {em:" meiega töötavad."}],["已经在", {em:" 与我们一起运行的城市。"}])} sub={tr("Três municípios em estágios distintos. Os números abaixo são os primeiros indicadores operacionais — atualizados trimestralmente.","Three municipalities at different stages. The numbers below are the first operational indicators — updated quarterly.")}/>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid var(--line)", borderLeft:"1px solid var(--line)"}}>
          {[
            {
              city:tr("MUNICÍPIO A · interior MG","MUNICIPALITY A · inland MG"),
              status:tr("em produção","in production"),
              statusColor:"var(--accent-ink)",
              t:tr("Cadastro Digital + Licenciamento","Digital Registry + Permitting"),
              metrics:[
                [tr("lotes mapeados","parcels mapped"), "47.310"],
                [tr("redução do tempo de alvará","permit-time reduction"), "−68%"],
                [tr("regularização de matrículas","deeds regularized"), "1.842"],
                [tr("arrecadação ITBI Δ","ITBI revenue Δ"), "+R$ 4.2M/ano"],
              ],
            },
            {
              city:tr("MUNICÍPIO B · litoral SP","MUNICIPALITY B · coastal SP"),
              status:tr("piloto · 9 meses","pilot · 9 months"),
              statusColor:"var(--accent-ink)",
              t:tr("Monitoramento por IA","AI Monitoring"),
              metrics:[
                [tr("área monitorada","area monitored"), "182 km²"],
                [tr("alertas válidos emitidos","valid alerts issued"), "1.207"],
                [tr("detecções de obra irregular","illegal-build detections"), "94"],
                [tr("ações fiscalizatórias","enforcement actions"), "76"],
              ],
            },
            {
              city:tr("MUNICÍPIO C · capital NE","MUNICIPALITY C · NE capital"),
              status:tr("em estruturação","being structured"),
              statusColor:"var(--ink-muted)",
              t:tr("Planejamento + Plano Diretor","Planning + Master Plan"),
              metrics:[
                [tr("cenários simulados","scenarios simulated"), "12"],
                [tr("consultas públicas digitais","digital public consultations"), "3"],
                [tr("impacto fiscal projetado","projected fiscal impact"), "R$ 88M/10a"],
                ["go-live", "Q3/2026"],
              ],
            },
          ].map((p, i) => (
            <Reveal key={i} delay={i*100} style={{
              padding: 28,
              borderRight:"1px solid var(--line)",
              borderBottom:"1px solid var(--line)",
              minHeight: 380,
              display:"flex", flexDirection:"column", justifyContent:"space-between",
            }}>
              <div>
                <div className="mono" style={{marginBottom: 10}}>{p.city}</div>
                <div className="mono" style={{color: p.statusColor, marginBottom: 24}}><span className="live-ring"></span>{p.status}</div>
                <h3 style={{fontFamily:"var(--font-display)", fontSize: 28, lineHeight: 1.05, margin:"0 0 24px"}}>{p.t}</h3>
              </div>
              <ul style={{listStyle:"none", padding:0, margin:0}}>
                {p.metrics.map(([k, v], j) => (
                  <li key={j} style={{display:"flex", justifyContent:"space-between", padding:"10px 0", borderTop:"1px solid var(--line)", fontSize: 13}}>
                    <span className="mono" style={{color:"var(--ink-muted)"}}>{k}</span>
                    <span style={{fontFamily:"var(--font-mono)", fontWeight: 600}}>{v}</span>
                  </li>
                ))}
              </ul>
            </Reveal>
          ))}
        </div>
        <div className="mono" style={{marginTop: 18, color:"var(--ink-muted)"}}>
          {tr("↳ nomes dos municípios omitidos por confidencialidade contratual. Disponíveis sob NDA.","↳ municipality names withheld for contractual confidentiality. Available under NDA.")}
        </div>
      </div>
    </section>
  );
}

function TamSection() {
  const { tr } = useT();
  return (
    <section className="section section--dark">
      <div className="shell">
        <SectionHead dark index="04" kicker={tr("MERCADO","MARKET")} title={tr(["O B2G não escala", {em:" como SaaS."}],["B2G doesn't scale", {em:" like SaaS."}],["El B2G no escala", {em:" como SaaS."}],["B2G ei skaleeru", {em:" nagu SaaS."}],["B2G 无法", {em:" 像 SaaS 那样扩张。"}])} sub={tr("Mas escala. A vertical Smart City foi desenhada para o ritmo real do setor público brasileiro — onde contratos longos compensam o ciclo lento de aquisição.","But it scales. The Smart City vertical was designed for the real pace of the public sector — where long contracts offset the slow acquisition cycle.")}/>
        <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 0, borderTop:"1px solid #28322C"}}>
          {[
            [tr("MUNICÍPIOS BR","BR MUNICIPALITIES"), "5.570", tr("potenciais clientes","potential clients")],
            [tr("TICKET MÉDIO ANUAL","AVG. ANNUAL TICKET"), "R$ 1.8M", tr("para suite completa","for the full suite")],
            [tr("CICLO DE VENDA","SALES CYCLE"), tr("9 meses","9 months"), tr("média no piloto","pilot average")],
            [tr("RENOVAÇÃO","RENEWAL"), tr("5 anos","5 years"), tr("contrato típico","typical contract")],
          ].map(([k, v, sub], i) => (
            <Reveal key={i} delay={i*80} style={{
              padding:"32px 24px",
              borderRight: i < 3 ? "1px solid #28322C" : "none",
            }}>
              <div className="mono" style={{color:"color-mix(in srgb, #F4F1EA 60%, transparent)", marginBottom: 12}}>{k}</div>
              <div style={{fontFamily:"var(--font-display)", fontSize: 56, lineHeight: 0.95, color:"#F4F1EA"}}>{v}</div>
              <div className="mono" style={{marginTop: 10, color:"color-mix(in srgb, #F4F1EA 60%, transparent)"}}>{sub}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function CitiesCTA() {
  const { tr } = useT();
  return (
    <section className="section" style={{padding:"120px 0 140px", borderTop:"1px solid var(--line)", background:"var(--paper)"}}>
      <div className="shell">
        <div style={{display:"grid", gridTemplateColumns:"auto 1fr", gap: 64, alignItems:"end"}}>
          <div className="mono">{tr("05 / CONVERSA","05 / TALK")}</div>
          <div>
            <h2 className="display" style={{fontSize:"clamp(56px, 7vw, 104px)", margin:"0 0 32px"}}>
              {tr(<>Sua prefeitura<br/>na <em>nova régua</em>.</>,<>Your city hall<br/>on the <em>new standard</em>.</>,<>Tu municipio<br/>en el <em>nuevo estándar</em>.</>,<>Sinu omavalitsus<br/><em>uuel tasemel</em>.</>,<>让你的市政<br/>迈向<em>新标准</em>。</>)}
            </h2>
            <p style={{maxWidth: 580, fontSize: 18, lineHeight: 1.55, color:"var(--ink-soft)", marginBottom: 32}}>
              {tr("Para gestores municipais, secretários de planejamento e equipes técnicas: agendamos uma sessão de diagnóstico gratuita do município, com mapeamento das oportunidades imediatas e estimativa de impacto fiscal.","For municipal managers, planning secretaries and technical teams: we schedule a free diagnostic session for your municipality, mapping immediate opportunities and estimating fiscal impact.")}
            </p>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <a className="btn btn--ink" href="#">{tr("Agendar diagnóstico","Schedule a diagnosis")} <span className="arrow">→</span></a>
              <a className="btn btn--ghost" href="#offers">{tr("Ver soluções","See solutions")}</a>
              <a className="btn btn--ghost" href="manifesto.html">Manifesto</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CitiesPage() {
  return (
    <Page>
      <TopNav active="cities" />
      <main>
        <CitiesHero />
        <PainsSection />
        <OffersSection />
        <PilotsSection />
        <TamSection />
        <CitiesCTA />
      </main>
      <Footer />
    </Page>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<CitiesPage />);