import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  ArrowLeft,
  ArrowRight,
  PlayCircle,
  AlertTriangle,
  Award,
  PlugZap,
  Network,
  HardHat,
  BadgeCheck,
  MessageCircle,
  
  CheckCircle2,
} from "lucide-react";
import { SiteLayout } from "@/components/SiteLayout";
import heroBg from "@/assets/bg-vox-epower.jpg";
import renanVerliPhoto from "@/assets/vox-renan-verli.jpeg";
import renanTavaresPhoto from "@/assets/vox-renan-tavares.jpeg";
import pamelaNunesPhoto from "@/assets/vox-pamela-nunes.jpeg";

const TEAM_PHOTOS = {
  renanVerli: renanVerliPhoto,
  renanTavares: renanTavaresPhoto,
  pamelaNunes: pamelaNunesPhoto,
};

export const Route = createFileRoute("/vox-epower")({
  head: () => ({
    meta: [
      { title: "VOX EPOWER — InvestPlus" },
      {
        name: "description",
        content:
          "Invista na expansão da infraestrutura de recarga para veículos elétricos da VOX EPOWER.",
      },
      {
        property: "og:title",
        content: "InvestPlus — Invista nas empresas que estão mudando o mercado",
      },
      {
        property: "og:description",
        content:
          "Invista na expansão da infraestrutura de recarga para veículos elétricos da VOX EPOWER.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: VoxEpower,
});

function VoxEpower() {
  const PLATFORM_URL = "https://www.platform.investplus.vc/admin/rounds/company/56/round/45";
  const WHATSAPP_URL = "https://wa.me/551152863746";

  return (
    <SiteLayout>
      <Hero />
      <MainGrid platformUrl={PLATFORM_URL} whatsappUrl={WHATSAPP_URL} />
      <Team />
      <Backers />
      <FinalCta platformUrl={PLATFORM_URL} />
    </SiteLayout>
  );
}



function Hero() {
  return (
    <section className="hero-bg relative overflow-hidden">
      <img
        src={heroBg}
        alt="Composição geométrica em azul e violeta representando a infraestrutura de recarga da VOX EPOWER"
        width={1920}
        height={1088}
        className="absolute inset-0 h-full w-full object-cover opacity-45"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-[oklch(0.15_0.03_250)]/95 via-[oklch(0.15_0.03_250)]/70 to-transparent" />
      <div className="relative mx-auto flex min-h-[55vh] max-w-7xl flex-col justify-end px-4 py-16 sm:px-6 lg:min-h-[70vh] lg:px-8 lg:py-24">
        <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 flex flex-wrap items-center gap-3">
          <span className="rounded-full border border-white/30 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white">
            Infraestrutura de Recarga Elétrica
          </span>
          <span className="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-emerald-300">
            Em captação
          </span>
        </div>
        <h1 className="mt-5 font-display text-5xl font-bold tracking-tight text-white sm:text-6xl">
          VOX EPOWER
        </h1>
        <p className="mt-4 max-w-3xl text-xl text-white/85 sm:text-2xl">
          Invista na expansão da infraestrutura de recarga para veículos elétricos e participe de uma
          operação lastreada em ativos reais
        </p>
        <p className="mt-6 max-w-3xl text-base leading-relaxed text-white/70">
          A VOX EPOWER é uma empresa brasileira especializada em infraestrutura para mobilidade
          elétrica, com plataforma proprietária de monitoramento e operação (VOX ECloud). A companhia
          implanta e opera carregadores AC e DC próprios, integrando hardware, software e inteligência
          artificial para acelerar a transição energética no Brasil, com expansão internacional já
          iniciada em Portugal.
        </p>
        <dl className="mt-10 grid gap-px overflow-hidden rounded-2xl border border-white/15 bg-white/10 sm:grid-cols-3">
          {[
            { v: "R$ 1.000.000,00", l: "Objetivo de captação" },
            { v: "2% a.m.", l: "Juros mensais fixos" },
            { v: "30/03/2029", l: "Vencimento do mútuo" },
          ].map((s) => (
            <div key={s.l} className="bg-[oklch(0.15_0.03_250)]/70 px-6 py-5 backdrop-blur-sm">
              <dt className="text-xs font-semibold uppercase tracking-widest text-white/60">{s.l}</dt>
              <dd className="mt-2 font-display text-2xl font-bold text-white sm:text-3xl">
                <span className="brand-text">{s.v}</span>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}


const TABS = [
  { key: "visao", label: "Visão Geral" },
  { key: "mercado", label: "O Mercado" },
  { key: "modelo", label: "Modelo de Negócio" },
  { key: "roadmap", label: "Roadmap" },
  { key: "riscos", label: "Principais Riscos" },
] as const;

function MainGrid({ platformUrl, whatsappUrl }: { platformUrl: string; whatsappUrl: string }) {
  const [tab, setTab] = useState<(typeof TABS)[number]["key"]>("visao");

  return (
    <section className="py-16">
      <div className="mx-auto grid max-w-7xl items-start gap-10 px-4 sm:px-6 lg:grid-cols-12 lg:px-8">
        <div className="lg:col-span-7">
          <div className="flex flex-wrap gap-2 border-b border-border/60">
            {TABS.map((t) => (
              <button
                key={t.key}
                onClick={() => setTab(t.key)}
                className={`relative px-4 py-3 text-sm font-semibold transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[oklch(0.5_0.16_210)] ${
                  tab === t.key ? "text-[oklch(0.5_0.16_210)]" : "text-foreground/60 hover:text-foreground"
                }`}
              >
                {t.label}
                {tab === t.key && (
                  <span className="brand-gradient absolute inset-x-0 -bottom-px h-0.5 rounded-full" />
                )}
              </button>
            ))}
          </div>

          <div className="mt-8">
            {tab === "visao" && <TabVisao />}
            {tab === "mercado" && <TabMercado />}
            {tab === "modelo" && <TabModelo />}
            {tab === "roadmap" && <TabRoadmap />}
            {tab === "riscos" && <TabRiscos />}
          </div>

          <UseOfProceeds />
        </div>

        <aside className="lg:col-span-5">
          <div className="static space-y-6 lg:sticky lg:top-24 lg:self-start">
            <VideoCard />
            <OfferCard platformUrl={platformUrl} whatsappUrl={whatsappUrl} />
          </div>
        </aside>
      </div>
    </section>
  );
}

function TabVisao() {
  const pillars = [
    {
      icon: Award,
      t: "Validação tecnológica",
      d: "Startup nº 1 no Google Cloud Bootcamp 2026, reconhecimento na implantação de tecnologia de AI-Mobility na plataforma proprietária VOX ECloud.",
    },
    {
      icon: PlugZap,
      t: "Expansão com ativos reais",
      d: "Capital destinado à implantação de novos carregadores AC e DC, infraestrutura elétrica e ativação dos ativos, gerando receita recorrente e retorno sobre o capital investido.",
    },
    {
      icon: Network,
      t: "Escala com modelo híbrido",
      d: "Modelo de expansão híbrido que combina a implantação de ativos pela VOX EPOWER com franquias estratégicas (bandeira VOX), acelerando o crescimento da rede e ampliando a presença no mercado.",
    },
    {
      icon: HardHat,
      t: "Empresa de engenharia de ponta",
      d: "A VOX possui registros e atuação junto aos CREAs estaduais, com time especializado em infraestrutura de recarga para veículos elétricos: projeto elétrico, dimensionamento, instalação e gestão de eletropostos.",
    },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        A VOX EPOWER nasceu com a missão de acelerar a transição energética por meio da implantação e
        operação de carregadores inteligentes para veículos elétricos. A empresa desenvolve soluções
        completas que integram hardware, software e inteligência artificial através da plataforma
        proprietária VOX ECloud, permitindo monitoramento remoto, gestão operacional e alta
        disponibilidade dos ativos. Com operação própria no Brasil e expansão internacional iniciada
        por Portugal, a VOX EPOWER já conquistou reconhecimentos como o 1º lugar no Google Cloud
        Bootcamp IA 2026, o 1º lugar na categoria de infraestrutura de EV Charging no ranking da
        Crunchbase, Top 10 Mobility da 100 Open Startups, Top 100 Sebrae Startups 2026, apoio da
        ApexBrasil para internacionalização e incubação pela INOVA Quality Hub em Portugal.
      </p>
      <div className="space-y-3">
        {pillars.map((p) => (
          <div key={p.t} className="flex items-start gap-4 rounded-xl bg-muted/60 p-5">
            <div className="brand-gradient inline-flex size-10 shrink-0 items-center justify-center rounded-lg">
              <p.icon className="size-5 text-[oklch(0.15_0.02_250)]" />
            </div>
            <div>
              <h3 className="font-display text-base font-semibold">{p.t}</h3>
              <p className="mt-1 text-sm leading-relaxed text-foreground/70">{p.d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabMercado() {
  const kpis = [
    {
      v: "R$ 200 bi/ano",
      l: "A partir de 2030, a cadeia de veículos elétricos no Brasil deve movimentar mais de R$ 200 bilhões por ano, com R$ 14 bi direcionados à infraestrutura.",
      f: "Fonte: O Globo, 2025 / McKinsey",
    },
    {
      v: "+223.912 emplacamentos em 2025",
      l: "O Brasil já ultrapassa 500 mil veículos eletrificados em circulação, saindo de ~49 mil emplacamentos em 2022 para mais de 223 mil em 2025.",
      f: "Fonte: dados de emplacamento, 2025",
    },
    {
      v: "1,4 milhão de veículos até 2030",
      l: "Projeção para a frota elétrica em circulação no Brasil até 2030.",
      f: "Fonte: Bright Consulting",
    },
  ];
  const sizes = [
    ["TAM", "R$ 200 bilhões/ano"],
    ["SAM", "R$ 14 bilhões/ano"],
    ["SOM", "R$ 280 milhões/ano"],
  ];
  return (
    <div className="space-y-8">
      <p className="leading-relaxed text-foreground/80">
        O mercado brasileiro de veículos elétricos cresce rapidamente, mas a expansão da
        infraestrutura de recarga ainda não acompanha esse ritmo. A baixa disponibilidade de
        carregadores e a falta de plataformas inteligentes de operação e monitoramento dificultam a
        expansão da mobilidade elétrica no país.
      </p>
      <div className="grid gap-4 sm:grid-cols-3">
        {kpis.map((k) => (
          <div key={k.v} className="card-soft rounded-2xl border border-border/60 p-5">
            <p className="font-display text-xl font-bold text-emerald-600">{k.v}</p>
            <p className="mt-2 text-xs leading-relaxed text-foreground/60">{k.l}</p>
            <p className="mt-2 text-[11px] text-foreground/40">{k.f}</p>
          </div>
        ))}
      </div>
      <div className="overflow-hidden rounded-2xl border border-border/60">
        <div className="bg-muted p-4 text-xs font-semibold uppercase tracking-wider text-foreground/60">
          Tamanho de mercado
        </div>
        {sizes.map(([a, b]) => (
          <div key={a} className="grid grid-cols-2 border-t border-border/60 text-sm">
            <div className="p-4 font-semibold text-foreground/70">{a}</div>
            <div className="border-l border-border/60 p-4 font-medium text-foreground">{b}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TabModelo() {
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        A VOX EPOWER opera um modelo integrado de infraestrutura para mobilidade elétrica: implanta
        carregadores próprios que geram receita recorrente por meio da venda de energia elétrica,
        serviços de recarga e operação da plataforma de gestão VOX ECloud.
      </p>
      <p className="rounded-xl bg-muted/60 p-5 text-sm leading-relaxed text-foreground/75">
        Os recursos captados nesta oferta serão destinados ao CAPEX de expansão da rede própria de
        carregadores — aquisição de carregadores AC e DC, infraestrutura elétrica, obras civis,
        instalação, homologação junto às concessionárias, integração com a plataforma VOX ECloud e
        comissionamento dos ativos.
      </p>
    </div>
  );
}

function TabRoadmap() {
  const milestones = [
    {
      d: "Meses 1 a 4",
      t: "Período de carência",
      x: "aquisição dos equipamentos, fabricação, logística, instalação, homologação junto às concessionárias, energização e testes operacionais",
    },
    {
      d: "A partir do mês 5",
      t: "Operação comercial",
      x: "entrada em operação comercial dos ativos instalados, com início da geração de receita operacional da rede",
    },
  ];
  return (
    <div>
      <ol className="relative space-y-6 border-l-2 border-[oklch(0.5_0.16_210)]/40 pl-6">
        {milestones.map((m) => (
          <li key={m.d} className="relative">
            <span className="absolute -left-[31px] top-1.5 size-3.5 rounded-full bg-emerald-500 ring-4 ring-background" />
            <p className="text-xs font-semibold uppercase tracking-widest text-foreground/50">{m.d}</p>
            <div className="card-soft mt-2 rounded-xl border border-border/60 p-4">
              <h3 className="font-display text-base font-semibold">{m.t}</h3>
              <p className="mt-1 text-sm leading-relaxed text-foreground/70">{m.x}</p>
            </div>
          </li>
        ))}
      </ol>
      <p className="mt-4 text-xs text-foreground/50">
        O cronograma descreve o plano de execução da companhia e não constitui garantia de execução.
      </p>
    </div>
  );
}

function UseOfProceeds() {
  const items = [
    "Aquisição de carregadores AC e DC",
    "Infraestrutura elétrica",
    "Obras civis",
    "Materiais elétricos",
    "Instalação dos equipamentos",
    "Homologação junto às concessionárias",
    "Integração com a plataforma VOX ECloud",
    "Comissionamento",
    "Entrada em operação dos ativos",
  ];
  return (
    <div className="mt-14">
      <h2 className="font-display text-2xl font-bold">Destinação dos recursos</h2>
      <p className="mt-4 leading-relaxed text-foreground/80">
        <strong className="text-foreground">100% dos recursos captados (R$ 1.000.000,00)</strong> serão
        destinados ao CAPEX de expansão da rede de carregadores, incluindo:
      </p>
      <ul className="mt-6 grid gap-3 sm:grid-cols-2">
        {items.map((i) => (
          <li
            key={i}
            className="card-soft flex items-start gap-3 rounded-xl border border-border/60 p-4 text-sm text-foreground/75"
          >
            <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-emerald-600" />
            {i}
          </li>
        ))}
      </ul>
      <p className="mt-6 rounded-xl bg-muted/60 p-5 text-sm leading-relaxed text-foreground/75">
        Nenhum recurso será destinado à distribuição de dividendos, pagamento de sócios ou despesas
        pessoais.
      </p>
    </div>
  );
}

const VIDEOS = [
  {
    id: "ZE4p7XxbuPQ",
    label: "Conheça a VOX EPOWER",
    caption: "Apresentação institucional da companhia.",
  },
];

function VideoCard() {
  return (
    <div className="space-y-6">
      {VIDEOS.map((v, i) => (
        <div
          key={`${v.id}-${i}`}
          className="card-soft overflow-hidden rounded-2xl border border-border/60 border-t-4 border-t-[oklch(0.5_0.16_210)] p-5 shadow-lg"
        >
          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-foreground/60">
            <PlayCircle className="size-4 text-[oklch(0.5_0.16_210)]" /> {v.label}
          </div>
          <div className="mt-4 aspect-video w-full overflow-hidden rounded-xl bg-muted">
            <iframe
              src={`https://www.youtube.com/embed/${v.id}?rel=0&modestbranding=1`}
              title={`VOX EPOWER — ${v.label}`}
              loading="lazy"
              allowFullScreen
              allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture; web-share"
              className="h-full w-full"
            />
          </div>
          <p className="mt-3 text-xs text-foreground/50">{v.caption}</p>
        </div>
      ))}
    </div>
  );
}

function OfferCard({ platformUrl, whatsappUrl }: { platformUrl: string; whatsappUrl: string }) {
  const fields = [
    { l: "Investimento mínimo / cota", v: "R$ 20.000,00" },
    { l: "Tipo de valor mobiliário", v: "Mútuo Simples (2% a.m. — juros mensais)" },
    { l: "Objetivo de captação", v: "R$ 1.000.000,00" },
    { l: "Quantidade de cotas", v: "50 cotas" },
  ];

  return (
    <div className="space-y-4">
      <div className="card-soft rounded-2xl border border-border/60 p-6 shadow-lg">
        <p className="text-xs font-semibold uppercase tracking-widest text-foreground/50">
          Informações da oferta
        </p>
        <dl className="mt-4 divide-y divide-border/60">
          {fields.map((f) => (
            <div key={f.l} className="py-3">
              <dt className="text-[11px] uppercase tracking-wider text-foreground/50">{f.l}</dt>
              <dd className="mt-0.5 font-semibold">{f.v}</dd>
            </div>
          ))}
        </dl>
        <a
          href={platformUrl}
          className="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-full bg-emerald-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-emerald-700"
        >
          Conheça esta oportunidade <ArrowRight className="size-4" />
        </a>
        <a
          href={whatsappUrl}
          className="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-full border border-[oklch(0.5_0.16_210)] px-6 py-3 text-sm font-semibold text-[oklch(0.5_0.16_210)] transition hover:bg-[oklch(0.5_0.16_210)]/10"
        >
          <MessageCircle className="size-4" /> Falar com especialista
        </a>
      </div>
      <div className="flex items-center justify-center gap-2 rounded-full border border-border/60 bg-muted/60 px-4 py-2 text-xs font-semibold uppercase tracking-wider text-foreground/60">
        <BadgeCheck className="size-4 text-[oklch(0.5_0.16_210)]" /> Curadoria FCJ Group
      </div>
    </div>
  );
}

function Team() {
  const people = [
    {
      n: "Renan Verli",
      r: "Cofounder",
      avatar: TEAM_PHOTOS.renanVerli,
      b: "Engenheiro e empreendedor com experiência em energia, telecomunicações e mobilidade elétrica. Lidera a estratégia, inovação e expansão nacional e internacional da VOX EPOWER.",
    },
    {
      n: "Renan Tavares",
      r: "CTO",
      avatar: TEAM_PHOTOS.renanTavares,
      b: "Especialista em desenvolvimento de software, arquitetura de sistemas e infraestrutura para mobilidade elétrica. Lidera a tecnologia da plataforma VOX ECloud e as soluções de IA.",
    },
    {
      n: "Pamela Nunes",
      r: "CFO",
      avatar: TEAM_PHOTOS.pamelaNunes,
      b: "Responsável pela gestão financeira, administrativa e governança da VOX EPOWER. Atua na estruturação financeira, planejamento estratégico e relacionamento com investidores.",
    },
  ];
  return (
    <section className="border-y border-border/60 bg-muted/50 py-16">
      <div className="mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
        <h2 className="font-display text-3xl font-bold">Time</h2>
        <p className="mx-auto mt-4 max-w-2xl leading-relaxed text-foreground/70">
          Experiência comprovada em tecnologia, mercado financeiro e construção de negócios.
        </p>
        <div className="mt-10 grid gap-6 sm:grid-cols-3">
          {people.map((p) => (
            <div key={p.n} className="card-soft rounded-2xl border border-border/60 p-7">
              <div className="brand-gradient mx-auto flex size-24 items-center justify-center overflow-hidden rounded-full font-display text-2xl font-bold text-[oklch(0.15_0.02_250)]">
                {p.avatar ? (
                  <img src={p.avatar} alt={p.n} loading="lazy" className="h-full w-full object-cover" />
                ) : (
                  p.n
                    .split(" ")
                    .map((w) => w[0])
                    .join("")
                )}
              </div>
              <p className="mt-4 font-display text-lg font-semibold">{p.n}</p>
              <p className="mt-1 text-sm font-medium text-[oklch(0.5_0.16_210)]">{p.r}</p>
              <p className="mt-3 text-sm leading-relaxed text-foreground/70">{p.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Backers() {
  const names = [
    "Energy Hub",
    "Bossa Invest",
    "RAJA",
    "FCJ",
    "Unifique",
    "Google for Startups",
    "NVIDIA Inception Program",
    "AWS Startups",
    "Dell for Startups",
    "GitHub",
    "Stripe",
    "UFRJ",
    "Sebrae",
    "Maravalley",
  ];
  return (
    <section className="py-16">
      <div className="mx-auto max-w-5xl px-4 text-center sm:px-6 lg:px-8">
        <h2 className="font-display text-3xl font-bold">Fundos e parceiros</h2>
        <p className="mx-auto mt-4 max-w-3xl leading-relaxed text-foreground/70">
          A VOX EPOWER conta com o apoio de fundos e parceiros estratégicos que já investem na
          companhia, incluindo a EnergyHub, uma Corporate Venture Builder (CVB) que também é
          investidora da VOX, e a Bossa Invest.
        </p>
        <div className="mt-10 flex flex-wrap justify-center gap-3">
          {names.map((n) => (
            <span
              key={n}
              className="card-soft rounded-xl border border-border/60 px-5 py-3 text-sm font-semibold text-foreground/75"
            >
              {n}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function TabRiscos() {
  const risks = [
    {
      t: "Risco de crédito",
      d: "A rentabilidade fixa contratada não é garantia de recebimento; o pagamento dos juros e a devolução do principal dependem da capacidade financeira da VOX EPOWER.",
    },
    {
      t: "Risco de execução do CAPEX",
      d: "Atrasos na aquisição, instalação ou homologação dos equipamentos podem postergar a formalização integral da garantia.",
    },
    {
      t: "Risco de garantia progressiva",
      d: "A garantia real sobre os equipamentos é constituída ao longo da execução do projeto, e não integralmente no fechamento da oferta; até sua formalização completa, a cobertura efetiva pode ser parcial.",
    },
    {
      t: "Risco de mercado",
      d: "O ritmo de adoção de veículos elétricos no Brasil pode variar em relação às projeções de crescimento da frota.",
    },
    {
      t: "Risco operacional",
      d: "Indisponibilidade temporária de equipamentos, falhas técnicas ou dependência da infraestrutura elétrica das concessionárias locais.",
    },
    {
      t: "Risco regulatório",
      d: "Alterações nas normas do setor elétrico, de mobilidade ou na regulamentação de investimento participativo (CVM 88) podem exigir adaptações no modelo de negócio ou na oferta.",
    },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        Todo investimento envolve riscos. A companhia adota estratégia de gestão e mitigação
        contínua, mas os fatores abaixo devem ser considerados antes de qualquer decisão.
      </p>
      <div className="grid gap-4 sm:grid-cols-2">
        {risks.map((r) => (
          <div key={r.t} className="card-soft rounded-xl border border-border/60 p-5">
            <AlertTriangle className="size-5 text-amber-500" />
            <h3 className="mt-3 font-display text-base font-semibold">{r.t}</h3>
            <p className="mt-2 text-sm leading-relaxed text-foreground/70">{r.d}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function FinalCta({ platformUrl }: { platformUrl: string }) {
  return (
    <section className="hero-bg py-20">
      <div className="mx-auto max-w-3xl 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 conhecer a oferta da VOX EPOWER?
        </h2>
        <p className="mt-4 text-white/75">
          Investimento mínimo de R$ 20.000,00. Acesse a plataforma para conhecer todas as informações
          essenciais da oferta.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-3">
          <a
            href={platformUrl}
            className="inline-flex items-center gap-2 rounded-full bg-emerald-600 px-7 py-3 text-sm font-semibold text-white transition hover:bg-emerald-700"
          >
            Conhecer esta oportunidade <ArrowRight className="size-4" />
          </a>
          <Link
            to="/ofertas"
            className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/5 px-7 py-3 text-sm font-semibold text-white hover:bg-white/10"
          >
            Ver outras ofertas
          </Link>
        </div>
        <p className="mt-8 text-sm font-medium text-white/85">
          Não invista antes de entender as informações essenciais da oferta.
        </p>
      </div>
    </section>
  );
}