@greatapps/common 1.1.749 → 1.1.751

package/src/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.tsx

@@ -1,400 +0,0 @@
-'use client';
-
-import { useCallback, useState } from 'react';
-import { useStripe } from '@stripe/react-stripe-js';
-import { IconCheck, IconX } from '@tabler/icons-react';
-import { useLocale, useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-import { Button } from '../../../ui/buttons/Button';
-import { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';
-import { Toast } from '../../../ui/feedback/Toast';
-import { useAuth } from '../../../../providers/auth.provider';
-import { useWhitelabel, useWhitelabelUrls } from '../../../../providers/whitelabel.provider';
-import { useActiveSubscription } from '../../../../modules/subscriptions/hooks/find-active-subscription.hook';
-import { useCards } from '../../../../modules/cards/hooks/cards.hook';
-import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
-import { confirmPaymentIfRequired } from '../../../../modules/subscriptions/utils/confirm-payment-if-required';
-import {
-  AI_CREDITS_FIRST_PURCHASE_OFFER,
-  AiCreditsOfferStage,
-  PAYMENT_METHOD_CARD,
-} from '../../../../modules/ia-credits/constants/ai-credits-offer.constants';
-import { useAiCreditsOfferEligibility } from '../../../../modules/ia-credits/hooks/use-offer-eligibility.hook';
-import { usePurchaseIaCredits } from '../../../../modules/ia-credits/hooks/purchase-ia-credits.hook';
-import type { PurchaseIaCreditsResult } from '../../../../modules/ia-credits/types/ai-credits-offer.type';
-import { readOfferStageCookie, writeOfferStageCookie } from '../../../../modules/ia-credits/utils/offer-stage-cookie';
-import { useAiCreditsOfferModal } from '../../../../store/useAiCreditsOfferModal';
-import { useModalManager } from '../../../../store/useModalManager';
-import { LoseOfferDialog } from './components/LoseOfferDialog';
-import { OfferIllustration } from './components/OfferIllustration';
-import { OfferPaymentField } from './components/OfferPaymentField';
-
-/**
- * Oferta de primeira compra de créditos de IA — a tela que a base gratuita vê quando o
- * `AiCreditsOfferGate` decide que é a vez dela.
- *
- * Duas colunas, como a referência de produto: à esquerda a oferta e o cartão (via
- * `OfferPaymentField`, que cadastra pelo `addCardModal` padrão da plataforma); à direita o
- * gradiente da tela de login com a ilustração do editor.
- *
- * Fechar não fecha: `X`, `Esc`, clique fora e "Agora não" caem todos no `LoseOfferDialog`, que
- * pergunta se a pessoa quer mesmo perder o desconto.
- *
- * ⚠️ PREÇO: o card manda só o SLUG da oferta (`AI_CREDITS_FIRST_PURCHASE_OFFER.slug`) — quem
- * resolve pacote, preço e elegibilidade é o backend (Asana ID-1217333331953496). O "de/por" desta
- * tela usa `AI_CREDITS_FIRST_PURCHASE_OFFER.price` (fixo, parte do contrato da oferta) contra
- * `anchorCents` do `useAiCreditsOfferEligibility` (derivado do preço real do addon no plano — nunca
- * hardcoded).
- *
- * ANIMAÇÃO: CSS puro, sem `motion/react` (a lib não depende dela). As classes `gp-offer-rise`,
- * `gp-offer-window-in`, `gp-offer-card-in` e `gp-offer-icon-pulse` vêm do `globals.css` de cada app
- * consumidor — bloco documentado abaixo, precisa estar presente nos 3 apps (gpages/gapps/editor):
- *
- * ```css
- * @keyframes gp-offer-rise {
- *   from { opacity: 0; translate: 0 10px; }
- *   to   { opacity: 1; translate: 0 0; }
- * }
- * .gp-offer-rise { animation: gp-offer-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
- *
- * @keyframes gp-offer-window-in {
- *   from { opacity: 0; translate: 0 18px; scale: 0.985; }
- *   to   { opacity: 1; translate: 0 0; scale: 1; }
- * }
- * .gp-offer-window-in { animation: gp-offer-window-in 550ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both; }
- *
- * @keyframes gp-offer-card-in {
- *   from { opacity: 0; translate: 0 26px; scale: 0.97; }
- *   to   { opacity: 1; translate: 0 0; scale: 1; }
- * }
- * .gp-offer-card-in { animation: gp-offer-card-in 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 340ms both; }
- *
- * @keyframes gp-offer-icon-pulse {
- *   0%, 100% { scale: 1; }
- *   50% { scale: 1.06; }
- * }
- * .gp-offer-icon-pulse { animation: gp-offer-icon-pulse 2.6s ease-in-out 1.6s infinite; }
- *
- * @media (prefers-reduced-motion: reduce) {
- *   .gp-offer-rise, .gp-offer-window-in, .gp-offer-card-in, .gp-offer-icon-pulse { animation: none; }
- * }
- * ```
- *
- * `translate`/`scale` (propriedades CSS independentes, não `transform`) pra conviver sem conflito
- * com utilitários de posicionamento do Tailwind (mesmo problema que já forçou o `.gp-offer-modal`
- * de entrada/saída a sair de `@layer` — ver `AiCreditsOfferGate`/`globals.css`).
- */
-export default function AiCreditsOfferModal() {
-  const translate = useTranslations();
-  const locale = useLocale();
-  const stripe = useStripe();
-  const { open, closeModal } = useAiCreditsOfferModal();
-  const { openModal } = useModalManager();
-  const { user } = useAuth();
-  const { whitelabel } = useWhitelabel();
-  const { accountsUrl } = useWhitelabelUrls();
-  const { formatCurrencyNumber } = useCurrencyFormatter();
-
-  const [confirmingExit, setConfirmingExit] = useState(false);
-  const [pickedCardId, setPickedCardId] = useState('');
-
-  const { data: cardsData } = useCards();
-  const { data: subscriptionData } = useActiveSubscription();
-  const eligibility = useAiCreditsOfferEligibility();
-  const purchaseMutation = usePurchaseIaCredits();
-
-  const subscription = subscriptionData?.data?.[0] ?? null;
-  const subscriptionId = subscription?.id;
-  const accountId = user?.id_account;
-
-  const defaultCardId =
-    cardsData?.data?.find((card) => card.is_default)?.id?.toString() ??
-    cardsData?.data?.[0]?.id?.toString() ??
-    '';
-
-  // Os cartões chegam depois da abertura (query no client). Derivar — em vez de sincronizar num
-  // efeito — faz o padrão da conta já entrar selecionado no render em que a lista chega, e a
-  // escolha explícita da pessoa continua mandando.
-  const pickedCardExists = cardsData?.data?.some((card) => card.id.toString() === pickedCardId);
-  const selectedCardId = pickedCardExists ? pickedCardId : defaultCardId;
-
-  const offerPrice = AI_CREDITS_FIRST_PURCHASE_OFFER.price;
-  const fullPrice = eligibility.data?.anchorCents != null ? eligibility.data.anchorCents / 100 : null;
-  const discountPercent = fullPrice != null ? Math.round((1 - offerPrice / fullPrice) * 100) : null;
-
-  const creditsLabel = AI_CREDITS_FIRST_PURCHASE_OFFER.credits.toLocaleString(locale);
-  const discountLabel =
-    discountPercent != null
-      ? translate('common.promo.aiCreditsOffer.discountBadge', { percent: String(discountPercent) })
-      : '';
-
-  const hasCard = Boolean(selectedCardId);
-  const isSubmitting = purchaseMutation.isPending;
-
-  /** Fecha de verdade — só o `LoseOfferDialog` e a compra concluída chegam aqui. */
-  const dismiss = useCallback(() => {
-    setConfirmingExit(false);
-    closeModal();
-  }, [closeModal]);
-
-  /** Toda tentativa de sair passa por aqui — X, Esc, clique fora e "Agora não". */
-  const requestClose = useCallback(() => setConfirmingExit(true), []);
-
-  /**
-   * Cobra o cartão informado e credita — sem tocar na recorrência do plano. Chamado tanto pelo CTA
-   * com cartão já selecionado quanto (encadeado, sem segundo clique) pelo `onCardAdded` do
-   * `addCardModal` quando a pessoa ainda não tinha cartão.
-   */
-  const submitPurchase = useCallback(
-    async (cardId: string) => {
-      // Sem assinatura não dá pra cobrar aqui — o CTA vira a porta do checkout do accounts em vez
-      // de virar um botão morto.
-      if (subscriptionId == null) {
-        closeModal();
-        window.location.assign(`${accountsUrl}/subscriptions?tab=plans`);
-        return;
-      }
-
-      const input = {
-        subscriptionId,
-        offer: AI_CREDITS_FIRST_PURCHASE_OFFER.slug,
-        paymentMethod: PAYMENT_METHOD_CARD,
-        idCard: cardId,
-      };
-
-      try {
-        let result: PurchaseIaCreditsResult = await purchaseMutation.mutateAsync(input);
-
-        // 3DS: confirma o desafio e RE-POSTA o MESMO input — a chave de idempotência do backend
-        // devolve a mesma cobrança já paga, então o segundo POST fecha com status 1.
-        if (result.status === 2) {
-          await confirmPaymentIfRequired(stripe, result, translate('common.payment.authFailed'));
-          result = await purchaseMutation.mutateAsync(input);
-        }
-
-        // O `message` do status 0 é código de máquina do backend (`offer_consumed`,
-        // `offer_card_only`…), não copy — a tela mostra o erro genérico do catálogo.
-        if (result.status !== 1) {
-          toast.custom((toastId) => (
-            <Toast
-              variant="error"
-              message={translate('common.promo.aiCreditsOffer.errorToast')}
-              toastId={toastId}
-            />
-          ));
-          return;
-        }
-
-        if (accountId != null) {
-          const cookie = readOfferStageCookie(accountId);
-          writeOfferStageCookie(
-            accountId,
-            {
-              stage: AiCreditsOfferStage.CONVERTED,
-              lastSessionIat: eligibility.data?.sessionIssuedAt ?? cookie.lastSessionIat,
-            },
-            whitelabel?.domain
-          );
-        }
-
-        toast.custom((toastId) => (
-          <Toast
-            variant="success"
-            message={translate('common.promo.aiCreditsOffer.successToast', { credits: creditsLabel })}
-            toastId={toastId}
-          />
-        ));
-        dismiss();
-      } catch {
-        // Erro técnico (rede, HTTP não-JSON, resposta fora do `PurchaseIaCreditsResultSchema`) —
-        // `error.message` aqui é texto de máquina (inclusive o dump do ZodError), nunca copy. Mesma
-        // decisão do `status !== 1` acima: a tela mostra a mensagem genérica do catálogo.
-        toast.custom((toastId) => (
-          <Toast
-            variant="error"
-            message={translate('common.promo.aiCreditsOffer.errorToast')}
-            toastId={toastId}
-          />
-        ));
-      }
-    },
-    [
-      accountId,
-      accountsUrl,
-      closeModal,
-      creditsLabel,
-      dismiss,
-      eligibility.data?.sessionIssuedAt,
-      purchaseMutation,
-      stripe,
-      subscriptionId,
-      translate,
-      whitelabel?.domain,
-    ]
-  );
-
-  const handleOpenAddCard = useCallback(() => {
-    openModal('addCardModal', {
-      onCardAdded: (cardId: string) => {
-        setPickedCardId(cardId);
-        void submitPurchase(cardId);
-      },
-    });
-  }, [openModal, submitPurchase]);
-
-  const handleConfirm = useCallback(async () => {
-    // 1º passo do fluxo: sem cartão, o CTA é o próprio cadastro — a compra encadeia sozinha
-    // assim que o cartão é criado (ver `handleOpenAddCard`).
-    if (!hasCard) {
-      handleOpenAddCard();
-      return;
-    }
-    await submitPurchase(selectedCardId);
-  }, [handleOpenAddCard, hasCard, selectedCardId, submitPurchase]);
-
-  const bullets = [
-    translate('common.promo.aiCreditsOffer.bullets.first'),
-    translate('common.promo.aiCreditsOffer.bullets.second'),
-    translate('common.promo.aiCreditsOffer.bullets.third'),
-  ];
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={() => {}}>
-        <DialogContent
-          showCloseButton={false}
-          onOpenAutoFocus={(event) => event.preventDefault()}
-          onEscapeKeyDown={(event) => {
-            event.preventDefault();
-            requestClose();
-          }}
-          onPointerDownOutside={(event) => {
-            event.preventDefault();
-            requestClose();
-          }}
-          onInteractOutside={(event) => event.preventDefault()}
-          overlayClassName="duration-300"
-          className={[
-            // mobile: folha de tela cheia (mesma geometria do BuyCreditsModal)
-            'flex flex-col gap-0 overflow-hidden rounded-t-2xl rounded-b-none border-0 p-0 shadow-elevated',
-            'top-0 right-0 bottom-0 left-0 h-dvh max-w-full translate-x-0 translate-y-0 sm:max-w-full',
-            // desktop (≥ md): cartão de duas colunas, centralizado
-            'md:top-[50%] md:right-auto md:bottom-auto md:left-[50%] md:h-auto md:max-h-[92vh] md:w-[900px]! md:max-w-[900px]! md:translate-x-[-50%] md:translate-y-[-50%] md:rounded-xl md:border',
-            // entrada de baixo pra cima: a classe (e não utilidade `animate-[...]`) porque o
-            // `DialogContent` já traz `animate-in` e o merge do Tailwind não funde as duas — ver
-            // `.gp-offer-modal` no globals.css.
-            'gp-offer-modal',
-          ].join(' ')}
-        >
-          <div className="gm-scroll flex h-full flex-col overflow-y-auto md:h-auto md:min-h-[600px] md:flex-row md:items-stretch md:overflow-visible">
-            {/* Ilustração: topo no mobile, coluna da direita no desktop (`md:order-2`). */}
-            <div className="relative h-[180px] w-full shrink-0 md:order-2 md:h-auto md:w-1/2">
-              <OfferIllustration credits={AI_CREDITS_FIRST_PURCHASE_OFFER.credits} locale={locale} />
-
-              <button
-                type="button"
-                onClick={requestClose}
-                aria-label={translate('common.promo.aiCreditsOffer.close')}
-                className="absolute top-4 right-4 z-10 flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950"
-              >
-                <IconX className="size-[18px]" />
-              </button>
-            </div>
-
-            {/* Coluna da oferta */}
-            <div className="flex flex-1 flex-col gap-6 p-6 md:order-1 md:w-1/2 md:shrink-0 md:gap-7 md:p-10">
-              <span
-                className="gp-offer-rise paragraph-xsmall-semibold w-fit rounded-full bg-cyan-50 px-2.5 py-1 text-cyan-700"
-                style={{ animationDelay: '160ms' }}
-              >
-                {translate('common.promo.aiCreditsOffer.eyebrow')}
-              </span>
-
-              {/* 26px (2px acima do `title-large`) e Outfit 700: a oferta bate mais forte que um
-                  título de modal comum. A quebra vem do catálogo, pela tag `<break>`, então cada
-                  idioma escolhe onde partir a frase. */}
-              <div className="gp-offer-rise" style={{ animationDelay: '220ms' }}>
-                <DialogTitle className="title-large-semibold text-[26px] leading-8 font-bold tracking-[-0.4px] text-zinc-950">
-                  {translate.rich('common.promo.aiCreditsOffer.title', {
-                    credits: creditsLabel,
-                    discount: discountLabel,
-                    break: () => <br />,
-                  })}
-                </DialogTitle>
-              </div>
-
-              <ul className="flex flex-col gap-3.5">
-                {bullets.map((bullet, index) => (
-                  <li
-                    key={bullet}
-                    className="gp-offer-rise flex items-start gap-2.5"
-                    style={{ animationDelay: `${300 + index * 70}ms` }}
-                  >
-                    <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-cyan-50">
-                      <IconCheck size={13} stroke={3} className="text-cyan-700" />
-                    </span>
-                    <span className="paragraph-small-medium text-zinc-600">{bullet}</span>
-                  </li>
-                ))}
-              </ul>
-
-              {/* Preço de tabela em cima, pequeno e riscado; o de campanha embaixo, na mesma
-                  tipografia do título (Outfit 700) pra os dois números não competirem entre si. Sem
-                  âncora resolvida (elegibilidade ainda carregando) some a linha do preço cheio em
-                  vez de mostrar um "de" vazio. */}
-              <div className="gp-offer-rise flex flex-col gap-0.5" style={{ animationDelay: '520ms' }}>
-                {fullPrice != null && (
-                  <span className="paragraph-small-medium text-zinc-400 line-through">
-                    {formatCurrencyNumber(fullPrice)}
-                  </span>
-                )}
-                <div className="flex items-center gap-2.5">
-                  <span className="title-large-semibold font-bold tracking-[-0.4px] text-zinc-950">
-                    {formatCurrencyNumber(offerPrice)}
-                  </span>
-                  {discountLabel && (
-                    <span className="paragraph-xsmall-semibold rounded-md bg-green-50 px-2 py-1 text-green-600">
-                      {discountLabel}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              <div className="gp-offer-rise mt-2" style={{ animationDelay: '580ms' }}>
-                <OfferPaymentField cardId={selectedCardId} onCardAdded={setPickedCardId} />
-              </div>
-
-              <div
-                className="gp-offer-rise mt-auto flex flex-col gap-2"
-                style={{ animationDelay: '640ms' }}
-              >
-                <Button className="w-full" loading={isSubmitting} onClick={handleConfirm}>
-                  {hasCard
-                    ? translate('common.promo.aiCreditsOffer.cta', { discount: discountLabel })
-                    : translate('common.promo.aiCreditsOffer.ctaAddCard')}
-                </Button>
-                <Button
-                  variant="secondary"
-                  className="h-10! w-full"
-                  disabled={isSubmitting}
-                  onClick={requestClose}
-                >
-                  {translate('common.promo.aiCreditsOffer.later')}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      <LoseOfferDialog
-        open={confirmingExit}
-        discountLabel={discountLabel}
-        creditsLabel={creditsLabel}
-        fullPriceLabel={fullPrice != null ? formatCurrencyNumber(fullPrice) : ''}
-        onKeep={() => setConfirmingExit(false)}
-        onLose={dismiss}
-      />
-    </>
-  );
-}

package/src/components/modals/promo/AiCreditsOfferModal/components/LoseOfferDialog.tsx

@@ -1,97 +0,0 @@
-'use client';
-
-import { useTranslations } from 'next-intl';
-import { Button } from '../../../../ui/buttons/Button';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '../../../../ui/overlay/Dialog';
-import { Separator } from '../../../../ui/data-display/Separator';
-import { IconAlertTriangle } from '@tabler/icons-react';
-
-interface LoseOfferDialogProps {
-  open: boolean;
-  /** Selo do desconto ("50% OFF") — repetido aqui porque é ele que dói. */
-  discountLabel: string;
-  /** Pacote ofertado, já formatado ("1.000"). */
-  creditsLabel: string;
-  /** Preço cheio formatado: o número que volta a valer. Vazio enquanto a âncora carrega. */
-  fullPriceLabel: string;
-  /** Volta pra oferta (fecha só esta confirmação). */
-  onKeep: () => void;
-  /** Abre mão da oferta e fecha tudo. */
-  onLose: () => void;
-}
-
-/**
- * Confirmação de saída ("quer mesmo perder essa oferta?").
- *
- * É um Dialog SEPARADO, empilhado por cima da oferta com os mesmos z-index do
- * `InsufficientIaCreditsModal` (overlay 1002 / conteúdo 1003) — assim a oferta continua **visível
- * atrás do véu**: a pessoa decide olhando exatamente para o que está prestes a perder, que é o
- * ponto inteiro desta tela.
- *
- * O principal é VOLTAR para a oferta; perder fica como secundário, a um clique de distância. A
- * saída não está escondida — o peso da decisão está na frase, não no botão.
- */
-export function LoseOfferDialog({
-  open,
-  discountLabel,
-  creditsLabel,
-  fullPriceLabel,
-  onKeep,
-  onLose,
-}: LoseOfferDialogProps) {
-  const translate = useTranslations();
-
-  return (
-    <Dialog open={open} onOpenChange={(next) => !next && onKeep()}>
-      <DialogContent
-        showCloseButton={false}
-        onOpenAutoFocus={(event) => event.preventDefault()}
-        overlayClassName="z-[1002] bg-black/40"
-        className="z-[1003] flex flex-col gap-0 p-0 max-[440px]:w-[calc(100%-32px)] md:w-[420px]! lg:w-[420px]! max-w-[420px]! data-[state=open]:animate-[gp-offer-confirm-in_260ms_cubic-bezier(0.16,1,0.3,1)]"
-      >
-        <DialogHeader className="gap-3 p-5 text-left">
-          <div className="flex w-fit items-center justify-center rounded-lg bg-red-50 p-2.5">
-            <IconAlertTriangle size={20} className="text-red-500" />
-          </div>
-          <div className="flex flex-col gap-2">
-            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
-              {translate('common.promo.aiCreditsOffer.exit.title', { discount: discountLabel })}
-            </DialogTitle>
-            <DialogDescription className="paragraph-small-regular text-zinc-600">
-              {/* Sem preço resolvido (elegibilidade ainda carregando) a frase cai na versão sem
-                  número — prometer "volta a custar" sem dizer quanto é pior do que não dizer. */}
-              {fullPriceLabel
-                ? translate('common.promo.aiCreditsOffer.exit.description', {
-                    credits: creditsLabel,
-                    price: fullPriceLabel,
-                  })
-                : translate('common.promo.aiCreditsOffer.exit.descriptionNoPrice', {
-                    credits: creditsLabel,
-                  })}
-            </DialogDescription>
-          </div>
-        </DialogHeader>
-
-        <Separator />
-
-        {/* Rodapé com os dois botões juntos à esquerda (`gap-2`, sem `justify-between`), o
-            principal primeiro. Ficar é o caminho principal; perder a oferta continua a um clique,
-            mas como ação secundária. */}
-        <div className="flex items-center gap-2 p-5">
-          <Button className="h-10! transition-colors" onClick={onKeep}>
-            {translate('common.promo.aiCreditsOffer.exit.keep')}
-          </Button>
-          <Button variant="secondary" className="h-10! transition-colors" onClick={onLose}>
-            {translate('common.promo.aiCreditsOffer.exit.lose')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/modals/promo/AiCreditsOfferModal/components/OfferIllustration.tsx

@@ -1,121 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import Image from 'next/image';
-import { useTranslations } from 'next-intl';
-
-/**
- * Painel direito da oferta — implementação do design do Figma (`Testes-UI`, nodes `2569:2938` e
- * `2569:4015`), conferida contra o SVG exportado do bloco inteiro.
- *
- * A geometria vem do arquivo, desenhado num painel de **449×606** — praticamente o tamanho real
- * desta coluna (metade de um modal de 900). Por isso os offsets são os px do próprio design,
- * ancorados ao CENTRO do painel: a janela tem altura derivada da largura, então âncora percentual
- * desmontaria a composição quando o modal mudasse de altura; a partir do centro, a distância entre
- * as peças se mantém.
- *
- * O fundo e a janela são os VETORES do arquivo (`offer-panel-background.svg` e
- * `offer-editor-window.svg`, em `public/promo/` do app consumidor — a lib não publica assets
- * estáticos), fatiados do SVG do bloco; o cartão é DOM, pra o contador animar.
- *
- * Animações em CSS puro (classes `gp-offer-*`, ver o bloco no topo do `AiCreditsOfferModal.tsx`) —
- * respeitam `prefers-reduced-motion` por conta própria, sem depender de JS. Só o CONTADOR do
- * cartão é JS (`requestAnimationFrame`): não dá pra fazer "500" nascer de "0" em CSS puro.
- */
-
-const COUNT_DELAY_MS = 620;
-const COUNT_DURATION_MS = 1150;
-
-function easeOutCubic(t: number): number {
-  return 1 - (1 - t) ** 3;
-}
-
-interface OfferIllustrationProps {
-  /** Pacote ofertado — é ele que o contador persegue. */
-  credits: number;
-  /** Locale de formatação do número (vem do locale da UI). */
-  locale: string;
-}
-
-export function OfferIllustration({ credits, locale }: OfferIllustrationProps) {
-  const translate = useTranslations();
-  const [displayCredits, setDisplayCredits] = useState(0);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-      setDisplayCredits(credits);
-      return;
-    }
-
-    let frameId: number;
-    const startedAt = performance.now() + COUNT_DELAY_MS;
-
-    const tick = (now: number) => {
-      const elapsed = now - startedAt;
-      if (elapsed < 0) {
-        frameId = requestAnimationFrame(tick);
-        return;
-      }
-      const progress = Math.min(1, elapsed / COUNT_DURATION_MS);
-      setDisplayCredits(Math.round(credits * easeOutCubic(progress)));
-      if (progress < 1) frameId = requestAnimationFrame(tick);
-    };
-
-    frameId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frameId);
-  }, [credits]);
-
-  return (
-    <div className="relative h-full w-full overflow-hidden">
-      {/* Fundo: o próprio vetor do arquivo (gradiente + o brilho difuso da quina), extraído do SVG
-          do bloco. Vem como imagem, e não como gradiente CSS + `blur`, pra não haver interpretação
-          no meio: a cor e o desfoque são os do design, byte a byte. 4,7KB. */}
-      <Image
-        src="/promo/offer-panel-background.svg"
-        alt=""
-        fill
-        priority
-        draggable={false}
-        className="object-cover select-none"
-      />
-
-      {/* Janela do editor — o vetor exportado do próprio arquivo (chrome, moldura branca, sombra e
-          o print do canvas embutido). `gp-offer-window-in` anima `translate`/`scale` (propriedades
-          CSS independentes do `transform`), então convive sem conflito com o
-          `-translate-x-1/2 -translate-y-1/2` do Tailwind que centraliza o elemento. */}
-      <div
-        aria-hidden
-        className="gp-offer-window-in absolute top-[calc(50%-27px)] left-[calc(50%+98px)] aspect-[557.57/388.22] w-[132%] -translate-x-1/2 -translate-y-1/2 md:w-[124.2%]"
-      >
-        <Image
-          src="/promo/offer-editor-window.svg"
-          alt=""
-          fill
-          sizes="560px"
-          priority
-          draggable={false}
-          className="select-none"
-        />
-      </div>
-
-      {/* Cartão de créditos (node 2569:4015), solto abaixo da janela, com a folga de gradiente que
-          o arquivo tem. Só no desktop: no mobile a faixa é baixa e ele brigaria com a janela. */}
-      <div className="gp-offer-card-in absolute top-[calc(50%+146px)] left-[49.7%] hidden h-[66px] w-[193.5px] items-center gap-[11.5px] rounded-[15px] border border-[#8BE4FF]/38 bg-white pl-[11.5px] shadow-[0px_4px_25px_0px_rgba(26,26,26,0.03)] md:flex">
-        <span className="gp-offer-icon-pulse flex size-[43.5px] shrink-0 items-center justify-center rounded-[9px] bg-cyan-50">
-          {/* eslint-disable-next-line @next/next/no-img-element -- ícone de 39KB, pesado demais pra inlinear no componente da lib. */}
-          <img src="/iaicon.svg" alt="" width={24} height={24} className="block" />
-        </span>
-        <span className="flex items-baseline gap-1 whitespace-nowrap">
-          <span className="title-large-semibold text-[25px] leading-[29px] tabular-nums text-zinc-950">
-            {displayCredits.toLocaleString(locale)}
-          </span>
-          <span className="paragraph-small-medium text-[14.5px] text-zinc-500">
-            {translate('common.promo.aiCreditsOffer.illustration.credits')}
-          </span>
-        </span>
-      </div>
-    </div>
-  );
-}