import { createFileRoute, Link } from "@tanstack/react-router";
import {
  ArrowLeft,
  ArrowRight,
  ShieldCheck,
  TrendingUp,
  
  Calendar,
  Sparkles,
  CheckCircle2,
  Repeat,
  Star,
  Wallet,
  FileSearch,
  ClipboardList,
  CreditCard,
  PiggyBank,
  Globe2,
  
  Award,
} from "lucide-react";
import { SiteLayout } from "@/components/SiteLayout";

const OFFER_URL = "https://www.platform.investplus.vc/admin/rounds/company/9/round/43";

export const Route = createFileRoute("/fcj-group")({
  head: () => ({
    meta: [
      { title: "FCJ Venture Builder — Debêntures Conversíveis até 1,6% a.m. + 30% bônus | InvestPlus" },
      {
        name: "description",
        content:
          "Invista nas Debêntures Conversíveis da FCJ Venture Builder. Rentabilidade pré-fixada de até 1,6% a.m. + 30% de bônus na conversão em ações. Oferta CVM 88/2022.",
      },
      { property: "og:title", content: "FCJ Venture Builder — Debêntures Conversíveis | InvestPlus" },
      {
        property: "og:description",
        content:
          "Até 1,6% a.m. pré-fixado + 30% de bônus em ações ao converter. Captação R$ 3MM. Vencimento 17/06/2028.",
      },
    ],
  }),
  component: FCJDebentures,
});

function FCJDebentures() {
  return (
    <SiteLayout>
      {/* HERO */}
      <section className="hero-bg relative overflow-hidden py-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <Link to="/ofertas" className="inline-flex items-center gap-2 text-sm text-white/70 hover:text-white">
            <ArrowLeft className="size-4" /> Todas as ofertas
          </Link>
          <div className="mt-6 grid gap-10 lg:grid-cols-5">
            <div className="lg:col-span-3">
              <div className="flex flex-wrap items-center gap-2">
                <span className="rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-emerald-300 ring-1 ring-emerald-400/40">
                  Oferta Pública · CVM Res. 88/2022
                </span>
                <span className="rounded-full bg-[oklch(0.82_0.14_205)]/20 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-[oklch(0.85_0.14_205)]">
                  Em captação
                </span>
                <span className="rounded-full bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white">
                  Renda fixa + Equity Upside
                </span>
              </div>
              <h1 className="mt-5 font-display text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">
                FCJ Venture Builder
                <span className="mt-2 block text-2xl font-semibold text-[oklch(0.85_0.16_75)] sm:text-3xl">
                  Debêntures Conversíveis em Ações
                </span>
              </h1>
              <p className="mt-5 max-w-2xl text-lg text-white/85">
                Série I · Distribuída via Investplus (FCJ Invest S.A.) · Plataforma registrada na CVM.
                Combine a previsibilidade de uma renda fixa pré-fixada de <strong className="text-white">até 1,6% a.m.</strong> com o
                <strong className="text-white"> upside de equity</strong> no maior ecossistema de Corporate Venture Builders da América Latina.
              </p>
              <div className="mt-4">
                <span className="inline-flex items-center rounded-md bg-[#003087] px-2.5 py-1 font-mono text-[11px] font-semibold uppercase tracking-wider text-white ring-1 ring-white/10">
                  DEB-FCJ-01/2026
                </span>
              </div>
              <div className="mt-8 flex flex-wrap gap-3">
                <a
                  href={OFFER_URL}
                  className="brand-gradient inline-flex items-center gap-2 rounded-full px-7 py-3 text-sm font-semibold text-[oklch(0.15_0.02_250)] shadow-lg shadow-[oklch(0.82_0.14_205)]/30"
                >
                  Investir agora <ArrowRight className="size-4" />
                </a>
                <a
                  href="#como-funciona"
                  className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-7 py-3 text-sm font-semibold text-white hover:bg-white/10"
                >
                  Como funciona
                </a>
              </div>
            </div>

            {/* Highlight numbers */}
            <div className="lg:col-span-2">
              <div className="rounded-2xl border border-white/10 bg-white/[0.06] p-6 backdrop-blur">
                <div className="flex items-baseline justify-between">
                  <div>
                    <p className="text-xs uppercase tracking-widest text-white/60">Rentabilidade</p>
                    <p className="mt-1 font-display text-5xl font-bold text-[oklch(0.85_0.16_75)]">até 1,6% a.m.</p>
                    <p className="text-xs text-white/60">Pré-fixada · Juros Mensais</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs uppercase tracking-widest text-white/60">Bônus</p>
                    <p className="mt-1 font-display text-3xl font-bold text-emerald-300">+30%</p>
                    <p className="text-xs text-white/60">na conversão em ações</p>
                  </div>
                </div>
                <div className="mt-6 grid grid-cols-2 gap-3 border-t border-white/10 pt-6 text-white">
                  <Stat label="Captação total" value="R$ 3 MM" sub="100 cotas disponíveis" />
                  <Stat label="Valor por cota" value="R$ 30.000" sub="Investimento mínimo" />
                  <Stat label="Vencimento" value="17/06/2028" sub="Data contratual · Escritura" />
                  <Stat label="Preço de conversão" value="R$ 678/ação" sub="Fixo em contrato" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SOBRE FCJ — ECOSYSTEM */}
      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Sobre a FCJ Venture Builder</h2>
          <div className="mt-8 grid gap-6 lg:grid-cols-2">
            <div className="card-soft rounded-2xl border border-border/60 p-6">
              <div className="flex items-center gap-2 text-[oklch(0.5_0.16_210)]">
                <Globe2 className="size-5" />
                <span className="text-xs font-semibold uppercase tracking-widest">Ecossistema</span>
              </div>
              <h3 className="mt-3 font-display text-xl font-semibold">
                O maior ecossistema de Corporate Venture Building da América Latina
              </h3>
              <p className="mt-3 text-sm leading-relaxed text-foreground/75">
                Fundada em 2013 em Belo Horizonte, com presença em{" "}
                <strong>Brasil, EUA, Portugal, Israel e Finlândia</strong>. Desde 2018 licencia sua metodologia
                proprietária, com mais de <strong>60 Corporate Venture Builders</strong> em operação.
              </p>
            </div>
            <div className="card-soft rounded-2xl border border-border/60 p-6">
              <div className="flex items-center gap-2 text-[oklch(0.5_0.16_210)]">
                <TrendingUp className="size-5" />
                <span className="text-xs font-semibold uppercase tracking-widest">Crescimento</span>
              </div>
              <h3 className="mt-3 font-display text-xl font-semibold">Dois motores em plena expansão</h3>
              <ul className="mt-3 space-y-2 text-sm text-foreground/75">
                <li>
                  <strong>Reino Academy</strong> — educação em inovação corporativa, receita recorrente B2C e B2B.
                </li>
                <li>
                  <strong>FCJ Innovation Club</strong> — ecossistema de assinatura com gamificação e IA, conectando empresas,
                  startups e investidores.
                </li>
              </ul>
            </div>
          </div>

          <div className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-5">
            {[
              ["12+", "Anos de mercado"],
              ["60+", "CVBs no Brasil"],
              ["500+", "Startups aceleradas"],
              ["5", "Países presentes"],
              ["1k+", "Conselheiros"],
            ].map(([v, l]) => (
              <div
                key={l}
                className="rounded-2xl border border-[oklch(0.2_0.06_260)]/20 bg-[oklch(0.18_0.06_260)] p-5 text-center"
              >
                <p className="font-display text-3xl font-bold text-[oklch(0.85_0.16_75)]">{v}</p>
                <p className="mt-1 text-[11px] font-semibold uppercase tracking-wider text-white/70">{l}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* O QUE É DEBÊNTURE CONVERSÍVEL — explanation */}
      <section id="como-funciona" className="border-y border-border/60 bg-secondary/40 py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
            <span className="text-xs font-semibold uppercase tracking-widest text-[oklch(0.5_0.16_210)]">
              Entenda o produto
            </span>
            <h2 className="mt-2 text-3xl font-bold sm:text-4xl">
              O que é uma Debênture Conversível e por que ela é tão interessante?
            </h2>
            <p className="mt-4 text-base leading-relaxed text-foreground/75">
              Uma <strong>debênture conversível</strong> é um título de dívida emitido pela empresa que paga juros
              pré-fixados ao investidor — como uma renda fixa — e dá o direito (não a obrigação) de
              <strong> converter o valor investido em ações</strong> da própria empresa, ao preço definido em contrato.
              Você tem o melhor dos dois mundos: <strong>previsibilidade de renda fixa</strong> hoje e
              <strong> potencial de valorização</strong> amanhã.
            </p>
          </div>

          <div className="mt-10 grid gap-5 md:grid-cols-3">
            {[
              {
                i: ShieldCheck,
                t: "Renda fixa pré-fixada",
                d: "Até 1,6% a.m. pré-fixado, com pagamento mensal de juros. A taxa varia conforme o prazo de vencimento escolhido pelo investidor.",
              },
              {
                i: TrendingUp,
                t: "Upside de equity",
                d: "Direito de virar acionista da FCJ ao preço fixo de R$ 678/ação, com bônus de 30% extra em ações.",
              },
              {
                i: Repeat,
                t: "Liquidez via Investplus",
                d: "Após o encerramento da rodada, é possível transferir ou ceder suas debêntures a outros investidores qualificados, sujeito às condições da plataforma e à legislação aplicável.",
              },
            ].map((b) => (
              <div key={b.t} className="card-soft rounded-2xl border border-border/60 p-6">
                <div className="inline-flex size-11 items-center justify-center rounded-xl bg-[oklch(0.5_0.16_210)]/10 text-[oklch(0.5_0.16_210)]">
                  <b.i className="size-5" />
                </div>
                <h3 className="mt-4 font-display text-lg font-semibold">{b.t}</h3>
                <p className="mt-2 text-sm text-foreground/70">{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ESTRUTURA DA OFERTA */}
      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Estrutura da oferta</h2>
          <div className="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-4">
            <StructureCard
              tag="Tipo de título"
              title="Debênture Conversível"
              desc="Conversível em ações FCJ ao vencimento ou nas janelas, a critério exclusivo do investidor."
            />
            <StructureCard
              tag="Remuneração"
              title="Até 1,6% a.m. pré-fixado"
              desc="Pagamento mensal de juros · taxa varia conforme prazo escolhido."
              accent
            />
            <StructureCard
              icon={ShieldCheck}
              tag="Garantia complementar"
              title="Até R$ 4,5 milhões"
              desc="Garantia em ações da Minas Summit S.A. e Investplus S.A., via Contrato de Investimento — 1,5x a captação."
            />

            <StructureCard
              tag="Transações subsequentes"
              title="Habilitadas"
              desc="Negociação entre investidores via Investplus após fechamento da rodada (CVM 88)."
            />
          </div>


          {/* TIMELINE */}
          <div className="mt-12">
            <h3 className="font-display text-xl font-semibold">Cronograma e janelas de liquidez</h3>
            <div className="mt-6 hidden grid-cols-5 gap-4 md:grid">
              {timeline.map((p) => (
                <TimelineNode key={p.date} {...p} />
              ))}
            </div>
            <div className="mt-6 grid gap-4 md:hidden">
              {timeline.map((p) => (
                <TimelineNode key={p.date} {...p} />
              ))}
            </div>

            <div className="mt-8 grid gap-5 lg:grid-cols-2">
              <WindowCard
                title="1ª Janela — Opção do Investidor"
                rate="1,2% a.m."
                date="17 de junho de 2027"
                desc='Resgate antecipado a critério exclusivo do titular. A emissora não pode resgatar sem anuência do credor (art. 26, I, "e" · CVM 88). Taxa reduzida reflete menor prazo de permanência.'
              />
              <WindowCard
                title="2ª Janela — Opção do Investidor"
                rate="1,4% a.m."
                date="17 de dezembro de 2027"
                desc="Última janela antes do vencimento. Taxa intermediária: acima da 1ª janela, abaixo do vencimento pleno. Iniciativa exclusiva do titular."
              />
            </div>

            <div className="mt-6 flex items-start gap-4 rounded-2xl border border-[oklch(0.5_0.16_210)]/20 bg-[oklch(0.5_0.16_210)]/5 p-5">
              <div className="rounded-xl bg-[oklch(0.5_0.16_210)]/15 p-2 text-[oklch(0.5_0.16_210)]">
                <Repeat className="size-5" />
              </div>
              <div>
                <p className="font-semibold">Transações subsequentes — Liquidez a qualquer tempo</p>
                <p className="mt-1 text-sm text-foreground/70">
                  Após o fechamento da rodada, o titular pode ceder ou transferir suas debêntures a outros investidores qualificados, de acordo com as condições acordadas entre as partes e observadas as regras da plataforma e da Resolução CVM 88/2022.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RENDA MENSAL DE JUROS */}
      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Renda Mensal de Juros</h2>
          <div className="mt-6 rounded-2xl border-2 border-[#00B140] bg-[#f2fdf6] p-6 sm:p-8">
            <h3 className="font-display text-xl font-semibold text-[#00723a] sm:text-2xl">Juros Pagos Mensalmente</h3>
            <p className="mt-1 text-sm text-foreground/65">
              A taxa varia conforme o prazo escolhido pelo investidor.
            </p>
            <div className="mt-6 grid gap-4 md:grid-cols-3">
              {[
                { label: "1ª Janela · 17/06/2027", rate: "1,2% a.m.", income: "R$ 1.080/mês", base: "por R$ 90.000", highlight: false },
                { label: "2ª Janela · 17/12/2027", rate: "1,4% a.m.", income: "R$ 1.260/mês", base: "por R$ 90.000", highlight: false },
                { label: "Vencimento · 17/06/2028", rate: "1,6% a.m.", income: "R$ 1.440/mês", base: "por R$ 90.000", highlight: true },
              ].map((c) => (
                <div
                  key={c.label}
                  className={`rounded-xl bg-white p-5 text-center ${c.highlight ? "border-2 border-[#00B140] shadow-lg shadow-emerald-500/10" : "border border-emerald-500/20"}`}
                >
                  <p className="text-xs font-semibold uppercase tracking-wider text-foreground/60">{c.label}</p>
                  <p className="mt-3 font-display text-2xl font-bold text-[#00723a]">{c.rate}</p>
                  <p className="mt-2 font-display text-lg font-semibold text-foreground">{c.income}</p>
                  <p className="text-xs text-foreground/55">{c.base}</p>
                </div>
              ))}
            </div>
            <p className="mt-6 text-xs leading-relaxed text-foreground/60">
              Quanto maior o prazo de permanência escolhido, maior a taxa mensal. Valores calculados por debênture de
              R$ 30.000; exemplo com 3 debêntures (R$ 90.000). Investimento mínimo: 1 debênture (R$ 30.000).
            </p>
          </div>
        </div>
      </section>

      {/* BÔNUS DE CONVERSÃO */}
      <section className="bg-gradient-to-b from-[oklch(0.18_0.06_260)] to-[oklch(0.15_0.06_260)] py-16 text-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-2 text-[oklch(0.85_0.16_75)]">
            <Star className="size-5" />
            <span className="text-xs font-semibold uppercase tracking-widest">Diferencial exclusivo desta emissão</span>
          </div>
          <h2 className="mt-3 max-w-3xl font-display text-3xl font-bold sm:text-4xl">
            Bônus de <span className="text-[oklch(0.85_0.16_75)]">30% em ações</span> ao converter
          </h2>
          <p className="mt-3 max-w-3xl text-white/75">
            Como os juros são pagos mensalmente, a conversão incide sobre o valor principal, e o investidor recebe ações
            equivalentes a 130% desse valor, ao preço fixo de R$ 678,00 — mesmo se o valor da ação tiver subido.
          </p>

          <div className="mt-10 grid gap-6 lg:grid-cols-2">
            <div className="rounded-2xl border border-white/10 bg-white/[0.04] p-6">
              <h3 className="font-display text-lg font-semibold">Como funciona o bônus</h3>
              <ul className="mt-5 space-y-4">
                <BulletDark label="Preço garantido">
                  R$ 678,00/ação — fixo em contrato, independente de valorização futura da FCJ.
                </BulletDark>
                <BulletDark label="Bônus de 30%">
                  Como os juros são pagos mensalmente, a conversão incide sobre o valor principal, e o investidor
                  recebe ações equivalentes a 130% desse valor, ao preço de R$ 678,00.
                </BulletDark>
                <BulletDark label="Arredondamento a favor">
                  Frações de ação sempre arredondadas para cima — ex.: 172,6 → 173 ações entregues.
                </BulletDark>
                <BulletDark label="Opcional">
                  O investidor pode optar por resgate em dinheiro, sem acionar o bônus de conversão.
                </BulletDark>
              </ul>
            </div>

            {/* Exemplo */}
            <div className="rounded-2xl border border-[oklch(0.85_0.16_75)]/40 bg-[oklch(0.18_0.06_260)] p-6 shadow-2xl">
              <p className="text-[11px] font-semibold uppercase tracking-widest text-white/60">
                Exemplo · 3 Debêntures R$ 90.000 · Conversão em ações
              </p>
              <dl className="mt-4 space-y-3 text-sm">
                <ExampleRow label="Valor principal (base de conversão)" value="R$ 90.000,00" />
                <ExampleRow label="Bônus de 30% em ações" value="+ R$ 27.000,00" highlight />
                <ExampleRow label="Valor total a converter" value="R$ 117.000,00" emphasis />
                <ExampleRow label="Ações recebidas (÷ R$ 678, arredond.)" value="173 ações FCJ" emphasis />
              </dl>
              <p className="mt-5 text-[11px] leading-relaxed text-white/55">
                Exemplo ilustrativo. Os juros são pagos mensalmente e não se acumulam ao valor de conversão. Na
                conversão, apenas o valor principal é convertido em ações, acrescido do bônus de 30%. A valorização das
                ações depende do desempenho futuro da emissora e não é garantida.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* VANTAGENS */}
      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Por que investir nesta debênture</h2>
          <div className="mt-8 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {[
              { i: ShieldCheck, t: "Renda fixa pré-fixada", d: "Até 1,6% a.m. pré-fixados, com juros pagos mensalmente. Taxa definida conforme o prazo escolhido." },
              { i: PiggyBank, t: "Renda mensal recorrente", d: "Você recebe juros todo mês, criando fluxo de caixa recorrente ao longo de todo o investimento." },
              { i: TrendingUp, t: "Upside em equity", d: "Vire sócio do maior CVB da América Latina ao preço fixo de R$ 678/ação." },
              { i: Sparkles, t: "Bônus exclusivo de 30%", d: "Na conversão, recebe 130% do valor principal em ações da FCJ ao preço fixo de R$ 678." },
              { i: Repeat, t: "Liquidez antes do prazo", d: "Duas janelas de saída (17/06/2027 e 17/12/2027) com taxas diferenciadas, a critério exclusivo do investidor." },
              { i: Award, t: "Curadoria FCJ", d: "Operação distribuída pela própria FCJ Invest S.A., plataforma registrada na CVM." },
            ].map((b) => (
              <div key={b.t} className="card-soft rounded-2xl border border-border/60 p-6">
                <div className="inline-flex size-11 items-center justify-center rounded-xl bg-[oklch(0.85_0.16_75)]/15 text-[oklch(0.55_0.16_75)]">
                  <b.i className="size-5" />
                </div>
                <h3 className="mt-4 font-display text-lg font-semibold">{b.t}</h3>
                <p className="mt-2 text-sm text-foreground/70">{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMO INVESTIR */}
      <section className="border-t border-border/60 bg-secondary/40 py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Como investir em 5 passos</h2>
          <div className="mt-8 grid gap-4 md:grid-cols-5">
            {steps.map((s, i) => (
              <div key={s.title} className="relative card-soft rounded-2xl border border-border/60 p-5">
                <div className="brand-gradient flex size-9 items-center justify-center rounded-full font-display text-sm font-bold text-[oklch(0.15_0.02_250)]">
                  {i + 1}
                </div>
                <s.icon className="mt-4 size-5 text-[oklch(0.5_0.16_210)]" />
                <h4 className="mt-2 font-display text-base font-semibold">{s.title}</h4>
                <p className="mt-1 text-xs text-foreground/65">{s.desc}</p>
              </div>
            ))}
          </div>
          <div className="mt-6 rounded-2xl border border-[oklch(0.85_0.16_75)]/40 bg-[oklch(0.85_0.16_75)]/10 p-5 text-sm text-foreground/80">
            <strong>Perfil exigido:</strong> a cota de R$ 30.000 requer declaração de renda bruta anual ou investimentos
            financeiros superiores a R$ 200.000 (Anexo B · CVM 88, art. 4º). Procedimento automático na plataforma.
          </div>
        </div>
      </section>

      {/* LIDERANÇA */}
      <section className="py-16">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="h-1 w-12 brand-gradient rounded-full" />
          <h2 className="mt-3 text-3xl font-bold sm:text-4xl">Liderança da operação</h2>
          <div className="mt-8 grid gap-5 sm:grid-cols-3">
            {leaders.map((l) => (
              <div key={l.name} className="card-soft rounded-2xl border border-border/60 p-6 text-center">
                <div
                  className="mx-auto flex size-16 items-center justify-center rounded-full font-display text-lg font-bold text-white"
                  style={{ backgroundColor: l.color }}
                >
                  {l.initials}
                </div>
                <h4 className="mt-4 font-display font-semibold">{l.name}</h4>
                <p className="mt-1 text-xs text-foreground/65">{l.role}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="hero-bg py-20">
        <div className="mx-auto max-w-4xl px-4 text-center sm:px-6 lg:px-8">
          <h2 className="font-display text-3xl font-bold text-white sm:text-4xl">
            Pronto para combinar renda fixa com upside de equity?
          </h2>
          <p className="mt-4 text-white/75">
            Investimento mínimo de <strong className="text-white">R$ 30.000</strong> · 1 cota · 100 cotas disponíveis ·
            Captação total <strong className="text-white">R$ 3 MM</strong>.
          </p>
          <div className="mt-8 flex flex-wrap justify-center gap-3">
            <a
              href={OFFER_URL}
              className="brand-gradient inline-flex items-center gap-2 rounded-full px-7 py-3 text-sm font-semibold text-[oklch(0.15_0.02_250)]"
            >
              Investir agora <ArrowRight className="size-4" />
            </a>
            <a
              href="https://wa.me/551152863746"
              className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 px-7 py-3 text-sm font-semibold text-white hover:bg-white/10"
            >
              Falar com especialista
            </a>
          </div>
          <p className="mt-8 text-xs leading-relaxed text-white/55">
            Garantia complementar de até R$ 4,5 milhões em ações das empresas Minas Summit S.A. e Investplus S.A.,
            constituída via Contrato de Investimento (não integrante da Escritura de Emissão), equivalente a 1,5x o
            valor da captação. Garantia lastreada em ativos societários, sujeitos a risco de liquidez e variação de
            valor, sem assegurar recuperação integral em caso de execução. Resgate antecipado pela emissora vedado sem
            anuência do credor. Rentabilidade pré-fixada sujeita ao cumprimento das obrigações pela emissora. Risco de
            crédito da emissora não coberto pelo FGC. Leia as Informações Essenciais antes de investir.
          </p>
        </div>
      </section>
    </SiteLayout>
  );
}

/* ---------- helpers ---------- */

const timeline = [
  { date: "2026", label: "Captação aberta (2º semestre de 2026)", tag: "Período de oferta", color: "emerald" as const },
  { date: "Prev. Dez/2026", label: "Encerramento da oferta", tag: "Data estimada", color: "navy" as const },
  { date: "17/06/2027", label: "1ª Janela de saída", tag: "1,2% a.m.", color: "blue" as const },
  { date: "17/12/2027", label: "2ª Janela de saída", tag: "1,4% a.m.", color: "navy" as const },
  { date: "17/06/2028", label: "Vencimento ou conversão", tag: "1,6% a.m.", color: "amber" as const },
];

const steps = [
  { title: "Cadastro", desc: "Crie sua conta em investplus.vc", icon: ClipboardList },
  { title: "Análise", desc: "Acesse a página da oferta", icon: FileSearch },
  { title: "Reserva", desc: "Escolha as cotas e clique em investir", icon: Wallet },
  { title: "Pagamento", desc: "R$ 30k por cota via PIX/TED", icon: CreditCard },
  { title: "Retorno", desc: "Até 1,6% a.m. mensais + bônus de 30% ao converter", icon: PiggyBank },
];

const leaders = [
  { name: "Marcos Knosel", role: "Dir. Relações com Investidores · FCJ", initials: "MK", color: "oklch(0.65 0.17 145)" },
  { name: "Giovanni Oliveira", role: "Diretor de Operações · FCJ", initials: "GO", color: "oklch(0.45 0.16 260)" },
  { name: "Kleisom Sabino", role: "CEO · Investplus (FCJ Invest S.A.)", initials: "KS", color: "oklch(0.72 0.17 60)" },
];

function Stat({ label, value, sub }: { label: string; value: string; sub: string }) {
  return (
    <div>
      <p className="text-[10px] font-semibold uppercase tracking-widest text-white/55">{label}</p>
      <p className="mt-1 font-display text-lg font-bold">{value}</p>
      <p className="text-[11px] text-white/55">{sub}</p>
    </div>
  );
}

function StructureCard({
  tag,
  title,
  desc,
  accent,
  icon: Icon,
}: {
  tag: string;
  title: string;
  desc: string;
  accent?: boolean;
  icon?: React.ComponentType<{ className?: string }>;
}) {
  return (
    <div className="card-soft rounded-2xl border border-border/60 p-6">
      <p className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-widest text-foreground/55">
        {Icon ? <Icon className="size-3.5 text-emerald-600" /> : null}
        {tag}
      </p>

      <h3 className={`mt-2 font-display text-xl font-semibold ${accent ? "text-emerald-600" : ""}`}>{title}</h3>

      <p className="mt-3 text-sm text-foreground/70">{desc}</p>
    </div>
  );
}

function TimelineNode({
  date,
  label,
  tag,
  color,
}: {
  date: string;
  label: string;
  tag: string;
  color: "emerald" | "navy" | "blue" | "amber";
}) {
  const dotColor =
    color === "emerald"
      ? "bg-emerald-500"
      : color === "blue"
        ? "bg-[oklch(0.6_0.15_220)]"
        : color === "amber"
          ? "bg-[oklch(0.78_0.17_75)]"
          : "bg-[oklch(0.35_0.1_260)]";
  const pillColor =
    color === "emerald"
      ? "border-emerald-500/40 text-emerald-700 bg-emerald-500/10"
      : color === "blue"
        ? "border-[oklch(0.6_0.15_220)]/40 text-[oklch(0.4_0.15_220)] bg-[oklch(0.6_0.15_220)]/10"
        : color === "amber"
          ? "border-[oklch(0.78_0.17_75)]/40 text-[oklch(0.5_0.17_75)] bg-[oklch(0.78_0.17_75)]/10"
          : "border-[oklch(0.35_0.1_260)]/40 text-[oklch(0.35_0.1_260)] bg-[oklch(0.35_0.1_260)]/10";
  return (
    <div className="relative rounded-2xl border border-border/60 bg-card p-4">
      <div className="flex items-center gap-2">
        <span className={`inline-block size-3 rounded-full ${dotColor}`} />
        <p className="font-display text-sm font-bold">{date}</p>
      </div>
      <p className="mt-2 text-xs text-foreground/70">{label}</p>
      <span className={`mt-3 inline-flex rounded-full border px-2.5 py-0.5 text-[10px] font-semibold ${pillColor}`}>
        {tag}
      </span>
    </div>
  );
}

function WindowCard({ title, rate, date, desc }: { title: string; rate: string; date: string; desc: string }) {
  return (
    <div className="card-soft rounded-2xl border-t-4 border-t-[oklch(0.6_0.15_220)] border border-border/60 p-6">
      <div className="flex items-center justify-between">
        <h4 className="font-display font-semibold">{title}</h4>
        <span className="rounded-full bg-[oklch(0.6_0.15_220)]/10 px-3 py-1 text-xs font-bold text-[oklch(0.4_0.15_220)]">
          {rate}
        </span>
      </div>
      <p className="mt-3 flex items-center gap-2 text-sm font-semibold">
        <Calendar className="size-4 text-[oklch(0.5_0.16_210)]" /> {date}
      </p>
      <p className="mt-3 text-sm text-foreground/65">{desc}</p>
    </div>
  );
}

function BulletDark({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <li className="flex gap-3">
      <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-[oklch(0.85_0.16_75)]" />
      <div className="text-sm text-white/80">
        <span className="font-semibold text-white">{label}: </span>
        {children}
      </div>
    </li>
  );
}

function ExampleRow({
  label,
  value,
  emphasis,
  highlight,
}: {
  label: string;
  value: string;
  emphasis?: boolean;
  highlight?: boolean;
}) {
  return (
    <div
      className={`flex items-center justify-between gap-4 border-b border-white/10 pb-2 last:border-0 ${
        emphasis ? "font-semibold" : ""
      }`}
    >
      <dt className="text-white/65">{label}</dt>
      <dd className={highlight ? "text-emerald-300 font-bold" : "text-white"}>{value}</dd>
    </div>
  );
}