// Manifesto — the BlockUrb OÜ thesis
function ManifestoHero() {
  const { tr } = useT();
  return (
    <section style={{padding:"160px var(--gutter) 100px", borderBottom:"1px solid var(--line)"}}>
      <div className="shell">
        <div style={{display:"flex", justifyContent:"space-between", marginBottom: 64}}>
          <Reveal as="span" className="coord">DOC. 005/MANIFESTO · REV 04.26 · TALLINN</Reveal>
          <Reveal as="span" className="coord">PT · EN · ES</Reveal>
        </div>
        <Reveal as="span" className="eyebrow" style={{display:"inline-flex", marginBottom: 40}}>MANIFESTO · BLOCKURB OÜ</Reveal>
        <h1 className="display" style={{fontSize:"clamp(64px, 9vw, 144px)", margin:"0 0 48px", letterSpacing:"-0.03em"}}>
          <SplitReveal text={tr(["A cidade não é um", "pacote fechado.", {em:" É uma operação aberta."}],["The city is not a", "closed package.", {em:" It is an open operation."}],["La ciudad no es un", "paquete cerrado.", {em:" Es una operación abierta."}],["Linn ei ole", "suletud pakett.", {em:" See on avatud operatsioon."}],["城市不是一个", "封闭的成品。", {em:" 它是一项开放的运营。"}])} lineDelay={150}/>
        </h1>
        <Reveal delay={500}>
          <p style={{maxWidth: 800, fontSize: 22, lineHeight: 1.45, fontFamily:"var(--font-display)", color:"var(--ink)", margin: 0}}>
            {tr("Por décadas a urbanização foi tratada como produto: empreendedor decide, banco financia, prefeitura licencia, morador paga. A BlockUrb existe porque acreditamos que esse modelo entregou o que podia entregar — e que o próximo ciclo do setor urbano será operado como software: aberto, auditável, programável, distribuído.","For decades urbanization was treated as a product: the developer decides, the bank finances, the city hall permits, the resident pays. BlockUrb exists because we believe that model delivered what it could — and that the next cycle of the urban sector will be operated as software: open, auditable, programmable, distributed.")}
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function ThesisBlocks() {
  const { tr } = useT();
  const blocks = [
    {
      n:"01",
      t:tr("A terra precisa virar protocolo.","Land must become a protocol."),
      d:tr("Enquanto o registro de imóveis viver em cartórios isolados, a cidade vai continuar refém de assimetria de informação. Tokenizar não é financeirizar a terra — é dar a ela um padrão técnico que permita governança, transparência e participação real.","As long as property records live in isolated registries, the city stays hostage to information asymmetry. Tokenizing is not financializing land — it's giving it a technical standard that enables governance, transparency and real participation.")
    },
    {
      n:"02",
      t:tr("Capital e território não podem rodar em camadas separadas.","Capital and territory can't run on separate layers."),
      d:tr("Bancos financiam empreendimentos que prefeituras nunca verão direito; prefeituras planejam cidades que o capital nunca vai construir. O BLU Fund + Urblock + Smart City existem para que a mesma camada de dados sirva quem investe e quem governa.","Banks finance developments city halls will never really see; city halls plan cities capital will never build. BLU Fund + Urblock + Smart City exist so the same data layer serves both those who invest and those who govern.")
    },
    {
      n:"03",
      t:tr("O setor público merece software, não consultoria.","The public sector deserves software, not consulting."),
      d:tr("Não acreditamos em PowerPoint para prefeitura. Acreditamos em produto: cadastro vivo, licenciamento programável, IA de monitoramento contínuo. O resto é teatro político.","We don't believe in PowerPoint for city halls. We believe in product: a live registry, programmable permitting, continuous AI monitoring. The rest is political theater.")
    },
    {
      n:"04",
      t:tr("Educação e impacto não são marketing.","Education and impact are not marketing."),
      d:tr("BlockUrb School e Instituto BlockUrb não são patrocínio nem RP. São verticais com P&L próprio porque cidade descentralizada exige novos profissionais e exige redistribuição. Quem não entrega isso, está apenas reembalando o velho modelo.","BlockUrb School and Instituto BlockUrb are not sponsorship or PR. They are verticals with their own P&L because a decentralized city demands new professionals and demands redistribution. Whoever doesn't deliver that is just repackaging the old model.")
    },
    {
      n:"05",
      t:tr("Holding existe para quebrar silos, não para concentrar poder.","A holding exists to break silos, not to concentrate power."),
      d:tr("BlockUrb OÜ é a casca jurídica que centraliza licenças e governança — para que cada vertical possa correr leve. A função da holding é proteger, não dominar. O dia em que isso virar problema, a estrutura muda.","BlockUrb OÜ is the legal shell that centralizes licenses and governance — so each vertical can run light. The holding's role is to protect, not dominate. The day that becomes a problem, the structure changes.")
    },
  ];
  return (
    <section className="section">
      <div className="shell">
        <SectionHead index="01" kicker={tr("CINCO TESES","FIVE THESES")} title={tr(["Por que a BlockUrb", {em:" existe."}],["Why BlockUrb", {em:" exists."}],["Por qué BlockUrb", {em:" existe."}],["Miks BlockUrb", {em:" eksisteerib."}],["BlockUrb", {em:" 为何存在。"}])}/>
        {blocks.map((b, i) => (
          <Reveal key={b.n} delay={i*60} style={{
            display:"grid", gridTemplateColumns:"120px 1fr",
            gap: 48, padding:"56px 0", borderTop:"1px solid var(--line)", alignItems:"start",
          }}>
            <span style={{fontFamily:"var(--font-display)", fontSize: 80, lineHeight: 0.85, color:"var(--accent-ink)"}}>{b.n}</span>
            <div>
              <h3 style={{fontFamily:"var(--font-display)", fontSize:"clamp(36px, 4.6vw, 64px)", lineHeight: 1.05, margin:"0 0 20px", letterSpacing:"-0.02em"}}>{b.t}</h3>
              <p style={{fontSize: 18, lineHeight: 1.55, color:"var(--ink-soft)", margin: 0, maxWidth: 760}}>{b.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function CommitmentsSection() {
  const { tr } = useT();
  return (
    <section className="section section--dark">
      <div className="shell">
        <SectionHead dark index="02" kicker={tr("OS COMPROMISSOS","THE COMMITMENTS")} title={tr(["O que não negociamos.", ""],["What we don't negotiate.", ""],["Lo que no negociamos.", ""],["Mida me ei kompromiteeri.", ""],["我们绝不妥协的事。", ""])} sub={tr("Princípios operacionais. Se algum deles for violado por uma decisão interna, a decisão volta atrás — não o princípio.","Operating principles. If any is violated by an internal decision, the decision is reversed — not the principle.")}/>
        <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap: 0, borderTop:"1px solid #28322C", borderLeft:"1px solid #28322C"}}>
          {[
            [tr("Governança auditável","Auditable governance"), tr("Toda emissão da Urblock é auditada por terceiros. Não há tokenização sem trilha pública.","Every Urblock issuance is audited by third parties. There is no tokenization without a public trail.")],
            [tr("Jurisdição clara","Clear jurisdiction"), tr("Operamos sob perímetro MiCA. Investidor sabe onde está, sob que regra, com que proteção.","We operate under the MiCA perimeter. The investor knows where they stand, under which rule, with what protection.")],
            [tr("Open API por padrão","Open API by default"), tr("Prefeituras e parceiros externos têm acesso programático ao que constroem conosco. Vendor lock-in é fragilidade.","City halls and external partners have programmatic access to what they build with us. Vendor lock-in is a weakness.")],
            [tr("Sem extrativismo de dados","No data extractivism"), tr("Dados de prefeitura pertencem à prefeitura. Dados de morador pertencem ao morador. Dados do mercado, ao mercado.","City-hall data belongs to the city hall. Resident data belongs to the resident. Market data, to the market.")],
            [tr("Transparência salarial e equity","Salary and equity transparency"), tr("Quadros internos sabem o que ganha o quadro ao lado e quanto valem em equity. Reduz política interna, aumenta foco.","Team members know what the person next to them earns and what they're worth in equity. It reduces internal politics and increases focus.")],
            [tr("Lastro real, sempre","Real backing, always"), tr("Cada token Urblock tem ativo identificável — lote, gleba, ação. Tokenização sem lastro é casino, e casino tem dono.","Every Urblock token has an identifiable asset — a lot, a plot, a stake. Tokenization without backing is a casino, and the casino always has an owner.")],
          ].map(([t, d], i) => (
            <Reveal key={i} delay={i*60} style={{
              padding:"32px 28px",
              borderRight:"1px solid #28322C",
              borderBottom:"1px solid #28322C",
              minHeight: 200,
            }}>
              <span className="mono" style={{color:"oklch(0.78 0.08 145)"}}>{`COMP · 0${i+1}`}</span>
              <h3 style={{fontFamily:"var(--font-display)", fontSize: 26, color:"#F4F1EA", margin:"14px 0 10px", lineHeight: 1.1}}>{t}</h3>
              <p style={{margin:0, color:"color-mix(in srgb, #F4F1EA 75%, transparent)", fontSize: 14, lineHeight: 1.55}}>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function NorthStarSection() {
  const { tr } = useT();
  return (
    <section className="section" style={{padding:"120px 0"}}>
      <div className="shell">
        <SectionHead index="03" kicker="NORTH STAR · 2030" title={tr(["Onde queremos chegar.", ""],["Where we want to go.", ""],["Adónde queremos llegar.", ""],["Kuhu me tahame jõuda.", ""],["我们想要抵达的地方。", ""])}/>
        <div style={{display:"grid", gridTemplateColumns:"180px 1fr", gap: 48}}>
          <div className="mono">{tr("VISÃO · 2030","VISION · 2030")}</div>
          <div>
            <p style={{fontFamily:"var(--font-display)", fontSize:"clamp(32px, 3.8vw, 52px)", lineHeight: 1.15, color:"var(--ink)", margin:"0 0 32px", letterSpacing:"-0.015em"}}>
              <SplitReveal text={tr([
                "Em 2030, a BlockUrb operará a primeira",
                "infraestrutura urbana 100% on-chain do mundo:",
                {em:"capital, terra, governança e cidadania"},
                "rodando em uma única camada protocolar."
              ],[
                "By 2030, BlockUrb will operate the world's first",
                "100% on-chain urban infrastructure:",
                {em:"capital, land, governance and citizenship"},
                "running on a single protocol layer."
              ],[
                "En 2030, BlockUrb operará la primera",
                "infraestructura urbana 100% on-chain del mundo:",
                {em:"capital, tierra, gobernanza y ciudadanía"},
                "funcionando en una única capa de protocolo."
              ],[
                "2030. aastaks käitab BlockUrb maailma esimest",
                "100% on-chain linnataristut:",
                {em:"kapital, maa, juhtimine ja kodakondsus"},
                "ühel protokollikihil."
              ],[
                "到 2030 年，BlockUrb 将运营全球首个",
                "100% 链上城市基础设施：",
                {em:"资本、土地、治理与公民身份"},
                "在同一协议层上运行。"
              ])}/>
            </p>
            <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid var(--line)"}}>
              {[
                ["50", tr("municípios em produção","municipalities in production")],
                ["€1.2B", tr("TVL tokenizado","tokenized TVL")],
                ["100K+", tr("holders ativos no DAO","active DAO holders")],
              ].map(([v, l], i) => (
                <div key={i} style={{padding:"32px 24px", borderRight: i < 2 ? "1px solid var(--line)" : "none"}}>
                  <div style={{fontFamily:"var(--font-display)", fontSize: 64, lineHeight: 0.95}}>{v}</div>
                  <div className="mono" style={{marginTop: 10, color:"var(--ink-muted)"}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SignSection() {
  const { tr } = useT();
  return (
    <section className="section" style={{padding:"100px 0 140px", borderTop:"1px solid var(--line)", background:"var(--paper)"}}>
      <div className="shell">
        <div style={{display:"grid", gridTemplateColumns:"auto 1fr auto", gap: 64, alignItems:"end"}}>
          <div className="mono">{tr("04 / ASSINATURA","04 / SIGNATURE")}</div>
          <div>
            <h2 className="display" style={{fontSize:"clamp(48px, 6vw, 88px)", margin:"0 0 24px"}}>
              {tr(<><em>Assinado por</em><br/>quem opera.</>,<><em>Signed by</em><br/>those who operate.</>,<><em>Firmado por</em><br/>quienes operan.</>,<><em>Allkirjastanud</em><br/>need, kes opereerivad.</>,<><em>由运营者</em><br/>署名。</>)}
            </h2>
            <p style={{maxWidth: 580, fontSize: 17, lineHeight: 1.55, color:"var(--ink-soft)", margin: 0}}>
              {tr("Este manifesto é revisado a cada ciclo trimestral pelo conselho da BlockUrb OÜ. Mudanças relevantes são versionadas com hash público e disponibilizadas no repositório de governança.","This manifesto is reviewed each quarter by the BlockUrb OÜ board. Material changes are versioned with a public hash and made available in the governance repository.")}
            </p>
          </div>
          <div style={{textAlign:"right"}}>
            <div style={{fontFamily:"var(--font-display)", fontSize: 40, lineHeight: 0.9, fontStyle:"italic"}}>BlockUrb OÜ</div>
            <div className="mono" style={{marginTop: 10, color:"var(--ink-muted)"}}>{tr("conselho · Tallinn","board · Tallinn")}</div>
            <div className="mono" style={{marginTop: 6, color:"var(--ink-muted)", fontSize: 10}}>hash 0x84c…91d2</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ManifestoPage() {
  return (
    <Page>
      <TopNav active="manifesto" />
      <main>
        <ManifestoHero />
        <ThesisBlocks />
        <CommitmentsSection />
        <NorthStarSection />
        <SignSection />
      </main>
      <Footer />
    </Page>
  );
}

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