// Platform — catalog of the 7 verticals (companies + products) under BlockUrb OÜ
function PlatformHero() {
  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. 002/{tr("ECOSSISTEMA","ECOSYSTEM")} · REV 04.26</Reveal>
          <Reveal as="span" className="coord">{tr("7 VERTICAIS · 1 GOVERNANÇA","7 VERTICALS · 1 GOVERNANCE")}</Reveal>
        </div>
        <Reveal as="span" className="eyebrow" style={{display:"inline-flex", marginBottom: 32}}>{tr("O ECOSSISTEMA · MAPA","THE ECOSYSTEM · MAP")}</Reveal>
        <h1 className="display" style={{fontSize:"clamp(56px, 8vw, 116px)", margin:"0 0 40px"}}>
          <SplitReveal text={tr(["Sete frentes para reconstruir", {em:" o setor urbanístico."}],["Seven fronts to rebuild", {em:" the urban-development sector."}],["Siete frentes para reconstruir", {em:" el sector urbanístico."}],["Seitse suunda linnaarengu", {em:" sektori ülesehitamiseks."}],["重建城市开发领域的", {em:" 七大方向。"}])}/>
        </h1>
        <Reveal delay={300}>
          <p style={{maxWidth: 720, fontSize: 19, lineHeight: 1.55, color:"var(--ink-soft)"}}>
            {tr("Cada vertical do ecossistema BlockUrb é uma empresa ou produto independente — com modelo de negócio, equipe e rota próprias. Operam articulados pela holding BlockUrb OÜ, que centraliza governança, licenças regulatórias e a infraestrutura de tokenização.","Each vertical in the BlockUrb ecosystem is an independent company or product — with its own business model, team and roadmap. They operate articulated by the BlockUrb OÜ holding, which centralizes governance, regulatory licenses and the tokenization infrastructure.")}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function VerticalSection({ index, kind, name, tag, lead, body, bullets, features, dark, align = "left", anchor }) {
  const { tr } = useT();
  return (
    <section id={anchor} className={dark ? "section section--dark" : "section"} style={{borderTop:"1px solid var(--line)", scrollMarginTop: 80}}>
      <div className="shell">
        <div style={{display:"grid", gridTemplateColumns:"180px 1fr", gap: 48, marginBottom: 56}}>
          <Reveal as="div" className="mono" style={{paddingTop: 8, color: dark ? "color-mix(in srgb, #F4F1EA 60%, transparent)" : undefined}}>
            VERT · {index}<br/>
            <span style={{opacity:0.6}}>{tag}</span>
          </Reveal>
          <div>
            <Reveal style={{marginBottom: 24, display:"flex", alignItems:"center", gap: 16}}>
              <span style={{
                display:"inline-flex", padding: 14, border:"1px solid", borderColor: dark ? "#28322C" : "var(--line)",
                borderRadius: 6, color: dark ? "#F4F1EA" : "var(--ink)",
              }}>
                <VerticalGlyph kind={kind} size={32}/>
              </span>
              <span className="mono" style={{color: dark ? "oklch(0.78 0.08 145)" : "var(--accent-ink)"}}>{kind === "fund" ? tr("FINANCEIRO","FINANCIAL") : kind === "urblock" ? tr("INFRAESTRUTURA","INFRASTRUCTURE") : kind === "smartcity" ? "B2G" : kind === "studios" ? tr("CRIAÇÃO","CREATION") : kind === "school" ? tr("EDUCAÇÃO","EDUCATION") : kind === "franchise" ? tr("OPERACIONAL · LOTEADORA","OPERATIONAL · DEVELOPER") : tr("IMPACTO","IMPACT")}</span>
            </Reveal>
            <h2 className="display" style={{fontSize:"clamp(48px, 6vw, 88px)", margin:"0 0 24px", color: dark ? "#F4F1EA" : "var(--ink)"}}>
              <SplitReveal text={[name]}/>
            </h2>
            <Reveal delay={200}>
              <p style={{fontSize: 22, lineHeight: 1.4, fontFamily:"var(--font-display)", color: dark ? "#F4F1EA" : "var(--ink)", maxWidth: 760, margin: 0}}>{lead}</p>
            </Reveal>
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"180px 1fr 1fr", gap: 48, alignItems:"start"}}>
          <div></div>
          <Reveal>
            <div className="mono" style={{marginBottom: 16, color: dark ? "color-mix(in srgb, #F4F1EA 60%, transparent)" : undefined}}>{tr("O QUE É","WHAT IT IS")}</div>
            <div style={{fontSize: 16, lineHeight: 1.7, color: dark ? "color-mix(in srgb, #F4F1EA 80%, transparent)" : "var(--ink-soft)"}}>{body}</div>
          </Reveal>
          <Reveal delay={150}>
            <div className="mono" style={{marginBottom: 16, color: dark ? "color-mix(in srgb, #F4F1EA 60%, transparent)" : undefined}}>{features ? tr("ENTREGÁVEIS","DELIVERABLES") : tr("DESTAQUES","HIGHLIGHTS")}</div>
            <ul style={{listStyle:"none", padding:0, margin:0}}>
              {(features || bullets).map((b, i) => (
                <li key={i} style={{
                  padding:"14px 0",
                  borderTop:"1px solid",
                  borderTopColor: dark ? "#28322C" : "var(--line)",
                  display:"grid", gridTemplateColumns:"24px 1fr", gap: 12,
                  fontSize: 14, lineHeight: 1.55,
                  color: dark ? "color-mix(in srgb, #F4F1EA 85%, transparent)" : "var(--ink)",
                }}>
                  <span className="mono" style={{opacity: 0.6}}>{String(i+1).padStart(2,"0")}</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function FundSection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="fund"
      index="01"
      kind="fund"
      name="BLU Fund"
      tag={tr("FINANCEIRO","FINANCIAL")}
      lead={tr("O motor financeiro do ecossistema. Um fundo privado tokenizado que atua como núcleo de capital da BlockUrb.","The financial engine of the ecosystem. A tokenized private fund that acts as BlockUrb's capital core.")}
      body={tr(<>
        O BLU Fund adquire ações de empreendimentos urbanos em primeiro estágio com deságio, e revende a posição para consórcios de urbanizadoras conforme o projeto avança. A diferença entre os preços de compra e revenda — combinada com a valorização da terra durante a urbanização — gera o retorno do fundo, distribuído aos detentores de tokens BLU.
        <br/><br/>
        Em sua segunda fase, o BLU Fund evolui para um <strong>fundo DAO descentralizado</strong>: os holders de tokens passam a participar da governança e da seleção dos empreendimentos.
      </>,<>
        BLU Fund acquires stakes in early-stage urban developments at a discount and resells the position to developer consortiums as the project advances. The spread between purchase and resale prices — combined with land appreciation during urbanization — generates the fund's return, distributed to BLU token holders.
        <br/><br/>
        In its second phase, BLU Fund evolves into a <strong>decentralized DAO fund</strong>: token holders take part in governance and in selecting developments.
      </>,<>
        BLU Fund adquiere participaciones en desarrollos urbanos en etapa inicial con descuento y revende la posición a consorcios de urbanizadoras a medida que el proyecto avanza. La diferencia entre los precios de compra y reventa — combinada con la revalorización de la tierra durante la urbanización — genera el retorno del fondo, distribuido a los holders de tokens BLU.
        <br/><br/>
        En su segunda fase, BLU Fund evoluciona hacia un <strong>fondo DAO descentralizado</strong>: los holders de tokens pasan a participar en la gobernanza y en la selección de los desarrollos.
      </>,<>
        BLU Fund omandab varases staadiumis linnaarenduste osalusi allahindlusega ja müüb positsiooni edasi arendajate konsortsiumitele projekti edenedes. Ostu- ja edasimüügihinna vahe — koos maa väärtuse kasvuga linnaarenduse käigus — loob fondi tootluse, mis jaotatakse BLU tokenite hoidjatele.
        <br/><br/>
        Teises faasis areneb BLU Fund <strong>detsentraliseeritud DAO-fondiks</strong>: tokenite hoidjad hakkavad osalema juhtimises ja arenduste valikus.
      </>,<>
        BLU Fund 以折价收购处于早期阶段的城市开发项目股权，并随项目推进将头寸转售给开发商联合体。买入与转售价格之间的差额——加上城市化期间的土地增值——构成基金的回报，分配给 BLU 通证持有者。
        <br/><br/>
        在第二阶段，BLU Fund 演进为<strong>去中心化 DAO 基金</strong>：通证持有者开始参与治理与项目遴选。
      </>)}
      features={[
        tr("Aquisição com deságio de ações de empreendimentos urbanos","Discounted acquisition of stakes in urban developments"),
        tr("Revenda para consórcios de urbanizadoras conforme execução","Resale to developer consortiums as execution advances"),
        tr("Distribuição de retornos via token BLU","Return distribution via the BLU token"),
        tr("Fase 2: governança descentralizada (DAO) sobre seleção e capital","Phase 2: decentralized governance (DAO) over selection and capital"),
        tr("Acesso fracionado para investidores qualificados e varejo (a depender de jurisdição)","Fractional access for qualified and retail investors (subject to jurisdiction)"),
      ]}
    />
  );
}

function UrblockSection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="urblock"
      index="02"
      kind="urblock"
      name="Urblock"
      tag={tr("INFRAESTRUTURA","INFRASTRUCTURE")}
      lead={tr("A plataforma proprietária de tokenização da BlockUrb. Onde ativos urbanos viram ativos digitais.","BlockUrb's proprietary tokenization platform. Where urban assets become digital assets.")}
      body={tr(<>
        A Urblock é a infraestrutura que viabiliza emissão, gestão e circulação de ativos tokenizados dentro do ecossistema. Opera sob as licenças regulatórias detidas pela BlockUrb OÜ, sediada em Tallinn — o que dá ao ecossistema acesso ao perímetro regulatório europeu (MiCA) para emissão de utility tokens, security tokens e ativos lastreados em real estate.
        <br/><br/>
        É a Urblock que faz a ponte entre o mundo físico (lotes, glebas, empreendimentos, RRTs) e o mundo on-chain — emitindo, custodiando e roteando os tokens que alimentam o BLU Fund e os demais produtos.
      </>,<>
        Urblock is the infrastructure that enables issuing, managing and circulating tokenized assets inside the ecosystem. It operates under the regulatory licenses held by BlockUrb OÜ, based in Tallinn — giving the ecosystem access to the European regulatory perimeter (MiCA) to issue utility tokens, security tokens and real-estate-backed assets.
        <br/><br/>
        Urblock bridges the physical world (plots, land, developments, RRTs) and the on-chain world — issuing, custodying and routing the tokens that feed BLU Fund and the other products.
      </>,<>
        Urblock es la infraestructura que viabiliza la emisión, gestión y circulación de activos tokenizados dentro del ecosistema. Opera bajo las licencias regulatorias de BlockUrb OÜ, con sede en Tallinn — lo que da al ecosistema acceso al perímetro regulatorio europeo (MiCA) para emitir utility tokens, security tokens y activos respaldados en real estate.
        <br/><br/>
        Es Urblock quien tiende el puente entre el mundo físico (lotes, parcelas, desarrollos, RRTs) y el mundo on-chain — emitiendo, custodiando y enrutando los tokens que alimentan a BLU Fund y a los demás productos.
      </>,<>
        Urblock on taristu, mis võimaldab tokeniseeritud varade emiteerimist, haldamist ja ringlust ökosüsteemis. See tegutseb BlockUrb OÜ regulatiivsete litsentside all, mille peakorter on Tallinnas — andes ökosüsteemile juurdepääsu Euroopa regulatiivsele perimeetrile (MiCA), et emiteerida utility tokeneid, security tokeneid ja kinnisvaraga tagatud varasid.
        <br/><br/>
        Just Urblock ühendab füüsilise maailma (krundid, maatükid, arendused, RRT-d) ja on-chain maailma — emiteerides, hoides ja suunates tokeneid, mis toidavad BLU Fundi ja teisi tooteid.
      </>,<>
        Urblock 是支撑生态系统内通证化资产发行、管理与流通的基础设施。它在总部位于塔林的 BlockUrb OÜ 监管许可下运营——使生态系统得以接入欧洲监管框架（MiCA），发行实用型通证、证券型通证及以房地产为支撑的资产。
        <br/><br/>
        正是 Urblock 在实体世界（地块、土地、开发项目、RRT）与链上世界之间架起桥梁——发行、托管并路由为 BLU Fund 及其他产品供能的通证。
      </>)}
      features={[
        tr("Emissão de tokens de empreendimentos e ativos urbanos","Issuance of development and urban-asset tokens"),
        tr("Custódia, registro e roteamento on-chain","On-chain custody, registry and routing"),
        tr("Smart contracts para repasses, royalties e distribuições","Smart contracts for transfers, royalties and distributions"),
        tr("Integração com BLU Fund, BluArq.AI e Franchise","Integration with BLU Fund, BluArq.AI and Franchise"),
        tr("Operação sob licenças BlockUrb OÜ · jurisdição estoniana","Operation under BlockUrb OÜ licenses · Estonian jurisdiction"),
      ]}
    />
  );
}

function SmartCitySection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="smartcity"
      index="03"
      kind="smartcity"
      name="BlockUrb Smart City"
      tag={tr("B2G · PREFEITURAS","B2G · CITY HALLS")}
      dark
      lead={tr("Soluções tecnológicas para modernizar a gestão urbana e municipal. O braço B2G do grupo.","Technology to modernize urban and municipal management. The group's B2G arm.")}
      body={tr(<>
        A vertical Smart City entrega ferramentas de cidade inteligente diretamente para o setor público: digitalização de cadastros e mapas, IA para monitoramento urbano, plataformas de planejamento e modernização do urbanismo municipal.
        <br/><br/>
        É a frente que aproxima o ecossistema de prefeituras, secretarias e órgãos de planejamento — gerando contratos públicos, dados de qualidade pública e legitimidade institucional para os demais produtos do grupo.
      </>,<>
        The Smart City vertical delivers smart-city tools directly to the public sector: digitization of registries and maps, AI for urban monitoring, planning platforms and modernization of municipal planning.
        <br/><br/>
        It is the front that brings the ecosystem closer to city halls, departments and planning bodies — generating public contracts, public-grade data and institutional legitimacy for the group's other products.
      </>,<>
        La vertical Smart City entrega herramientas de ciudad inteligente directamente al sector público: digitalización de catastros y mapas, IA para monitoreo urbano, plataformas de planificación y modernización del urbanismo municipal.
        <br/><br/>
        Es el frente que acerca el ecosistema a municipios, secretarías y órganos de planificación — generando contratos públicos, datos de calidad pública y legitimidad institucional para los demás productos del grupo.
      </>,<>
        Smart City vertikaal pakub nutika linna tööriistu otse avalikule sektorile: katastrite ja kaartide digiteerimine, tehisintellekt linnaseireks, planeerimisplatvormid ja omavalitsuse linnaplaneerimise moderniseerimine.
        <br/><br/>
        See on suund, mis toob ökosüsteemi lähemale omavalitsustele, ametitele ja planeerimisasutustele — luues avalikke lepinguid, avaliku kvaliteediga andmeid ja institutsionaalset legitiimsust grupi teistele toodetele.
      </>,<>
        Smart City 垂直领域将智慧城市工具直接交付公共部门：地籍与地图数字化、城市监测人工智能、规划平台以及市政城市规划现代化。
        <br/><br/>
        它是让生态系统贴近市政府、各局署与规划机构的前沿——为集团其他产品带来公共合同、公共级数据与机构公信力。
      </>)}
      features={[
        tr("Digitalização e georreferenciamento de cadastros municipais","Digitization and georeferencing of municipal registries"),
        tr("IA para monitoramento de uso do solo, ocupações e licenciamento","AI for monitoring land use, occupations and permitting"),
        tr("Plataformas de planejamento urbano para secretarias","Urban-planning platforms for government departments"),
        tr("Modernização de processos de aprovação e fiscalização","Modernization of approval and enforcement processes"),
        tr("Integração com a infraestrutura tokenizada (opt-in pelo município)","Integration with the tokenized infrastructure (opt-in by the municipality)"),
      ]}
    />
  );
}

function StudiosSection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="studios"
      index="04"
      kind="studios"
      name="BluArq.AI"
      tag={tr("CRIAÇÃO TÉCNICA","TECHNICAL CREATION")}
      lead={tr("O estúdio criativo da BlockUrb. Onde a engenharia urbana ganha imagem e narrativa.","BlockUrb's creative studio. Where urban engineering gains image and narrative.")}
      body={tr(<>
        BluArq.AI é a vertical de criação técnica e visual do grupo. Produz maquetes eletrônicas, vídeos interativos, peças gráficas, materiais de marketing imobiliário e — quando aplicável — projetos urbanísticos com responsabilidade técnica (RRT), assinados por arquitetos e engenheiros do quadro.
        <br/><br/>
        É também o estúdio que atende a demanda interna do ecossistema (apresentações de empreendimentos do BLU Fund, materiais de Smart City, comunicação institucional da holding) e clientes externos.
      </>,<>
        BluArq.AI is the group's technical and visual creation vertical. It produces 3D renderings, interactive videos, graphic pieces, real-estate marketing materials and — where applicable — urban-planning projects with technical liability (RRT), signed by in-house architects and engineers.
        <br/><br/>
        It is also the studio that serves the ecosystem's internal demand (BLU Fund development presentations, Smart City materials, the holding's institutional communication) and external clients.
      </>,<>
        BluArq.AI es la vertical de creación técnica y visual del grupo. Produce maquetas digitales, videos interactivos, piezas gráficas, materiales de marketing inmobiliario y — cuando aplica — proyectos urbanísticos con responsabilidad técnica (RRT), firmados por arquitectos e ingenieros de la casa.
        <br/><br/>
        Es también el estudio que atiende la demanda interna del ecosistema (presentaciones de desarrollos de BLU Fund, materiales de Smart City, comunicación institucional de la holding) y a clientes externos.
      </>,<>
        BluArq.AI on grupi tehnilise ja visuaalse loome vertikaal. See toodab digitaalseid makette, interaktiivseid videoid, graafilisi materjale, kinnisvaraturunduse materjale ja — kus asjakohane — linnaplaneerimise projekte tehnilise vastutusega (RRT), mille on allkirjastanud maja arhitektid ja insenerid.
        <br/><br/>
        See on ka stuudio, mis teenindab ökosüsteemi sisemist nõudlust (BLU Fundi arenduste esitlused, Smart City materjalid, valdusettevõtte institutsionaalne kommunikatsioon) ja väliskliente.
      </>,<>
        BluArq.AI 是集团的技术与视觉创作垂直领域。它制作电子模型、互动视频、平面作品、房地产营销材料，并在适用时制作具技术责任（RRT）的城市规划项目，由内部建筑师与工程师签署。
        <br/><br/>
        它也是服务生态系统内部需求（BLU Fund 项目演示、Smart City 材料、控股公司机构传播）与外部客户的工作室。
      </>)}
      features={[
        tr("Maquetes eletrônicas e vídeos imersivos de empreendimentos","3D renderings and immersive videos of developments"),
        tr("Peças gráficas e marketing imobiliário","Graphic pieces and real-estate marketing"),
        tr("Projetos urbanísticos com RRT","Urban-planning projects with RRT"),
        tr("Identidade visual e materiais institucionais para o grupo","Visual identity and institutional materials for the group"),
        tr("Atendimento a clientes externos (urbanizadoras, prefeituras, fundos)","Service to external clients (developers, city halls, funds)"),
      ]}
    />
  );
}

function SchoolSection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="school"
      index="05"
      kind="school"
      name="BlockUrb School"
      tag={tr("EDUCAÇÃO","EDUCATION")}
      lead={tr("A vertical educacional do grupo. Forma os quadros do mercado urbano-financeiro do futuro.","The group's education vertical. It trains the talent of the future urban-financial market.")}
      body={tr(<>
        A BlockUrb School é a vertical de educação. Reúne dois produtos principais que se reforçam: <strong id="magnatas">Magnatas do Lote</strong>, agente de IA + programa de formação para profissionais do mercado imobiliário e de urbanização; e <strong id="gamer">BlockUrb Gamer</strong>, jogo educativo voltado a estudantes e jovens profissionais que ensina, na prática, dinâmicas de desenvolvimento urbano.
        <br/><br/>
        É o canal de aquisição mais barato do ecossistema — converte alunos em clientes do BLU Fund, em parceiros do Studios e em embaixadores das demais frentes.
      </>,<>
        BlockUrb School is the education vertical. It brings together two main, mutually reinforcing products: <strong id="magnatas">Magnatas do Lote</strong>, an AI agent + training program for real-estate and urban-development professionals; and <strong id="gamer">BlockUrb Gamer</strong>, an educational game for students and young professionals that teaches urban-development dynamics hands-on.
        <br/><br/>
        It is the ecosystem's cheapest acquisition channel — converting students into BLU Fund clients, Studios partners and ambassadors of the other fronts.
      </>,<>
        BlockUrb School es la vertical de educación. Reúne dos productos principales que se refuerzan mutuamente: <strong id="magnatas">Magnatas do Lote</strong>, agente de IA + programa de formación para profesionales del mercado inmobiliario y de urbanización; y <strong id="gamer">BlockUrb Gamer</strong>, juego educativo para estudiantes y jóvenes profesionales que enseña, en la práctica, las dinámicas del desarrollo urbano.
        <br/><br/>
        Es el canal de adquisición más barato del ecosistema — convierte alumnos en clientes de BLU Fund, en socios de Studios y en embajadores de los demás frentes.
      </>,<>
        BlockUrb School on hariduse vertikaal. See koondab kaks peamist üksteist tugevdavat toodet: <strong id="magnatas">Magnatas do Lote</strong>, tehisintellekti agent + koolitusprogramm kinnisvara- ja linnaarenduse spetsialistidele; ja <strong id="gamer">BlockUrb Gamer</strong>, õppemäng õpilastele ja noortele spetsialistidele, mis õpetab praktikas linnaarengu dünaamikat.
        <br/><br/>
        See on ökosüsteemi odavaim soetuskanal — muudab õpilased BLU Fundi klientideks, Studiose partneriteks ja teiste suundade saadikuteks.
      </>,<>
        BlockUrb School 是教育垂直领域。它汇聚两款相互强化的主要产品：<strong id="magnatas">Magnatas do Lote</strong>，面向房地产与城市开发专业人士的 AI 助手 + 培训计划；以及 <strong id="gamer">BlockUrb Gamer</strong>，面向学生与青年专业人士、以实操方式讲授城市开发动态的教育游戏。
        <br/><br/>
        它是生态系统中成本最低的获客渠道——把学员转化为 BLU Fund 的客户、Studios 的伙伴以及其他领域的推广者。
      </>)}
      features={[
        tr("Magnatas do Lote · agente IA + curso para mercado imobiliário","Magnatas do Lote · AI agent + course for the real-estate market"),
        tr("BlockUrb Gamer · jogo educativo de desenvolvimento urbano","BlockUrb Gamer · educational game on urban development"),
        tr("Trilhas de formação em tokenização e blockchain aplicado","Learning tracks in tokenization and applied blockchain"),
        tr("Comunidade de alunos integrada ao BLU Fund e ao Studios","Student community integrated with BLU Fund and Studios"),
        tr("Bolsas e parcerias com instituições do setor","Scholarships and partnerships with sector institutions"),
      ]}
    />
  );
}

function GreenSection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="green"
      index="06"
      kind="green"
      name="Instituto BlockUrb"
      tag={tr("ONG · IMPACTO","NGO · IMPACT")}
      dark
      lead={tr("A vertical de impacto socioambiental. Conduz projetos sociais que arrecadam recursos e promovem as empresas patrocinadoras, convertendo parte do valor do ecossistema em qualidade de vida urbana.","The social-environmental impact vertical. It runs social projects that raise funds and promote sponsoring companies, turning part of the ecosystem's value into urban quality of life.")}
      body={tr(<>
        Instituto BlockUrb é a frente do ecossistema dedicada a impacto. Conduz projetos com foco em <strong>habitação popular</strong> e <strong>meio ambiente</strong> — ancorando a estratégia ESG do grupo e dando lastro real às narrativas de cidade justa e sustentabilidade urbana.
        <br/><br/>
        Cada projeto funciona como uma plataforma de <strong>arrecadação e de promoção</strong>: empresas patrocinadoras financiam as ações sociais e, em contrapartida, ganham visibilidade e vínculo com as comunidades atendidas — conectando marca e impacto real. O portfólio vai do <strong>global</strong> ao <strong>hiperlocal</strong>.
        <br/><br/>
        No global, o <strong>Projeto SmartCity África</strong> leva qualidade de vida às regiões mais pobres do continente, construindo cidades com saneamento básico, tecnologia e recursos sustentáveis. A tecnologia de construção e desenvolvimento urbano — incluindo <strong>robótica de obra</strong> — ergue novas cidades com velocidade e custo otimizado, impactando a sociedade onde há pobreza. No local, projetos como hortos comunitários, Natal Casa Nova, Dia das Crianças de Quarto Novo e Comunidade Colorida transformam diretamente os bairros onde o grupo atua.
      </>,<>
        Instituto BlockUrb is the ecosystem's impact-dedicated front. It runs projects focused on <strong>affordable housing</strong> and the <strong>environment</strong> — anchoring the group's ESG strategy and giving real substance to narratives of a just city and urban sustainability.
        <br/><br/>
        Each project works as a <strong>fundraising and promotion</strong> platform: sponsoring companies finance the social initiatives and, in return, gain visibility and a real bond with the communities served — connecting brand and impact. The portfolio spans from the <strong>global</strong> to the <strong>hyperlocal</strong>.
        <br/><br/>
        Globally, the <strong>SmartCity Africa Project</strong> brings quality of life to the continent's poorest regions, building cities with sanitation, technology and sustainable resources. Construction and urban-development technology — including <strong>on-site robotics</strong> — raises new cities with speed and optimized cost, impacting society where poverty exists. Locally, projects such as community gardens, Natal Casa Nova, Dia das Crianças de Quarto Novo and Comunidade Colorida directly transform the neighborhoods where the group operates.
      </>,<>
        Instituto BlockUrb es el frente del ecosistema dedicado al impacto. Conduce proyectos enfocados en <strong>vivienda popular</strong> y <strong>medio ambiente</strong> — anclando la estrategia ESG del grupo y dando sustento real a las narrativas de ciudad justa y sostenibilidad urbana.
        <br/><br/>
        Cada proyecto funciona como una plataforma de <strong>recaudación y promoción</strong>: las empresas patrocinadoras financian las acciones sociales y, a cambio, ganan visibilidad y vínculo con las comunidades atendidas — conectando marca e impacto real. El portafolio va de lo <strong>global</strong> a lo <strong>hiperlocal</strong>.
        <br/><br/>
        En lo global, el <strong>Proyecto SmartCity África</strong> lleva calidad de vida a las regiones más pobres del continente, construyendo ciudades con saneamiento básico, tecnología y recursos sostenibles. La tecnología de construcción y desarrollo urbano — incluyendo <strong>robótica de obra</strong> — levanta nuevas ciudades con velocidad y costo optimizado, impactando a la sociedad donde hay pobreza. En lo local, proyectos como huertos comunitarios, Natal Casa Nova, Dia das Crianças de Quarto Novo y Comunidade Colorida transforman directamente los barrios donde el grupo actúa.
      </>)}
      features={[
        tr(<><strong>Projeto SmartCity África</strong> — qualidade de vida às regiões mais pobres da África: cidades com saneamento, tecnologia e recursos sustentáveis, usando robótica de construção para erguer novas cidades com velocidade e custo otimizado.</>,<><strong>SmartCity Africa Project</strong> — quality of life for Africa's poorest regions: cities with sanitation, technology and sustainable resources, using construction robotics to raise new cities with speed and optimized cost.</>),
        tr(<><strong>Reflorestamento orgânico</strong> — hortos próprios em cada empreendimento e distribuição gratuita de mudas para a comunidade local.</>,<><strong>Organic reforestation</strong> — on-site nurseries in every development and free distribution of seedlings to the local community.</>),
        tr(<><strong>Natal Casa Nova</strong> — sorteia uma família em cada comunidade local para ter a casa reformada.</>,<><strong>Natal Casa Nova</strong> — raffles one family in each local community to have their home renovated.</>),
        tr(<><strong>Dia das Crianças de Quarto Novo</strong> — sorteia uma família em cada comunidade para reformar o quarto da criança.</>,<><strong>Dia das Crianças de Quarto Novo</strong> — raffles one family in each community to renovate the child's bedroom.</>),
        tr(<><strong>Comunidade Colorida</strong> — reforma e colorização de fachadas, embolso e arborização das comunidades, com planejamento para levar saneamento básico.</>,<><strong>Comunidade Colorida</strong> — facade renovation and coloring, plastering and tree-planting in communities, with planning to bring basic sanitation.</>),
        tr(<><strong>Patrocínio com contrapartida</strong> — empresas patrocinadoras financiam os projetos e ganham visibilidade e vínculo com as comunidades atendidas.</>,<><strong>Sponsorship with payback</strong> — sponsoring companies fund the projects and gain visibility and a bond with the communities served.</>),
      ]}
    />
  );
}

function FranchiseSection() {
  const { tr } = useT();
  return (
    <VerticalSection
      anchor="franchise"
      index="07"
      kind="franchise"
      name="BlockUrb Franchise"
      tag={tr("OPERACIONAL · LOTEADORA","OPERATIONAL · DEVELOPER")}
      lead={tr("O braço operacional do ecossistema. Onde capital tokenizado, IA e blockchain viram bairros, condomínios e cidades reais.","The ecosystem's operational arm. Where tokenized capital, AI and blockchain become real neighborhoods, communities and cities.")}
      body={tr(<>
        Estruturada como uma <strong>rede de filiais de loteadoras</strong>, com sede inicial no <strong>Paraguai</strong> e expansão planejada para todo o território brasileiro, a BlockUrb Franchise atua como consultoria urbanística especializada em viabilizar e acelerar empreendimentos imobiliários — combinando know-how técnico, processos padronizados e tecnologia para reduzir prazo, custo e complexidade na entrega de novos projetos.
        <br/><br/>
        Sua atuação cobre desde estudos de viabilidade e licenciamento até execução de obras, comercialização e integração com as soluções do ecossistema: tokenização via BLU Fund, plataforma Urblock, projetos técnicos pela BluArq.AI e capilaridade comercial pela rede de filiais. É a peça-chave que conecta o mundo digital do ecossistema ao chão de obra.
      </>,<>
        Structured as a <strong>network of land-development branches</strong>, headquartered initially in <strong>Paraguay</strong> with planned expansion across Brazil, BlockUrb Franchise acts as an urban-development consultancy specialized in enabling and accelerating real-estate projects — combining technical know-how, standardized processes and technology to reduce time, cost and complexity in delivering new projects.
        <br/><br/>
        Its scope spans feasibility studies and permitting through construction, sales and integration with the ecosystem's solutions: tokenization via BLU Fund, the Urblock platform, technical projects by BluArq.AI and commercial reach through the branch network. It is the key piece connecting the ecosystem's digital world to the construction site.
      </>,<>
        Estructurada como una <strong>red de filiales urbanizadoras</strong>, con sede inicial en <strong>Paraguay</strong> y expansión planificada a todo el territorio brasileño, BlockUrb Franchise actúa como consultoría urbanística especializada en viabilizar y acelerar desarrollos inmobiliarios — combinando know-how técnico, procesos estandarizados y tecnología para reducir plazo, costo y complejidad en la entrega de nuevos proyectos.
        <br/><br/>
        Su actuación abarca desde estudios de viabilidad y licencias hasta ejecución de obras, comercialización e integración con las soluciones del ecosistema: tokenización vía BLU Fund, plataforma Urblock, proyectos técnicos por BluArq.AI y capilaridad comercial por la red de filiales. Es la pieza clave que conecta el mundo digital del ecosistema con el sitio de obra.
      </>,<>
        Struktureerituna <strong>arendajate filiaalide võrguna</strong>, esialgse peakorteriga <strong>Paraguays</strong> ja kavandatud laienemisega kogu Brasiilia territooriumile, tegutseb BlockUrb Franchise linnaplaneerimise konsultatsioonina, mis on spetsialiseerunud kinnisvaraarenduste võimaldamisele ja kiirendamisele — ühendades tehnilise oskusteabe, standarditud protsessid ja tehnoloogia, et vähendada uute projektide elluviimise aega, kulu ja keerukust.
        <br/><br/>
        Selle tegevus ulatub teostatavusuuringutest ja litsentsimisest kuni ehitustööde, müügi ja ökosüsteemi lahendustega integreerimiseni: tokeniseerimine BLU Fundi kaudu, Urblocki platvorm, tehnilised projektid BluArq.AI-lt ja kaubanduslik ulatus filiaalide võrgu kaudu. See on võtmeosa, mis ühendab ökosüsteemi digitaalse maailma ehitusplatsiga.
      </>,<>
        BlockUrb Franchise 以<strong>开发商分支网络</strong>的形式组建，初始总部设在<strong>巴拉圭</strong>并计划向巴西全境扩张，作为专注于落地并加速房地产开发的城市规划咨询机构——融合技术专长、标准化流程与技术，以降低新项目交付的时间、成本与复杂度。
        <br/><br/>
        其业务范围涵盖从可行性研究、许可到工程施工、销售，以及与生态系统方案的整合：通过 BLU Fund 通证化、Urblock 平台、BluArq.AI 的技术项目，以及通过分支网络实现的商业触达。它是连接生态系统数字世界与施工现场的关键环节。
      </>)}
      features={[
        tr("Loteamentos e condomínios de lotes (greenfield)","Subdivisions and gated lot communities (greenfield)"),
        tr("Aceleração de empreendimentos já implantados ou em estudo","Acceleration of developments already underway or in study"),
        tr("Estudos de viabilidade, licenciamento e aprovação","Feasibility studies, permitting and approval"),
        tr("Execução de obras de infraestrutura urbana","Execution of urban-infrastructure works"),
        tr("Comercialização via rede de filiais franqueadas","Sales through the franchised branch network"),
        tr("Integração nativa com BLU Fund, Urblock e BluArq.AI","Native integration with BLU Fund, Urblock and BluArq.AI"),
      ]}
    />
  );
}

function MapSection() {
  const { tr } = useT();
  return (
    <section className="section">
      <div className="shell">
        <SectionHead index="08" kicker={tr("ARQUITETURA","ARCHITECTURE")} title={tr(["Como as verticais", {em:" se conectam."}],["How the verticals", {em:" connect."}],["Cómo las verticales", {em:" se conectan."}],["Kuidas vertikaalid", {em:" omavahel ühenduvad."}],["各垂直领域", {em:" 如何连接。"}])} sub={tr("Cada produto opera de forma independente, mas a arquitetura é desenhada para que valor circule entre as frentes.","Each product operates independently, but the architecture is designed so value flows between the fronts.")} />
        <Reveal>
          <div style={{
            border:"1px solid var(--line)",
            background:"var(--paper)",
            padding:"56px 48px",
            position:"relative",
          }}>
            <div style={{display:"grid", gridTemplateColumns:"1fr", justifyItems:"center", marginBottom: 56}}>
              <div style={{
                padding:"20px 32px", background:"var(--ink)", color:"var(--paper)",
                fontFamily:"var(--font-display)", fontSize: 28, letterSpacing:"-0.01em",
              }}>BlockUrb OÜ <span style={{fontFamily:"var(--font-mono)", fontSize: 13, opacity: 0.7, marginLeft: 12}}>· holding · Tallinn</span></div>
              <div className="mono" style={{marginTop: 14, color:"var(--ink-muted)"}}>{tr("governança · licenças · core IP","governance · licenses · core IP")}</div>
            </div>

            <div style={{display:"grid", gridTemplateColumns:"repeat(7, 1fr)", gap: 12, position:"relative"}}>
              {[
                {kind:"fund", name:"BLU Fund"},
                {kind:"urblock", name:"Urblock"},
                {kind:"smartcity", name:"Smart City"},
                {kind:"studios", name:"BluArq.AI"},
                {kind:"school", name:"School"},
                {kind:"green", name:"Instituto BlockUrb"},
                {kind:"franchise", name:"Franchise"},
              ].map((m, i) => (
                <div key={i} style={{
                  border:"1px solid var(--line)",
                  background:"var(--bg)",
                  padding: 20, minHeight: 160,
                  display:"flex", flexDirection:"column", justifyContent:"space-between",
                }}>
                  <VerticalGlyph kind={m.kind} size={22}/>
                  <div>
                    <div className="mono" style={{color:"var(--ink-muted)", marginBottom: 4}}>{`0${i+1}`}</div>
                    <div style={{fontFamily:"var(--font-display)", fontSize: 17, lineHeight: 1.1}}>{m.name}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{marginTop: 48, display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid var(--line)"}}>
              {[
                [tr("Fluxo de capital","Capital flow"), tr("BLU Fund → Urblock → empreendimentos → holders","BLU Fund → Urblock → developments → holders")],
                [tr("Fluxo de dados","Data flow"), "Smart City → BluArq.AI → School"],
                [tr("Fluxo de pessoas","People flow"), "School → BLU Fund → Franchise → Instituto BlockUrb"],
              ].map(([k, v], i) => (
                <div key={i} style={{
                  padding:"24px 24px 0",
                  borderRight: i < 2 ? "1px solid var(--line)" : "none",
                }}>
                  <div className="mono" style={{marginBottom: 8}}>{k}</div>
                  <div style={{fontSize: 13, color:"var(--ink-soft)", fontFamily:"var(--font-mono)"}}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// Offset do header sticky (.topnav) — usado pra alinhar o scroll por âncora.
const HEADER_OFFSET = 80;

function PlatformPage() {
  // O React monta as <section> DEPOIS de o browser processar o #hash, então o
  // salto nativo cai no topo. Aqui rolamos manualmente após a montagem,
  // aguardando a seção existir no DOM, e também a cada 'hashchange'.
  React.useEffect(() => {
    let raf1, raf2, timer;
    const scrollToHash = () => {
      const hash = window.location.hash;
      if (!hash || hash.length < 2) return;
      const id = decodeURIComponent(hash.slice(1));
      const tryScroll = (attemptsLeft) => {
        const el = document.getElementById(id);
        if (el) {
          const y = el.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;
          window.scrollTo({ top: y, behavior: "smooth" });
        } else if (attemptsLeft > 0) {
          // conteúdo ainda não no DOM — tenta de novo no próximo tick
          timer = setTimeout(() => tryScroll(attemptsLeft - 1), 60);
        }
      };
      // dois rAFs garantem que o React já pintou as seções antes de medir
      raf1 = requestAnimationFrame(() => {
        raf2 = requestAnimationFrame(() => tryScroll(20));
      });
    };
    scrollToHash();
    window.addEventListener("hashchange", scrollToHash);
    return () => {
      window.removeEventListener("hashchange", scrollToHash);
      cancelAnimationFrame(raf1);
      cancelAnimationFrame(raf2);
      clearTimeout(timer);
    };
  }, []);

  return (
    <Page>
      <TopNav active="platform" />
      <main>
        <PlatformHero />
        <FundSection />
        <UrblockSection />
        <SmartCitySection />
        <StudiosSection />
        <SchoolSection />
        <GreenSection />
        <FranchiseSection />
        <MapSection />
      </main>
      <Footer />
    </Page>
  );
}

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