Untitled

import { useEffect, useState } from "react";

function AppLogo() {
  return (
    <div className="flex flex-col items-center text-center">
      <div className="relative mb-4 flex h-20 w-20 items-center justify-center rounded-3xl bg-blue-500 shadow-lg">
        <div className="text-4xl font-bold text-white">♡</div>
        <div className="absolute text-2xl font-bold text-white">⚡</div>
        <div className="absolute -right-1 -top-1 flex h-8 w-8 items-center justify-center rounded-full bg-green-400 text-lg text-white shadow">
          🍃
        </div>
      </div>

      <h1 className="mb-3 text-5xl font-bold">Fit & Confident</h1>
      <p className="font-semibold text-blue-600">
        Train your body. Care for yourself. Build confidence.
      </p>
    </div>
  );
}

export default function BodyPositiveFitnessApp() {
  const [isLoading, setIsLoading] = useState(true);
  const [hasCompletedSetup, setHasCompletedSetup] = useState(false);
  const [selectedSport, setSelectedSport] = useState("Basketball");
  const [age, setAge] = useState(16);
  const [fitnessGoal, setFitnessGoal] = useState("Build strength");
  const [videoUrl, setVideoUrl] = useState("");
  const [videoTitle, setVideoTitle] = useState("");
  const [videos, setVideos] = useState([]);
  const [selectedGoal, setSelectedGoal] = useState("Feel stronger");
  const [journalEntry, setJournalEntry] = useState("");
  const [favoriteWorkouts, setFavoriteWorkouts] = useState([]);
  const [skinGoal, setSkinGoal] = useState("Clearer skin");
  const [skinFeeling, setSkinFeeling] = useState("Fresh");
  const [productNote, setProductNote] = useState("");
  const [skinReflection, setSkinReflection] = useState("");

  const sportWorkouts = {
    Basketball: [
      "Jump training",
      "Agility ladder drills",
      "Core strength",
      "Sprint intervals",
    ],
    Soccer: [
      "Endurance runs",
      "Footwork drills",
      "Single-leg strength",
      "Hip mobility",
    ],
    Football: [
      "Explosive strength",
      "Sprint starts",
      "Upper body power",
      "Recovery stretching",
    ],
    Volleyball: [
      "Vertical jump training",
      "Shoulder mobility",
      "Quick reaction drills",
      "Core stability",
    ],
    Track: [
      "Sprint mechanics",
      "Pace intervals",
      "Leg strength",
      "Dynamic stretching",
    ],
    Swimming: [
      "Shoulder strength",
      "Breathing control",
      "Core stability",
      "Mobility work",
    ],
    Tennis: [
      "Lateral movement",
      "Rotational core work",
      "Shoulder care",
      "Quick footwork",
    ],
  };

  const workouts = [
    {
      title: "Beginner Cardio",
      duration: "15 min",
      description: "Light jogging, walking, or cycling to build endurance.",
    },
    {
      title: "Strength Basics",
      duration: "20 min",
      description: "Bodyweight squats, push-ups, planks, and lunges.",
    },
    {
      title: "Stretch & Recover",
      duration: "10 min",
      description: "Simple stretches to improve flexibility and relax your body.",
    },
  ];