"use client";

import Link from "next/link";
import { useCallback, useState } from "react";
import { CheckCircle2, ChevronDown, ChevronRight, FileText, Lock, Paperclip, Play, Radio, RotateCcw, Smartphone, Star, Zap } from "lucide-react";

import JanelaDaPrevia, { type PreviaEscolhida } from "@/components/digitais/JanelaDaPrevia";
import { duracaoLegivel, relogio, type ConfigDoCurso, type TipoDeAula } from "@/lib/digitais/curso";
import FolhaDoCertificado from "@/components/digitais/FolhaDoCertificado";
import type { CertificadoNaVenda } from "@/lib/digitais/certificado";
import {
  ENTREGA_NA_HORA,
  chipDoPrazo,
  passosDaEntrega,
  textoDoPrazoDoCurso,
  textosDaEntrega,
  type ConfigDigitalDaLoja,
  type EntregaNaVitrine,
} from "@/lib/digitais/produto";

import { BoutiqueCardCompacto, type BoutiqueProduto as BoutiqueProdutoResumo } from "./BoutiqueCardDoProduto";
import { moedaDaBoutique } from "./formato";
import type { AcaoDaBoutique } from "./BoutiqueProdutoDigital";

/*
  A página de venda do curso na Boutique: o esqueleto da página de produto do
  Boutique (capa de 470px presa na tela, informação à direita), com o cartão de
  compra do curso, o que a pessoa aprende, o conteúdo módulo a módulo e as
  aulas grátis. Nada aqui entra no carrinho.
*/

function BotaoDoCurso({ acao, rotulo, className = "" }: { acao: AcaoDaBoutique; rotulo: string; className?: string }) {
  const base = `inline-flex h-12 items-center justify-center gap-2 px-5 text-[15px] font-semibold shadow-sm transition hover:opacity-90 ${className}`;
  const estilo = { borderRadius: "var(--bq-radius-xl)", backgroundColor: "var(--bq-primary)", color: "var(--bq-primary-fg)" };
  if (acao.tipo === "comprar" || acao.tipo === "entrar") {
    return (
      <Link href={acao.href} className={base} style={estilo}>
        {acao.tipo === "entrar" ? "Entrar para comprar" : rotulo}
      </Link>
    );
  }
  if (acao.tipo === "whatsapp") {
    return acao.href ? (
      <a href={acao.href} target="_blank" rel="noopener noreferrer" className={base} style={estilo}>
        Comprar pelo WhatsApp
      </a>
    ) : (
      <span className={`${base} cursor-not-allowed opacity-60`} style={estilo}>
        Fale com a loja para comprar
      </span>
    );
  }
  return (
    <span className={`${base} cursor-not-allowed opacity-60`} style={estilo}>
      {acao.motivo || "Indisponível agora"}
    </span>
  );
}

function IconeDaAula({ tipo }: { tipo: TipoDeAula }) {
  const classe = "h-3.5 w-3.5 shrink-0 text-[var(--bq-muted-fg)]";
  if (tipo === "texto") return <FileText className={classe} />;
  if (tipo === "materiais") return <Paperclip className={classe} />;
  if (tipo === "ao_vivo") return <Radio className={classe} />;
  return <Play className={`${classe} fill-current`} />;
}

function rotuloDaAula(tipo: TipoDeAula, duracaoS: number | null): string {
  if (tipo === "texto") return "texto";
  if (tipo === "materiais") return "materiais";
  if (tipo === "ao_vivo") return "ao vivo";
  return duracaoS ? relogio(duracaoS) : "vídeo";
}

export function BoutiqueVendaDoCurso({
  slug,
  produto,
  capa,
  categoriaNome,
  categoriaSlug,
  descricaoHtml,
  config,
  curso,
  prazoDias,
  meios,
  acao,
  mostrarPreco,
  textoSemPreco,
  relacionados,
  clienteId,
  favoritos,
  corDaMarca,
  notaMedia,
  quantasAvaliacoes,
  avaliacoes,
  entrega = ENTREGA_NA_HORA,
  certificado = null,
}: {
  slug: string;
  produto: { id: string; name: string; price: number };
  capa: string | null;
  /* O certificado ao concluir (null: este curso não dá). */
  certificado?: CertificadoNaVenda | null;
  /* Pré-venda: "comece em 01/11". */
  entrega?: EntregaNaVitrine;
  categoriaNome?: string | null;
  categoriaSlug?: string | null;
  descricaoHtml?: string | null;
  config: ConfigDigitalDaLoja;
  curso: ConfigDoCurso;
  prazoDias: number | null;
  meios: Array<"pix" | "cartao">;
  acao: AcaoDaBoutique;
  mostrarPreco: boolean;
  textoSemPreco: string;
  relacionados: BoutiqueProdutoResumo[];
  clienteId?: string | null;
  favoritos?: string[] | null;
  corDaMarca: string;
  notaMedia?: number | null;
  quantasAvaliacoes?: number | null;
  avaliacoes?: React.ReactNode;
}) {
  const [previa, setPrevia] = useState<PreviaEscolhida | null>(null);
  const fechar = useCallback(() => setPrevia(null), []);
  const gratis = mostrarPreco && Number(produto.price) <= 0;
  const preco = gratis ? "Grátis" : mostrarPreco ? moedaDaBoutique(Number(produto.price) || 0) : textoSemPreco;
  const conteudo = curso.conteudo;
  const aulasGratis = conteudo.modulos.flatMap((m) => m.aulas).filter((a) => a.previaGratis && a.tipo === "video");
  const temApresentacao = Boolean(curso.apresentacao);
  const promessa = textosDaEntrega(entrega, true);
  const rotulo = promessa?.botao ?? (gratis ? "Começar agora, é grátis" : "Comprar e começar agora");
  const borda = { borderColor: "var(--bq-border)" };

  const especificacoes = [
    conteudo.modulos.length ? { rotulo: "Módulos", valor: String(conteudo.modulos.length) } : null,
    conteudo.aulas ? { rotulo: "Vídeos", valor: `${conteudo.aulas}${conteudo.duracaoS ? ` · ${duracaoLegivel(conteudo.duracaoS)} de vídeo` : ""}` } : null,
    conteudo.materiais ? { rotulo: "Materiais", valor: `${conteudo.materiais} para baixar` } : null,
    { rotulo: "Acesso", valor: chipDoPrazo(prazoDias) },
    { rotulo: "Onde assistir", valor: "Celular, tablet ou computador" },
    curso.garantiaDias ? { rotulo: "Garantia", valor: `${curso.garantiaDias} ${curso.garantiaDias === 1 ? "dia" : "dias"}` } : null,
  ].filter((linha): linha is { rotulo: string; valor: string } => Boolean(linha));

  return (
    <main className="mx-auto max-w-6xl space-y-6 px-4 py-6 pb-28 lg:pb-6">
      <div className="grid gap-6 lg:grid-cols-[470px_1fr] lg:items-start">
        {/* ------------ capa e prévias ------------ */}
        <div className="overflow-hidden lg:sticky lg:self-start" style={{ top: "calc(var(--bq-header-h, 152px) + 16px)" }}>
          <div className="relative overflow-hidden bg-[var(--bq-muted-bg)]" style={{ borderRadius: "var(--bq-radius-xl)", aspectRatio: "1 / 1" }}>
            {capa ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={capa} alt={produto.name} className="h-full w-full object-cover object-center" />
            ) : (
              <span className="flex h-full w-full items-center justify-center text-sm text-[var(--bq-muted-fg)]">Conteúdo em vídeo</span>
            )}
            {temApresentacao ? (
              <button
                type="button"
                onClick={() => setPrevia({ titulo: produto.name, aulaId: null })}
                className="absolute inset-0 flex items-center justify-center bg-black/25 transition hover:bg-black/35"
                aria-label="Ver a apresentação"
              >
                <span className="flex h-16 w-16 items-center justify-center rounded-full shadow-lg" style={{ backgroundColor: "var(--bq-primary)", color: "var(--bq-primary-fg)" }}>
                  <Play className="ml-1 h-7 w-7 fill-current" />
                </span>
                <span className="absolute bottom-3 left-3 rounded-md bg-black/70 px-2 py-1 text-[11px] font-semibold text-white">Apresentação</span>
              </button>
            ) : null}
          </div>
          {aulasGratis.length ? (
            <div className="mt-3 space-y-2">
              {aulasGratis.slice(0, 3).map((aula) => (
                <button
                  key={aula.id}
                  type="button"
                  onClick={() => setPrevia({ titulo: aula.titulo, aulaId: aula.id })}
                  className="flex w-full items-center gap-3 border bg-[var(--bq-surface)] px-3 py-2.5 text-left transition hover:bg-[var(--bq-muted-bg)]"
                  style={{ ...borda, borderRadius: "var(--bq-radius-lg)" }}
                >
                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full" style={{ backgroundColor: "var(--bq-primary)", color: "var(--bq-primary-fg)" }}>
                    <Play className="ml-0.5 h-3.5 w-3.5 fill-current" />
                  </span>
                  <span className="min-w-0 flex-1">
                    <span className="block text-[11px] font-semibold uppercase tracking-wide text-[var(--bq-muted-fg)]">Vídeo grátis</span>
                    <span className="block truncate text-[13px] font-semibold">{aula.titulo}</span>
                  </span>
                  {aula.duracaoS ? <span className="text-[12px] tabular-nums text-[var(--bq-muted-fg)]">{relogio(aula.duracaoS)}</span> : null}
                </button>
              ))}
            </div>
          ) : null}
        </div>

        {/* ------------ informação ------------ */}
        <div className="min-w-0 space-y-4">
          <div>
            <nav className="mb-2 flex items-center gap-1 overflow-hidden text-xs text-[var(--bq-muted-fg)]">
              <Link href={`/${slug}`} className="shrink-0 transition-colors hover:text-[var(--bq-foreground)]">
                Início
              </Link>
              {categoriaNome ? (
                <span className="flex shrink-0 items-center gap-1">
                  <ChevronRight className="h-3 w-3 shrink-0" />
                  <Link href={categoriaSlug ? `/${slug}/c/${categoriaSlug}` : `/${slug}`} className="whitespace-nowrap transition-colors hover:text-[var(--bq-foreground)]">
                    {categoriaNome}
                  </Link>
                </span>
              ) : null}
              <span className="flex min-w-0 items-center gap-1">
                <ChevronRight className="h-3 w-3 shrink-0" />
                <span className="max-w-[24ch] truncate font-medium">{produto.name}</span>
              </span>
            </nav>
            <h1 className="text-xl font-semibold tracking-tight">{produto.name}</h1>
            {config.resumo ? <p className="mt-1 text-sm text-[var(--bq-muted-fg)]">{config.resumo}</p> : null}
            {Number(quantasAvaliacoes) > 0 ? (
              <div className="mt-1.5 flex items-center gap-2 text-[12px]">
                <span className="flex items-center gap-0.5 text-amber-500">
                  {Array.from({ length: 5 }).map((_, i) => {
                    const cheia = i + 1 <= Math.round(Number(notaMedia) || 0);
                    return <Star key={i} size={14} className={cheia ? "fill-current" : "text-[var(--bq-border)]"} fill={cheia ? "currentColor" : "none"} />;
                  })}
                </span>
                <span className="text-[var(--bq-muted-fg)]">
                  {quantasAvaliacoes} {Number(quantasAvaliacoes) === 1 ? "avaliação" : "avaliações"}
                </span>
              </div>
            ) : null}
            <div className="mt-3 flex flex-wrap gap-2">
              <span className="inline-flex items-center gap-1.5 rounded-full bg-slate-900 px-2.5 py-1 text-[11px] font-semibold text-white">
                <Play className="h-3 w-3 fill-current" />
                Conteúdo em vídeo
              </span>
              {conteudo.aulas ? (
                <span className="rounded-full border px-2.5 py-1 text-[11px] text-[var(--bq-muted-fg)]" style={borda}>
                  {conteudo.aulas} {conteudo.aulas === 1 ? "vídeo" : "vídeos"}
                  {conteudo.duracaoS ? ` · ${duracaoLegivel(conteudo.duracaoS)}` : ""}
                </span>
              ) : null}
              <span className="rounded-full border px-2.5 py-1 text-[11px] text-[var(--bq-muted-fg)]" style={borda}>
                {chipDoPrazo(prazoDias)}
              </span>
            </div>
          </div>

          {/* O cartão de compra do curso. */}
          <div className="border bg-[var(--bq-surface)] p-4 sm:p-5" style={{ ...borda, borderRadius: "var(--bq-radius-xl)" }}>
            <div className="flex items-end justify-between gap-3">
              <div>
                <p className="text-[11px] text-[var(--bq-muted-fg)]">{gratis ? "Total" : "Total · pagamento único"}</p>
                <p className="text-2xl font-bold tabular-nums" style={{ color: "var(--bq-primary)" }}>
                  {preco}
                </p>
              </div>
              <span className="border px-2 py-0.5 text-[11px] text-[var(--bq-muted-fg)]" style={{ ...borda, borderRadius: "var(--bq-radius-md)" }}>
                {promessa ? promessa.chip : "Acesso na hora"}
              </span>
            </div>
            <BotaoDoCurso acao={acao} rotulo={rotulo} className="mt-4 w-full" />

            <div className="mt-4 p-4" style={{ borderRadius: "var(--bq-radius-lg)", backgroundColor: "var(--bq-muted-bg)" }}>
              <p className="text-sm font-semibold">Como funciona o acesso</p>
              <ol className="mt-3 space-y-3">
                {passosDaEntrega({ jeito: acao.tipo, gratis, meios, prazoDias, curso: true, entrega }).map((passo, i) => (
                  <li key={passo.titulo} className="flex gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-[11px] font-bold" style={{ borderColor: "var(--bq-primary)", color: "var(--bq-primary)" }}>
                      {i + 1}
                    </span>
                    <span>
                      <span className="block text-[13px] font-semibold">{passo.titulo}</span>
                      <span className="block text-[12px] text-[var(--bq-muted-fg)]">{passo.texto}</span>
                    </span>
                  </li>
                ))}
              </ol>
            </div>

            <ul className="mt-4 space-y-2 text-[12.5px] text-[var(--bq-muted-fg)]">
              <li className="flex items-start gap-2">
                <Zap className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: "var(--bq-primary)" }} />
                {promessa ? promessa.linha : acao.tipo === "whatsapp" && !gratis ? "O acesso chega por e-mail quando a loja confirmar." : "Acesso na hora, no seu e-mail."}
              </li>
              <li className="flex items-start gap-2">
                <Smartphone className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: "var(--bq-primary)" }} />
                Assista de onde parou, em qualquer aparelho. {textoDoPrazoDoCurso(prazoDias).split(".")[0]}.
              </li>
              {curso.garantiaDias ? (
                <li className="flex items-start gap-2">
                  <RotateCcw className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: "var(--bq-primary)" }} />
                  Garantia de {curso.garantiaDias} {curso.garantiaDias === 1 ? "dia" : "dias"}: se não for para você, a loja devolve o valor.
                </li>
              ) : null}
              <li className="flex items-start gap-2">
                <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" style={{ color: "var(--bq-primary)" }} />
                Pagamento seguro
              </li>
            </ul>
            {meios.length && acao.tipo === "comprar" && !gratis ? (
              <div className="mt-3 flex flex-wrap gap-1.5">
                {meios.map((meio) => (
                  <span key={meio} className="border px-2 py-0.5 text-[11px] text-[var(--bq-muted-fg)]" style={{ ...borda, borderRadius: "var(--bq-radius-md)" }}>
                    {meio === "pix" ? "Pix" : "Cartão de crédito"}
                  </span>
                ))}
              </div>
            ) : null}
          </div>

          {curso.aprendizados.length ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">O que você vai ver</h2>
              <ul className="grid gap-x-6 sm:grid-cols-2">
                {curso.aprendizados.map((item) => (
                  <li key={item} className="flex items-start gap-2 border-b py-2.5 text-sm" style={borda}>
                    <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" style={{ color: "var(--bq-primary)" }} />
                    {item}
                  </li>
                ))}
              </ul>
            </section>
          ) : null}

          {conteudo.modulos.length ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">O que tem dentro</h2>
              <div className="overflow-hidden border" style={{ ...borda, borderRadius: "var(--bq-radius-lg)" }}>
                {conteudo.modulos.map((modulo, indice) => (
                  <details key={modulo.id} open={indice === 0} className="group border-t first:border-t-0" style={borda}>
                    <summary className="flex cursor-pointer list-none items-center gap-3 px-3 py-3 [&::-webkit-details-marker]:hidden" style={{ backgroundColor: "var(--bq-muted-bg)" }}>
                      <span className="min-w-0 flex-1">
                        <span className="block text-sm font-semibold">
                          {indice + 1}. {modulo.titulo}
                        </span>
                        <span className="block text-[12px] text-[var(--bq-muted-fg)]">
                          {modulo.aulas.length} {modulo.aulas.length === 1 ? "vídeo" : "vídeos"}
                          {modulo.abre ? ` · ${modulo.abre}` : ""}
                        </span>
                      </span>
                      <ChevronDown className="h-4 w-4 shrink-0 text-[var(--bq-muted-fg)] transition group-open:rotate-180" />
                    </summary>
                    <ul className="px-3 py-1.5">
                      {modulo.aulas.map((aula) => {
                        const podeVer = aula.previaGratis && aula.tipo === "video";
                        return (
                          <li key={aula.id} className="flex items-center gap-2.5 py-2 text-[13px]">
                            <IconeDaAula tipo={aula.tipo} />
                            <span className="min-w-0 flex-1">{aula.titulo}</span>
                            {podeVer ? (
                              <button
                                type="button"
                                onClick={() => setPrevia({ titulo: aula.titulo, aulaId: aula.id })}
                                className="shrink-0 border px-2 py-0.5 text-[11px] font-semibold"
                                style={{ borderRadius: "var(--bq-radius-md)", borderColor: "var(--bq-primary)", color: "var(--bq-primary)" }}
                              >
                                Prévia grátis
                              </button>
                            ) : null}
                            <span className="w-14 shrink-0 text-right text-[12px] tabular-nums text-[var(--bq-muted-fg)]">{rotuloDaAula(aula.tipo, aula.duracaoS)}</span>
                          </li>
                        );
                      })}
                    </ul>
                  </details>
                ))}
              </div>
            </section>
          ) : null}

          {especificacoes.length ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Ficha do conteúdo</h2>
              <div className="overflow-hidden border text-sm" style={{ ...borda, borderRadius: "var(--bq-radius-lg)" }}>
                <table className="w-full border-collapse">
                  <tbody>
                    {especificacoes.map((linha) => (
                      <tr key={linha.rotulo} className="border-t first:border-t-0" style={borda}>
                        <td className="w-1/3 px-3 py-2.5 text-[var(--bq-muted-fg)]" style={{ backgroundColor: "var(--bq-muted-bg)" }}>
                          {linha.rotulo}
                        </td>
                        <td className="border-l px-3 py-2.5" style={borda}>
                          {linha.valor}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          ) : null}

          {curso.professor ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Quem apresenta</h2>
              <div className="flex items-start gap-3">
                {curso.professor.foto ? (
                  /* eslint-disable-next-line @next/next/no-img-element */
                  <img src={curso.professor.foto} alt={curso.professor.nome} className="h-16 w-16 shrink-0 rounded-full object-cover" />
                ) : (
                  <span className="flex h-16 w-16 shrink-0 items-center justify-center rounded-full text-xl font-bold" style={{ backgroundColor: "var(--bq-primary)", color: "var(--bq-primary-fg)" }}>
                    {curso.professor.nome.charAt(0).toUpperCase()}
                  </span>
                )}
                <div className="min-w-0">
                  <p className="text-sm font-semibold">{curso.professor.nome}</p>
                  {curso.professor.destaque ? <p className="text-[12.5px] text-[var(--bq-muted-fg)]">{curso.professor.destaque}</p> : null}
                  {curso.professor.bio ? <p className="mt-2 whitespace-pre-line text-[13px] leading-6 text-[var(--bq-muted-fg)]">{curso.professor.bio}</p> : null}
                </div>
              </div>
            </section>
          ) : null}

          {descricaoHtml ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Sobre o conteúdo</h2>
              <div
                className="space-y-3 text-sm leading-relaxed"
                style={{ color: "color-mix(in srgb, var(--bq-foreground) 90%, transparent)" }}
                dangerouslySetInnerHTML={{ __html: descricaoHtml }}
              />
            </section>
          ) : null}

          {certificado ? (
            <section className="space-y-3 pt-4">
              <h2 className="text-base font-semibold">Certificado ao concluir</h2>
              <p className="text-[13px] leading-6 text-[var(--bq-muted-fg)]">
                Terminou todos os vídeos, o certificado com o seu nome fica pronto para baixar em PDF. Ele traz um código que qualquer pessoa pode conferir.
              </p>
              <FolhaDoCertificado
                loja={certificado.loja}
                logo={certificado.logo}
                cor={corDaMarca}
                aluno="Seu nome aqui"
                curso={produto.name}
                cargaHoraria={certificado.cargaHoraria}
                data={null}
                codigo={certificado.codigo}
                assinatura={null}
                className="max-w-[420px]"
              />
            </section>
          ) : null}

          {config.perguntas.length ? (
            <section className="space-y-1 pt-4">
              <h2 className="text-base font-semibold">Perguntas frequentes</h2>
              {config.perguntas.map((item) => (
                <details key={item.pergunta} className="group border-b py-3" style={borda}>
                  <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold">
                    {item.pergunta}
                    <ChevronDown className="h-4 w-4 shrink-0 text-[var(--bq-muted-fg)] transition group-open:rotate-180" />
                  </summary>
                  <p className="mt-2 whitespace-pre-line text-[13px] leading-6 text-[var(--bq-muted-fg)]">{item.resposta}</p>
                </details>
              ))}
            </section>
          ) : null}
        </div>
      </div>

      {relacionados.length ? (
        <section className="mt-4 space-y-4 border-t pt-8" style={borda}>
          <h2 className="text-lg font-semibold">Você também pode gostar</h2>
          <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
            {relacionados.slice(0, 4).map((item) => (
              <BoutiqueCardCompacto key={item.id} produto={item} slug={slug} clienteId={clienteId} favoritos={favoritos} corDaMarca={corDaMarca} />
            ))}
          </div>
        </section>
      ) : null}

      {avaliacoes ? (
        <section className="mt-4 border-t pt-8" style={borda}>
          {avaliacoes}
        </section>
      ) : null}

      {/* No celular, a compra fica sempre à mão. */}
      {acao.tipo !== "fechado" ? (
        <div
          className="fixed inset-x-0 bottom-0 z-40 border-t px-4 py-3 lg:hidden"
          style={{ ...borda, backgroundColor: "var(--bq-surface)", boxShadow: "0 -8px 24px rgba(15, 23, 42, 0.10)", paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom))" }}
        >
          <div className="flex items-center gap-3">
            <div className="min-w-0 flex-1">
              <p className="text-[10.5px] uppercase tracking-wide text-[var(--bq-muted-fg)]">Conteúdo em vídeo · total</p>
              <p className="truncate text-[17px] font-bold tabular-nums" style={{ color: "var(--bq-primary)" }}>
                {preco}
              </p>
            </div>
            <BotaoDoCurso acao={acao} rotulo={promessa?.botao ?? (gratis ? "Começar agora" : "Comprar agora")} className="h-11 shrink-0 text-[13.5px]" />
          </div>
        </div>
      ) : null}

      {previa ? (
        <JanelaDaPrevia
          produtoId={produto.id}
          previa={previa}
          cor={corDaMarca}
          aoFechar={fechar}
          rodape={
            acao.tipo !== "fechado" ? (
              <div className="flex flex-wrap items-center justify-between gap-3 rounded-xl bg-white/10 px-4 py-3 text-white">
                <span className="text-[13.5px]">Gostou? Assista ao conteúdo inteiro{mostrarPreco && !gratis ? ` por ${preco}` : ""}.</span>
                <BotaoDoCurso acao={acao} rotulo={rotulo} className="h-11 text-[14px]" />
              </div>
            ) : null
          }
        />
      ) : null}
    </main>
  );
}