// Home — BlockUrb OÜ holding manifesto, 5 pillars, ecosystem map
const { useEffect: useEffectH, useState: useStateH } = React;

// Shared data: each vertical is a building in the iso-diagram + a row in the list
const VERTICALS = [
  {id:"01", anchor:"fund",      kind:"fund",      name:"BLU Fund",              tag:"financeiro",     x:-228, h:215},
  {id:"02", anchor:"urblock",   kind:"urblock",   name:"Urblock",               tag:"infraestrutura", x:-152, h:175},
  {id:"03", anchor:"smartcity", kind:"smartcity", name:"BlockUrb Smart City",   tag:"b2g",            x:-76,  h:135},
  {id:"04", anchor:"studios",   kind:"studios",   name:"BluArq.AI",           tag:"criação",       x:0,    h:225},
  {id:"05", anchor:"school",    kind:"school",    name:"BlockUrb School",       tag:"educação",      x:76,   h:160},
  {id:"06", anchor:"green",     kind:"green",     name:"Instituto BlockUrb", tag:"impacto",        x:152,  h:96},
  {id:"07", anchor:"franchise", kind:"franchise", name:"BlockUrb Franchise", tag:"operacional",    x:228,  h:190},
];

// EN labels for the vertical tags (used in the hero diagram + list)
const TAG_EN = {
  "financeiro":"financial", "infraestrutura":"infrastructure", "b2g":"b2g",
  "criação":"creation", "educação":"education", "impacto":"impact", "operacional":"operational",
};
const tagLabel = (tr, tag) => tr(tag, TAG_EN[tag] || tag);

function IsoBuilding({v, active, dimmed, onHover, onLeave, onClick}) {
  const w = 32, d = 28;
  const lift = active ? -10 : 0;
  const top_y = -v.h + lift;
  const base_y = lift;
  const x = v.x;
  const top = `M ${x} ${top_y} L ${x+w} ${top_y-d/2} L ${x+w*2} ${top_y} L ${x+w} ${top_y+d/2} Z`;
  const left = `M ${x} ${top_y} L ${x+w} ${top_y+d/2} L ${x+w} ${base_y+d/2} L ${x} ${base_y} Z`;
  const right = `M ${x+w} ${top_y+d/2} L ${x+w*2} ${top_y} L ${x+w*2} ${base_y} L ${x+w} ${base_y+d/2} Z`;

  const fill = active ? "var(--accent)" : "var(--bg-elev)";
  const topFill = active ? "var(--accent-soft)" : "var(--bg-elev)";
  const stroke = active ? "var(--accent-ink)" : "currentColor";
  const opacityG = dimmed ? 0.28 : 1;

  return (
    <g
      style={{cursor:"pointer", transition:"opacity 0.35s ease"}}
      opacity={opacityG}
      onMouseEnter={onHover}
      onMouseLeave={onLeave}
      onClick={onClick}
    >
      {/* invisible pad for easier hover hit area */}
      <rect x={x-2} y={top_y-d/2-2} width={w*2+4} height={v.h+d+4} fill="transparent"/>
      <g style={{transition:"transform 0.4s cubic-bezier(.2,.7,.2,1)"}}>
        <path d={left}  fill={fill}    stroke={stroke} strokeWidth={active?"1.25":"1"} opacity={active?1:0.85}/>
        <path d={right} fill={fill}    stroke={stroke} strokeWidth={active?"1.25":"1"} opacity={active?0.85:0.6}/>
        <path d={top}   fill={topFill} stroke={stroke} strokeWidth={active?"1.25":"1"}/>
        {/* number label on top face */}
        <text x={x+w} y={top_y+3} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={active?"var(--accent-ink)":"currentColor"} opacity={active?0.9:0.45}>{v.id}</text>
      </g>
    </g>
  );
}

function EcosystemDiagram({activeId, setActiveId}) {
  const { tr } = useT();
  const baseY = 380;
  const groundActive = activeId === "00";
  return (
    <svg viewBox="0 0 600 600" style={{width:"100%", height:"auto", display:"block"}} aria-label={tr("Ecossistema BlockUrb","BlockUrb ecosystem")}>
      <defs>
        <pattern id="gridHero" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.15"/>
        </pattern>
        <radialGradient id="heroPulse" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--accent)" stopOpacity="0"/>
          <stop offset="80%" stopColor="var(--accent)" stopOpacity="0.35"/>
          <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <rect width="600" height="600" fill="url(#gridHero)"/>
      {[[20,20],[580,20],[20,580],[580,580]].map(([x,y],i)=>(
        <g key={i} stroke="currentColor" strokeWidth="1" opacity="0.5">
          <line x1={x-8} y1={y} x2={x+8} y2={y}/><line x1={x} y1={y-8} x2={x} y2={y+8}/>
        </g>
      ))}

      {/* Ground plane = BlockUrb OÜ holding (00) */}
      <g
        style={{cursor:"pointer", transition:"opacity 0.35s ease"}}
        onMouseEnter={()=>setActiveId("00")}
        onMouseLeave={()=>setActiveId(null)}
        onClick={()=>{ window.location.href = "manifesto.html"; }}
      >
        <line x1="50" y1={baseY+22} x2="550" y2={baseY+22} stroke={groundActive?"var(--accent-ink)":"currentColor"} strokeWidth={groundActive?"1.5":"1"} opacity={groundActive?1:0.5}/>
        <line x1="50" y1={baseY+22} x2="550" y2={baseY+22} stroke="var(--accent)" strokeWidth="1" opacity="0" strokeDasharray="4 6">
          <animate attributeName="stroke-dashoffset" from="0" to="-200" dur="6s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values={groundActive?"0.6;0.6":"0;0"} dur="0.3s" fill="freeze"/>
        </line>
        <text x="50" y={baseY+38} fontFamily="JetBrains Mono, monospace" fontSize="9" fill={groundActive?"var(--accent-ink)":"currentColor"} opacity={groundActive?0.9:0.45}>
          00 · BLOCKURB OÜ · GROUND PLANE · TALLINN
        </text>
      </g>

      {/* Buildings */}
      <g transform={`translate(300 ${baseY})`}>
        {/* radar pulse from center */}
        <circle cx="0" cy="0" r="20" fill="url(#heroPulse)">
          <animate attributeName="r" values="20;240;20" dur="6s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.7;0;0.7" dur="6s" repeatCount="indefinite"/>
        </circle>
        {VERTICALS.map((v, i) => (
          <IsoBuilding
            key={v.id}
            v={v}
            active={activeId === v.id}
            dimmed={activeId && activeId !== v.id && activeId !== "00"}
            onHover={()=>setActiveId(v.id)}
            onLeave={()=>setActiveId(null)}
            onClick={()=>{ window.location.href = `platform.html#${v.anchor}`; }}
          />
        ))}
        {/* signal node on top of currently active building */}
        {activeId && activeId !== "00" && (() => {
          const v = VERTICALS.find(x=>x.id===activeId);
          if (!v) return null;
          const cx = v.x + 32; // x + w
          const cy = -v.h - 10; // top - lift
          return (
            <g>
              <circle cx={cx} cy={cy} r="3" fill="var(--accent-ink)"/>
              <circle cx={cx} cy={cy} r="3" fill="none" stroke="var(--accent-ink)" strokeWidth="1">
                <animate attributeName="r" values="3;14;3" dur="1.6s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.8;0;0.8" dur="1.6s" repeatCount="indefinite"/>
              </circle>
            </g>
          );
        })()}
      </g>

      {/* Coord labels */}
      <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill="currentColor" opacity="0.6">
        <text x="40" y="40">SECTOR-A · 04</text>
        <text x="560" y="40" textAnchor="end">{tr("{ 7/7 ATIVO }","{ 7/7 ACTIVE }")}</text>
        <text x="40" y="575">59.4370°N · 24.7536°E</text>
        <text x="560" y="575" textAnchor="end">SCALE 1:2400</text>
      </g>

      {/* Active building callout */}
      {activeId && activeId !== "00" && (() => {
        const v = VERTICALS.find(x=>x.id===activeId);
        if (!v) return null;
        const cx = 300 + v.x + 32;          // ápice (centro horizontal) da barra ativa
        const cy = baseY - v.h - 10;        // topo da barra
        // Rótulo centralizado SOBRE a barra. Clampamos x pra que nomes longos
        // (ex.: "BlockUrb Smart City") não vazem das bordas do viewBox de 600.
        const margin = 96;
        const labelX = Math.max(margin, Math.min(600 - margin, cx));
        const labelY = Math.max(64, cy - 44); // bloco de texto acima da barra
        return (
          <g style={{pointerEvents:"none"}}>
            {/* conector sutil da barra até o rótulo (fica diagonal quando clampado) */}
            <line x1={cx} y1={cy} x2={labelX} y2={labelY + 34} stroke="var(--accent-ink)" strokeWidth="0.75" opacity="0.7"/>
            {/* halo via paint-order: stroke da cor de fundo desenhado atrás do texto */}
            <g
              fill="var(--accent-ink)"
              textAnchor="middle"
              transform={`translate(${labelX} ${labelY})`}
              style={{paintOrder:"stroke", stroke:"var(--bg)", strokeWidth:4, strokeLinejoin:"round"}}
            >
              <text x="0" y="0" fontFamily="JetBrains Mono, monospace" fontSize="9">{`VERT-${v.id}`}</text>
              <text x="0" y="14" fontSize="13" fill="currentColor" opacity="0.95" fontFamily="Instrument Serif, serif" fontStyle="italic">{v.name}</text>
              <text x="0" y="28" fontFamily="JetBrains Mono, monospace" fontSize="9" opacity="0.7">{tagLabel(tr, v.tag).toUpperCase()}</text>
            </g>
          </g>
        );
      })()}
    </svg>
  );
}

function VerticaisList({activeId, setActiveId}) {
  const { tr } = useT();
  const items = [...VERTICALS].reverse(); // 08 at top
  return (
    <ol style={{listStyle:"none", padding:0, margin:0, fontFamily:"var(--font-mono)", fontSize: 12}}>
      {items.map((v, i) => {
        const isActive = activeId === v.id;
        return (
          <li
            key={v.id}
            onMouseEnter={()=>setActiveId(v.id)}
            onMouseLeave={()=>setActiveId(null)}
            onClick={()=>{ window.location.href = `platform.html#${v.anchor}`; }}
            style={{
              position:"relative",
              padding:"12px 0 12px 14px",
              borderTop:"1px solid var(--line)",
              display:"flex", justifyContent:"space-between", alignItems:"center", gap: 12,
              cursor:"pointer",
              color: isActive ? "var(--accent-ink)" : "var(--ink)",
              transition:"color 0.3s ease, padding-left 0.3s ease",
              paddingLeft: isActive ? 22 : 14,
            }}
          >
            {/* active indicator bar */}
            <span style={{
              position:"absolute", left: 0, top: "50%",
              width: isActive ? 10 : 0,
              height: 2,
              background: "var(--accent-ink)",
              transform:"translateY(-50%)",
              transition:"width 0.3s cubic-bezier(.2,.7,.2,1)",
            }}/>
            <span style={{display:"flex", alignItems:"center", gap: 12, minWidth: 0}}>
              <span style={{opacity: 0.55, fontVariantNumeric:"tabular-nums"}}>{v.id}</span>
              <span style={{
                display:"inline-flex", color: isActive ? "var(--accent-ink)" : "var(--ink-muted)",
                transition:"color 0.3s ease",
              }}>
                <VerticalGlyph kind={v.kind} size={14}/>
              </span>
              <span style={{whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{v.name}</span>
            </span>
            <span className="mono" style={{
              fontSize: 10, opacity: isActive ? 0.9 : 0.45,
              color: isActive ? "var(--accent-ink)" : "currentColor",
              transition:"opacity 0.3s ease",
              transform: isActive ? "translateX(0)" : "translateX(6px)",
              transformOrigin:"right",
            }}>
              {tagLabel(tr, v.tag)}{isActive && " ↗"}
            </span>
          </li>
        );
      })}
      {/* Holding base row */}
      <li
        onMouseEnter={()=>setActiveId("00")}
        onMouseLeave={()=>setActiveId(null)}
        onClick={()=>{ window.location.href = "manifesto.html"; }}
        style={{
          padding:"14px 0 10px",
          borderTop:"2px solid var(--ink)",
          marginTop: 10,
          display:"flex", justifyContent:"space-between", alignItems:"center",
          cursor:"pointer",
          color: activeId === "00" ? "var(--accent-ink)" : "var(--ink)",
          fontWeight: 600,
          transition:"color 0.3s ease",
        }}
      >
        <span style={{display:"flex", alignItems:"center", gap: 12}}>
          <span style={{opacity: 0.7}}>00</span>
          <span>BlockUrb OÜ <span style={{fontWeight:400, opacity: 0.55, marginLeft: 4}}>· holding</span></span>
        </span>
        <span className="mono" style={{fontSize: 10, opacity: 0.6}}>tallinn ↗</span>
      </li>
    </ol>
  );
}

function HeroPanel() {
  const { t, tr } = useT();
  const [activeId, setActiveId] = useStateH(null);
  return (
    <section style={{position:"relative", overflow:"hidden"}}>
      <div className="shell" style={{padding: "80px var(--gutter) 0"}}>
        <div style={{display:"flex", justifyContent:"space-between", marginBottom: 48}}>
          <Reveal as="span" className="coord">N 59°26′13″ · E 24°45′13″ · TALLINN</Reveal>
          <Reveal as="span" className="coord" delay={100}>DOC. 001/HOLDING · REV 04.26</Reveal>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 64, alignItems:"end"}}>
          <div>
            <Reveal as="span" className="eyebrow" style={{marginBottom: 28, display:"inline-flex"}}>{t.hero_eyebrow}</Reveal>
            <h1 className="display" style={{fontSize:"clamp(56px, 8.5vw, 124px)", margin:"24px 0 32px"}}>
              <SplitReveal text={t.hero_title} lineDelay={120}/>
            </h1>
          </div>
          <Reveal delay={400} style={{paddingBottom: 24}}>
            <p style={{fontSize: 18, lineHeight: 1.55, maxWidth: 520, color:"var(--ink-soft)", margin:"0 0 32px"}}>{t.hero_p}</p>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <Magnetic><a className="btn btn--ink" href="platform.html">{t.explore} <span className="arrow">→</span></a></Magnetic>
              <Magnetic><a className="btn btn--ghost" href="manifesto.html">{t.read_manifesto}</a></Magnetic>
            </div>
          </Reveal>
        </div>

        <div style={{marginTop: 80, display:"grid", gridTemplateColumns:"260px 1fr 320px", gap: 32, borderTop:"1px solid var(--line)", paddingTop: 40}}>
          <Reveal>
            <div className="mono" style={{marginBottom: 18}}>BLOCK + URB</div>
            <p style={{fontFamily:"var(--font-mono)", fontSize: 12, lineHeight: 1.7, color:"var(--ink-soft)", margin:0}}>
              <strong style={{color:"var(--ink)"}}>BLOCK</strong> {tr("de Blockchain.","for Blockchain.")}<br/>
              <strong style={{color:"var(--ink)"}}>URB</strong> {tr("de Urbanização.","for Urbanization.")}<br/><br/>
              {tr(
                "O nome traduz a essência do ecossistema: a convergência da infraestrutura digital de transparência com a engenharia da cidade.",
                "The name captures the essence of the ecosystem: the convergence of a digital transparency layer with the engineering of the city."
              )}
            </p>
            <div style={{marginTop: 28, paddingTop: 20, borderTop:"1px solid var(--line)"}}>
              <span className="tag"><span className="live-ring"></span>{t.live_pilot}</span>
            </div>
            <div style={{marginTop: 24, fontFamily:"var(--font-mono)", fontSize: 11, color:"var(--ink-muted)", lineHeight: 1.6}}>
              {tr("↳ passe o mouse pelas ","↳ hover the ")}<span style={{color:"var(--accent-ink)"}}>{tr("verticais","verticals")}</span>{tr(" ao lado para ver cada empresa do ecossistema. Clique para abrir."," on the side to see each company in the ecosystem. Click to open.")}
            </div>
          </Reveal>

          <Parallax speed={0.04} style={{position:"relative"}}>
            <EcosystemDiagram activeId={activeId} setActiveId={setActiveId} />
          </Parallax>

          <Reveal delay={200}>
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 18}}>
              <span className="mono">{t.stack}</span>
              <span className="mono" style={{fontSize: 10, color:"var(--ink-muted)"}}>{tr("7 · ativas","7 · active")}</span>
            </div>
            <VerticaisList activeId={activeId} setActiveId={setActiveId} />
          </Reveal>
        </div>
      </div>

      <div style={{marginTop: 80}}>
        <Ticker items={[
          {label:"BLU FUND", value:"€54.2M", delta:tr("tokenizado","tokenized")},
          {label:"URBLOCK", value:tr("licenciado · MiCA","licensed · MiCA")},
          {label:"SMART CITY", value:tr("3 prefeituras","3 city halls")},
          {label:"BLUARQ.AI", value:tr("24 projetos · RRT","24 projects · RRT")},
          {label:"SCHOOL", value:tr("1.420 alunos","1,420 students")},
          {label:"INSTITUTO BLOCKURB", value:tr("em piloto","in pilot")},
          {label:"FRANCHISE", value:tr("PY → BR · expansão","PY → BR · expansion")},
          {label:"PARCELS", value:"91.402"},
        ]}/>
      </div>
    </section>
  );
}

function PilaresPanel() {
  const { tr } = useT();
  const pilares = [
    {n:"01", t:tr("Urbanização descentralizada","Decentralized urbanization"), d:tr("Execução e financiamento de empreendimentos urbanos com governança distribuída e capital aberto via tokenização.","Execution and financing of urban developments with distributed governance and open capital via tokenization.")},
    {n:"02", t:tr("Smart City","Smart City"), d:tr("Soluções tecnológicas para modernizar a gestão urbana e municipal — digitalização, IA e monitoramento.","Technology to modernize urban and municipal management — digitization, AI and monitoring.")},
    {n:"03", t:tr("IA generativa","Generative AI"), d:tr("Automação criativa e técnica aplicada a projetos, mapas, marketing e análise urbana.","Creative and technical automation applied to projects, maps, marketing and urban analysis.")},
    {n:"04", t:tr("Blockchain","Blockchain"), d:tr("Infraestrutura de transparência, rastreabilidade e governança para ativos e processos urbanos.","Transparency, traceability and governance infrastructure for urban assets and processes.")},
    {n:"05", t:tr("Tokenização","Tokenization"), d:tr("Conversão de ativos reais de terra e empreendimentos em ativos digitais líquidos e fracionáveis.","Conversion of real land and development assets into liquid, fractional digital assets.")},
  ];
  return (
    <section className="section" id="pilares">
      <div className="shell">
        <SectionHead index="01" kicker={tr("OS 5 PILARES","THE 5 PILLARS")} title={tr(["Cinco frentes,", {em:" um ecossistema."}],["Five fronts,", {em:" one ecosystem."}],["Cinco frentes,", {em:" un ecosistema."}],["Viis suunda,", {em:" üks ökosüsteem."}],["五大方向，", {em:" 一个生态系统。"}])} sub={tr("O ecossistema BlockUrb opera na convergência de cinco frentes tecnológicas e operacionais. Cada uma é um eixo independente — juntas formam a arquitetura inédita do grupo.","The BlockUrb ecosystem operates at the convergence of five technological and operational fronts. Each is an independent axis — together they form the group's unprecedented architecture.")} />
        <div style={{display:"grid", gridTemplateColumns:"repeat(5, 1fr)", gap: 0, borderLeft:"1px solid var(--line)", borderTop:"1px solid var(--line)"}}>
          {pilares.map((p, i) => {
            const isHighlight = false;
            return (
            <Reveal key={p.n} delay={i*80} className="pilar-card" style={{
              borderRight:"1px solid var(--line)", borderBottom:"1px solid var(--line)",
              padding: 28, minHeight: 320,
              background: "var(--paper)",
              color: "var(--ink)",
              display:"flex", flexDirection:"column", justifyContent:"space-between",
              cursor:"default",
              transition:"background 0.45s cubic-bezier(.2,.7,.2,1), color 0.45s cubic-bezier(.2,.7,.2,1)",
            }}
            onMouseEnter={(e)=>{ e.currentTarget.style.background="var(--accent-ink)"; e.currentTarget.style.color="#F4F1EA"; }}
            onMouseLeave={(e)=>{ e.currentTarget.style.background="var(--paper)"; e.currentTarget.style.color="var(--ink)"; }}
            >
              <span className="mono pilar-kicker" style={{color:"var(--ink-faint)", transition:"color 0.45s"}}>PILAR · {p.n}</span>
              <div>
                <h3 className="pilar-title" style={{fontFamily:"var(--font-display)", fontSize: 30, lineHeight: 1, margin:"0 0 14px", color:"inherit", transition:"color 0.45s"}}>{p.t}</h3>
                <p className="pilar-desc" style={{fontSize: 13, lineHeight: 1.55, margin:0, color:"var(--ink-soft)", transition:"color 0.45s"}}>{p.d}</p>
              </div>
            </Reveal>
          );})}
        </div>
      </div>
    </section>
  );
}

function VerticaisPanel() {
  const { t, tr } = useT();
  const verticais = [
    {id:"01", kind:"fund", name:"BLU Fund", tag:tr("Financeiro","Financial"), desc:tr("Fundo privado tokenizado que adquire ações de empreendimentos urbanos com deságio e revende a consórcios de urbanizadoras. Em fase 2: Fundo DAO descentralizado.","Tokenized private fund that buys stakes in urban developments at a discount and resells them to developer consortiums. Phase 2: decentralized DAO fund."), href:"capital.html", featured:true},
    {id:"02", kind:"urblock", name:"Urblock", tag:tr("Tokenização","Tokenization"), desc:tr("Plataforma proprietária para emissão, gestão e circulação de ativos tokenizados. Opera sob as licenças da BlockUrb OÜ.","Proprietary platform for issuing, managing and circulating tokenized assets. Operates under BlockUrb OÜ's licenses."), href:"platform.html#urblock"},
    {id:"03", kind:"smartcity", name:"BlockUrb Smart City", tag:tr("B2G · Prefeituras","B2G · City halls"), desc:tr("Soluções de cidade inteligente para o setor público: digitalização de mapas, IA para monitoramento urbano, modernização do urbanismo municipal.","Smart-city solutions for the public sector: map digitization, AI for urban monitoring, modernization of municipal planning."), href:"cities.html"},
    {id:"04", kind:"studios", name:"BluArq.AI", tag:tr("Criação técnica","Technical creation"), desc:tr("Estúdio criativo que produz maquetes eletrônicas, vídeos interativos, artes e projetos urbanísticos com responsabilidade técnica (RRT).","Creative studio producing 3D renderings, interactive videos, artwork and urban-planning projects with technical liability (RRT)."), href:"platform.html#studios"},
    {id:"05", kind:"school", name:"BlockUrb School", tag:tr("Educação","Education"), desc:tr("Vertical educacional com Magnatas do Lote (agente de IA + formação imobiliária) e BlockUrb Gamer (jogo educativo sobre desenvolvimento urbano).","Education vertical with Magnatas do Lote (AI agent + real-estate training) and BlockUrb Gamer (educational game on urban development)."), href:"platform.html#school"},
    {id:"06", kind:"green", name:"Instituto BlockUrb", tag:tr("ONG · em definição","NGO · being defined"), desc:tr("Vertical de impacto social. Conduz projetos com foco em habitação popular e meio ambiente, ancorando o ESG do grupo.","Social-impact vertical. Runs projects focused on affordable housing and the environment, anchoring the group's ESG."), href:"platform.html#green"},
    {id:"07", kind:"franchise", name:"BlockUrb Franchise", tag:tr("Operacional · loteadora","Operational · developer"), desc:tr("Rede de filiais de loteadoras com sede no Paraguai e expansão para o Brasil. Executa loteamentos, condomínios e acelera empreendimentos com suporte de todo o ecossistema.","Network of land-development branches headquartered in Paraguay, expanding into Brazil. Delivers subdivisions and gated communities and accelerates developments with full ecosystem support."), href:"platform.html#franchise", featured:true},
  ];
  return (
    <section className="section">
      <div className="shell">
        <SectionHead index="02" kicker={t.section02} title={t.section02_title} sub={t.section02_sub} />

        <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 0, borderLeft:"1px solid var(--line)", borderTop:"1px solid var(--line)"}}>
          {verticais.map((m) => (
            <a key={m.id} href={m.href} className="module module-card" style={{
              border:"none",
              borderRight:"1px solid var(--line)",
              borderBottom:"1px solid var(--line)",
              background: m.featured ? "var(--accent-soft)" : "var(--paper)",
              padding: 28, minHeight: 280,
              display:"flex", flexDirection:"column", justifyContent:"space-between",
              transition:"background 0.2s",
            }}>
              <div className="module__head">
                <span className="module__id">VERT · {m.id}</span>
                <span className="module__icon"><VerticalGlyph kind={m.kind} size={20} /></span>
              </div>
              <div>
                <div className="mono" style={{marginBottom: 10}}>{m.tag}</div>
                <h3 style={{fontFamily:"var(--font-display)", fontSize: 28, lineHeight: 1, margin:"0 0 12px"}}>{m.name}</h3>
                <p style={{fontSize: 13, color:"var(--ink-soft)", lineHeight: 1.5, margin:0}}>{m.desc}</p>
                <div className="mono arrow-link" style={{marginTop: 18, color:"var(--accent-ink)"}}>{t.read_module}</div>
              </div>
            </a>
          ))}
          <div style={{
            borderRight:"1px solid var(--line)", borderBottom:"1px solid var(--line)",
            padding: 28, minHeight: 280, background:"var(--bg-elev)",
            display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"center",
            color:"var(--ink-muted)", textAlign:"center",
          }}>
            <div className="mono" style={{marginBottom: 12}}>{tr("+ EM EXPANSÃO","+ EXPANDING")}</div>
            <div style={{fontFamily:"var(--font-display)", fontSize: 36, lineHeight: 1, color:"var(--ink)"}}>2026 →</div>
            <p style={{fontSize: 12, marginTop: 12, maxWidth: 200}}>{tr("Novas verticais sob a holding entram pelo mesmo processo de governança.","New verticals join under the holding through the same governance process.")}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function BlockchainPanel() {
  const { tr } = useT();
  const items = [
    [tr("Transparência registral","Registry transparency"), tr("Registros imutáveis de propriedade, transações e licenciamentos — reduzindo fraudes e disputas fundiárias.","Immutable records of ownership, transactions and permits — reducing fraud and land disputes.")],
    [tr("Liquidez via tokenização","Liquidity via tokenization"), tr("Ativos historicamente ilíquidos (terras, glebas, empreendimentos) ganham mercado secundário e acesso democrático ao investimento.","Historically illiquid assets (land, plots, developments) gain a secondary market and democratic access to investment.")],
    [tr("Contratos inteligentes","Smart contracts"), tr("Automação de pagamentos, repasses, royalties, distribuições e cumprimento de licenças sem intermediários.","Automation of payments, transfers, royalties, distributions and permit compliance without intermediaries.")],
    [tr("Governança descentralizada","Decentralized governance"), tr("Comunidades, investidores e moradores participam de decisões urbanas com voto auditável e regras programáveis (DAO).","Communities, investors and residents take part in urban decisions with auditable voting and programmable rules (DAO).")],
    [tr("Rastreabilidade de obras","Construction traceability"), tr("Cada etapa de execução, recurso financeiro e recurso ambiental pode ser auditado em tempo real.","Every construction stage, financial resource and environmental resource can be audited in real time.")],
    [tr("Identidade urbana digital","Digital urban identity"), tr("Moradores, imóveis e infraestrutura em uma camada de dados confiável, conectando serviços públicos, mobilidade, energia e segurança.","Residents, properties and infrastructure on a trusted data layer, connecting public services, mobility, energy and security.")],
  ];
  return (
    <section className="section section--dark">
      <div className="shell">
        <SectionHead dark index="03" kicker={tr("BLOCKCHAIN × CIDADE","BLOCKCHAIN × CITY")} title={tr(["Como o blockchain potencializa", {em:" smart cities."}],["How blockchain powers", {em:" smart cities."}],["Cómo el blockchain potencia", {em:" smart cities."}],["Kuidas plokiahel võimendab", {em:" nutikaid linnu."}],["区块链如何赋能", {em:" 智慧城市。"}])} sub={tr("A tecnologia blockchain é o tecido conjuntivo que viabiliza um novo modelo de cidade e urbanização. Aqui, seis aplicações diretas.","Blockchain is the connective tissue that enables a new model of city and urbanization. Here, six direct applications.")} />
        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap: 0, borderTop:"1px solid #28322C"}}>
          {items.map(([titulo, desc], i) => (
            <div key={i} style={{
              padding:"36px 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)"}}>{`0${i+1}`}</span>
              <h3 style={{fontFamily:"var(--font-display)", fontSize: 26, color:"#F4F1EA", margin:"14px 0 12px", lineHeight: 1.1}}>{titulo}</h3>
              <p style={{margin:0, color:"color-mix(in srgb, #F4F1EA 70%, transparent)", fontSize: 14, lineHeight: 1.55}}>{desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DiferencialPanel() {
  const { tr } = useT();
  return (
    <section className="section">
      <div className="shell">
        <SectionHead index="04" kicker={tr("O QUE NOS DIFERENCIA","WHAT SETS US APART")} title={tr(["O primeiro a integrar tudo", {em:" sob uma mesma governança."}],["The first to integrate everything", {em:" under one governance."}],["El primero en integrar todo", {em:" bajo una misma gobernanza."}],["Esimene, kes ühendab kõik", {em:" ühe juhtimise alla."}],["首个将一切整合", {em:" 于同一治理之下的体系。"}])} />
        <div style={{display:"grid", gridTemplateColumns:"1.1fr 1fr", gap: 80, alignItems:"start"}}>
          <Reveal>
            <p style={{fontFamily:"var(--font-display)", fontSize: 32, lineHeight: 1.25, color:"var(--ink)", margin:"0 0 32px"}}>
              {tr(
                <>A BlockUrb OÜ é o primeiro ecossistema a integrar <em>urbanização descentralizada</em>, <em>smart city</em>, <em>IA generativa</em>, <em>blockchain</em> e <em>tokenização</em> sob uma mesma estrutura de governança.</>,
                <>BlockUrb OÜ is the first ecosystem to integrate <em>decentralized urbanization</em>, <em>smart city</em>, <em>generative AI</em>, <em>blockchain</em> and <em>tokenization</em> under a single governance structure.</>,
                <>BlockUrb OÜ es el primer ecosistema en integrar <em>urbanización descentralizada</em>, <em>smart city</em>, <em>IA generativa</em>, <em>blockchain</em> y <em>tokenización</em> bajo una misma estructura de gobernanza.</>,
                <>BlockUrb OÜ on esimene ökosüsteem, mis ühendab <em>detsentraliseeritud linnaarenduse</em>, <em>smart city</em>, <em>generatiivse tehisintellekti</em>, <em>plokiahela</em> ja <em>tokeniseerimise</em> ühe juhtimisstruktuuri alla.</>,
                <>BlockUrb OÜ 是首个将<em>去中心化城市化</em>、<em>智慧城市</em>、<em>生成式人工智能</em>、<em>区块链</em>与<em>通证化</em>整合于同一治理结构之下的生态系统。</>
              )}
            </p>
            <p style={{fontSize: 16, lineHeight: 1.6, color:"var(--ink-soft)", margin: 0}}>
              {tr(
                <>Cada empresa e produto opera de forma independente, mas se alimenta das demais — gerando uma cadeia inédita no setor: <strong>terra, capital, tecnologia, criação, educação e impacto social</strong> conectados em uma única arquitetura.</>,
                <>Each company and product operates independently but feeds the others — creating a chain unseen in the sector: <strong>land, capital, technology, creation, education and social impact</strong> connected in a single architecture.</>,
                <>Cada empresa y producto opera de forma independiente, pero se alimenta de las demás — generando una cadena inédita en el sector: <strong>tierra, capital, tecnología, creación, educación e impacto social</strong> conectados en una única arquitectura.</>,
                <>Iga ettevõte ja toode toimib iseseisvalt, kuid toitub teistest — luues sektoris ennenägematu ahela: <strong>maa, kapital, tehnoloogia, looming, haridus ja sotsiaalne mõju</strong> ühendatud ühte arhitektuuri.</>,
                <>每家企业与产品都独立运营，又彼此供给——形成业内前所未有的链条：<strong>土地、资本、技术、创意、教育与社会影响力</strong>连接于同一架构之中。</>
              )}
            </p>
          </Reveal>
          <div>
            {[
              [tr("Holding","Holding"), tr("BlockUrb OÜ · Estônia","BlockUrb OÜ · Estonia"), tr("Núcleo de governança e licenças de tokenização centralizadas.","Governance core and centralized tokenization licenses.")],
              [tr("Capital","Capital"), "BLU Fund · Urblock", tr("Originação, tokenização e distribuição de ativos urbanos.","Origination, tokenization and distribution of urban assets.")],
              [tr("Cidade","City"), "BlockUrb Smart City", tr("Modernização da gestão pública municipal (B2G).","Modernization of municipal public management (B2G).")],
              [tr("Cultura","Culture"), "BluArq.AI · School", tr("Produção técnica, criação visual e formação de quadros.","Technical production, visual creation and talent training.")],
              [tr("Comunidade","Community"), "Instituto BlockUrb", tr("Impacto socioambiental e habitação popular do grupo.","The group's social-environmental impact and affordable housing.")],
            ].map(([k, v, d], i) => (
              <Reveal key={i} delay={i*80} style={{
                display:"grid", gridTemplateColumns:"100px 1fr", gap: 24,
                padding:"22px 0", borderTop:"1px solid var(--line)",
              }}>
                <span className="mono" style={{paddingTop: 4}}>{k}</span>
                <div>
                  <div style={{fontFamily:"var(--font-display)", fontSize: 22, lineHeight: 1.15, marginBottom: 6}}>{v}</div>
                  <div style={{fontSize: 13, color:"var(--ink-soft)", lineHeight: 1.5}}>{d}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function MarqueeRow() {
  return <MarqueeStrip words={["BLU FUND", "URBLOCK", "SMART CITY", "BLUARQ.AI", "SCHOOL", "INSTITUTO BLOCKURB", "FRANCHISE"]} />;
}

function CTAPanel() {
  const { tr } = useT();
  return (
    <section className="section" style={{padding:"120px 0 140px", background:"var(--paper)", borderTop:"1px solid var(--line)"}}>
      <div className="shell">
        <div style={{display:"grid", gridTemplateColumns:"auto 1fr", gap: 64, alignItems:"end"}}>
          <div className="mono">{tr("05 / PRÓXIMO","05 / NEXT")}</div>
          <div>
            <h2 className="display" style={{fontSize:"clamp(56px, 7vw, 104px)", margin:"0 0 40px"}}>
              {tr(<>Construa a próxima<br/>cidade <em>com a gente</em>.</>,<>Build the next<br/>city <em>with us</em>.</>,<>Construye la próxima<br/>ciudad <em>con nosotros</em>.</>,<>Ehita järgmine<br/>linn <em>koos meiega</em>.</>,<>与我们一起<br/>建设<em>下一座城市</em>。</>)}
            </h2>
            <p style={{maxWidth: 580, fontSize: 18, lineHeight: 1.55, color:"var(--ink-soft)", marginBottom: 32}}>
              {tr("Investidores, prefeituras, urbanizadoras e desenvolvedores: cada vertical do ecossistema tem uma porta de entrada. Comece pela que faz sentido para você.","Investors, city halls, developers and builders: each ecosystem vertical has its own entry point. Start with the one that makes sense for you.")}
            </p>
            <div style={{display:"flex", gap: 12, flexWrap:"wrap"}}>
              <a className="btn btn--ink" href="capital.html">{tr("Investir via BLU Fund","Invest via BLU Fund")} <span className="arrow">→</span></a>
              <a className="btn btn--ghost" href="cities.html">{tr("Smart City para prefeituras","Smart City for city halls")}</a>
              <a className="btn btn--ghost" href="platform.html">{tr("Ver todas as verticais","See all verticals")}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <Page>
      <TopNav active="home" />
      <main>
        <HeroPanel />
        <PilaresPanel />
        <VerticaisPanel />
        <MarqueeRow />
        <BlockchainPanel />
        <DiferencialPanel />
        <CTAPanel />
      </main>
      <Footer />
    </Page>
  );
}

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