"use client";

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

import FolhaDoCertificado from "@/components/digitais/FolhaDoCertificado";
import JanelaDaPrevia, { type PreviaEscolhida } from "@/components/digitais/JanelaDaPrevia";
import type { CertificadoNaVenda } from "@/lib/digitais/certificado";
import { BotaoDeCompra, type AcaoDeCompra } from "@/components/digitais/ProdutoDigital";
import { ensureColorContrast, getReadableTextColor, withAlpha } from "@/lib/color-contrast";
import { duracaoLegivel, relogio, type ConfigDoCurso, type TipoDeAula } from "@/lib/digitais/curso";
import {
  ENTREGA_NA_HORA,
  chipDoPrazo,
  passosDaEntrega,
  textoDoPrazoDoCurso,
  textosDaEntrega,
  type ConfigDigitalDaLoja,
  type EntregaNaVitrine,
} from "@/lib/digitais/produto";

/*
 * A página de venda do curso nos templates Padrão e Vitrine (prévia 14):
 * a apresentação e as aulas grátis em cima, o que a pessoa vai aprender, o
 * conteúdo módulo a módulo (sem nenhum endereço de vídeo: só o resumo
 * público), quem ensina e como funciona o acesso. Nada entra no carrinho.
 */

type Props = {
  slug: string;
  produto: { id: string; nome: string; preco: number; imagens: string[]; descricaoHtml: string };
  categoria: { nome: string; slug: string | null } | null;
  config: ConfigDigitalDaLoja;
  curso: ConfigDoCurso;
  /* Pré-venda: "comece em 01/11". */
  entrega?: EntregaNaVitrine;
  /* O certificado ao concluir (null: este curso não dá). */
  certificado?: CertificadoNaVenda | null;
  prazoDias: number | null;
  meios: Array<"pix" | "cartao">;
  acao: AcaoDeCompra;
  mostrarPreco: boolean;
  textoSemPreco: string;
  corDaMarca: string;
  /* A área de membros da loja (nome e cor), para mostrar onde o curso fica. */
  area: { nome: string; cor: string };
  barra?: { bg?: string | null; text?: string | null } | null;
  notaMedia: number;
  quantasAvaliacoes: number;
  isVitrine: boolean;
  avaliacoes?: ReactNode;
};

const moeda = (valor: number) => new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }).format(valor || 0);

function IconeDaAulaNaVenda({ tipo, className }: { tipo: TipoDeAula; className?: string }) {
  if (tipo === "texto") return <FileText className={className} />;
  if (tipo === "materiais") return <Paperclip className={className} />;
  if (tipo === "ao_vivo") return <Radio className={className} />;
  return <Play className={`${className ?? ""} 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";
}

const FUNDOS_DAS_MINIATURAS = [
  "linear-gradient(135deg,#0f2027,#2c5364)",
  "linear-gradient(135deg,#f12711,#f5af19)",
  "linear-gradient(135deg,#134e5e,#71b280)",
];

export default function VendaDoCurso(props: Props) {
  const { slug, produto, categoria, config, curso, prazoDias, meios, acao, mostrarPreco, textoSemPreco, corDaMarca, area, barra, isVitrine } = props;
  const [previa, setPrevia] = useState<PreviaEscolhida | null>(null);
  const fechar = useCallback(() => setPrevia(null), []);
  const destaque = ensureColorContrast(corDaMarca, "#FFFFFF", { dark: "#111827", light: "#FFFFFF", minRatio: 4.5 });
  const capa = produto.imagens[0] ?? null;
  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 precoTexto = mostrarPreco ? moeda(produto.preco) : textoSemPreco;
  const gratis = mostrarPreco && produto.preco <= 0;
  const entrega = props.entrega ?? ENTREGA_NA_HORA;
  const promessa = textosDaEntrega(entrega, true);
  const rotuloDoBotao = promessa?.botao ?? (gratis ? "Começar agora, é grátis" : "Comprar e começar agora");
  const titulo = isVitrine
    ? "text-[1.35rem] font-semibold tracking-[-0.03em] text-zinc-950"
    : "text-[1.35rem] font-bold tracking-[-0.02em] text-zinc-950";
  const fonteDoTitulo = isVitrine ? { fontFamily: "var(--ks-catalog-font-heading, var(--ks-font-editorial))" } : undefined;

  const miniaturas: Array<{ chave: string; rotulo: string; fundo: string; imagem: string | null; abrir: () => void }> = [
    ...(temApresentacao ? [{ chave: "apresentacao", rotulo: "Apresentação", fundo: FUNDOS_DAS_MINIATURAS[0], imagem: capa, abrir: () => setPrevia({ titulo: produto.nome, aulaId: null }) }] : []),
    ...aulasGratis.slice(0, 3).map((aula, i) => ({
      chave: aula.id,
      rotulo: `Vídeo grátis · ${aula.titulo}`,
      fundo: FUNDOS_DAS_MINIATURAS[(i + 1) % FUNDOS_DAS_MINIATURAS.length],
      imagem: null,
      abrir: () => setPrevia({ titulo: aula.titulo, aulaId: aula.id }),
    })),
  ].slice(0, 4);

  const chips = [
    promessa?.chip ?? null,
    conteudo.aulas ? `${conteudo.aulas} ${conteudo.aulas === 1 ? "vídeo" : "vídeos"}${conteudo.duracaoS ? ` · ${duracaoLegivel(conteudo.duracaoS)}` : ""}` : null,
    conteudo.materiais ? `${conteudo.materiais} ${conteudo.materiais === 1 ? "material" : "materiais"}` : null,
    chipDoPrazo(prazoDias),
  ].filter((c): c is string => Boolean(c));

  return (
    <div className="pb-6">
      <div className="grid gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(0,1fr)] lg:gap-12">
        {/* A apresentação */}
        <div className="min-w-0">
          <div className="relative aspect-[16/10] overflow-hidden rounded-[28px] bg-zinc-900">
            {capa ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={capa} alt="" aria-hidden className="absolute inset-0 h-full w-full scale-125 object-cover opacity-95 blur-2xl saturate-150" />
            ) : (
              <div className="absolute inset-0" style={{ background: `linear-gradient(135deg, #1B2440, ${corDaMarca})` }} />
            )}
            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/25 to-transparent" />
            {capa ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img
                src={capa}
                alt={produto.nome}
                className="absolute right-[6%] top-[9%] hidden aspect-square h-[62%] rounded-2xl object-cover shadow-2xl ring-1 ring-white/15 sm:block"
              />
            ) : null}
            <div className="absolute inset-x-0 bottom-0 p-5 sm:p-7">
              <div className="text-[11px] font-bold uppercase tracking-[0.22em]" style={{ color: withAlpha("#FFFFFF", 0.75) }}>
                Conteúdo em vídeo
              </div>
              <div className="mt-1 max-w-[30ch] text-[22px] font-extrabold leading-[1.1] text-white sm:max-w-[60%] sm:text-[30px]" style={fonteDoTitulo}>
                {produto.nome}
              </div>
              {temApresentacao ? (
                <button
                  type="button"
                  onClick={() => setPrevia({ titulo: produto.nome, aulaId: null })}
                  className="mt-4 inline-flex h-11 items-center gap-2.5 rounded-full bg-white/95 pl-1.5 pr-4 text-[13.5px] font-bold text-zinc-900 shadow-lg transition hover:bg-white"
                >
                  <span className="flex h-8 w-8 items-center justify-center rounded-full" style={{ backgroundColor: corDaMarca, color: getReadableTextColor(corDaMarca) }}>
                    <Play className="ml-0.5 h-3.5 w-3.5 fill-current" />
                  </span>
                  Ver a apresentação
                </button>
              ) : null}
            </div>
          </div>
          {miniaturas.length ? (
            <div className="mt-3 grid grid-cols-2 gap-2.5 sm:grid-cols-4">
              {miniaturas.map((item) => (
                <button
                  key={item.chave}
                  type="button"
                  onClick={item.abrir}
                  className="group relative aspect-[16/10] overflow-hidden rounded-2xl text-left"
                  style={{ background: item.fundo }}
                >
                  {item.imagem ? (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img src={item.imagem} alt="" className="absolute inset-0 h-full w-full object-cover opacity-60 transition group-hover:scale-105" />
                  ) : null}
                  <span className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
                  <span className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-zinc-900">
                    <Play className="ml-0.5 h-3 w-3 fill-current" />
                  </span>
                  <span className="absolute inset-x-0 bottom-0 line-clamp-2 p-2.5 text-[11.5px] font-bold leading-tight text-white">{item.rotulo}</span>
                </button>
              ))}
            </div>
          ) : null}
        </div>

        {/* A compra */}
        <div className="min-w-0">
          <nav aria-label="Você está em" className="mb-2 flex min-w-0 items-center gap-1.5 text-[12px] text-zinc-500">
            <Link href={`/${slug}`} className="shrink-0 transition-colors hover:text-zinc-900">
              Início
            </Link>
            {categoria ? (
              <>
                <span className="shrink-0 text-zinc-300">›</span>
                {categoria.slug ? (
                  <Link href={`/${slug}/c/${categoria.slug}`} className="shrink-0 transition-colors hover:text-zinc-900">
                    {categoria.nome}
                  </Link>
                ) : (
                  <span className="shrink-0">{categoria.nome}</span>
                )}
              </>
            ) : null}
            <span className="shrink-0 text-zinc-300">›</span>
            <span className="min-w-0 truncate font-medium text-zinc-700">{produto.nome}</span>
          </nav>

          <h1
            className={
              isVitrine
                ? "text-[2rem] font-semibold leading-[1.02] tracking-[-0.04em] text-gray-950 sm:text-[2.6rem]"
                : "text-3xl font-black leading-tight text-gray-900 md:text-4xl"
            }
            style={fonteDoTitulo}
          >
            {produto.nome}
          </h1>
          {config.resumo ? <p className="mt-2 text-[15px] leading-6 text-zinc-600">{config.resumo}</p> : null}

          {props.quantasAvaliacoes > 0 ? (
            <div className="mt-2 flex items-center gap-2 text-sm">
              <span className="text-yellow-500">{"★".repeat(Math.max(1, Math.round(props.notaMedia)))}</span>
              <span className="text-zinc-500">
                {props.notaMedia.toFixed(1).replace(".", ",")} · {props.quantasAvaliacoes} {props.quantasAvaliacoes === 1 ? "avaliação" : "avaliações"}
              </span>
            </div>
          ) : null}

          <div className="mt-4 flex flex-wrap gap-2">
            <span className="inline-flex items-center gap-1.5 rounded-full bg-slate-900 px-3 py-1 text-xs font-semibold text-white">
              <Play className="h-3 w-3 fill-current" />
              Conteúdo em vídeo
            </span>
            {chips.map((chip) => (
              <span key={chip} className="rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs text-zinc-600">
                {chip}
              </span>
            ))}
          </div>

          <div className="mt-6 flex items-end justify-between gap-4 border-b border-zinc-200 pb-5">
            <span className="text-sm text-zinc-500">{gratis ? "Total" : "Pagamento único"}</span>
            <span className="text-3xl font-bold tracking-[-0.03em]" style={{ color: mostrarPreco ? destaque : undefined }}>
              {gratis ? "Grátis" : precoTexto}
            </span>
          </div>

          <BotaoDeCompra acao={acao} corDaMarca={corDaMarca} rotulo={rotuloDoBotao} className="mt-5 w-full" />

          <ul className="mt-5 space-y-3 text-[13px] text-zinc-600">
            <li className="flex items-start gap-3">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: withAlpha(corDaMarca, 0.1), color: destaque }}>
                <Zap className="h-3.5 w-3.5" />
              </span>
              <span className="pt-1">
                {promessa
                  ? promessa.linha
                  : acao.tipo === "whatsapp" && !gratis
                    ? "O acesso chega no seu e-mail assim que a loja confirmar o pagamento."
                    : "Acesso na hora: chega no seu e-mail assim que o pagamento cair."}
              </span>
            </li>
            <li className="flex items-start gap-3">
              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: withAlpha(corDaMarca, 0.1), color: destaque }}>
                <Smartphone className="h-3.5 w-3.5" />
              </span>
              <span className="pt-1">Assista no celular, no tablet ou no computador, de onde parou. {textoDoPrazoDoCurso(prazoDias).split(".")[0]}.</span>
            </li>
            {curso.garantiaDias ? (
              <li className="flex items-start gap-3">
                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg" style={{ backgroundColor: withAlpha(corDaMarca, 0.1), color: destaque }}>
                  <RotateCcw className="h-3.5 w-3.5" />
                </span>
                <span className="pt-1">
                  Garantia de {curso.garantiaDias} {curso.garantiaDias === 1 ? "dia" : "dias"}: se não for para você, a loja devolve o valor.
                </span>
              </li>
            ) : null}
          </ul>

          {meios.length && acao.tipo === "comprar" && !gratis ? (
            <div className="mt-4 flex flex-wrap gap-2">
              {meios.map((meio) => (
                <span key={meio} className="rounded-md border border-zinc-200 bg-white px-2.5 py-1 text-[11px] font-medium text-zinc-600">
                  {meio === "pix" ? "Pix" : "Cartão de crédito"}
                </span>
              ))}
            </div>
          ) : null}
        </div>
      </div>

      {curso.aprendizados.length ? (
        <section className="mt-14">
          <h2 className={titulo} style={fonteDoTitulo}>
            O que você vai ver
          </h2>
          <p className="mt-1 text-sm text-zinc-500">Ao terminar, você consegue:</p>
          <ul className="mt-4 grid gap-x-10 md:grid-cols-2">
            {curso.aprendizados.map((item) => (
              <li key={item} className="flex items-start gap-3 border-b border-zinc-200 py-3 text-[14px] text-zinc-800">
                <Check className="mt-0.5 h-4 w-4 shrink-0" strokeWidth={3} style={{ color: destaque }} />
                {item}
              </li>
            ))}
          </ul>
        </section>
      ) : null}

      {conteudo.modulos.length ? (
        <section className="mt-14">
          <h2 className={titulo} style={fonteDoTitulo}>
            O que tem dentro
          </h2>
          <div className="mt-1 flex flex-wrap gap-x-5 gap-y-1 text-[13px] text-zinc-500">
            <span>
              <b className="text-zinc-900">{conteudo.modulos.length}</b> {conteudo.modulos.length === 1 ? "módulo" : "módulos"}
            </span>
            <span>
              <b className="text-zinc-900">{conteudo.aulas}</b> {conteudo.aulas === 1 ? "vídeo" : "vídeos"}
            </span>
            {conteudo.duracaoS ? (
              <span>
                <b className="text-zinc-900">{duracaoLegivel(conteudo.duracaoS)}</b> de vídeo
              </span>
            ) : null}
            {conteudo.materiais ? (
              <span>
                <b className="text-zinc-900">{conteudo.materiais}</b> {conteudo.materiais === 1 ? "material" : "materiais"} para baixar
              </span>
            ) : null}
          </div>
          <div className="mt-4 border-t border-zinc-200">
            {conteudo.modulos.map((modulo, indice) => {
              const duracao = modulo.aulas.reduce((soma, a) => soma + (a.tipo === "video" ? Number(a.duracaoS) || 0 : 0), 0);
              return (
                <details key={modulo.id} open={indice < 2} className="group border-b border-zinc-200">
                  <summary className="flex cursor-pointer list-none items-center gap-4 py-4 [&::-webkit-details-marker]:hidden">
                    <span
                      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-[14px] font-bold"
                      style={{ backgroundColor: withAlpha(corDaMarca, 0.12), color: destaque }}
                    >
                      {indice + 1}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="flex flex-wrap items-center gap-2">
                        <span className="text-[15px] font-bold text-zinc-900">{modulo.titulo}</span>
                        {modulo.abre ? (
                          <span className="rounded-full bg-violet-50 px-2 py-0.5 text-[11px] font-semibold text-violet-700">{modulo.abre}</span>
                        ) : null}
                      </span>
                      {modulo.descricao ? <span className="mt-0.5 block text-[12.5px] text-zinc-500">{modulo.descricao}</span> : null}
                    </span>
                    <span className="hidden shrink-0 text-[12.5px] text-zinc-500 sm:block">
                      {modulo.aulas.length} {modulo.aulas.length === 1 ? "vídeo" : "vídeos"}
                      {duracao ? ` · ${duracaoLegivel(duracao)}` : ""}
                    </span>
                    <ChevronDown className="h-4 w-4 shrink-0 text-zinc-400 transition group-open:rotate-180" />
                  </summary>
                  <ul className="pb-3 pl-[52px]">
                    {modulo.aulas.map((aula) => {
                      const podeVer = aula.previaGratis && aula.tipo === "video";
                      return (
                        <li key={aula.id} className="flex items-center gap-3 py-2 text-[13.5px] text-zinc-700">
                          <IconeDaAulaNaVenda tipo={aula.tipo} className="h-3 w-3 shrink-0 text-zinc-400" />
                          <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 rounded-full px-2.5 py-0.5 text-[11px] font-bold transition hover:opacity-80"
                              style={{ backgroundColor: withAlpha(corDaMarca, 0.12), color: destaque }}
                            >
                              Prévia grátis
                            </button>
                          ) : null}
                          <span className="w-14 shrink-0 text-right text-[12px] tabular-nums text-zinc-400">{rotuloDaAula(aula.tipo, aula.duracaoS)}</span>
                        </li>
                      );
                    })}
                  </ul>
                </details>
              );
            })}
          </div>
        </section>
      ) : null}

      {produto.descricaoHtml ? (
        <section className="mt-14">
          <h2 className={titulo} style={fonteDoTitulo}>
            Sobre o conteúdo
          </h2>
          <div
            className="mt-4 max-w-none text-[15px] leading-7 text-zinc-700 [&_a]:underline [&_h2]:mt-6 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:mt-5 [&_h3]:font-semibold [&_li]:mt-1 [&_ol]:mt-3 [&_ol]:list-decimal [&_ol]:pl-5 [&_p+*]:mt-3 [&_strong]:font-semibold [&_ul]:mt-3 [&_ul]:list-disc [&_ul]:pl-5"
            dangerouslySetInnerHTML={{ __html: produto.descricaoHtml }}
          />
        </section>
      ) : null}

      {curso.professor ? (
        <section className="mt-14">
          <h2 className={titulo} style={fonteDoTitulo}>
            Quem apresenta
          </h2>
          <div className="mt-5 flex flex-col gap-5 sm:flex-row sm:items-start">
            {curso.professor.foto ? (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img src={curso.professor.foto} alt={curso.professor.nome} className="h-24 w-24 shrink-0 rounded-full object-cover" />
            ) : (
              <span
                className="flex h-24 w-24 shrink-0 items-center justify-center rounded-full text-[30px] font-extrabold"
                style={{ background: `linear-gradient(135deg, ${corDaMarca}, ${withAlpha(corDaMarca, 0.6)})`, color: getReadableTextColor(corDaMarca) }}
              >
                {curso.professor.nome
                  .split(/\s+/)
                  .slice(0, 2)
                  .map((p) => p.charAt(0).toUpperCase())
                  .join("")}
              </span>
            )}
            <div className="min-w-0">
              <div className="text-[17px] font-bold text-zinc-900">{curso.professor.nome}</div>
              {curso.professor.destaque ? <div className="mt-0.5 text-[13px] text-zinc-500">{curso.professor.destaque}</div> : null}
              {curso.professor.bio ? <p className="mt-3 max-w-[760px] whitespace-pre-line text-[14px] leading-7 text-zinc-600">{curso.professor.bio}</p> : null}
            </div>
          </div>
        </section>
      ) : null}

      <section className="mt-14 grid items-center gap-8 md:grid-cols-2">
        <div>
          <h2 className={titulo} style={fonteDoTitulo}>
            Como funciona o acesso
          </h2>
          <p className="mt-1 text-sm text-zinc-500">Sem frete, sem espera e sem instalar nada.</p>
          <ol className="mt-4 border-t border-zinc-200">
            {passosDaEntrega({ jeito: acao.tipo, gratis, meios, prazoDias, curso: true, entrega }).map((passo, indice) => (
              <li key={passo.titulo} className="flex items-start gap-4 border-b border-zinc-200 py-3.5">
                <span
                  className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[13px] font-bold"
                  style={{ backgroundColor: corDaMarca, color: getReadableTextColor(corDaMarca) }}
                >
                  {indice + 1}
                </span>
                <span>
                  <span className="block text-[14px] font-semibold text-zinc-900">{passo.titulo}</span>
                  <span className="mt-0.5 block text-[13px] leading-5 text-zinc-500">
                    {indice === 1 && !(acao.tipo === "whatsapp" && !gratis) ? `Um botão leva direto para a ${area.nome}, já com o seu conteúdo.` : passo.texto}
                  </span>
                </span>
              </li>
            ))}
          </ol>
        </div>
        <div aria-hidden className="overflow-hidden rounded-[20px] bg-[#0B0B12] text-white shadow-xl ring-1 ring-black/5">
          <div className="flex items-center gap-4 px-4 py-3 text-[11px] text-white/60">
            <b className="text-[12.5px] text-white">
              {area.nome}
              <span style={{ color: area.cor }}>.</span>
            </b>
            <span>Início</span>
            <span>Loja</span>
          </div>
          <div className="relative px-4 pb-5 pt-6" style={{ background: `radial-gradient(500px 200px at 85% 0%, ${withAlpha(area.cor, 0.45)}, transparent 70%)` }}>
            <div className="text-[9.5px] font-bold uppercase tracking-[0.16em]" style={{ color: area.cor }}>
              Continue de onde parou
            </div>
            <div className="mt-1 max-w-[80%] truncate text-[16px] font-extrabold">{produto.nome}</div>
            <span className="mt-3 inline-flex items-center gap-1.5 rounded-md bg-white px-2.5 py-1 text-[10.5px] font-bold text-zinc-900">
              <Play className="h-2.5 w-2.5 fill-current" />
              Continuar
            </span>
          </div>
          <div className="grid grid-cols-3 gap-2.5 px-4 pb-4">
            {[0, 1, 2].map((i) => (
              <div key={i} className="relative aspect-[16/10] overflow-hidden rounded-lg" style={{ background: FUNDOS_DAS_MINIATURAS[i] }}>
                {i === 0 && capa ? (
                  /* eslint-disable-next-line @next/next/no-img-element */
                  <img src={capa} alt="" className="h-full w-full object-cover" />
                ) : null}
                <span className="absolute inset-x-0 bottom-0 h-1 bg-black/40">
                  <span className="block h-full" style={{ width: i === 0 ? "40%" : i === 1 ? "100%" : "0%", backgroundColor: area.cor }} />
                </span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {props.certificado ? (
        <section className="mt-14 grid items-center gap-8 md:grid-cols-2">
          <FolhaDoCertificado
            loja={props.certificado.loja}
            logo={props.certificado.logo}
            cor={corDaMarca}
            aluno="Seu nome aqui"
            curso={produto.nome}
            cargaHoraria={props.certificado.cargaHoraria}
            data={null}
            codigo={props.certificado.codigo}
            assinatura={null}
            className="mx-auto max-w-[460px]"
          />
          <div>
            <h2 className={titulo} style={fonteDoTitulo}>
              Certificado ao concluir
            </h2>
            <p className="mt-2 text-[14px] leading-6 text-zinc-600">
              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>
          </div>
        </section>
      ) : null}

      {config.perguntas.length ? (
        <section className="mt-14 max-w-[820px]">
          <h2 className={titulo} style={fonteDoTitulo}>
            Perguntas frequentes
          </h2>
          <div className="mt-2">
            {config.perguntas.map((item) => (
              <details key={item.pergunta} className="group border-b border-zinc-200 py-3.5">
                <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-semibold text-zinc-900">
                  {item.pergunta}
                  <ChevronDown className="h-4 w-4 shrink-0 text-zinc-400 transition group-open:rotate-180" />
                </summary>
                <p className="mt-2 whitespace-pre-line text-[13px] leading-6 text-zinc-600">{item.resposta}</p>
              </details>
            ))}
          </div>
        </section>
      ) : null}

      {props.avaliacoes ? <div className="mt-10">{props.avaliacoes}</div> : null}

      {/* A barra fixa de compra: no celular ela sobe a altura do menu inferior. */}
      {acao.tipo !== "fechado" ? (
        <div
          className="fixed inset-x-0 bottom-[calc(4rem+env(safe-area-inset-bottom))] z-40 border-t border-zinc-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/85 md:bottom-0"
          style={barra?.bg ? { backgroundColor: barra.bg } : undefined}
        >
          <div className="mx-auto flex w-full max-w-[1440px] items-center justify-center gap-4 px-4 py-3 md:px-6">
            <div className="min-w-0 max-w-[46vw] md:max-w-none">
              <div className="truncate text-sm font-medium text-zinc-700" style={barra?.text ? { color: barra.text } : undefined}>
                {produto.nome}
              </div>
              <div className="mt-0.5 flex items-center gap-2">
                <span className="hidden text-[11px] text-zinc-500 sm:inline" style={barra?.text ? { color: withAlpha(barra.text, 0.72) } : undefined}>
                  {promessa ? `Conteúdo em vídeo · ${promessa.chip.toLowerCase()} ·` : "Conteúdo em vídeo · acesso na hora ·"}
                </span>
                <span className="text-xl font-semibold tracking-[-0.03em]" style={{ color: barra?.text || destaque }}>
                  {gratis ? "Grátis" : precoTexto}
                </span>
              </div>
            </div>
            <BotaoDeCompra acao={acao} corDaMarca={corDaMarca} rotulo={promessa?.botao ?? (gratis ? "Começar agora" : "Comprar agora")} className="shrink-0" />
          </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-2xl bg-white/10 px-4 py-3 text-white">
                <span className="text-[13.5px]">
                  Gostou? Assista ao conteúdo inteiro{mostrarPreco && !gratis ? ` por ${precoTexto}` : ""}.
                </span>
                <BotaoDeCompra acao={acao} corDaMarca={corDaMarca} rotulo={rotuloDoBotao} className="h-11 text-[14px]" />
              </div>
            ) : (
              <div className="flex items-center gap-2 text-[13px] text-white/70">
                <Lock className="h-4 w-4" />
                {acao.motivo || "A compra está fechada agora."}
              </div>
            )
          }
        />
      ) : null}
    </div>
  );
}