+ {/* Setup Phase - Editorial Style */}
+ {(state.status === "setup" || (!state.status && scenarios.length > 0)) && (
+
+ )}
+
+ {/* Battle Phase */}
+ {(state.status === "ready" || state.status === "negotiating" || state.status === "deal" || state.status === "no_deal") && (
+
+ {/* Scenario Header - Editorial Style */}
+ {state.scenario && (
+
+
+ Negotiation Item
+
+
+ {state.scenario.title}
+
+ {state.scenario.item}
+
+ Asking Price
+
+ ${state.scenario.asking_price?.toLocaleString()}
+
+
+
+ )}
+
+ {/* Comparison Display - Editorial Two-Column */}
+ {state.buyer && state.seller && (
+
+
+ {/* Buyer Column */}
+
+ Buyer
+ {state.buyer.emoji}
+ {state.buyer.name}
+ Budget: ${state.buyer.budget?.toLocaleString()}
+
+
+ {/* Seller Column */}
+
+ Seller
+ {state.seller.emoji}
+ {state.seller.name}
+ Minimum: ${state.seller.minimum?.toLocaleString()}
+
+
+
+ )}
+
+ {/* Negotiation Chat */}
+ {state.rounds && state.rounds.length > 0 && (
+
+
+
+ Live Transcript
+
+
+
+ {/* Price Tracker */}
+ {state.buyer && state.seller && state.rounds.length > 0 && state.rounds[state.rounds.length - 1].offer_amount && (
+
+ )}
+
+ {/* Chat Bubbles */}
+
+
+ {state.rounds.map((round, index) => {
+ const isBuyer = round.type === "buyer_offer" || round.buyer_name;
+ return (
+
+ );
+ })}
+
+
+ {/* Typing Indicator */}
+ {(state.status === "negotiating" || state.status === "ready") && (
+
+
+
+ )}
+
+
+ )}
+
+ {/* Deal Banner */}
+ {state.status === "deal" && state.final_price && state.scenario && (
+
+
+
+ )}
+
+ {/* No Deal Banner */}
+ {state.status === "no_deal" && (
+
+
+ Negotiation Ended
+ No agreement could be reached between the parties.
+
+ )}
+
+ {/* Reset Button */}
+ {(state.status === "deal" || state.status === "no_deal") && (
+
+
+
+ Start New Negotiation
+
+
+ )}
+