import React, { useState, useEffect, useRef } from 'react';const questions = [  "What's your company? And what does it do?",  "Who is your target customer?",  "What's new about what you're doing?",  "What's your progress been like so far?",  "Howdo you make money?",  "What's your biggest risk?",  "Who's on your team?",  "Why did you pick this idea to work on?",  "Who would be your biggest competitor?",  "How will you get users?",];const YCInterviewSimulator = () => {  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);  const [userAnswer, setUserAnswer] = useState('');  const [feedback, setFeedback] = useState('');  const [interviewComplete, setInterviewComplete] = useState(false);  const [timeLeft, setTimeLeft] = useState(60);  const [isRecording, setIsRecording] = useState(false);  const mediaRecorder = useRef(null);  useEffect(() => {    if (timeLeft > 0 && !interviewComplete) {      const timerId = setTimeout(() => setTimeLeft(timeLeft - 1), 1000);      return () => clearTimeout(timerId);    } else if (timeLeft === 0 && !interviewComplete) {      handleNextQuestion();    }  }, [timeLeft, interviewComplete]);  const handleNextQuestion = () => {    if (currentQuestionIndex < questions.length - 1) {      setCurrentQuestionIndex(currentQuestionIndex + 1);      setUserAnswer('');      setFeedback('');      setTimeLeft(60);    } else {      setInterviewComplete(true);    }  };  const handleSubmitAnswer = () => {    setFeedback("Great answer! Remember to be concise and show your passion.");  };  const restartInterview = () => {    setCurrentQuestionIndex(0);    setUserAnswer('');    setFeedback('');    setInterviewComplete(false);    setTimeLeft(60);  };  const startRecording = async () => {    try {      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });      mediaRecorder.current = new MediaRecorder(stream);      mediaRecorder.current.ondataavailable = (event) => {        if (event.data.size > 0) {          const reader = new FileReader();          reader.onload = () => {            setUserAnswer(prevAnswer => prevAnswer + ' ' + reader.result);          };          reader.readAsText(event.data);        }      };      mediaRecorder.current.start();      setIsRecording(true);    } catch (error) {      console.error('Error accessing microphone:', error);    }  };  const stopRecording = () => {    if (mediaRecorder.current && isRecording) {      mediaRecorder.current.stop();      setIsRecording(false);    }  };  return (    <div style={{ fontFamily: 'Arial, sans-serif', maxWidth: '600px', margin: '0 auto', padding: '20px' }}>      <h1 style={{ color: '#ff6600', textAlign: 'center' }}>YC Interview Simulator</h1>      {!interviewComplete ? (        <>          <h2>Question {currentQuestionIndex + 1}:</h2>          <p style={{ fontSize: '18px', fontWeight: 'bold' }}>{questions[currentQuestionIndex]}</p>          <p style={{ fontSize: '16px', color: timeLeft <= 10 ? 'red' : 'black' }}>Time left: {timeLeft} seconds</p>          <textarea            value={userAnswer}            onChange={(e) => setUserAnswer(e.target.value)}            style={{ width: '100%', height: '100px', marginBottom: '10px', padding: '5px' }}            placeholder="Your answer will appear here..."          />          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '10px' }}>            <button              onClick={isRecording ? stopRecording : startRecording}              style={{ padding: '10px', backgroundColor: isRecording ? '#ff0000' : '#4CAF50', color: 'white', border: 'none', borderRadius: '5px' }}            >              {isRecording ? 'Stop Recording' : 'Start Recording'}            </button>            <button onClick={handleSubmitAnswer} style={{ padding: '10px', backgroundColor: '#ff6600', color: 'white', border: 'none', borderRadius: '5px' }}>              Submit Answer            </button>            <button onClick={handleNextQuestion} style={{ padding: '10px', backgroundColor: '#4CAF50', color: 'white', border: 'none', borderRadius: '5px' }}>              Next Question            </button>          </div>          {feedback && <p style={{ marginTop: '10px', fontStyle: 'italic' }}>{feedback}</p>}        </>      ) : (        <div style={{ textAlign: 'center' }}>          <h2>Interview Complete!</h2>          <p>Great job! You've completed the YC interview simulation.</p>          <button onClick={restartInterview} style={{ padding: '10px', backgroundColor: '#ff6600', color: 'white', border: 'none', borderRadius: '5px', marginTop: '20px' }}>            Restart Interview          </button>        </div>      )}    </div>  );};export default YCInterviewSimulator;