import pageData from "~/data/start-up-idea.json"; export function IdeaDuelApp() { const { data, updateData } = useData(pageData); const [currentStep, setCurrentStep] = React.useState('input'); // 'input', 'quiz', 'results' const [currentQuestion, setCurrentQuestion] = React.useState(0); const [idea1, setIdea1] = React.useState(''); const [idea2, setIdea2] = React.useState(''); const ideas = data.ideas || { idea1: '', idea2: '', scores: { idea1: 0, idea2: 0 } }; const quizQuestions = [ { question: "Which idea addresses a larger market opportunity?", criteria: "Market Size" }, { question: "Which idea is easier to implement with current resources?", criteria: "Feasibility" }, { question: "Which idea has less competition in the market?", criteria: "Competition" }, { question: "Which idea generates revenue faster?", criteria: "Revenue Speed" }, { question: "Which idea you're more passionate about?", criteria: "Personal Interest" } ]; const startQuiz = () => { updateData({ ...data, ideas: { idea1: idea1, idea2: idea2, scores: { idea1: 0, idea2: 0 } } }); setCurrentStep('quiz'); setCurrentQuestion(0); }; const answerQuestion = (selectedIdea) => { const updatedScores = { idea1: ideas.scores.idea1 + (selectedIdea === 1 ? 1 : 0), idea2: ideas.scores.idea2 + (selectedIdea === 2 ? 1 : 0) }; updateData({ ...data, ideas: { ...ideas, scores: updatedScores } }); if (currentQuestion < quizQuestions.length - 1) { setCurrentQuestion(currentQuestion + 1); } else { setCurrentStep('results'); } }; const resetApp = () => { setCurrentStep('input'); setCurrentQuestion(0); setIdea1(''); setIdea2(''); updateData({ ...data, ideas: { idea1: '', idea2: '', scores: { idea1: 0, idea2: 0 } } }); }; const maxScore = Math.max(ideas.scores.idea1, ideas.scores.idea2, 1); const idea1Percentage = (ideas.scores.idea1 / quizQuestions.length) * 100; const idea2Percentage = (ideas.scores.idea2 / quizQuestions.length) * 100; if (currentStep === 'input') { return ( ⚔️ Idea Duel Enter two startup ideas and let's see which one has more potential!

Startup Idea #1

setIdea1(e.target.value)}
              className="mt-1"
            />
          </div>
          <div>
            <Label htmlFor="idea2">Startup Idea #2</Label>
            <Textarea
              id="idea2"
              placeholder="Describe your second startup idea..."
              value={idea2}
              onChange={(e) => setIdea2(e.target.value)}
              className="mt-1"
            />
          </div>
          <Button 
            onClick={startQuiz} 
            disabled={!idea1.trim() || !idea2.trim()}
            className="w-full"
          >
            Start the Duel! 🥊
          </Button>
        </CardContent>
      </Card>
    );
  }
  
  if (currentStep === 'quiz') {
    return (
      <Card className="w-full max-w-2xl mx-auto">
        <CardHeader>
          <CardTitle className="text-center">
            Question {currentQuestion + 1} of {quizQuestions.length}
          </CardTitle>
          <CardDescription className="text-center">
            Criteria: {quizQuestions[currentQuestion].criteria}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="text-center text-lg font-medium">
            {quizQuestions[currentQuestion].question}
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Card 
              className="cursor-pointer hover:bg-muted transition-colors border-2 hover:border-primary"
              onClick={() => answerQuestion(1)}
            >
              <CardContent className="p-4">
                <div className="text-sm text-muted-foreground mb-2">Idea #1</div>
                <div className="font-medium">{ideas.idea1}</div>
              </CardContent>
            </Card>
            
            <Card 
              className="cursor-pointer hover:bg-muted transition-colors border-2 hover:border-primary"
              onClick={() => answerQuestion(2)}
            >
              <CardContent className="p-4">
                <div className="text-sm text-muted-foreground mb-2">Idea #2</div>
                <div className="font-medium">{ideas.idea2}</div>
              </CardContent>
            </Card>
          </div>
          
          <div className="text-center text-sm text-muted-foreground">
            Click on the idea that better fits the criteria above
          </div>
        </CardContent>
      </Card>
    );
  }
  
  if (currentStep === 'results') {
    const winner = ideas.scores.idea1 > ideas.scores.idea2 ? 'idea1' : 
                  ideas.scores.idea2 > ideas.scores.idea1 ? 'idea2' : 'tie';
    
    return (
      <Card className="w-full max-w-2xl mx-auto">
        <CardHeader>
          <CardTitle className="text-center">🏆 Duel Results</CardTitle>
          <CardDescription className="text-center">
            {winner === 'tie' ? "It's a tie!" : 
             winner === 'idea1' ? "Idea #1 wins!" : "Idea #2 wins!"}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-4">
            <div>
              <div className="flex justify-between items-center mb-2">
                <span className="font-medium">Idea #1</span>
                <span className="text-sm text-muted-foreground">
                  {ideas.scores.idea1}/{quizQuestions.length} ({idea1Percentage.toFixed(0)}%)
                </span>
              </div>
              <div className="w-full bg-muted rounded-full h-4">
                <div 
                  className="bg-blue-500 h-4 rounded-full transition-all duration-500"
                  style={{ width: `${idea1Percentage}%` }}
                />
              </div>
              <div className="text-sm mt-1 text-muted-foreground">
                {ideas.idea1}
              </div>
            </div>
            
            <div>
              <div className="flex justify-between items-center mb-2">
                <span className="font-medium">Idea #2</span>
                <span className="text-sm text-muted-foreground">
                  {ideas.scores.idea2}/{quizQuestions.length} ({idea2Percentage.toFixed(0)}%)
                </span>
              </div>
              <div className="w-full bg-muted rounded-full h-4">
                <div 
                  className="bg-green-500 h-4 rounded-full transition-all duration-500"
                  style={{ width: `${idea2Percentage}%` }}
                />
              </div>
              <div className="text-sm mt-1 text-muted-foreground">
                {ideas.idea2}
              </div>
            </div>
          </div>
          
          <div className="text-center space-y-2">
            <div className="text-sm text-muted-foreground">
              Based on: Market Size, Feasibility, Competition, Revenue Speed, and Personal Interest
            </div>
            <Button onClick={resetApp} variant="outline">
              Start New Duel
            </Button>
          </div>
        </CardContent>
      </Card>
    );
  }
}