// Capital — BLU Fund + Urblock (the financial engine of BlockUrb)
function CapitalHero() {
  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. 003/CAPITAL · REV 04.26</Reveal>
          <Reveal as="span" className="coord">BLU FUND · URBLOCK</Reveal>
        </div>
        <Reveal as="span" className="eyebrow" style={{display:"inline-flex", marginBottom: 32}}>{tr("O MOTOR FINANCEIRO","THE FINANCIAL ENGINE")}</Reveal>
        <h1 className="display" style={{fontSize:"clamp(56px, 8vw, 116px)", margin:"0 0 40px"}}>
          <SplitReveal text={tr(["Capital tokenizado", "para urbanização", {em:" descentralizada."}],["Tokenized capital", "for decentralized", {em:" urbanization."}],["Capital tokenizado", "para urbanización", {em:" descentralizada."}],["Tokeniseeritud kapital", "detsentraliseeritud", {em:" linnaarenduseks."}],["通证化资本", "用于去中心化", {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("O BLU Fund é o fundo privado tokenizado do ecossistema BlockUrb. Adquire ações de empreendimentos urbanos com deságio, distribui retorno via token BLU e — em sua próxima fase — evolui para um Fundo DAO descentralizado. A infraestrutura que torna isso possível é a Urblock, plataforma proprietária da holding.","BLU Fund is the tokenized private fund of the BlockUrb ecosystem. It buys stakes in urban developments at a discount, distributes returns via the BLU token and — in its next phase — evolves into a decentralized DAO fund. The infrastructure that makes this possible is Urblock, the holding's proprietary platform.")}
            </p>
          </Reveal>
          <Reveal delay={500}>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <Magnetic><a className="btn btn--ink" href="#thesis">{tr("Tese de investimento","Investment thesis")} <span className="arrow">→</span></a></Magnetic>
              <Magnetic><a className="btn btn--ghost" href="#urblock-tech">{tr("Urblock · tecnologia","Urblock · technology")}</a></Magnetic>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function StatRow() {
  const { tr } = useT();
  return (
    <section className="section" style={{paddingTop: 0}}>
      <div className="shell">
        <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 0, borderTop:"1px solid var(--line)"}}>
          {[
            [tr("TVL TOKENIZADO","TOKENIZED TVL"), "€54.2M", tr("+ €18.4M no último trimestre","+ €18.4M last quarter")],
            [tr("EMPREENDIMENTOS","DEVELOPMENTS"), "12", tr("ativos no portfólio","active in portfolio")],
            ["HOLDERS BLU", "3.8K", tr("em 14 jurisdições","across 14 jurisdictions")],
            [tr("DESÁGIO MÉDIO","AVG. DISCOUNT"), "23%", tr("no preço de aquisição","on acquisition price")],
          ].map(([k, v, sub], i) => (
            <Reveal key={i} delay={i*100} style={{
              padding:"32px 24px", borderRight: i < 3 ? "1px solid var(--line)" : "none",
            }}>
              <div className="mono" style={{marginBottom: 12}}>{k}</div>
              <div style={{fontFamily:"var(--font-display)", fontSize: 64, lineHeight: 0.95, letterSpacing:"-0.02em"}}>{v}</div>
              <div className="mono" style={{marginTop: 10, opacity: 0.7}}>{sub}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ThesisSection() {
  const { tr } = useT();
  return (
    <section className="section" id="thesis" style={{borderTop:"1px solid var(--line)"}}>
      <div className="shell">
        <SectionHead index="01" kicker={tr("TESE","THESIS")} title={tr(["Como o BLU Fund", {em:" gera retorno."}],["How BLU Fund", {em:" generates returns."}],["Cómo BLU Fund", {em:" genera retorno."}],["Kuidas BLU Fund", {em:" tootlust loob."}],["BLU Fund", {em:" 如何产生回报。"}])} />
        <div style={{display:"grid", gridTemplateColumns:"180px 1fr", gap: 48}}>
          <div className="mono">{tr("FLUXO · 04 ETAPAS","FLOW · 04 STEPS")}</div>
          <div>
            {[
              ["01", tr("Originação com deságio","Discounted origination"), tr("O Fund identifica empreendimentos urbanos em estágio inicial e adquire ações com deságio relevante (média de 23%) frente ao valor projetado pós-licenciamento.","The Fund identifies early-stage urban developments and acquires stakes at a meaningful discount (avg. 23%) to the projected post-permit value.")],
              ["02", tr("Tokenização via Urblock","Tokenization via Urblock"), tr("A posição adquirida é tokenizada na infraestrutura Urblock — sob as licenças regulatórias da BlockUrb OÜ — gerando frações líquidas representativas do ativo subjacente.","The acquired position is tokenized on the Urblock infrastructure — under BlockUrb OÜ's regulatory licenses — generating liquid fractions representing the underlying asset.")],
              ["03", tr("Execução e licenciamento","Execution and permitting"), tr("Durante o período de execução do empreendimento — terraplanagem, licenciamento, infraestrutura — o ativo se valoriza pela maturação operacional.","During the development's execution period — earthworks, permitting, infrastructure — the asset appreciates through operational maturation.")],
              ["04", tr("Revenda ao consórcio","Resale to the consortium"), tr("Concluídas as etapas críticas, o Fund revende a posição para consórcios de urbanizadoras pelo valor de mercado. A diferença é distribuída aos holders de BLU, líquida de fees do fundo.","Once critical milestones are complete, the Fund resells the position to developer consortiums at market value. The spread is distributed to BLU holders, net of fund fees.")],
            ].map(([n, t, d], i) => (
              <Reveal key={n} delay={i*100} style={{
                display:"grid", gridTemplateColumns:"80px 1fr", gap: 24,
                padding:"28px 0", borderTop:"1px solid var(--line)",
              }}>
                <span className="mono" style={{paddingTop: 6, color:"var(--accent-ink)"}}>{n}</span>
                <div>
                  <h3 style={{fontFamily:"var(--font-display)", fontSize: 32, margin:"0 0 10px", lineHeight: 1.1}}>{t}</h3>
                  <p style={{fontSize: 15, lineHeight: 1.6, color:"var(--ink-soft)", margin: 0, maxWidth: 760}}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function PhaseSection() {
  const { tr } = useT();
  return (
    <section className="section section--dark">
      <div className="shell">
        <SectionHead dark index="02" kicker="ROADMAP" title={tr(["De fundo privado", {em:" a Fundo DAO."}],["From private fund", {em:" to DAO fund."}],["De fondo privado", {em:" a Fondo DAO."}],["Erafondist", {em:" DAO-fondiks."}],["从私募基金", {em:" 到 DAO 基金。"}])} sub={tr("A trajetória do BLU Fund é deliberadamente faseada. Começa centralizado, com governança da holding — e migra, à medida que o ecossistema amadurece, para uma estrutura totalmente descentralizada.","BLU Fund's trajectory is deliberately phased. It starts centralized, governed by the holding — and migrates, as the ecosystem matures, toward a fully decentralized structure.")}/>
        <div style={{display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap: 0, borderTop:"1px solid #28322C"}}>
          {[
            {phase:tr("FASE 01 · ATUAL","PHASE 01 · CURRENT"), t:tr("BLU Fund privado","Private BLU Fund"), d:tr("Fundo privado tokenizado, com governança centralizada na BlockUrb OÜ. Acesso restrito a investidores qualificados em jurisdições selecionadas. Distribuição automática de retornos via token BLU.","Tokenized private fund, with governance centralized in BlockUrb OÜ. Access restricted to qualified investors in selected jurisdictions. Automatic return distribution via the BLU token."), state:tr("em operação","operational")},
            {phase:tr("FASE 02 · 2026 →","PHASE 02 · 2026 →"), t:tr("Fund DAO descentralizado","Decentralized DAO fund"), d:tr("Migração da governança para os holders. Seleção de empreendimentos via votação on-chain, parâmetros de risco programáveis, abertura ao varejo internacional respeitando os perímetros regulatórios.","Governance migrates to the holders. Development selection via on-chain voting, programmable risk parameters, opening to international retail while respecting regulatory perimeters."), state:tr("em estruturação","being structured")},
          ].map((p, i) => (
            <Reveal key={i} delay={i*200} style={{
              padding:"40px 36px",
              borderRight: i === 0 ? "1px solid #28322C" : "none",
              background: i === 1 ? "color-mix(in srgb, oklch(0.78 0.08 145) 8%, transparent)" : undefined,
            }}>
              <span className="mono" style={{color: i === 1 ? "oklch(0.78 0.08 145)" : "color-mix(in srgb, #F4F1EA 60%, transparent)"}}>{p.phase}</span>
              <h3 style={{fontFamily:"var(--font-display)", fontSize: 44, color:"#F4F1EA", margin:"16px 0 16px", lineHeight: 1}}>{p.t}</h3>
              <p style={{margin:0, color:"color-mix(in srgb, #F4F1EA 75%, transparent)", fontSize: 15, lineHeight: 1.6, marginBottom: 28}}>{p.d}</p>
              <div className="mono" style={{paddingTop: 16, borderTop:"1px solid #28322C", color: i === 1 ? "oklch(0.78 0.08 145)" : "color-mix(in srgb, #F4F1EA 60%, transparent)"}}>{p.state}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function UrblockTechSection() {
  const { tr } = useT();
  return (
    <section className="section" id="urblock-tech" style={{borderTop:"1px solid var(--line)"}}>
      <div className="shell">
        <div style={{display:"grid", gridTemplateColumns:"180px 1fr", gap: 48, marginBottom: 56}}>
          <div className="mono">VERT · 02</div>
          <div>
            <Reveal style={{display:"flex", alignItems:"center", gap: 16, marginBottom: 24}}>
              <span style={{display:"inline-flex", padding: 14, border:"1px solid var(--line)", borderRadius: 6}}><VerticalGlyph kind="urblock" size={32}/></span>
              <span className="mono" style={{color:"var(--accent-ink)"}}>{tr("INFRAESTRUTURA","INFRASTRUCTURE")}</span>
            </Reveal>
            <h2 className="display" style={{fontSize:"clamp(48px, 6vw, 88px)", margin:"0 0 20px"}}>
              <SplitReveal text={tr(["Urblock — onde os ativos", {em:" viram software."}],["Urblock — where assets", {em:" become software."}],["Urblock — donde los activos", {em:" se vuelven software."}],["Urblock — kus varadest", {em:" saab tarkvara."}],["Urblock —— 资产", {em:" 在此化为软件。"}])}/>
            </h2>
            <Reveal delay={200}>
              <p style={{fontSize: 19, lineHeight: 1.55, color:"var(--ink-soft)", maxWidth: 760, margin: 0}}>
                {tr("A Urblock é a plataforma proprietária de tokenização da BlockUrb. Opera sob as licenças regulatórias detidas pela BlockUrb OÜ em Tallinn — dando ao ecossistema acesso ao perímetro regulatório europeu (MiCA) e capacidade de emitir, custodiar e distribuir ativos digitais lastreados em real estate.","Urblock is BlockUrb's proprietary tokenization platform. It operates under the regulatory licenses held by BlockUrb OÜ in Tallinn — giving the ecosystem access to the European regulatory perimeter (MiCA) and the ability to issue, custody and distribute real-estate-backed digital assets.")}
              </p>
            </Reveal>
          </div>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid var(--line)", borderLeft:"1px solid var(--line)"}}>
          {[
            [tr("Emissão","Issuance"), tr("Pipeline para originar tokens lastreados em ações de empreendimentos, frações de gleba, RRTs e direitos urbanísticos.","Pipeline to originate tokens backed by development stakes, land fractions, RRTs and urban-development rights.")],
            [tr("Custódia","Custody"), tr("Custódia institucional dos ativos físicos e digitais, com auditoria contínua e prova de reservas pública.","Institutional custody of physical and digital assets, with continuous auditing and public proof of reserves.")],
            [tr("Distribuição","Distribution"), tr("Roteamento on-chain para o BLU Fund e holders. Smart contracts gerem repasses, royalties e eventos de governança.","On-chain routing to BLU Fund and holders. Smart contracts manage transfers, royalties and governance events.")],
            ["Compliance", tr("KYC/KYB integrado, perímetro MiCA-compatível, segregação por jurisdição, relatórios automáticos para reguladores.","Integrated KYC/KYB, MiCA-compatible perimeter, jurisdiction segregation, automatic reporting to regulators.")],
            [tr("Identidade","Identity"), tr("Carteira BlockUrb unificada — uma identidade que conecta School, Studios, Franchise e BLU Fund com permissões granulares.","Unified BlockUrb wallet — one identity connecting School, Studios, Franchise and BLU Fund with granular permissions.")],
            ["Open API", tr("APIs públicas para parceiros externos — urbanizadoras, bancos, prefeituras, fundos — integrarem-se à infraestrutura.","Public APIs for external partners — developers, banks, city halls, funds — to integrate with the infrastructure.")],
          ].map(([titulo, d], i) => (
            <Reveal key={i} delay={i*60} style={{
              padding:"28px 24px",
              borderRight:"1px solid var(--line)",
              borderBottom:"1px solid var(--line)",
              minHeight: 200,
            }}>
              <span className="mono" style={{color:"var(--ink-faint)"}}>{`MOD · 0${i+1}`}</span>
              <h3 style={{fontFamily:"var(--font-display)", fontSize: 28, margin:"14px 0 10px", lineHeight: 1.1}}>{titulo}</h3>
              <p style={{margin:0, fontSize: 13, lineHeight: 1.55, color:"var(--ink-soft)"}}>{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ComplianceSection() {
  const { tr } = useT();
  return (
    <section className="section">
      <div className="shell">
        <SectionHead index="04" kicker={tr("COMPLIANCE & RISCO","COMPLIANCE & RISK")} title={tr(["Estônia, MiCA", {em:" e perímetro regulatório."}],["Estonia, MiCA", {em:" and the regulatory perimeter."}],["Estonia, MiCA", {em:" y el perímetro regulatorio."}],["Eesti, MiCA", {em:" ja regulatiivne perimeeter."}],["爱沙尼亚、MiCA", {em:" 与监管框架。"}])}/>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 64, alignItems:"start"}}>
          <Reveal>
            <p style={{fontSize: 17, lineHeight: 1.6, color:"var(--ink-soft)", margin: 0}}>
              {tr(
                <>A escolha pela Estônia como sede da BlockUrb OÜ não é casual. O país opera dentro do perímetro MiCA da União Europeia — o regime regulatório mais maduro do mundo para ativos cripto e tokenizados — com autoridade dedicada (FIU/MTA), regras claras de licenciamento e ambiente operacional digital nativo.
              <br/><br/>
              Toda a tokenização de ativos do BLU Fund é emitida pela Urblock sob as licenças da holding. Investidores e parceiros operam, portanto, sob jurisdição europeia, com acesso ao mercado único e proteção institucional do bloco.</>,
                <>Choosing Estonia as BlockUrb OÜ's headquarters is no accident. The country operates within the European Union's MiCA perimeter — the world's most mature regulatory regime for crypto and tokenized assets — with a dedicated authority (FIU/MTA), clear licensing rules and a digital-native operating environment.
              <br/><br/>
              All BLU Fund asset tokenization is issued by Urblock under the holding's licenses. Investors and partners therefore operate under European jurisdiction, with access to the single market and the bloc's institutional protection.</>,
                <>Elegir Estonia como sede de BlockUrb OÜ no es casual. El país opera dentro del perímetro MiCA de la Unión Europea — el régimen regulatorio más maduro del mundo para activos cripto y tokenizados — con autoridad dedicada (FIU/MTA), reglas claras de licencias y un entorno operativo digital nativo.
              <br/><br/>
              Toda la tokenización de activos de BLU Fund es emitida por Urblock bajo las licencias de la holding. Inversores y socios operan, por tanto, bajo jurisdicción europea, con acceso al mercado único y la protección institucional del bloque.</>,
                <>Eesti valimine BlockUrb OÜ peakorteriks ei ole juhuslik. Riik tegutseb Euroopa Liidu MiCA perimeetris — maailma kõige küpsema krüpto- ja tokeniseeritud varade regulatiivse režiimi — koos pühendunud asutusega (FIU/MTA), selgete litsentsireeglite ja digi-natiivse töökeskkonnaga.
              <br/><br/>
              Kogu BLU Fundi varade tokeniseerimise emiteerib Urblock valdusettevõtte litsentside all. Investorid ja partnerid tegutsevad seega Euroopa jurisdiktsioonis, omades juurdepääsu ühisturule ja bloki institutsionaalsele kaitsele.</>,
                <>选择爱沙尼亚作为 BlockUrb OÜ 的总部并非偶然。该国处于欧盟 MiCA 框架之内——这是全球针对加密与通证化资产最成熟的监管制度——设有专责机构（FIU/MTA）、清晰的许可规则以及数字原生的运营环境。
              <br/><br/>
              BLU Fund 的全部资产通证化均由 Urblock 在控股公司许可下发行。因此，投资者与合作伙伴在欧洲司法管辖下运营，可进入单一市场并获得欧盟的机构性保护。</>
              )}
            </p>
          </Reveal>
          <div style={{
            border:"1px solid var(--line)", padding: 32,
            background:"var(--paper)",
          }}>
            <div className="mono" style={{marginBottom: 18, color:"var(--accent-ink)"}}>{tr("QUADRO REGULATÓRIO","REGULATORY FRAMEWORK")}</div>
            {[
              [tr("Jurisdição da holding","Holding jurisdiction"), tr("Estônia · UE","Estonia · EU")],
              [tr("Regime","Regime"), "MiCA (Markets in Crypto-Assets)"],
              [tr("Reguladores","Regulators"), "FIU · MTA · Bank of Estonia"],
              [tr("Estrutura societária","Corporate structure"), tr("OÜ (sociedade limitada)","OÜ (limited company)")],
              [tr("Licenças","Licenses"), tr("VASP · custódia · emissão","VASP · custody · issuance")],
              [tr("Auditoria","Audit"), tr("Big Four (em contratação)","Big Four (being engaged)")],
            ].map(([k, v], i) => (
              <div key={i} style={{display:"flex", justifyContent:"space-between", padding:"12px 0", borderTop: i===0?"none":"1px solid var(--line)", fontSize: 13}}>
                <span className="mono" style={{color:"var(--ink-muted)"}}>{k}</span>
                <span style={{fontFamily:"var(--font-mono)"}}>{v}</span>
              </div>
            ))}
            <div style={{marginTop: 20, padding:"14px 0 0", borderTop:"1px solid var(--line)", fontSize: 12, color:"var(--ink-muted)", lineHeight: 1.5}}>
              {tr("Este material não constitui oferta pública de valores mobiliários. Acesso ao BLU Fund está sujeito a critérios de qualificação e jurisdição.","This material does not constitute a public offering of securities. Access to BLU Fund is subject to qualification and jurisdiction criteria.")}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CapitalCTA() {
  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 / ACESSO","05 / ACCESS")}</div>
          <div>
            <h2 className="display" style={{fontSize:"clamp(56px, 7vw, 104px)", margin:"0 0 32px"}}>
              {tr(<>Pronto para entrar<br/>na <em>tese</em>?</>,<>Ready to enter<br/>the <em>thesis</em>?</>,<>¿Listo para entrar<br/>en la <em>tesis</em>?</>,<>Valmis sisenema<br/><em>teesi</em>?</>,<>准备好进入<br/>这套<em>投资逻辑</em>了吗？</>)}
            </h2>
            <p style={{maxWidth: 580, fontSize: 18, lineHeight: 1.55, color:"var(--ink-soft)", marginBottom: 32}}>
              {tr("Investidores qualificados, family offices e parceiros estratégicos: agende uma conversa com a equipe do BLU Fund. Para urbanizadoras e originadores de deal flow, a porta de entrada é a Urblock.","Qualified investors, family offices and strategic partners: schedule a conversation with the BLU Fund team. For developers and deal-flow originators, the entry point is Urblock.")}
            </p>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <a className="btn btn--ink" href="#">{tr("Falar com o BLU Fund","Talk to BLU Fund")} <span className="arrow">→</span></a>
              <a className="btn btn--ghost" href="#urblock-tech">{tr("Originar via Urblock","Originate via Urblock")}</a>
              <a className="btn btn--ghost" href="manifesto.html">{tr("Ler o manifesto","Read the manifesto")}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CapitalPage() {
  return (
    <Page>
      <TopNav active="capital" />
      <main>
        <CapitalHero />
        <StatRow />
        <ThesisSection />
        <PhaseSection />
        <UrblockTechSection />
        <ComplianceSection />
        <CapitalCTA />
      </main>
      <Footer />
    </Page>
  );
}

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