import React, { useState, useEffect } from 'react'; import { Target, TrendingUp, DollarSign, Flame, Award, PhoneOff, PhoneCall, CheckCircle2, XCircle, ChevronRight, RefreshCw } from 'lucide-react'; // --- GAME DATA: The 16 Closes Gamified --- const SCENARIOS = [ { objection: "I really need to think about it before committing.", correctType: "What's Your Main Concern Close", options: [ { text: "What's your main concern? What are you afraid of happening?", isCorrect: true }, { text: "If we were the same price as the other guy, which would you pick?", isCorrect: false }, { text: "Have you heard of the value triangle? Good, Fast, Cheap. Pick two.", isCorrect: false } ], explanation: "When someone says 'I need to think about it', it's usually fluff. Asking for their main concern forces them to reveal the actual variable they are using to make the decision." }, { objection: "Honestly, I just don't have the money for this right now.", correctType: "Reason Close", options: [ { text: "On a scale of 1 to 10, where are you right now?", isCorrect: false }, { text: "The fact that you don't have the money is the exact reason you need to do this more than anyone.", isCorrect: true }, { text: "Let's zoom out for a second. Do you overanalyze details?", isCorrect: false } ], explanation: "The 'Reason Close' takes their excuse (money, time, spouse) and flips it into the very reason they MUST take action to break the cycle." }, { objection: "I'm not sure if this specific feature is exactly what I need.", correctType: "Hypothetical Close", options: [ { text: "You're not going to keep struggling forever right?", isCorrect: false }, { text: "If this were perfect, would you do it? What's the difference between perfect and what we've got?", isCorrect: true }, { text: "It's like a secretary at a heart surgeon's office trying to tell you what the doctor will do.", isCorrect: false } ], explanation: "The 'Hypothetical Close' isolates the objection. If they say 'yes' to the hypothetical, you know the feature is the ONLY thing holding them back." }, { objection: "I feel like I should wait a few months until things settle down.", correctType: "Some Now, More Later Close", options: [ { text: "Doing this costs some now, but not doing this will cost more later. The amount of time/money will only increase.", isCorrect: true }, { text: "Let's consider the best case and worst case.", isCorrect: false }, { text: "What would it take to get you to a 10?", isCorrect: false } ], explanation: "Delaying a decision doesn't solve the problem; it usually compounds it. This close highlights that the cheapest and fastest time to fix it is today." }, { objection: "Your competitor down the street is offering this for a lot cheaper.", correctType: "Cheap Comparison Close", options: [ { text: "Is keeping doing what you're doing getting you closer or further?", isCorrect: false }, { text: "You can try it risk-free. Decadere means to cut off.", isCorrect: false }, { text: "Super reasonable. If we were the exact same price, which one would you pick?", isCorrect: true } ], explanation: "When they pick you, ask 'Why?'. They will then list out all the reasons you are better, effectively selling themselves on why your premium price is justified." }, { objection: "Can you tell me exactly how you'll fix my specific problem before I pay?", correctType: "Mechanic / Surgeon Secretary Close", options: [ { text: "That's like asking the person scheduling you at a mechanic shop to tell you what's wrong with your car before they look under the hood.", isCorrect: true }, { text: "Let's do your future you a favor.", isCorrect: false }, { text: "The fact that you don't know is the reason you should do it.", isCorrect: false } ], explanation: "You can't diagnose a complex problem without doing the deep work (which is what they are paying for). This builds authority." }, { objection: "I'm worried this isn't going to work and I'll lose my investment.", correctType: "Best Case / Worst Case Close", options: [ { text: "Let's consider options. Worst case: you get a bunch of free time/stuff. Best case: your life changes. Either way you get closer to your goal.", isCorrect: true }, { text: "Have you ever heard of the value triangle? Good, fast, cheap.", isCorrect: false }, { text: "Let's zoom out for a second. You want this, right?", isCorrect: false } ], explanation: "This frames the 'worst case' as still being a net positive (learning, keeping assets) compared to doing nothing, while the best case is life-changing." }, { objection: "It's just a really big chunk of money to drop all at once...", correctType: "Future Favor Close", options: [ { text: "If this were perfect, would you do it?", isCorrect: false }, { text: "It totally is, but let's do future you a favor and have her look back on these next 10 years really excited about having made this decision.", isCorrect: true }, { text: "What's your main concern?", isCorrect: false } ], explanation: "Shifts the prospect's perspective from the immediate pain of parting with money to the long-term identity and pride of having solved their problem." }, { objection: "I just feel paralyzed trying to make the 'perfect' choice right now.", correctType: "Closer or Further Close", options: [ { text: "Is making decisions that keep getting us closer to the goal better? Are we getting closer or further from your goal waiting for perfection?", isCorrect: true }, { text: "On a scale of 1 to 10, where are you?", isCorrect: false }, { text: "Super reasonable. Why would you pick them over us?", isCorrect: false } ], explanation: "Breaks them out of perfectionism. You don't need to be a sniper; you just need to be directionally right. Doing nothing gets them nowhere." }, { objection: "I'm on board, but I need to ask my partner first.", correctType: "Reason Close (Authority variant)", options: [ { text: "You're not going to keep struggling forever, right?", isCorrect: false }, { text: "Let's zoom out for a second.", isCorrect: false }, { text: "The fact that you're so dependent on your spouse is the very reason you need to make this decision and own it.", isCorrect: true } ], explanation: "Another powerful variant of the Reason close. It challenges their identity and uses their lack of autonomy as the catalyst for taking action." } ]; // Shuffle helper const shuffleArray = (array) => { return [...array].sort(() => Math.random() - 0.5); }; export default function App() { const [gameState, setGameState] = useState('start'); // start, playing, result, end const [currentQueue, setCurrentQueue] = useState([]); const [currentIndex, setCurrentIndex] = useState(0); // Game Stats const [commission, setCommission] = useState(0); const [streak, setStreak] = useState(0); const [maxStreak, setMaxStreak] = useState(0); const [dealsClosed, setDealsClosed] = useState(0); // Current Turn State const [selectedOption, setSelectedOption] = useState(null); const [shuffledOptions, setShuffledOptions] = useState([]); useEffect(() => { if (gameState === 'playing' && currentQueue[currentIndex]) { setShuffledOptions(shuffleArray(currentQueue[currentIndex].options)); } }, [currentIndex, currentQueue, gameState]); const startGame = () => { setCurrentQueue(shuffleArray(SCENARIOS)); setCurrentIndex(0); setCommission(0); setStreak(0); setMaxStreak(0); setDealsClosed(0); setSelectedOption(null); setGameState('playing'); }; const handleSelectOption = (option) => { if (selectedOption) return; // Prevent double clicking setSelectedOption(option); if (option.isCorrect) { const dealValue = 10000 + (streak * 2500); // Base $10k + multiplier setCommission(prev => prev + dealValue); setDealsClosed(prev => prev + 1); setStreak(prev => { const newStreak = prev + 1; if (newStreak > maxStreak) setMaxStreak(newStreak); return newStreak; }); } else { setStreak(0); } setGameState('result'); }; const nextScenario = () => { if (currentIndex + 1 < currentQueue.length) { setCurrentIndex(prev => prev + 1); setSelectedOption(null); setGameState('playing'); } else { setGameState('end'); } }; // --- RENDER HELPERS --- const getRank = () => { if (commission >= 100000) return { title: "Grand Master Closer", color: "text-yellow-400" }; if (commission >= 70000) return { title: "Rainmaker", color: "text-purple-400" }; if (commission >= 40000) return { title: "Senior Closer", color: "text-blue-400" }; return { title: "Coffee is for Closers (Trainee)", color: "text-gray-400" }; }; const formatMoney = (amount) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(amount); }; return (
{/* HEADER */}

100M Closer Sim

{gameState !== 'start' && (
{formatMoney(commission)}
= 3 ? 'text-orange-500 animate-pulse' : 'text-slate-400'}`}> x{streak}
)}
{/* MAIN CONTENT AREA */}
{/* --- START SCREEN --- */} {gameState === 'start' && (

Close The Deal

You have 10 hot leads on the line. They have objections. Use Alex Hormozi's 16 specific closing frameworks to handle their concerns and collect your commission.

Earn Commission

Base $10k per closed deal.

Build Streaks

Consecutive closes multiply your payout.

Rank Up

Achieve 'Grand Master' status.

)} {/* --- PLAYING & RESULT SCREEN --- */} {(gameState === 'playing' || gameState === 'result') && currentQueue[currentIndex] && (
{/* Progress Bar */}
Call {currentIndex + 1} of {currentQueue.length} {dealsClosed} Deals Closed
{/* Prospect Bubble */}
Prospect Objection

"{currentQueue[currentIndex].objection}"

{/* Options */}
{shuffledOptions.map((option, idx) => { let btnStateClass = "bg-slate-800 border-slate-700 hover:border-indigo-500 hover:bg-slate-700/50"; if (gameState === 'result') { if (option.isCorrect) { btnStateClass = "bg-emerald-900/40 border-emerald-500 text-emerald-100"; } else if (selectedOption === option && !option.isCorrect) { btnStateClass = "bg-rose-900/40 border-rose-500 text-rose-100 opacity-50"; } else { btnStateClass = "bg-slate-800 border-slate-800 opacity-30"; } } return ( ); })}
{/* Result Feedback Modal/Card */} {gameState === 'result' && (
{selectedOption.isCorrect ? : }

{selectedOption.isCorrect ? "Deal Closed! (+" + formatMoney(10000 + (streak-1)*2500) + ")" : "Deal Lost!"}

Framework: {currentQueue[currentIndex].correctType}

{currentQueue[currentIndex].explanation}

)}
)} {/* --- END SCREEN --- */} {gameState === 'end' && (

Final Rank

{getRank().title}

Total Commission

{formatMoney(commission)}

Close Rate

{Math.round((dealsClosed / currentQueue.length) * 100)}%

{dealsClosed} of {currentQueue.length} Deals

Best Streak

{maxStreak} in a row

)}
); }