given this "import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { RotateCcw, ArrowLeft } from 'lucide-react';

const ChessGuide = () => {
  const [phase, setPhase] = useState(null);
  const [currentStep, setCurrentStep] = useState(0);
  const [history, setHistory] = useState([]);
  const [recommendation, setRecommendation] = useState('');

  const phases = [
    { id: 'opening', name: 'Opening (Moves 1-10)' },
    { id: 'transition', name: 'Transition to Middle Game' },
    { id: 'initial-middle', name: 'Initial Middle Game' },
    { id: 'forward-middle', name: 'Forward Middle Game' },
    { id: 'endgame', name: 'Endgame' }
  ];

  const questions = {
    opening: [
      {
        question: "Have you developed at least one central pawn (d or e pawn)?",
        yesNext: "Are your knights or bishops developed?",
        noRecommendation: "Focus on central control first. Move your d-pawn or e-pawn to control the center.",
      },
      {
        question: "Are your knights or bishops developed?",
        yesNext: "Have you castled?",
        noRecommendation: "Develop your knights and bishops to active squares. Knights before bishops usually.",
      },
      {
        question: "Have you castled?",
        yesNext: "Are all your pieces protected?",
        noRecommendation: "Castle to ensure king safety before proceeding with further development.",
      },
      {
        question: "Are all your pieces protected?",
        yesNext: "Is your opponent threatening anything?",
        noRecommendation: "Ensure all your pieces are adequately protected before making aggressive moves.",
      },
      {
        question: "Is your opponent threatening anything?",
        yesNext: "Can you defend against the threat?",
        noNext: "Look for active piece placement",
        noRecommendation: "Look for opportunities to improve piece position or control key squares.",
        yesRecommendation: "Address immediate threats before proceeding with your plan.",
      }
    ],
    transition: [
      {
        question: "Are all your minor pieces developed?",
        yesNext: "Are your rooks connected?",
        noRecommendation: "Complete your development by moving out remaining minor pieces.",
      },
      {
        question: "Are your rooks connected?",
        yesNext: "Do you control any central squares?",
        noRecommendation: "Connect your rooks by moving pieces between them or completing castle.",
      },
      {
        question: "Do you control any central squares?",
        yesNext: "Is there tension in the center?",
        noRecommendation: "Look to establish control over central squares with pawns or pieces.",
      },
      {
        question: "Is there tension in the center?",
        yesNext: "Should you release the tension?",
        noNext: "Can you create tension?",
        yesRecommendation: "Evaluate if exchanging pieces would benefit your position.",
        noRecommendation: "Look for ways to create tension through pawn breaks or piece pressure.",
      }
    ],
    'initial-middle': [
      {
        question: "Do you have a material advantage?",
        yesNext: "Can you simplify the position?",
        noNext: "Do you have positional compensation?",
        yesRecommendation: "Look for favorable exchanges to simplify into a winning endgame.",
        noRecommendation: "Seek positional advantages or attacking chances.",
      },
      {
        question: "Are there any tactical opportunities?",
        yesNext: "Have you calculated all variations?",
        noNext: "Can you improve your worst-placed piece?",
        yesRecommendation: "Execute tactical sequence if calculations are sound.",
        noRecommendation: "Focus on improving piece placement and creating threats.",
      },
      {
        question: "Is your king safe?",
        yesNext: "Can you attack opponent's king?",
        noRecommendation: "Strengthen king safety before launching attacks.",
      }
    ],
    'forward-middle': [
      {
        question: "Do you have an attack on the king?",
        yesNext: "Are enough pieces participating in the attack?",
        noNext: "Can you build up positional pressure?",
        yesRecommendation: "Continue the attack with concrete calculations.",
        noRecommendation: "Look for ways to accumulate small advantages.",
      },
      {
        question: "Are there key squares to control?",
        yesNext: "Can your pieces reach these squares?",
        noNext: "Can you create weaknesses?",
        yesRecommendation: "Maneuver pieces to control key squares.",
        noRecommendation: "Try to create and exploit weaknesses in opponent's position.",
      }
    ],
    endgame: [
      {
        question: "Do you have a passed pawn?",
        yesNext: "Can you push it safely?",
        noNext: "Can you create a passed pawn?",
        yesRecommendation: "Advance your passed pawn with support from king and pieces.",
        noRecommendation: "Look for pawn breaks to create a passed pawn.",
      },
      {
        question: "Is your king active?",
        yesNext: "Can you centralize it further?",
        noRecommendation: "Activate your king - it's a strong piece in the endgame.",
      },
      {
        question: "Do you know the winning technique?",
        yesNext: "Are you executing it correctly?",
        noRecommendation: "Review basic endgame principles for this type of position.",
      }
    ]
  };

  const handlePhaseSelect = (selectedPhase) => {
    setPhase(selectedPhase);
    setCurrentStep(0);
    setHistory([]);
    setRecommendation('');
  };

  const handleAnswer = (answer) => {
    const currentQuestions = questions[phase];
    const currentQuestion = currentQuestions[currentStep];
    
    setHistory([...history, { 
      question: currentQuestion.question, 
      answer: answer 
    }]);

    if (answer) {
      if (currentQuestion.yesNext) {
        const nextQuestion = currentQuestions.findIndex(q => q.question === currentQuestion.yesNext);
        if (nextQuestion !== -1) {
          setCurrentStep(nextQuestion);
        } else if (currentQuestion.yesRecommendation) {
          setRecommendation(currentQuestion.yesRecommendation);
        }
      } else if (currentQuestion.yesRecommendation) {
        setRecommendation(currentQuestion.yesRecommendation);
      }
    } else {
      if (currentQuestion.noNext) {
        const nextQuestion = currentQuestions.findIndex(q => q.question === currentQuestion.noNext);
        if (nextQuestion !== -1) {
          setCurrentStep(nextQuestion);
        } else if (currentQuestion.noRecommendation) {
          setRecommendation(currentQuestion.noRecommendation);
        }
      } else if (currentQuestion.noRecommendation) {
        setRecommendation(currentQuestion.noRecommendation);
      }
    }
  };

  const handleReset = () => {
    setPhase(null);
    setCurrentStep(0);
    setHistory([]);
    setRecommendation('');
  };

  const handleBack = () => {
    if (history.length > 0) {
      const newHistory = [...history];
      newHistory.pop();
      setHistory(newHistory);
      setCurrentStep(Math.max(0, currentStep - 1));
      setRecommendation('');
    } else if (phase) {
      setPhase(null);
      setCurrentStep(0);
      setRecommendation('');
    }
  };

  return (
    <Card className="w-full max-w-2xl mx-auto">
      <CardContent className="p-6">
        <div className="flex justify-between mb-6">
          <Button 
            variant="outline" 
            size="sm"
            onClick={handleBack}
            className="flex items-center gap-2"
          >
            <ArrowLeft className="w-4 h-4" />
            Back
          </Button>
          <Button 
            variant="outline" 
            size="sm"
            onClick={handleReset}
            className="flex items-center gap-2"
          >
            <RotateCcw className="w-4 h-4" />
            Start Over
          </Button>
        </div>

        {!phase ? (
          <div className="space-y-4">
            <h2 className="text-xl font-bold text-center mb-4">Select Game Phase</h2>
            <div className="grid gap-3">
              {phases.map((p) => (
                <Button
                  key={p.id}
                  onClick={() => handlePhaseSelect(p.id)}
                  variant="outline"
                  className="w-full"
                >
                  {p.name}
                </Button>
              ))}
            </div>
          </div>
        ) : (
          <div className="space-y-6">
            <h3 className="text-lg font-semibold text-center">
              {phases.find(p => p.id === phase)?.name}
            </h3>
            
            {history.length > 0 && (
              <div className="space-y-2 mb-4">
                <h4 className="font-medium text-sm text-gray-600">Previous Questions:</h4>
                {history.map((item, index) => (
                  <div key={index} className="text-sm text-gray-600">
                    Q: {item.question}
                    <br />
                    A: {item.answer ? "Yes" : "No"}
                  </div>
                ))}
              </div>
            )}

            {recommendation ? (
              <Alert>
                <AlertDescription>
                  {recommendation}
                </AlertDescription>
              </Alert>
            ) : questions[phase][currentStep] ? (
              <div className="space-y-4">
                <p className="text-center font-medium">
                  {questions[phase][currentStep].question}
                </p>
                <div className="flex justify-center gap-4">
                  <Button
                    onClick={() => handleAnswer(true)}
                    variant="outline"
                    className="w-24"
                  >
                    Yes
                  </Button>
                  <Button
                    onClick={() => handleAnswer(false)}
                    variant="outline"
                    className="w-24"
                  >
                    No
                  </Button>
                </div>
              </div>
            ) : null}
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default ChessGuide;" could you create it in an html file form and tell me how to copy and create the html fil  and save and open in a window so I can use when I play?