import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0";

import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

import { marked } from "https://esm.sh/marked@4.3.0";

function ConfirmationModal({ isOpen, onClose }) {

if (!isOpen) return null;

return (

<div className="modal-overlay">

<div className="modal-content">

<h2>Email Sent Successfully</h2>

<p>Your training plan has been emailed successfully.</p>

<button onClick={onClose}>Close</button>

</div>

</div>

);

function App() {

const [sport, setSport] = useState("");

const [skillLevel, setSkillLevel] = useState("");

const [ageGroup, setAgeGroup] = useState("");

const [regenerateKey, setRegenerateKey] = useState(0);

const [selectedTopics, setSelectedTopics] = useState([]);

const [groupSize, setGroupSize] = useState("");

const [trainingPlan, setTrainingPlan] = useState("");

const [sessionDuration, setSessionDuration] = useState("");

const [loading, setLoading] = useState(false);

const [showSpinner, setShowSpinner] = useState(false);

const [annotations, setAnnotations] = useState({});

const [showEmailInput, setShowEmailInput] = useState(false);

const [emailAddress, setEmailAddress] = useState("");

const [sharing, setSharing] = useState(false);

const [showConfirmationModal, setShowConfirmationModal] = useState(false);

const [youtubeLinks, setYoutubeLinks] = useState([]);