import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState, type ReactNode } from "react";
import {
  LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid, Legend,

} from "recharts";
import { Landmark, ShieldCheck, PiggyBank, ChevronDown, AlertTriangle } from "lucide-react";
import { SiteLayout } from "@/components/SiteLayout";
import { BrasilUrbanoIncomeCard } from "@/components/BrasilUrbanoIncomeCard";
import { BrasilUrbanoProfile } from "@/components/BrasilUrbanoProfile";
import { BrasilUrbanoPortfolio } from "@/components/BrasilUrbanoPortfolio";
import { BrasilUrbanoEcosystem } from "@/components/BrasilUrbanoEcosystem";
import { GARANTIAS_OFERTA, portfolioImageUrl } from "@/data/brasil-urbano-portfolio";
import { SIM_CONFIG, simular, aliquotaIR, type Prazo } from "@/data/brasil-urbano-config";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/brasil-urbano")({
  head: () => ({
    meta: [
      { name: "robots", content: "noindex, nofollow" },
      { title: "Brasil Urbano | N-1 — Renda fixa até 2,00% a.m. | Investplus" },
      { name: "description", content: "Conheça a Brasil Urbano: renda fixa prefixada de até 2,00% ao mês, juros mensais e cotas de R$ 10.000. Carteira de terrenos opcionados em 5 estados, com cerca de R$ 1,15 bilhão de VGV estimado. Rascunho." },
      { property: "og:title", content: "Brasil Urbano | N-1 — Até 2,00% ao mês, com juros mensais" },
      { property: "og:description", content: "Invista com informação: conheça a incorporadora Brasil Urbano e sua carteira de terrenos opcionados em 5 estados. N-1 com remuneração mensal prefixada, prazos de 12 a 36 meses e cotas de R$ 10.000. Rascunho." },
      { property: "og:type", content: "website" },
      { property: "og:image", content: portfolioImageUrl },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:image", content: portfolioImageUrl },
    ],
    links: [
      { rel: "icon", type: "image/png", href: "/favicon-brasil-urbano.png" },
      { rel: "apple-touch-icon", href: "/favicon-brasil-urbano.png" },
    ],
  }),
  component: Page,
});

const brl = (v: number) => v.toLocaleString("pt-BR", { style: "currency", currency: "BRL", maximumFractionDigits: 2 });
const ACCENT = "oklch(0.5 0.16 210)";

const WHATSAPP = "https://api.whatsapp.com/send/?phone=551152863746&text&type=phone_number&app_absent=0";

function InvestActions({ full }: { full?: boolean }) {
  return (
    <div className="inline-flex flex-wrap items-center justify-center gap-3">
      <Button asChild className={`h-auto rounded-full brand-gradient px-7 py-3 text-sm font-semibold text-primary-foreground shadow-sm hover:opacity-90 ${full ? "w-full" : ""}`}>
        <a href="https://www.platform.investplus.vc/admin/rounds/company/58/round/47">Investir</a>
      </Button>
      <a href={WHATSAPP} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center gap-2 rounded-full border border-border bg-background px-7 py-3 text-sm font-semibold hover:bg-secondary">
        Falar com especialista
      </a>
    </div>
  );
}

function StickyInvestBar() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => {
      const nearEnd = window.innerHeight + window.scrollY > document.body.scrollHeight - 700;
      setShow(window.scrollY > 700 && !nearEnd);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className={`fixed inset-x-0 bottom-0 z-50 border-t border-border bg-background/95 backdrop-blur transition-transform duration-300 ${show ? "translate-y-0" : "translate-y-full"}`}>
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3 sm:px-6">
        <div className="min-w-0">
          <p className="truncate text-sm font-bold">Brasil Urbano | N-1</p>
          <p className="truncate text-xs text-foreground/60">Até 2,00% a.m. prefixado • juros mensais • garantia real imobiliária • a partir de R$ 10.000</p>
        </div>
        <div className="flex shrink-0 gap-2">
          <a href={WHATSAPP} target="_blank" rel="noreferrer" className="hidden rounded-full border border-border px-4 py-2 text-sm font-semibold hover:bg-secondary sm:inline-flex">Falar com especialista</a>
          <Button asChild className="rounded-full brand-gradient px-5 py-2 text-sm font-semibold text-primary-foreground hover:opacity-90"><a href="https://www.platform.investplus.vc/admin/rounds/company/58/round/47">Investir</a></Button>
        </div>
      </div>
    </div>
  );
}

function Section({ title, subtitle, children, alt }: { title: string; subtitle?: string; children: ReactNode; alt?: boolean }) {
  return (
    <section className={`py-16 ${alt ? "border-y border-border/60 bg-secondary/30" : ""}`}>
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="h-1 w-12 brand-gradient rounded-full" />
        <h2 className="mt-3 text-2xl font-bold sm:text-3xl">{title}</h2>
        {subtitle && <p className="mt-2 max-w-3xl text-foreground/70">{subtitle}</p>}
        <div className="mt-8">{children}</div>
      </div>
    </section>
  );
}

const rates = [
  { p: "12 meses", t: "1,60% a.m.", a: "19,20% a.a." },
  { p: "24 meses", t: "1,80% a.m.", a: "21,60% a.a." },
  { p: "36 meses", t: "2,00% a.m.", a: "24,00% a.a." },
];

const alloc = [
  { n: "Infraestrutura e estruturação comercial", pct: 40, c: "oklch(0.5 0.16 210)" },
  { n: "Marketing e lançamento comercial", pct: 20, c: "oklch(0.7 0.14 200)" },
  { n: "Projetos, licenças e regularização", pct: 15, c: "oklch(0.35 0.08 250)" },
  { n: "Reserva de juros", pct: 12, c: "oklch(0.75 0.15 160)" },
  { n: "Custos de estruturação da oferta", pct: 13, c: "oklch(0.6 0.03 250)" },
];

const faq: { q: string; a: ReactNode }[] = [
  { q: "É renda fixa?", a: "Sim. Na N-1 você empresta recursos à Brasil Urbano por contrato de mútuo e recebe remuneração mensal prefixada, definida pelo prazo. O capital é devolvido no vencimento. O pagamento depende da capacidade de pagamento da emissora." },
  { q: "Quanto preciso para investir?", a: "Cada cota custa R$ 10.000 (valor mínimo). A oferta tem alvo de R$ 500.000, em 50 cotas. Veja na plataforma quantas cotas ainda estão disponíveis." },
  { q: "Quando recebo?", a: "O primeiro pagamento ocorre no 3º mês, já com os juros acumulados do período. Depois, os pagamentos são mensais. O capital é devolvido no vencimento." },
  { q: "Qual a garantia?", a: "A oferta conta com garantia real imobiliária: um imóvel integralizado em uma SPE e dado em garantia da operação. Matrícula, valor de avaliação e demais condições da garantia estão descritos nos documentos da oferta. A garantia real não elimina o risco: esta oferta não conta com a garantia do FGC e envolve risco de crédito da emissora." },
  { q: "A oferta está vinculada a um único projeto?", a: "Não. A captação é realizada pela Brasil Urbano Incorporadora Ltda. e não está vinculada a um único empreendimento." },
  { q: "Quais são os principais riscos desta operação?", a: "Risco de crédito da emissora: os pagamentos podem não ocorrer no prazo e há possibilidade de perda parcial ou total do capital. Estudos de viabilidade e VGV são estimativas, não projetos aprovados nem receitas asseguradas. Leia o aviso de risco da oferta antes de investir." },
  { q: "Posso resgatar antes do vencimento?", a: "As regras de resgate constam no contrato e nos documentos da oferta. Consulte-as antes de investir." },
  { q: "Posso desistir?", a: "As condições de desistência constam nos documentos da oferta e na plataforma. Sem o termo complementar assinado até o encerramento, a reserva é cancelada." },
];

function Accordion({ items }: { items: { q: string; a: ReactNode }[] }) {
  const [open, setOpen] = useState<number | null>(null);
  return (
    <div className="divide-y divide-border/60 rounded-2xl border border-border/60 bg-card">
      {items.map((it, i) => (
        <div key={it.q}>
          <button onClick={() => setOpen(open === i ? null : i)} className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left text-sm font-semibold">
            {it.q}
            <ChevronDown className={`size-4 shrink-0 transition ${open === i ? "rotate-180" : ""}`} />
          </button>
          {open === i && <div className="px-5 pb-4 text-sm text-foreground/75">{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

function Simulator() {
  const [cotas, setCotas] = useState(10);
  const [prazo, setPrazo] = useState<Prazo>(24);
  const [liquido, setLiquido] = useState(false);
  const valor = cotas * SIM_CONFIG.cota;
  const data = useMemo(() => simular(valor, prazo, liquido), [valor, prazo, liquido]);
  const last = data[data.length - 1];

  return (
    <div className="card-soft rounded-2xl border border-border/60 p-6">
      <div className="grid gap-6 md:grid-cols-3">
        <div>
          <label className="text-xs font-semibold uppercase tracking-wider text-foreground/60">Valor investido</label>
          <p className="mt-1 text-xl font-bold">{brl(valor)} <span className="text-sm font-normal text-foreground/60">({cotas} {cotas === 1 ? "cota" : "cotas"})</span></p>
          <input type="range" min={1} max={50} step={1} value={cotas} onChange={(e) => setCotas(+e.target.value)} className="mt-3 w-full accent-[oklch(0.5_0.16_210)]" />
        </div>
        <div>
          <span className="text-xs font-semibold uppercase tracking-wider text-foreground/60">Prazo</span>
          <div className="mt-2 flex gap-2">
            {([12, 24, 36] as Prazo[]).map((p) => (
              <button key={p} onClick={() => setPrazo(p)} className={`rounded-full px-4 py-2 text-sm font-semibold ${prazo === p ? "brand-gradient text-[oklch(0.15_0.02_250)]" : "border border-border"}`}>{p} meses</button>
            ))}
          </div>
          <p className="mt-2 text-xs text-foreground/60">Taxa N-1: {(SIM_CONFIG.taxasPorPrazo[prazo] * 100).toFixed(2).replace(".", ",")}% a.m.</p>
        </div>
        <div>
          <span className="text-xs font-semibold uppercase tracking-wider text-foreground/60">Visualização</span>
          <div className="mt-2 flex gap-2">
            {[{ k: false, l: "Bruto" }, { k: true, l: "Líquido estimado de IR" }].map((o) => (
              <button key={o.l} onClick={() => setLiquido(o.k)} className={`rounded-full px-4 py-2 text-sm font-semibold ${liquido === o.k ? "brand-gradient text-[oklch(0.15_0.02_250)]" : "border border-border"}`}>{o.l}</button>
            ))}
          </div>
          {liquido && <p className="mt-2 text-xs text-foreground/60">IR estimado de {(aliquotaIR(prazo) * 100).toString().replace(".", ",")}% sobre o rendimento; poupança isenta. Estimativa ilustrativa, não constitui orientação tributária.</p>}
        </div>
      </div>

      <div className="mt-8 h-80">
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ left: 10, right: 10 }}>
            <CartesianGrid strokeDasharray="3 3" opacity={0.3} />
            <XAxis dataKey="mes" tickFormatter={(m) => `${m}m`} fontSize={12} />
            <YAxis tickFormatter={(v) => `R$ ${Math.round(v / 1000)}k`} fontSize={12} width={70} domain={["dataMin", "auto"]} />
            <Tooltip formatter={(v: number) => brl(v)} labelFormatter={(m) => `Mês ${m}`} />
            <Legend />
            <Line type="monotone" dataKey="serie1" name="Brasil Urbano | N-1" stroke={ACCENT} strokeWidth={3.5} dot={false} animationDuration={900} />
            <Line type="monotone" dataKey="cdi" name="CDI (100%)" stroke="oklch(0.55 0.03 250)" strokeWidth={2} dot={false} animationDuration={900} />
            <Line type="monotone" dataKey="poupanca" name="Poupança" stroke="oklch(0.75 0.12 80)" strokeWidth={2} dot={false} animationDuration={900} />
          </LineChart>
        </ResponsiveContainer>
      </div>
      <p className="mt-2 text-xs text-foreground/50">
        Referência {SIM_CONFIG.dataReferencia}: CDI {(SIM_CONFIG.cdiAnual * 100).toFixed(2).replace(".", ",")}% a.a. (meta Selic 13,75% a.a.); poupança 0,5% a.m. + TR.
      </p>

      <div className="mt-6 grid gap-4 sm:grid-cols-3">
        <ResultCard label="Brasil Urbano | N-1" value={last.serie1} highlight />
        <ResultCard label="CDI (100%)" value={last.cdi} diff={last.serie1 - last.cdi} />
        <ResultCard label="Poupança" value={last.poupanca} diff={last.serie1 - last.poupanca} />
      </div>

      <div className="mt-6 flex gap-3 rounded-xl border border-amber-300 bg-amber-50 p-4 text-xs leading-relaxed text-amber-900">
        <AlertTriangle className="size-4 shrink-0" />
        Simulação ilustrativa. CDI e TR projetados constantes, o que pode não ocorrer. Poupança e CDBs bancários contam com a garantia do FGC dentro dos limites legais; esta oferta não conta com o FGC e envolve risco de crédito da emissora. Rentabilidade simulada não é garantia de rentabilidade futura.
      </div>
    </div>
  );
}

function ResultCard({ label, value, diff, highlight }: { label: string; value: number; diff?: number; highlight?: boolean }) {
  return (
    <div className={`rounded-2xl border p-5 ${highlight ? "border-[oklch(0.5_0.16_210)] bg-[oklch(0.5_0.16_210)]/5" : "border-border/60"}`}>
      <p className="text-xs uppercase tracking-wider text-foreground/60">{label}</p>
      <p className="mt-1 text-xl font-bold">{brl(value)}</p>
      {diff !== undefined && <p className="mt-1 text-xs text-foreground/60">Diferença da N-1: <strong>{brl(diff)}</strong></p>}
    </div>
  );
}

function AllocationChart() {
  return (
    <div className="card-soft rounded-2xl border border-border/60 p-6">
      <div className="flex h-3 w-full overflow-hidden rounded-full">
        {alloc.map((x) => <span key={x.n} style={{ width: `${x.pct}%`, background: x.c }} />)}
      </div>
      <ul className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {alloc.map((x) => (
          <li key={x.n} className="flex items-start gap-3 text-sm">
            <span className="mt-1 size-3 shrink-0 rounded-full" style={{ background: x.c }} />
            <span><span className="font-bold">{x.pct}%</span> · <span className="text-foreground/80">{x.n}</span></span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Page() {
  return (
    <SiteLayout>
      <div className="sticky top-0 z-50 bg-amber-500 px-4 py-2 text-center text-xs font-bold uppercase tracking-wider text-amber-950 sm:text-sm">
        RASCUNHO — SEM VALIDADE. OFERTA NÃO INICIADA. NÃO ACEITA INVESTIMENTOS.
      </div>
      <div aria-hidden className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center overflow-hidden">
        <span className="-rotate-30 select-none text-[18vw] font-black tracking-widest text-foreground/[0.04]">RASCUNHO</span>
      </div>

      {/* HERO */}
      <section className="hero-bg py-20">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-3 lg:px-8">
          <div className="lg:col-span-2">
            <span className="rounded-full bg-ink-foreground/10 px-3 py-1 text-xs font-semibold uppercase text-ink-foreground">RENDA FIXA • REMUNERAÇÃO MENSAL PREFIXADA</span>
            <h1 className="mt-5 text-4xl font-bold text-white sm:text-6xl">Brasil Urbano | N-1</h1>
            <p className="mt-4 max-w-3xl text-xl text-ink-foreground/85">Renda fixa prefixada de até 2,00% ao mês, com juros pagos mensalmente. Conheça a Brasil Urbano, incorporadora com projetos residenciais em diferentes regiões do Brasil.</p>
            <p className="mt-3 max-w-3xl text-sm text-ink-foreground/65">A captação é realizada pela Brasil Urbano Incorporadora Ltda. e não está vinculada a um único empreendimento.</p>
            <div className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
              {[
                ["Rentabilidade", "até 2,00% a.m. (prefixada)"],
                ["Prazos", "12, 24 ou 36 meses"],
                ["Pagamento", "juros mensais"],
                ["Emissora", "Brasil Urbano Incorporadora Ltda."],
                ["Garantia", "real imobiliária, via SPE"],
              ].map(([l, v]) => (
                <div key={l} className="rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur">
                  <p className="text-xs uppercase tracking-wider text-white/60">{l}</p>
                  <p className="mt-1 font-semibold text-white">{v}</p>
                </div>
              ))}
            </div>
          </div>
          <BrasilUrbanoIncomeCard />
        </div>
      </section>

      <Section title="Tabela de rentabilidade">
        <div className="overflow-x-auto rounded-2xl border border-border/60">
          <table className="w-full text-sm">
            <thead className="bg-secondary/50 text-left">
              <tr><th className="p-4">Prazo</th><th className="p-4">Taxa prefixada</th><th className="p-4">Equivalente ao ano (juros simples)</th><th className="p-4">Pagamento</th></tr>
            </thead>
            <tbody>
              {rates.map((r) => (
                <tr key={r.p} className="border-t border-border/60">
                  <td className="p-4 font-semibold">{r.p}</td><td className="p-4 font-bold text-[oklch(0.5_0.16_210)]">{r.t}</td><td className="p-4">{r.a}</td><td className="p-4">Juros mensais + principal no vencimento</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="mt-3 text-sm text-foreground/60">A taxa varia apenas conforme o prazo escolhido. Rentabilidade prefixada, sem correção monetária.</p>
      </Section>

      <div id="simulador-brasil-urbano" className="scroll-mt-24">
        <Section alt title="Compare: N-1 x CDI x Poupança" subtitle="Simule a evolução do seu patrimônio ao longo do prazo.">
          <Simulator />
          <div className="mt-8 flex flex-col items-center gap-4 rounded-2xl border border-border/60 bg-card p-6 text-center sm:flex-row sm:justify-between sm:text-left">
            <div>
              <p className="font-semibold">Gostou do resultado? Garanta sua cota da N-1.</p>
              <p className="mt-1 text-sm text-foreground/60">Cotas de R$ 10.000 • juros pagos todo mês.</p>
            </div>
            <InvestActions />
          </div>
        </Section>
      </div>

      <Section title="O instrumento: renda fixa da Brasil Urbano">
        <p className="max-w-4xl leading-relaxed text-foreground/80">Na N-1, o investidor empresta recursos à Brasil Urbano Incorporadora Ltda. por meio de contrato de mútuo, com remuneração mensal prefixada e devolução do capital no vencimento. A taxa é definida pelo prazo escolhido. A oferta apresenta a atuação da incorporadora e sua carteira de projetos residenciais, sem vinculação a um único empreendimento. A operação conta com garantia real imobiliária: um imóvel integralizado em SPE e dado em garantia. O pagamento está sujeito ao risco de crédito da emissora, e as demais condições estão descritas nos documentos da oferta.</p>
        <div className="mt-8 grid gap-4 md:grid-cols-3">
          {[
            { i: Landmark, t: "1 · Captação corporativa", d: <>Emissão da Brasil Urbano Incorporadora Ltda.</> },
            { i: ShieldCheck, t: "2 · Condições da oferta", d: <>{GARANTIAS_OFERTA}</> },
            { i: PiggyBank, t: "3 · Fluxo contratado", d: <>Remuneração mensal prefixada e devolução do principal no vencimento, conforme contrato e sujeitas ao risco de crédito.</> },
          ].map((c) => (
            <div key={c.t} className="card-soft rounded-2xl border border-border/60 p-6">
              <div className="flex size-11 items-center justify-center rounded-xl brand-gradient"><c.i className="size-5 text-[oklch(0.15_0.02_250)]" /></div>
              <h3 className="mt-4 font-semibold">{c.t}</h3>
              <p className="mt-2 text-sm text-foreground/70">{c.d}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section alt title="Renda mensal com garantia real imobiliária." subtitle="Além da rentabilidade prefixada, a N-1 tem um imóvel real por trás da operação: o imóvel é integralizado em uma SPE e dado em garantia aos investidores.">
        <p className="-mt-4 mb-6 text-xs font-semibold uppercase text-muted-foreground">O diferencial da N-1</p>
        <ol className="grid gap-4 md:grid-cols-3">
          {[
            ["Imóvel integralizado", "O imóvel é integralizado, ou seja, aportado ao patrimônio de uma SPE (sociedade de propósito específico)."],
            ["Via SPE", "A SPE é a estrutura que detém o imóvel e o vincula à operação, com a transparência de uma sociedade com finalidade definida."],
            ["Dado em garantia", "O imóvel da SPE é dado em garantia da operação, um ativo real e tangível por trás do seu investimento."],
          ].map(([t, d], i) => (
            <li key={t} className="card-soft rounded-2xl border border-border/60 p-6">
              <span className="flex size-9 items-center justify-center rounded-full brand-gradient font-bold text-primary-foreground">{i + 1}</span>
              <h3 className="mt-4 font-semibold">{t}</h3>
              <p className="mt-2 text-sm text-foreground/70">{d}</p>
            </li>
          ))}
        </ol>
        <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {[
            ["Boa rentabilidade", "Até 2,00% a.m. prefixada, com juros pagos todo mês."],
            ["Regulamentada", "Estruturada 100% dentro da Resolução CVM 88, em plataforma autorizada pela CVM."],
            ["Auditada", "Operação auditada, com transparência para quem investe."],
            ["Garantia real", "Imóvel integralizado em SPE e dado em garantia."],
          ].map(([t, d]) => (
            <div key={t} className="rounded-2xl border border-border/60 bg-card p-5">
              <p className="text-xs font-bold uppercase tracking-wider text-[oklch(0.5_0.16_210)]">{t}</p>
              <p className="mt-2 text-sm text-foreground/75">{d}</p>
            </div>
          ))}
        </div>
        <p className="mt-6 text-xs leading-relaxed text-foreground/60">Matrícula, valor de avaliação, tipo e demais condições da garantia estão descritos nos documentos da oferta. A garantia real reduz, mas não elimina o risco: esta oferta não conta com a garantia do FGC e envolve risco de crédito da emissora. Rentabilidade não é garantia de resultado futuro.</p>
      </Section>

      <BrasilUrbanoProfile />

      <BrasilUrbanoEcosystem />

      <BrasilUrbanoPortfolio />

      <Section alt title="Para onde vai cada real da N-1." subtitle="Destinação dos recursos definida em contrato, em percentuais da captação.">
        <AllocationChart />
        <div className="mt-14">
          <p className="text-xs font-semibold uppercase text-muted-foreground">A tese de crescimento</p>
          <h3 className="mt-1 text-xl font-bold">A N-1 é o primeiro passo de um programa.</h3>
          <p className="mt-2 max-w-4xl text-foreground/75">A N-1 integra o Programa de Renda Fixa Brasil Urbano na InvestPlus. A tese se apoia na atuação residencial da incorporadora em diferentes regiões do país e no desenvolvimento da carteira de terrenos opcionados.</p>
          <ol className="mt-6 grid gap-4 md:grid-cols-4">
            {[
              ["N-1", "captação pela Brasil Urbano, conforme as condições desta oferta"],
              ["Desenvolvimento", "avanço dos estudos, aprovações e estruturação dos projetos"],
              ["Novas séries", "possibilidade de novas emissões, sujeitas a estruturação e análise próprias"],
              ["Expansão", "desenvolvimento de projetos residenciais em diferentes regiões do Brasil"],
            ].map(([t, d], i) => (
              <li key={t} className="relative border-t-2 border-[oklch(0.5_0.16_210)] pt-4">
                <span className="absolute -top-2.5 left-0 size-4 rounded-full brand-gradient" />
                <p className="font-semibold">{i + 1}. {t}</p>
                <p className="mt-1 text-sm text-foreground/70">{d}</p>
              </li>
            ))}
          </ol>
          <p className="mt-4 text-xs text-foreground/50">As etapas 2 a 4 são objetivos de negócio, dependem de novas captações e não integram a destinação dos recursos desta N-1.</p>
        </div>
      </Section>

      <Section title="Como investir">
        <ol className="space-y-4">
          {[
            "Escolha quantas cotas deseja (R$ 10.000 cada) e faça a reserva.",
            "Assine eletronicamente o contrato de investimento.",
            "Assine o termo complementar escolhendo o prazo (12, 24 ou 36 meses). Sem o termo assinado até o encerramento, a reserva é cancelada.",
            "Receba a instrução de pagamento e faça o aporte; os recursos ficam em conta vinculada até o encerramento.",
            "Receba seus juros: o primeiro pagamento ocorre no 3º mês, já com os juros acumulados, e os seguintes são mensais. O capital é devolvido no vencimento.",
          ].map((s, i) => (
            <li key={i} className="flex gap-4">
              <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-secondary text-sm font-bold">{i + 1}</span>
              <p className="pt-1 text-foreground/80">{s}</p>
            </li>
          ))}
        </ol>
        <div className="mt-10 grid gap-4 md:grid-cols-2">
          <div className="card-soft rounded-2xl border border-border/60 p-6">
            <h3 className="font-semibold">Quem pode investir</h3>
            <p className="mt-2 text-sm text-foreground/75">O valor mínimo é de R$ 10.000. Podem investir: investidores não qualificados, até R$ 20.000,00 por ano em ofertas de crowdfunding; (a) investidores qualificados, sem limite; e (b) investidores com renda bruta anual ou investimentos financeiros acima de R$ 200.000,00, até 10% do maior desses valores por ano (Resolução CVM nº 88/2022).</p>
          </div>
          <div className="card-soft rounded-2xl border border-border/60 p-6">
            <h3 className="font-semibold">Taxas</h3>
            <p className="mt-2 text-sm text-foreground/75">O investidor não paga taxa à Investplus para investir. A remuneração da plataforma é paga pela emissora.</p>
          </div>
        </div>
      </Section>

      <Section alt title="Perguntas frequentes">
        <Accordion items={faq} />
      </Section>

      <section className="py-14">
        <div className="mx-auto max-w-5xl space-y-4 px-4 text-xs leading-relaxed text-foreground/60 sm:px-6 lg:px-8">
          <div className="text-center"><InvestActions /></div>
          <p><strong className="text-foreground/80">Informações da oferta:</strong> oferta pública dispensada de registro (Resolução CVM nº 88/2022) · alvo da captação: R$ 500.000 (20 cotas de R$ 10.000) · cotas disponíveis e valor captado, na plataforma.</p>
          <p>Não invista antes de entender as informações essenciais da oferta. A CVM não analisa previamente as ofertas e não garante a veracidade das informações prestadas, a adequação à legislação vigente nem julga a qualidade da sociedade empresária. Antes de aceitar uma oferta, leia com atenção as informações essenciais, em especial a seção de alertas sobre riscos.</p>
          <p>Esta oferta envolve risco de crédito da emissora, não conta com a garantia do FGC e pode resultar em perda parcial ou total do capital investido. Rentabilidade simulada não é garantia de rentabilidade futura. Estimativas de VGV são preliminares. Posição de outubro de 2026.</p>
          <p>Plataforma: FCJ Invest S.A. (InvestPlus), CNPJ 38.268.345/0001-01. Emissora: Brasil Urbano Incorporadora Ltda.</p>
        </div>
      </section>
      <StickyInvestBar />
    </SiteLayout>
  );
}