[V0_FILE]typescriptreact:file="components/loading-spinner.tsx" isMerged="true" export function LoadingSpinner({ size = "default" }: { size?: "sm" | "default" | "lg" }) { const sizeClasses = { sm: "h-4 w-4", default: "h-6 w-6", lg: "h-8 w-8", } return (

Carregando...

) } [V0_FILE]typescriptreact:file="components/scarcity-indicator.tsx" isMerged="true" interface ScarcityIndicatorProps { percentage: number variant?: "default" | "urgent" } export function ScarcityIndicator({ percentage, variant = "default" }: ScarcityIndicatorProps) { const isUrgent = percentage >= 85 || variant === "urgent" return (

{[...Array(5)].map((_, i) => (

))}

{percentage}% das vagas já foram preenchidas

{isUrgent &&

⚠️ Últimas vagas disponíveis!

}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import ProfessionalGamifiedFunnel from "../gamified-funnel" export default function Page() { return } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; body { font-family: Arial, Helvetica, sans-serif; } @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } @keyframes pulse-custom { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); /* green-500 with 70% opacity */ } 50% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); /* green-500 fading out */ } } .animate-pulse-custom { animation: pulse-custom 2s infinite cubic-bezier(0.4, 0, 0.6, 1); } /* PROTEÇÃO MÁXIMA CONTRA SEEK - NÍVEL EXTREMO */ .wistia-protected, .wistia-protected * { -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; } /* OVERLAY PARA COBRIR LOGO DO WISTIA */ .wistia-protected::after { content: "" !important; position: absolute !important; top: 10px !important; right: 10px !important; width: 80px !important; height: 30px !important; background: linear-gradient(135deg, #0f172a, #1e293b) !important; z-index: 9999 !important; border-radius: 4px !important; pointer-events: none !important; } /* OVERLAY ADICIONAL PARA DIFERENTES POSIÇÕES DA LOGO */ .wistia-protected::before { content: "" !important; position: absolute !important; bottom: 10px !important; right: 10px !important; width: 80px !important; height: 30px !important; background: linear-gradient(135deg, #0f172a, #1e293b) !important; z-index: 9999 !important; border-radius: 4px !important; pointer-events: none !important; } /* OVERLAY PARA CANTOS SUPERIORES */ .wistia_embed::after { content: "" !important; position: absolute !important; top: 8px !important; right: 8px !important; width: 90px !important; height: 35px !important; background: linear-gradient(135deg, #0f172a, #1e293b) !important; z-index: 99999 !important; border-radius: 6px !important; pointer-events: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } /* OVERLAY PARA CANTOS INFERIORES */ .wistia_embed::before { content: "" !important; position: absolute !important; bottom: 50px !important; right: 8px !important; width: 90px !important; height: 35px !important; background: linear-gradient(135deg, #0f172a, #1e293b) !important; z-index: 99999 !important; border-radius: 6px !important; pointer-events: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } /* DESTRUIR COMPLETAMENTE TODOS OS CONTROLES DE SEEK */ .wistia_embed .wistia_controls .wistia_control.wistia_seek_control, .wistia_embed .wistia_controls .wistia_control.wistia_scrubber_control, .wistia_embed .wistia_controls .wistia_control.wistia_time_control, .wistia_embed .wistia_controls .wistia_control.wistia_progress_control, .wistia_embed .wistia_controls .wistia_control.wistia_scrubber, .wistia_embed .wistia_controls .wistia_control.wistia_time, .wistia_embed .wistia_controls .wistia_control.wistia_progress, .wistia_embed .wistia_scrubber_handle, .wistia_embed .wistia_progress_bar, .wistia_embed .wistia_time_display, .wistia_embed .wistia_seek_control, .wistia_embed .wistia_scrubber_control, .wistia_embed .wistia_control_bar, .wistia_embed .wistia_progress, .wistia_embed .wistia_scrubber, .wistia_embed .wistia_time, .wistia_embed .wistia_playbar, .wistia_embed [class*="seek"], .wistia_embed [class*="scrub"], .wistia_embed [class*="progress"], .wistia_embed [class*="time"], .wistia_embed [class*="playbar"], .wistia_embed [role="progressbar"], .wistia_embed [role="slider"], .wistia_embed [aria-label*="seek"], .wistia_embed [aria-label*="progress"], .wistia_embed [aria-label*="scrub"], .wistia_embed [aria-label*="playbar"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; position: absolute !important; left: -99999px !important; top: -99999px !important; z-index: -9999 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: none !important; margin: 0 !important; padding: 0 !important; } /* OCULTAR LOGO DO WISTIA E LEGENDAS (CC) */ .wistia_embed .wistia_logo, .wistia_embed .wistia_controls .wistia_control.wistia_logo_control, .wistia_embed .wistia_controls .wistia_control.wistia_captions_control, .wistia_embed .wistia_controls .wistia_control.wistia_cc_control, .wistia_embed .wistia_captions_control, .wistia_embed .wistia_cc_control, .wistia_embed .wistia_logo_control, .wistia_embed [class*="logo"], .wistia_embed [class*="captions"], .wistia_embed [class*="cc"], .wistia_embed [aria-label*="captions"], .wistia_embed [aria-label*="subtitles"], .wistia_embed [aria-label*="cc"], .wistia_embed [title*="Wistia"], .wistia_embed [alt*="Wistia"], .wistia_embed a[href*="wistia"], .wistia_embed a[href*="wistia.com"], .wistia_embed .w-vulcan-v2-button, .wistia_embed .w-css-reset-button-common, .wistia_embed button[aria-label*="captions"], .wistia_embed button[aria-label*="subtitles"], .wistia_embed button[title*="captions"], .wistia_embed button[title*="subtitles"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; position: absolute !important; left: -99999px !important; top: -99999px !important; z-index: -9999 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: none !important; margin: 0 !important; padding: 0 !important; } /* MANTER APENAS PLAY/PAUSE - NADA MAIS */ .wistia_embed .wistia_controls .wistia_control.wistia_play_button_control, .wistia_embed .wistia_controls .wistia_control.wistia_play_button, .wistia_embed .wistia_controls .wistia_control.wistia_pause_button, .wistia_embed .wistia_play_button, .wistia_embed .wistia_pause_button { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: relative !important; left: auto !important; top: auto !important; z-index: 1000 !important; } /* ESCONDER TODOS OS OUTROS CONTROLES */ .wistia_embed .wistia_controls .wistia_control:not(.wistia_play_button_control):not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed .wistia_controls .wistia_control.wistia_volume_control, .wistia_embed .wistia_controls .wistia_control.wistia_fullscreen_control, .wistia_embed .wistia_controls .wistia_control.wistia_settings_control, .wistia_embed .wistia_controls .wistia_control.wistia_captions_control, .wistia_embed .wistia_controls .wistia_control.wistia_quality_control, .wistia_embed .wistia_controls .wistia_control.wistia_playback_rate_control { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* BLOQUEAR CLIQUES NO VÍDEO COMPLETAMENTE */ .wistia_embed .wistia_click_to_play, .wistia_embed .wistia_video_wrapper, .wistia_embed .wistia_video, .wistia_embed video, .wistia_embed iframe { pointer-events: none !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* PERMITIR APENAS CONTROLES DE PLAY/PAUSE */ .wistia_embed .wistia_controls { pointer-events: auto !important; background: rgba(0, 0, 0, 0.8) !important; height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* FORÇAR REMOÇÃO DE ELEMENTOS VIA CSS */ .wistia_embed *[class*="seek"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="scrub"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="progress"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="time"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="playbar"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="logo"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="captions"]:not(.wistia_play_button):not(.wistia_pause_button), .wistia_embed *[class*="cc"]:not(.wistia_play_button):not(.wistia_pause_button) { content: "" !important; display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -99999px !important; top: -99999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } /* BLOQUEAR ATALHOS DE TECLADO */ .wistia_embed { -webkit-touch-callout: none !important; -webkit-user-select: none !important; -khtml-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; } /* PROTEÇÃO FINAL - REMOVER QUALQUER COISA QUE POSSA SER SEEK, LOGO OU CC */ .wistia_embed [tabindex]:not(.wistia_play_button):not(.wistia_pause_button) { tabindex: -1 !important; pointer-events: none !important; display: none !important; } /* REMOVER LINKS E ELEMENTOS WISTIA ADICIONAIS */ .wistia_embed a, .wistia_embed link, .wistia_embed [href], .wistia_embed .w-bottom-bar, .wistia_embed .w-chrome, .wistia_embed .w-control-bar, .wistia_embed .w-control-bar-region { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* PROTEÇÃO ESPECÍFICA CONTRA ELEMENTOS WISTIA COMUNS */ .wistia_embed [class^="w-"], .wistia_embed [class*="-w-"], .wistia_embed [id^="w-"], .wistia_embed [id*="-w-"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* PERMITIR APENAS O BOTÃO DE PLAY/PAUSE */ .wistia_embed [class*="play"]:not([class*="playbar"]):not([class*="progress"]), .wistia_embed [class*="pause"]:not([class*="playbar"]):not([class*="progress"]) { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* OCULTAR CABEÇALHO DO V0 */ header, nav, [role="banner"], [data-testid*="header"], [class*="header"], [class*="nav"], [class*="toolbar"], [class*="topbar"], .v0-header, .v0-nav, .v0-toolbar { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; position: absolute !important; left: -9999px !important; top: -9999px !important; } /* GARANTIR QUE O BODY OCUPE TODA A TELA */ html, body { margin: 0 !important; padding: 0 !important; height: 100vh !important; overflow-x: hidden !important; } /* REMOVER QUALQUER ESPAÇAMENTO NO TOPO */ body > * { margin-top: 0 !important; padding-top: 0 !important; } /* FORÇAR FULLSCREEN NO CONTAINER PRINCIPAL */ #__next, [data-nextjs-scroll-focus-boundary] { height: 100vh !important; margin: 0 !important; padding: 0 !important; } /* OCULTAR ELEMENTOS ESPECÍFICOS DO V0 */ [class*="v0"], [id*="v0"], [data-v0], [class*="vercel"], [id*="vercel"] { display: none !important; } /* GARANTIR QUE NOSSO CONTEÚDO FIQUE NO TOPO */ .min-h-screen { position: relative !important; z-index: 1000 !important; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Script from "next/script" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Desafio 0 a 10K Por Mês com IA", description: "Descubra como pessoas comuns estão saindo do zero e alcançando R$ 10.000+ por mês usando inteligência artificial de forma prática", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {/* Meta Pixel Code */}

{/* End Meta Pixel Code */} {children} ) } [V0_FILE]typescriptreact:file="types/funnel.ts" isEdit="true" isMerged="true" export interface QuizQuestion { id: string question: string options: QuizOption[] category: "challenge" | "experience" | "goal" | "commitment" } export interface QuizOption { id: string text: string value: string points: number emoji: string } export interface FunnelState { stage: number currentQuestion: number discount: number scarcity: number showRewardButton: boolean isProcessing: boolean userAnswers: string[] totalPoints: number achievements: Achievement[] playerLevel: number streak: number combo: number } export interface Achievement { id: string title: string description: string emoji: string unlocked: boolean points: number } export interface GameStats { totalPoints: number level: number streak: number combo: number achievements: Achievement[] } [V0_FILE]typescriptreact:file="components/game-ui/achievement-popup.tsx" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" import type { Achievement } from "../../types/funnel" interface AchievementPopupProps { achievement: Achievement | null onClose: () => void } export function AchievementPopup({ achievement, onClose }: AchievementPopupProps) { return ( {achievement && ( e.stopPropagation()} >

{achievement.emoji} 🏆 CONQUISTA DESBLOQUEADA! {achievement.title} {achievement.description} +{achievement.points} pontos!

)} ) } [V0_FILE]typescriptreact:file="components/game-ui/progress-bar.tsx" isMerged="true" "use client" import { motion } from "framer-motion" interface ProgressBarProps { current: number total: number level: number } export function ProgressBar({ current, total, level }: ProgressBarProps) { const progress = (current / total) * 100 return (

Nível {level}

Missão {current + 1} de {total}

{Math.round(progress)}% completo

{/* Checkpoint markers */} {Array.from({ length: total }, (_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/game-ui/floating-points.tsx" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" interface FloatingPoint { id: string points: number x: number y: number } interface FloatingPointsProps { points: FloatingPoint[] onComplete: (id: string) => void } export function FloatingPoints({ points, onComplete }: FloatingPointsProps) { return ( {points.map((point) => ( onComplete(point.id)} className="fixed pointer-events-none z-50 text-2xl font-bold text-yellow-400" style={{ left: point.x, top: point.y }} > +{point.points} ))} ) } [V0_FILE]typescriptreact:file="components/game-ui/level-up-animation.tsx" isMerged="true" "use client" import { motion, AnimatePresence } from "framer-motion" interface LevelUpAnimationProps { show: boolean level: number onComplete: () => void } export function LevelUpAnimation({ show, level, onComplete }: LevelUpAnimationProps) { return ( {show && ( setTimeout(onComplete, 2000)} >

⭐ LEVEL UP! Você alcançou o Nível {level}! {Array.from({ length: 5 }, (_, i) => ( ✨ ))}

)} ) } [V0_FILE]typescriptreact:file="constants/quiz-data.ts" isEdit="true" isMerged="true" import type { QuizQuestion, Achievement } from "../types/funnel" export const QUIZ_DATA: QuizQuestion[] = [ { id: "challenge", question: "🎯 Qual é sua maior missão para conquistar renda online?", category: "challenge", options: [ { id: "time", text: "⏰ Falta de tempo para me dedicar", value: "lack_of_time", points: 100, emoji: "⏰", }, { id: "knowledge", text: "🤔 Não sei por onde começar", value: "no_knowledge", points: 150, emoji: "🤔", }, { id: "results", text: "😤 Já tentei mas não tive resultados", value: "no_results", points: 200, emoji: "😤", }, ], }, { id: "experience", question: "⚔️ Qual é seu nível de experiência nesta batalha?", category: "experience", options: [ { id: "beginner", text: "🌱 Guerreiro Iniciante - nunca vendi online", value: "beginner", points: 200, emoji: "🌱", }, { id: "some", text: "⚡ Lutador Experiente - já tentei algumas vezes", value: "some_experience", points: 150, emoji: "⚡", }, { id: "experienced", text: "🔥 Veterano de Guerra - quero dominar completamente", value: "experienced", points: 100, emoji: "🔥", }, ], }, { id: "income_goal", question: "💰 Qual tesouro você quer conquistar mensalmente?", category: "goal", options: [ { id: "starter", text: "🥉 Tesouro Bronze: R$ 2.000 - R$ 5.000", value: "2k_5k", points: 100, emoji: "🥉", }, { id: "growth", text: "🥈 Tesouro Prata: R$ 5.000 - R$ 15.000", value: "5k_15k", points: 150, emoji: "🥈", }, { id: "scale", text: "🥇 Tesouro Ouro: Mais de R$ 15.000", value: "15k_plus", points: 200, emoji: "🥇", }, ], }, { id: "commitment", question: "🚀 Você está pronto para esta jornada épica?", category: "commitment", options: [ { id: "ready", text: "⚡ SIM! Quero começar a batalha AGORA!", value: "ready_now", points: 300, emoji: "⚡", }, { id: "soon", text: "🛡️ Sim, nos próximos dias estarei pronto", value: "ready_soon", points: 200, emoji: "🛡️", }, { id: "learning", text: "📚 Primeiro quero estudar as estratégias", value: "learning_mode", points: 100, emoji: "📚", }, ], }, ] export const ACHIEVEMENTS: Achievement[] = [ { id: "first_answer", title: "Primeira Escolha", description: "Você deu o primeiro passo na sua jornada!", emoji: "🎯", unlocked: false, points: 50, }, { id: "combo_master", title: "Combo Master", description: "Conseguiu um combo de 3 respostas seguidas!", emoji: "⚡", unlocked: false, points: 100, }, { id: "speed_demon", title: "Demônio da Velocidade", description: "Respondeu em menos de 5 segundos!", emoji: "💨", unlocked: false, points: 75, }, { id: "perfectionist", title: "Perfeccionista", description: "Completou todas as missões!", emoji: "👑", unlocked: false, points: 200, }, { id: "high_roller", title: "Apostador de Alto Risco", description: "Escolheu sempre as opções de maior pontuação!", emoji: "🎰", unlocked: false, points: 150, }, ] export const SCARCITY_CONFIG = { INITIAL_PERCENTAGE: 65, MAX_PERCENTAGE: 95, INCREMENT_INTERVAL: 10000, // 10 seconds INCREMENT_AMOUNT: 1, } export const DISCOUNT_CONFIG = { PER_QUESTION: 10, // 10% por pergunta = 40% total MAX_DISCOUNT: 40, } export const GAME_CONFIG = { POINTS_PER_LEVEL: 500, COMBO_MULTIPLIER: 1.5, SPEED_BONUS_TIME: 5000, // 5 seconds SPEED_BONUS_POINTS: 50, } [V0_FILE]json:file="package.json" isMerged="true" { "name": "gamified-funnel", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.0.0", "framer-motion": "^10.16.16", "@radix-ui/react-progress": "^1.0.3", "lucide-react": "^0.294.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "tailwind-merge": "^2.0.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "postcss": "^8", "tailwindcss": "^3.4.17", "eslint": "^8", "eslint-config-next": "14.0.0" } } [V0_FILE]typescriptreact:file="components/game-ui/audio-manager.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface AudioManagerProps { stage: number isPlaying: boolean } export function AudioManager({ stage, isPlaying }: AudioManagerProps) { const backgroundMusicRef = useRef(null) const ambientSoundRef = useRef(null) // Initialize background music useEffect(() => { // Epic background music for the game backgroundMusicRef.current = new Audio("https://www.soundjay.com/misc/sounds/epic-trailer-music.mp3") backgroundMusicRef.current.volume = 0.1 backgroundMusicRef.current.loop = true backgroundMusicRef.current.preload = "auto" // Ambient gaming sounds ambientSoundRef.current = new Audio("https://www.soundjay.com/misc/sounds/digital-ambient.mp3") ambientSoundRef.current.volume = 0.05 ambientSoundRef.current.loop = true ambientSoundRef.current.preload = "auto" return () => { if (backgroundMusicRef.current) { backgroundMusicRef.current.pause() backgroundMusicRef.current = null } if (ambientSoundRef.current) { ambientSoundRef.current.pause() ambientSoundRef.current = null } } }, []) // Control background music based on stage useEffect(() => { const playBackgroundMusic = async () => { try { if (stage >= 2 && isPlaying && backgroundMusicRef.current) { await backgroundMusicRef.current.play() } else if (backgroundMusicRef.current) { backgroundMusicRef.current.pause() } } catch (error) { console.log("Background music failed to play:", error) } } playBackgroundMusic() }, [stage, isPlaying]) // Control ambient sounds useEffect(() => { const playAmbientSound = async () => { try { if (stage >= 1 && ambientSoundRef.current) { await ambientSoundRef.current.play() } else if (ambientSoundRef.current) { ambientSoundRef.current.pause() } } catch (error) { console.log("Ambient sound failed to play:", error) } } playAmbientSound() }, [stage]) return null // This component doesn't render anything } [V0_FILE]typescriptreact:file="components/game-ui/sound-effects.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" // Sound effects component for UI interactions export function SoundEffects() { const hoverSoundRef = useRef(null) const clickSoundRef = useRef(null) useEffect(() => { // Hover sound hoverSoundRef.current = new Audio("https://www.soundjay.com/misc/sounds/button-hover.wav") hoverSoundRef.current.volume = 0.2 hoverSoundRef.current.preload = "auto" // Click sound clickSoundRef.current = new Audio("https://www.soundjay.com/misc/sounds/button-click.wav") clickSoundRef.current.volume = 0.3 clickSoundRef.current.preload = "auto" // Add global event listeners for UI sounds const handleMouseEnter = () => { if (hoverSoundRef.current) { hoverSoundRef.current.currentTime = 0 hoverSoundRef.current.play().catch(() => {}) } } const handleClick = () => { if (clickSoundRef.current) { clickSoundRef.current.currentTime = 0 clickSoundRef.current.play().catch(() => {}) } } // Add listeners to all buttons const buttons = document.querySelectorAll("button") buttons.forEach((button) => { button.addEventListener("mouseenter", handleMouseEnter) button.addEventListener("click", handleClick) }) return () => { buttons.forEach((button) => { button.removeEventListener("mouseenter", handleMouseEnter) button.removeEventListener("click", handleClick) }) } }, []) return null } [V0_FILE]typescriptreact:file="components/game-ui/points-display.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" interface PointsDisplayProps { points: number level: number streak: number combo: number } export function PointsDisplay({ points, level, streak, combo }: PointsDisplayProps) { return (

{/* Points */} 💰 {points.toLocaleString()} {/* Level */} ⭐ Nível {level} {/* Streak */} {streak > 1 && ( 🔥 {streak}x )} {/* Combo */} {combo > 1 && ( ⚡ {combo}x )}

) } [V0_FILE]typescriptreact:file="gamified-funnel.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef, useCallback } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { LoadingSpinner } from "./components/loading-spinner" import { ScarcityIndicator } from "./components/scarcity-indicator" import { PointsDisplay } from "./components/game-ui/points-display" import { AchievementPopup } from "./components/game-ui/achievement-popup" import { ProgressBar } from "./components/game-ui/progress-bar" import { FloatingPoints } from "./components/game-ui/floating-points" import { LevelUpAnimation } from "./components/game-ui/level-up-animation" import { QUIZ_DATA, ACHIEVEMENTS, SCARCITY_CONFIG, DISCOUNT_CONFIG, GAME_CONFIG } from "./constants/quiz-data" import type { FunnelState, Achievement } from "./types/funnel" import { AudioManager } from "./components/game-ui/audio-manager" import { SoundEffects } from "./components/game-ui/sound-effects" // Declare global types declare global { interface Window { Wistia: any _wq: any[] fbq: any } } interface FloatingPoint { id: string points: number x: number y: number } export default function ProfessionalGamifiedFunnel() { const getInitialScarcity = useCallback(() => { if (typeof window !== "undefined") { const savedScarcity = localStorage.getItem("funnel_scarcity") if (savedScarcity) { return Number.parseInt(savedScarcity, 10) } } return SCARCITY_CONFIG.INITIAL_PERCENTAGE }, []) const [state, setState] = useState(() => ({ stage: 0, currentQuestion: 0, discount: 0, scarcity: getInitialScarcity(), showRewardButton: false, isProcessing: false, userAnswers: [], totalPoints: 0, achievements: ACHIEVEMENTS.map((a) => ({ ...a, unlocked: false })), playerLevel: 1, streak: 0, combo: 0, })) // Game state const [currentAchievement, setCurrentAchievement] = useState(null) const [showLevelUp, setShowLevelUp] = useState(false) const [floatingPoints, setFloatingPoints] = useState([]) const [questionStartTime, setQuestionStartTime] = useState(0) const [particles, setParticles] = useState>([]) const [audioEnabled, setAudioEnabled] = useState(true) // Audio refs const quizSuccessAudioRef = useRef(null) const rewardRevealAudioRef = useRef(null) const stageAdvanceAudioRef = useRef(null) const levelUpAudioRef = useRef(null) const achievementAudioRef = useRef(null) const comboAudioRef = useRef(null) // Other refs const [videoError, setVideoError] = useState(false) const discountTimerRef = useRef(null) const protectionIntervalRef = useRef(null) const wistiaVideoRef = useRef(null) // Função para rastrear eventos do Meta Pixel const trackEvent = useCallback((eventName: string, parameters?: any) => { if (typeof window !== "undefined" && window.fbq) { window.fbq("track", eventName, parameters) console.log(`📊 Meta Pixel Event: ${eventName}`, parameters) } }, []) // Initialize audio refs with better error handling and preloading useEffect(() => { const initializeAudio = async () => { try { // Quiz success sound - cash register quizSuccessAudioRef.current = new Audio("https://www.soundjay.com/misc/sounds/cash-register-01.wav") quizSuccessAudioRef.current.volume = 0.4 quizSuccessAudioRef.current.preload = "auto" // Reward reveal sound - victory fanfare rewardRevealAudioRef.current = new Audio("https://www.soundjay.com/misc/sounds/fanfare-3.wav") rewardRevealAudioRef.current.volume = 0.6 rewardRevealAudioRef.current.preload = "auto" // Stage advance sound - whoosh stageAdvanceAudioRef.current = new Audio("https://www.soundjay.com/misc/sounds/whoosh-01.wav") stageAdvanceAudioRef.current.volume = 0.3 stageAdvanceAudioRef.current.preload = "auto" // Level up sound - achievement bell levelUpAudioRef.current = new Audio("https://www.soundjay.com/misc/sounds/bell-ringing-05.wav") levelUpAudioRef.current.volume = 0.5 levelUpAudioRef.current.preload = "auto" // Achievement sound - bonus earned achievementAudioRef.current = new Audio("https://www.soundjay.com/misc/sounds/magic-chime-02.wav") achievementAudioRef.current.volume = 0.4 achievementAudioRef.current.preload = "auto" // Combo sound - arcade coin comboAudioRef.current = new Audio("https://www.soundjay.com/misc/sounds/coin-drop-1.wav") comboAudioRef.current.volume = 0.3 comboAudioRef.current.preload = "auto" // Preload all sounds const sounds = [ quizSuccessAudioRef.current, rewardRevealAudioRef.current, stageAdvanceAudioRef.current, levelUpAudioRef.current, achievementAudioRef.current, comboAudioRef.current, ] // Try to preload each sound sounds.forEach((sound) => { if (sound) { sound.load() // Add error handling sound.onerror = () => { console.log("Audio failed to load, using fallback") } } }) console.log("🔊 Sistema de áudio gamificado inicializado!") } catch (error) { console.log("Audio initialization failed:", error) } } initializeAudio() }, []) // Enhanced audio playing functions with fallback const playSound = useCallback((audioRef: React.RefObject, fallbackText?: string) => { try { if (audioRef.current) { audioRef.current.currentTime = 0 const playPromise = audioRef.current.play() if (playPromise !== undefined) { playPromise.catch(() => { // Fallback: show visual feedback if audio fails if (fallbackText) { console.log(`🔊 ${fallbackText}`) } }) } } } catch (error) { console.log("Audio play failed:", error) } }, []) const playQuizSuccessSound = useCallback(() => { playSound(quizSuccessAudioRef, "DING! Resposta correta!") }, [playSound]) const playStageAdvanceSound = useCallback(() => { playSound(stageAdvanceAudioRef, "WHOOSH! Avançando de fase!") }, [playSound]) const playLevelUpSound = useCallback(() => { playSound(levelUpAudioRef, "LEVEL UP! Parabéns!") }, [playSound]) const playAchievementSound = useCallback(() => { playSound(achievementAudioRef, "CONQUISTA DESBLOQUEADA!") }, [playSound]) const playComboSound = useCallback(() => { playSound(comboAudioRef, "COMBO! Incrível!") }, [playSound]) const playRewardSound = useCallback(() => { playSound(rewardRevealAudioRef, "RECOMPENSA DESBLOQUEADA!") }, [playSound]) // Set question start time when question changes useEffect(() => { if (state.stage === 2) { setQuestionStartTime(Date.now()) } }, [state.currentQuestion, state.stage]) // Game functions const addFloatingPoints = useCallback((points: number, x: number, y: number) => { const id = Math.random().toString(36).substr(2, 9) setFloatingPoints((prev) => [...prev, { id, points, x, y }]) }, []) const removeFloatingPoint = useCallback((id: string) => { setFloatingPoints((prev) => prev.filter((p) => p.id !== id)) }, []) const unlockAchievement = useCallback( (achievementId: string) => { setState((prev) => { const achievement = prev.achievements.find((a) => a.id === achievementId) if (achievement && !achievement.unlocked) { const updatedAchievements = prev.achievements.map((a) => a.id === achievementId ? { ...a, unlocked: true } : a, ) setCurrentAchievement(achievement) playAchievementSound() // Use the new function return { ...prev, achievements: updatedAchievements, totalPoints: prev.totalPoints + achievement.points, } } return prev }) }, [playAchievementSound], ) const checkLevelUp = useCallback( (newPoints: number) => { const newLevel = Math.floor(newPoints / GAME_CONFIG.POINTS_PER_LEVEL) + 1 if (newLevel > state.playerLevel) { setShowLevelUp(true) playLevelUpSound() // Use the new function return newLevel } return state.playerLevel }, [state.playerLevel, playLevelUpSound], ) const createParticles = useCallback((x: number, y: number) => { const newParticles = Array.from({ length: 10 }, (_, i) => ({ id: Math.random().toString(36).substr(2, 9), x: x + (Math.random() - 0.5) * 100, y: y + (Math.random() - 0.5) * 100, })) setParticles((prev) => [...prev, ...newParticles]) setTimeout(() => { setParticles((prev) => prev.filter((p) => !newParticles.find((np) => np.id === p.id))) }, 2000) }, []) // Load Wistia scripts when video stage is reached useEffect(() => { if (state.stage === 3) { console.log("🚀 ETAPA DO VÍDEO INICIADA - TIMER DE 2MIN30S ATIVADO!") trackEvent("ViewContent", { content_name: "Video Presentation", content_category: "Video", value: state.discount, currency: "BRL", }) // TIMER GARANTIDO DE 30 SEGUNDOS - SEMPRE FUNCIONA const guaranteedTimer = setTimeout(() => { console.log("🎉 30 SEGUNDOS PASSARAM - MOSTRANDO BOTÃO DE DESCONTO!") setState((prev) => ({ ...prev, showRewardButton: true })) // Rastrear quando o botão de desconto aparece trackEvent("AddToCart", { content_name: "Discount Button Unlocked", value: state.discount, currency: "BRL", }) }, 30000) // 30 segundos = 30000ms const fallbackTimer = setTimeout(() => { console.log("Wistia não carregou, usando fallback") setVideoError(true) }, 5000) try { const script = document.createElement("script") script.src = "https://fast.wistia.com/E-v1.js" script.async = true script.onload = () => { clearTimeout(fallbackTimer) console.log("Wistia carregado com sucesso") setTimeout(() => { if (window.Wistia) { window._wq = window._wq || [] window._wq.push({ id: "k9tmzidbp4", options: { controlsVisibleOnLoad: false, playButton: true, playbar: false, smallPlayButton: false, volumeControl: false, fullscreenButton: false, settingsControl: false, qualityControl: false, playbackRateControl: false, plugin: { "captions-v1": { onByDefault: false, language: "off", }, }, wmode: "transparent", }, onReady: (video: any) => { console.log("Video ready, applying MAXIMUM protections...") wistiaVideoRef.current = video let lastValidTime = 0 let isPlaying = false video.bind("timechange", (currentTime: number) => { if (isPlaying && currentTime > lastValidTime + 2) { console.log("SEEK DETECTED! Reverting from", currentTime, "to", lastValidTime) video.time(lastValidTime) return false } if (isPlaying) { lastValidTime = currentTime } }) video.bind("seek", (currentTime: number, lastTime: number) => { console.log("SEEK BLOCKED! Returning to:", lastTime) video.time(lastTime) return false }) video.bind("play", () => { isPlaying = true console.log("Video playing") trackEvent("Play", { content_name: "Video Presentation", content_category: "Video", }) }) video.bind("pause", () => { isPlaying = false console.log("Video paused") }) video.bind("click", (e: any) => { e.preventDefault() e.stopPropagation() return false }) document.addEventListener("keydown", (e) => { if ( e.code === "ArrowLeft" || e.code === "ArrowRight" || e.code === "ArrowUp" || e.code === "ArrowDown" || e.code === "Space" || e.code === "Enter" || (e.key >= "0" && e.key <= "9") ) { e.preventDefault() e.stopPropagation() return false } }) const continuousProtection = () => { try { const elementsToRemove = [ ".wistia_seek_control", ".wistia_scrubber_control", ".wistia_time_control", ".wistia_progress_control", ".wistia_scrubber", ".wistia_progress", ".wistia_time", ".wistia_control_bar", ".wistia_playbar", ".wistia_logo", ".wistia_logo_control", "a[href*='wistia']", "a[href*='wistia.com']", "[title*='Wistia']", "[alt*='Wistia']", ".wistia_captions_control", ".wistia_cc_control", ".wistia_captions", ".wistia_cc", "button[aria-label*='captions']", "button[aria-label*='subtitles']", "button[title*='captions']", "button[title*='subtitles']", "[class*='seek']", "[class*='scrub']", "[class*='progress']", "[class*='time']", "[class*='playbar']", "[class*='logo']", "[class*='captions']", "[class*='cc']", "[role='progressbar']", "[role='slider']", "[aria-label*='seek']", "[aria-label*='progress']", "[aria-label*='scrub']", "[aria-label*='playbar']", "[aria-label*='captions']", "[aria-label*='subtitles']", ".w-bottom-bar", ".w-chrome", ".w-control-bar", ".w-control-bar-region", ".w-vulcan-v2-button", ".w-css-reset-button-common", "[class^='w-']:not([class*='play']):not([class*='pause'])", "[class*='-w-']:not([class*='play']):not([class*='pause'])", "[id^='w-']:not([id*='play']):not([id*='pause'])", "[id*='-w-']:not([id*='play']):not([id*='pause'])", ] elementsToRemove.forEach((selector) => { const elements = document.querySelectorAll(selector) elements.forEach((el) => { if ( el && el.parentNode && !el.classList.contains("wistia_play_button") && !el.classList.contains("wistia_pause_button") ) { el.parentNode.removeChild(el) } }) }) const iframes = document.querySelectorAll('iframe[src*="wistia"]') iframes.forEach((iframe) => { try { const iframeDoc = (iframe as HTMLIFrameElement).contentDocument if (iframeDoc) { elementsToRemove.forEach((selector) => { const elements = iframeDoc.querySelectorAll(selector) elements.forEach((el) => { if ( el && el.parentNode && !el.classList.contains("wistia_play_button") && !el.classList.contains("wistia_pause_button") ) { el.parentNode.removeChild(el) } }) }) } } catch (e) { // Ignorar erros de CORS } }) const allLinks = document.querySelectorAll(".wistia_embed a") allLinks.forEach((link) => { if (link && link.parentNode) { link.parentNode.removeChild(link) } }) } catch (error) { console.log("Protection error:", error) } } protectionIntervalRef.current = setInterval(continuousProtection, 200) continuousProtection() console.log("MAXIMUM video protections applied") }, }) } }, 1000) } script.onerror = () => { clearTimeout(fallbackTimer) setVideoError(true) } document.head.appendChild(script) } catch (error) { clearTimeout(fallbackTimer) setVideoError(true) } setVideoError(false) return () => { clearTimeout(guaranteedTimer) if (protectionIntervalRef.current) { clearInterval(protectionIntervalRef.current) } } } }, [state.stage, state.discount, trackEvent]) // Scarcity timer useEffect(() => { const interval = setInterval(() => { setState((prev) => { const newScarcity = Math.min(prev.scarcity + SCARCITY_CONFIG.INCREMENT_AMOUNT, SCARCITY_CONFIG.MAX_PERCENTAGE) if (typeof window !== "undefined") { localStorage.setItem("funnel_scarcity", newScarcity.toString()) } return { ...prev, scarcity: newScarcity, } }) }, SCARCITY_CONFIG.INCREMENT_INTERVAL) return () => clearInterval(interval) }, []) // Reset video state when entering video stage useEffect(() => { if (state.stage === 3) { setVideoError(false) setState((prev) => ({ ...prev, showRewardButton: false })) if (discountTimerRef.current) { clearTimeout(discountTimerRef.current) discountTimerRef.current = null } } }, [state.stage]) // Play reward reveal sound when button appears useEffect(() => { if (state.showRewardButton) { playRewardSound() // Use the new function } }, [state.showRewardButton, playRewardSound]) const handleQuizAnswer = useCallback( async (optionValue: string, event: React.MouseEvent) => { if (state.isProcessing) return setState((prev) => ({ ...prev, isProcessing: true })) playQuizSuccessSound() // Get click position for floating points const rect = (event.target as HTMLElement).getBoundingClientRect() const x = rect.left + rect.width / 2 const y = rect.top + rect.height / 2 // Calculate points and bonuses const currentOption = QUIZ_DATA[state.currentQuestion].options.find((o) => o.value === optionValue) const basePoints = currentOption?.points || 100 // Speed bonus const responseTime = Date.now() - questionStartTime const speedBonus = responseTime < GAME_CONFIG.SPEED_BONUS_TIME ? GAME_CONFIG.SPEED_BONUS_POINTS : 0 // Combo multiplier const newCombo = state.combo + 1 const comboMultiplier = newCombo > 2 ? GAME_CONFIG.COMBO_MULTIPLIER : 1 const totalPoints = Math.floor((basePoints + speedBonus) * comboMultiplier) // Create particles and floating points createParticles(x, y) addFloatingPoints(totalPoints, x, y) // Check for achievements if (state.currentQuestion === 0) { unlockAchievement("first_answer") } if (speedBonus > 0) { unlockAchievement("speed_demon") } if (newCombo >= 3) { unlockAchievement("combo_master") playComboSound() } // Track event trackEvent("CompleteRegistration", { content_name: `Quiz Question ${state.currentQuestion + 1}`, content_category: "Quiz", value: (state.currentQuestion + 1) * 10, currency: "BRL", }) // Tempo de processamento mais dinâmico e apresentativo await new Promise((resolve) => setTimeout(resolve, 1800)) setState((prev) => { const newTotalPoints = prev.totalPoints + totalPoints const newLevel = checkLevelUp(newTotalPoints) return { ...prev, currentQuestion: prev.currentQuestion + 1, discount: Math.min(prev.discount + DISCOUNT_CONFIG.PER_QUESTION, DISCOUNT_CONFIG.MAX_DISCOUNT), userAnswers: [...prev.userAnswers, optionValue], isProcessing: false, totalPoints: newTotalPoints, playerLevel: newLevel, streak: prev.streak + 1, combo: newCombo, } }) // Check if completed all questions if (state.currentQuestion === QUIZ_DATA.length - 1) { unlockAchievement("perfectionist") // Check high roller achievement const allHighestPoints = QUIZ_DATA.every((q, i) => { const userAnswer = state.userAnswers[i] || optionValue const maxPoints = Math.max(...q.options.map((o) => o.points)) const userPoints = q.options.find((o) => o.value === userAnswer)?.points || 0 return userPoints === maxPoints }) if (allHighestPoints) { unlockAchievement("high_roller") } } }, [ state.isProcessing, state.currentQuestion, state.combo, state.userAnswers, questionStartTime, playQuizSuccessSound, trackEvent, createParticles, addFloatingPoints, unlockAchievement, checkLevelUp, playComboSound, ], ) const handleStageAdvance = useCallback( (newStage: number) => { playStageAdvanceSound() setState((prev) => ({ ...prev, stage: newStage })) if (newStage === 2) { trackEvent("Lead", { content_name: "Quiz Started", content_category: "Funnel", }) } else if (newStage === 3) { trackEvent("InitiateCheckout", { content_name: "Video Stage Reached", content_category: "Funnel", value: state.discount, currency: "BRL", }) } }, [playStageAdvanceSound, state.discount, trackEvent], ) const currentQuizData = QUIZ_DATA[state.currentQuestion] // Auto-advance to video stage if (state.stage === 2 && state.currentQuestion >= QUIZ_DATA.length) { setTimeout(() => handleStageAdvance(3), 500) } // Landing Page if (state.stage === 0) { return ( <> {/* Audio Control Button - adicione no início de cada stage */} setAudioEnabled(!audioEnabled)} className="fixed top-4 left-4 z-50 bg-slate-800/80 backdrop-blur-sm border border-slate-600 text-white p-3 rounded-full hover:bg-slate-700/80 transition-all duration-300" > {audioEnabled ? "🔊" : "🔇"}

{/* Animated background particles */}

{Array.from({ length: 50 }, (_, i) => ( ))}

{/* Hero Badge */} 🎮 Método Gamificado Validado por +10.000 Jogadores {/* Main Headline */}

🚀 Desafio 0 a 10K
Por Mês com IA ⚡

🎯 Entre na aventura mais épica da sua vida e descubra como conquistar R$ 10.000+ por mês usando inteligência artificial como sua arma secreta!

{/* Game-style testimonials */}

🏆

Maria S. - Nível 47

⚔️ Guerreira Digital, 34 anos

"🎮 Completei todas as missões e cheguei a R$ 8.200 no terceiro mês. Finalmente desbloqueei a liberdade financeira!"

{Array.from({ length: 5 }, (_, i) => ( ⭐ ))}

👑

João P. - Nível 63

🔥 Mestre dos Negócios, 28 anos

"⚡ Em 5 meses consegui R$ 12.500/mês. O sistema de conquistas me manteve motivado até o final!"

{Array.from({ length: 5 }, (_, i) => ( ⭐ ))}

{/* Game-style benefits */} {[ { icon: "🔥", title: "Habilidade Lendária", desc: "Estratégia que 99% não conhece", level: "ÉPICO" }, { icon: "💎", title: "Tesouro Infinito", desc: "Margens de 80% a 95%", level: "RARO" }, { icon: "⚡", title: "Poder da Automação", desc: "Trabalhe 2h/dia, ganhe 24h", level: "MÍTICO" }, ].map((benefit, index) => (

{benefit.level}

{benefit.icon}

{benefit.title}

{benefit.desc}

))} {/* CTA Section */}

🎮 Missão Especial Limitada

Estamos recrutando apenas os jogadores mais determinados para esta aventura épica. Complete o diagnóstico gamificado para garantir sua vaga!

🎁 Participação gratuita + até 40% OFF no método completo

✅ 100% Gratuito • ✅ Vagas Limitadas • ✅ Acesso Imediato

) } // Quiz Stage - Layout completamente otimizado e responsivo if (state.stage === 2 && state.currentQuestion < QUIZ_DATA.length) { return ( <> {/* Audio Control Button */} setAudioEnabled(!audioEnabled)} className="fixed top-4 left-4 z-50 bg-slate-800/80 backdrop-blur-sm border border-slate-600 text-white p-2 sm:p-3 rounded-full hover:bg-slate-700/80 transition-all duration-300" > {audioEnabled ? "🔊" : "🔇"}

{/* Floating Points */} {/* Particles */} {particles.map((particle) => ( ))}

{/* Progress Bar */}

{/* Question Card */} {/* Card glow effect */}

{currentQuizData?.category === "challenge" && "🎯"} {currentQuizData?.category === "experience" && "⚔️"} {currentQuizData?.category === "goal" && "💰"} {currentQuizData?.category === "commitment" && "🚀"} {currentQuizData?.question} 🎮 Escolha sua estratégia para continuar a aventura {/* Stats integrados - compactos */}

💰 {state.totalPoints.toLocaleString()}

⭐ Nv.{state.playerLevel}

{state.streak > 1 && (

🔥 {state.streak}x

)}

{/* Options - Layout otimizado */}

{currentQuizData?.options.map((option, index) => ( ))}

{/* Processing State - Feedback visual */} {state.isProcessing && (

Processando resposta...

⚡ Calculando pontos e preparando próxima missão

)} {/* Scarcity Indicator */}

{/* Achievement Popup */} setCurrentAchievement(null)} /> {/* Level Up Animation */} setShowLevelUp(false)} />

) } // Video Stage (keeping the same structure but with game elements) if (state.stage === 3) { return ( <> {/* Audio Control Button - adicione no início de cada stage */} setAudioEnabled(!audioEnabled)} className="fixed top-4 left-4 z-50 bg-slate-800/80 backdrop-blur-sm border border-slate-600 text-white p-3 rounded-full hover:bg-slate-700/80 transition-all duration-300" > {audioEnabled ? "🔊" : "🔇"}

{/* Game UI persists in video stage - Hidden on small screens */}

{/* Success Message with game elements */} 🏆 Missão Concluída com Sucesso! Nível {state.playerLevel} Alcançado!

🎁 Seu Desconto de {state.discount}% Foi Desbloqueado!
+{state.totalPoints.toLocaleString()} Pontos Conquistados! 🎮 Assista esta apresentação exclusiva para descobrir como aplicar o método que já transformou milhares de jogadores em verdadeiros mestres dos negócios digitais! {/* Video Container with game styling */} {/* Game-style border glow */}

{!videoError ? (

`, }} /> ) : (

🚀 Desafio 0 a 10K Por Mês com IA ⚡

{benefit.title}

🚀 Desafio 0 a 10K
Por Mês com IA ⚡