import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  ArrowLeft,
  ArrowRight,
  PlayCircle,
  AlertTriangle,
  Music4,
  LayoutDashboard,
  HeartHandshake,
  Globe2,
  CreditCard,
  Rocket,
  Users,
  MessageCircle,
  BadgeCheck,
} from "lucide-react";
import { SiteLayout } from "@/components/SiteLayout";
import heroBg from "@/assets/bg-rumpi.jpg";
import andrePhoto from "@/assets/rumpi-andre-izidro.jpg";
import odilonPhoto from "@/assets/rumpi-odilon-borges.jpeg";

export const Route = createFileRoute("/rumpi")({
  head: () => ({
    meta: [
      { title: "Rumpi — InvestPlus" },
      {
        name: "description",
        content:
          "Rumpi, por Atabaque Entretenimento: o primeiro ERP da música independente do mundo — gestão de direitos, royalties e financeiro em um único painel.",
      },
      { property: "og:title", content: "Rumpi — InvestPlus" },
      {
        property: "og:description",
        content:
          "Rumpi, por Atabaque Entretenimento: o primeiro ERP da música independente do mundo — gestão de direitos, royalties e financeiro em um único painel.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Rumpi,
});

function Rumpi() {
  const PLATFORM_URL = "https://www.platform.investplus.vc";
  const WHATSAPP_URL = "https://wa.me/551152863746";

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

function DraftBanner() {
  return (
    <div className="border-b border-amber-500/40 bg-amber-500/15">
      <div className="mx-auto flex max-w-7xl items-center justify-center gap-2 px-4 py-2.5 text-center sm:px-6 lg:px-8">
        <AlertTriangle className="size-4 shrink-0 text-amber-500" />
        <p className="text-xs font-semibold uppercase tracking-wider text-amber-700">
          Rascunho — página em revisão, ainda não publicada
        </p>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero-bg relative overflow-hidden">
      <img
        src={heroBg}
        alt="Estúdio de música ao anoitecer, com guitarra e mesa de mixagem"
        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">
            MusicTech
          </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>
          <a
            href="https://www.cesar.org.br/ventures"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-white transition hover:bg-white/20"
          >
            <BadgeCheck className="size-3.5" /> Apoiada pelo CESAR Ventures
          </a>
        </div>
        <h1 className="mt-5 font-display text-5xl font-bold tracking-tight text-white sm:text-6xl">
          Rumpi
        </h1>
        <p className="mt-2 text-sm font-medium uppercase tracking-widest text-white/60">
          por Atabaque Entretenimento
        </p>
        <p className="mt-4 max-w-3xl text-xl text-white/85 sm:text-2xl">
          O primeiro ERP da música independente do mundo — o back office que faltava para o artista e
          o selo tocarem sem parar
        </p>
        <p className="mt-6 max-w-3xl text-base leading-relaxed text-white/70">
          O Rumpi nasce de uma agência que já viveu a dor do mercado por dentro: cinco anos cuidando
          de direitos autorais, royalties e gestão financeira de artistas e selos — incluindo nomes
          como Ludmilla, Thiaguinho, Jota Quest e Felipe Amorim. Agora essa experiência vira
          tecnologia: uma plataforma que organiza, em um só painel, tudo o que hoje vive em planilha,
          PDF e repasse por Pix.
        </p>
      </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: Music4,
      t: "Feito por quem faz a música",
      d: "Cinco anos de agência cuidando de direitos autorais, marketing e gestão financeira de artistas e selos — a dor foi validada na prática, não em pesquisa de mercado.",
    },
    {
      icon: HeartHandshake,
      t: "Confiança da cena",
      d: "Atendimento a artistas como Ludmilla, Thiaguinho, Jota Quest, Toquinho e Felipe Amorim, e projetos com TV Globo, Meta e Spotify.",
    },
    {
      icon: LayoutDashboard,
      t: "Tudo em um painel só",
      d: "Contratos, splits, royalties, ficha técnica e repasses deixam a planilha e o PDF e passam a viver em um lugar organizado, rastreável e compartilhável.",
    },
    {
      icon: Users,
      t: "Reconhecimento local",
      d: "A Atabaque foi reconhecida pela Prefeitura do Rio de Janeiro como um dos principais players de música da cidade.",
    },
    {
      icon: BadgeCheck,
      t: "Apoio do CESAR Ventures",
      d: "A Rumpi é uma empresa apoiada pelo CESAR Ventures, que também participa do projeto — respaldo técnico e institucional de um dos principais centros de tecnologia e inovação do país.",
    },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        A Atabaque começou há cinco anos como agência de marketing e gestão de direitos musicais.
        Nesse caminho, sentou do lado do artista e do selo para resolver contratos, splits, royalties
        e repasses — e descobriu que quase todo o mercado independente ainda funciona com planilha,
        PDF anexado no e-mail e pagamento feito na mão.
      </p>
      <p className="leading-relaxed text-foreground/80">
        Dessa vivência nasceu o <strong className="text-foreground">Rumpi</strong>: a expansão natural
        da Atabaque para tecnologia. Um ERP construído por quem faz a música, e não por quem observa
        o mercado de fora. Enquanto o artista independente movimenta bilhões, sua carreira continua
        sendo administrada como um hobby — o Rumpi organiza isso em um único painel.
      </p>
      <p className="leading-relaxed text-foreground/80">
        Não é só um software financeiro: é uma ferramenta que devolve tempo e dinheiro para quem faz
        arte, num país que é potência musical e, ao mesmo tempo, historicamente carente de
        infraestrutura para seus próprios criadores.
      </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$ 170 bi", l: "TAM — música gravada no mundo" },
    { v: "11 mi+", l: "SAM — artistas e selos independentes no mundo" },
    { v: "500 mil+", l: "SOM — artistas e selos independentes no Brasil" },
  ];
  return (
    <div className="space-y-8">
      <p className="leading-relaxed text-foreground/80">
        A indústria musical vive sua maior transformação desde que o streaming venceu a pirataria. A
        receita global de música gravada deve dobrar até 2035, e o Brasil aparece entre os 8
        principais motores desse crescimento — um mercado que canta muito e ainda tem pouca
        infraestrutura para administrar o que produz.
      </p>
      <div>
        <div className="grid gap-4 sm:grid-cols-3">
          {kpis.map((k) => (
            <div key={k.l} className="card-soft rounded-2xl border border-border/60 p-5">
              <p className="font-display text-2xl font-bold text-emerald-600">{k.v}</p>
              <p className="mt-1 text-xs leading-relaxed text-foreground/60">{k.l}</p>
            </div>
          ))}
        </div>
        <p className="mt-3 text-xs text-foreground/50">
          Fonte de crescimento projetado: Goldman Sachs (Music in the Air).
        </p>
      </div>
      <p className="leading-relaxed text-foreground/80">
        Fundos internacionais de venture capital seguem investindo de forma agressiva no segmento, com
        negócios já fechados na ordem de centenas de milhões a bilhões de dólares em players de
        tecnologia para música. É um sinal claro de que a janela de entrada está aberta agora.
      </p>
      <div className="flex items-start gap-4 rounded-xl bg-muted/60 p-5">
        <Globe2 className="mt-0.5 size-5 shrink-0 text-[oklch(0.5_0.16_210)]" />
        <p className="text-sm leading-relaxed text-foreground/75">
          O Rumpi nasce em português, para a realidade do artista brasileiro, mas com arquitetura
          pensada desde o início para atender selos e associações fora do país.
        </p>
      </div>
    </div>
  );
}

function TabModelo() {
  const traction = [
    { v: "120+", l: "artistas e selos cadastrados no plano gratuito" },
    { v: "AGO · 2026", l: "primeiro cliente pagante fechado" },
    { v: "14", l: "clientes pagantes projetados até dez/2026" },
    { v: "170", l: "clientes pagantes projetados até jun/2027" },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        O Rumpi opera em modelo <strong className="text-foreground">SaaS por sistema de créditos</strong>,
        com planos que crescem junto com o artista ou o selo: começa de graça, e o consumo aumenta
        conforme a carreira ganha volume de lançamentos, contratos e repasses.
      </p>
      <div className="grid gap-4 sm:grid-cols-2">
        {traction.map((t) => (
          <div key={t.l} className="card-soft rounded-2xl border border-border/60 p-5">
            <p className="font-display text-xl font-bold text-emerald-600">{t.v}</p>
            <p className="mt-1 text-sm leading-relaxed text-foreground/65">{t.l}</p>
          </div>
        ))}
      </div>
      <div className="card-soft flex items-start gap-4 rounded-xl border border-border/60 p-5">
        <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
          <CreditCard className="size-5 text-[oklch(0.5_0.16_210)]" />
        </div>
        <p className="text-sm leading-relaxed text-foreground/70">
          <strong className="font-display text-base font-semibold text-foreground">
            Receita real desde o dia um
          </strong>{" "}
          — a Atabaque segue operando em paralelo como agência, prestando serviços premium
          complementares ao Rumpi. Isso significa faturamento entrando e burn reduzido enquanto a
          tecnologia escala.
        </p>
      </div>
      <div className="card-soft flex items-start gap-4 rounded-xl border border-border/60 p-5">
        <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
          <Rocket className="size-5 text-[oklch(0.5_0.16_210)]" />
        </div>
        <p className="text-sm leading-relaxed text-foreground/70">
          <strong className="font-display text-base font-semibold text-foreground">
            Lançamento na Casa UBC
          </strong>{" "}
          — uma masterclass que reuniu nomes como Simoninha, Joyce Alane e Marcelo Falcão e captou 72
          novos usuários em um único dia. Tração e proximidade real com a cena, no mesmo movimento.
        </p>
      </div>
    </div>
  );
}

function TabRoadmap() {
  const milestones = [
    {
      d: "Q3 · 2026",
      t: "Organização interna e início da monetização",
      x: "foco na conexão digital com artistas e selos, com os primeiros planos pagos em operação",
    },
    {
      d: "Q4 · 2026",
      t: "Transparência financeira",
      x: "ficha técnica colaborativa e predição de receitas para artistas e selos",
    },
    {
      d: "Q1 · 2027",
      t: "Integração bancária e direitos autorais",
      x: "expansão para direitos autorais, foco em associações e editoras e conciliação de dívidas",
    },
    {
      d: "Q2 · 2027",
      t: "Serviços financeiros e internacionalização",
      x: "associações internacionais, expansão para fora do Brasil, IA aplicada a contratos, crédito automático e execução pública",
    },
  ];
  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 roadmap descreve o plano de negócios da companhia e não constitui garantia de execução.
      </p>
    </div>
  );
}

function TabRiscos() {
  const risks = [
    {
      t: "Necessidade de capital de longo prazo",
      d: "Este é o principal risco da companhia: sustentar as fases de crescimento, o desenvolvimento contínuo de produto e a estruturação da operação exige capital ao longo do tempo. O ritmo de escala depende diretamente da disponibilidade de investimento para essas frentes.",
    },
    {
      t: "Risco de execução",
      d: "A evolução do produto e das integrações com os stakeholders do mercado musical depende da capacidade de executar o plano de negócios no cronograma previsto.",
    },
    {
      t: "Risco de mercado e concorrência",
      d: "Mudanças no comportamento de artistas, selos e plataformas de streaming, assim como a entrada de novos concorrentes, podem afetar a demanda e a velocidade de adoção.",
    },
    {
      t: "Risco tecnológico e regulatório",
      d: "Como empresa de base tecnológica que lida com dados e direitos autorais, depende da segurança e disponibilidade da plataforma e de eventual adaptação a mudanças na legislação de direito autoral e proteção de dados.",
    },
  ];
  return (
    <div className="space-y-6">
      <p className="leading-relaxed text-foreground/80">
        Todo investimento envolve riscos, inclusive a perda total do capital investido. A companhia
        atua na mitigação contínua desses fatores, mas eles devem ser considerados antes de qualquer
        decisão de investimento.
      </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 UseOfProceeds() {
  const items = [
    {
      p: 40,
      t: "Produto",
      d: "concluir as integrações com os stakeholders do mercado musical e expandir as fontes de receita do cliente",
    },
    { p: 30, t: "Growth", d: "captação de novos leads e parcerias estratégicas" },
    { p: 30, t: "Operação", d: "contratação de colaboradores e desenvolvimento do time comercial" },
  ];
  return (
    <div className="mt-14">
      <h2 className="font-display text-2xl font-bold">Destinação dos recursos</h2>
      <div className="mt-6 space-y-5">
        {items.map((i) => (
          <div key={i.t}>
            <div className="flex items-baseline justify-between gap-4">
              <p className="font-display text-base font-semibold">{i.t}</p>
              <span className="font-display text-lg font-bold text-[oklch(0.5_0.16_210)]">{i.p}%</span>
            </div>
            <div className="mt-2 h-2 w-full overflow-hidden rounded-full bg-muted">
              <div className="brand-gradient h-full rounded-full" style={{ width: `${i.p}%` }} />
            </div>
            <p className="mt-2 text-sm leading-relaxed text-foreground/65">{i.d}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function VideoCard() {
  return (
    <div 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)]" /> Conheça o Rumpi
      </div>
      <div className="mt-4 aspect-video w-full overflow-hidden rounded-xl bg-muted">
        <iframe
          src="https://www.youtube.com/embed/7cYpvwtzKgg?rel=0&modestbranding=1"
          title="Rumpi — Conheça o Rumpi"
          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">
        A história por trás do primeiro ERP da música independente do mundo — contada por quem vive a
        cena.
      </p>
    </div>
  );
}

function OfferCard({ platformUrl, whatsappUrl }: { platformUrl: string; whatsappUrl: string }) {
  const fields = [
    { l: "Tipo de valor mobiliário", v: "Mútuo conversível" },
    { l: "Modelo de investimento", v: "Aquisição" },
    { l: "Investimento mínimo", v: "R$ 10.000,00 (1 cota)" },
    { l: "Quantidade de cotas", v: "56 cotas de R$ 10.000,00" },
    { l: "Objetivo de captação", v: "R$ 560.000,00" },
  ];
  return (
    <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>
  );
}

function Team() {
  const people = [
    {
      n: "André Luiz Izidro",
      r: "CEO e Sócio Fundador",
      img: andrePhoto,
      b: "Mais de 20 anos em empresas como Globo, Som Livre e KondZilla. MBA pela Fundação Dom Cabral. Liderou a revolução digital da Som Livre que levou à exploração sustentável do YouTube, com cases ao lado de Ludmilla, Felipe Amorim, Thiaguinho, Globo, Meta e Google.",
    },
    {
      n: "Odilon Castello Borges Neto",
      r: "Sócio Fundador",
      img: odilonPhoto,
      b: "Mestrado pela University of Connecticut, especialização em Propriedade Intelectual pela London School of Economics e MBA pela Fundação Dom Cabral. Advogado com passagens pela TV Globo e Airbnb, atuou como diretor jurídico e de compliance em grandes corporações. Investidor anjo do Gávea Angels, com cinco startups no portfólio.",
    },
  ];
  return (
    <section className="border-y border-border/60 bg-muted/50 py-16">
      <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">Time</h2>
        <p className="mx-auto mt-4 max-w-2xl leading-relaxed text-foreground/70">
          Uma dupla que junta indústria musical, tecnologia e direito autoral — com estrada dentro das
          maiores empresas de música do país.
        </p>
        <a
          href="https://www.cesar.org.br/ventures"
          target="_blank"
          rel="noopener noreferrer"
          className="mt-5 inline-flex items-center gap-2 rounded-full border border-[oklch(0.5_0.16_210)]/30 bg-background px-4 py-2 text-sm font-medium text-foreground/75 transition hover:bg-[oklch(0.5_0.16_210)]/10"
        >
          <BadgeCheck className="size-4 text-[oklch(0.5_0.16_210)]" />
          Projeto apoiado pelo <strong className="font-semibold text-foreground">CESAR Ventures</strong>
        </a>
        <div className="mt-10 grid gap-6 sm:grid-cols-2">
          {people.map((p) => (
            <div key={p.n} className="card-soft rounded-2xl border border-border/60 p-7">
              <img
                src={p.img}
                alt={`Retrato de ${p.n}`}
                width={192}
                height={192}
                loading="lazy"
                className="mx-auto size-24 rounded-full object-cover object-top ring-2 ring-[oklch(0.5_0.16_210)]/30"
              />
              <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 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 do Rumpi?
        </h2>
        <p className="mt-4 text-white/75">
          Investir no Rumpi é fazer parte de um movimento que profissionaliza e valoriza a música
          independente brasileira. Investimento mínimo de R$ 10.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>
  );
}