Retro_Vintage_Charts_Component

<div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8 min-h-screen">
  <div class="max-w-7xl mx-auto bg-stone-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-2 border-stone-300 dark:border-stone-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b-2 border-stone-300 dark:border-stone-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-2 font-mono tracking-wider">Athlete Performance Dashboard</h2>
      <p class="text-stone-600 dark:text-stone-400 text-sm sm:text-base">Analyze key metrics over time. Last updated: 2024-07-26</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Left Sidebar (Athlete Profile) -->
      <div class="md:col-span-1 bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-4 border-stone-500 dark:border-stone-300 mb-4 object-cover object-center" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Athlete Avatar">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200">John 'The Beast' Doe</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm">Basketball Player</p>
        </div>
        <div class="text-stone-700 dark:text-stone-300 text-sm">
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Age:</span> 28</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Height:</span> 6'8" (203 cm)</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Weight:</span> 240 lbs (109 kg)</p>
          <p class="flex justify-between items-center mb-2"><span class="font-medium">Team:</span> City Maulers</p>
          <h4 class="font-bold text-stone-800 dark:text-stone-200 mt-4 mb-2">Recent Achievements:</h4>
          <ul class="list-disc list-inside text-xs space-y-1">
            <li>MVP: Championship Season 2023</li>
            <li>Top Scorer: Last 5 Games</li>
            <li>Improved Vertical Jump by 10%</li>
          </ul>
        </div>
      </div>

      <!-- Main Charts Area -->
      <div class="md:col-span-2 space-y-6">

        <!-- Chart 1: Performance Over Time -->
        <div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
          <h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Peak Performance Timeline</h3>
          <div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
            <img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=1" alt="Chart Background">
            <div class="relative z-10 p-2">
              <p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Chart:</p>
              <div class="flex justify-around items-end h-40 mt-4">
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-3/5 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Mar</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-4/5 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Apr</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[90%] relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">May</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-full relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jun</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-[70%] relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Jul</span>
                </div>
                <div class="w-10 bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
                  <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Aug</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Chart 2: Recent Game Stats -->
        <div class="bg-stone-300 dark:bg-stone-700 p-6 rounded-lg shadow-lg border border-stone-400 dark:border-stone-600">
          <h3 class="text-lg sm:text-xl font-bold text-stone-800 dark:text-stone-200 mb-4 font-mono">Last 5 Games: Key Stats</h3>
          <div class="bg-stone-400 dark:bg-stone-600 rounded p-4 border border-stone-500 dark:border-stone-500 overflow-hidden relative" style="height: 250px;">
            <img class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-20" src="https://picsum.photos/600/300?random=2" alt="Chart Background">
            <div class="relative z-10">
              <p class="text-stone-800 dark:text-stone-200 z-10 bg-stone-300/80 dark:bg-stone-700/80 p-2 inline-block rounded text-sm mb-2">Simulated Bars:</p>
              <div class="flex flex-wrap justify-center sm:justify-between items-end gap-3 h-40 mt-4">
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-emerald-700 dark:bg-green-600 rounded-t h-3/4 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Pts</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">28</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-indigo-700 dark:bg-blue-600 rounded-t h-1/2 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Reb</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">12</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-amber-700 dark:bg-orange-600 rounded-t h-2/3 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Ast</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">7</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-red-700 dark:bg-red-600 rounded-t h-1/3 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Stl</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">3</span>
                </div>
                <div class="flex flex-col items-center w-1/5 sm:w-16">
                  <div class="w-full bg-purple-700 dark:bg-purple-600 rounded-t h-1/4 relative group transition-all duration-300 hover:scale-105">
                    <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-xs text-stone-800 dark:text-stone-200 opacity-0 group-hover:opacity-100 transition-opacity">Blk</span>
                  </div>
                  <span class="block text-xs mt-1 text-stone-700 dark:text-stone-300">1</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Stat Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Average Score</p>
            <p class="text-2xl font-bold text-emerald-700 dark:text-green-500 font-mono">25.7</p>
          </div>
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Vertical Jump</p>
            <p class="text-2xl font-bold text-indigo-700 dark:text-blue-500 font-mono">38"</p>
          </div>
          <div class="bg-stone-300 dark:bg-stone-700 p-4 rounded-lg shadow-md border border-stone-400 dark:border-stone-600 text-center">
            <p class="text-stone-600 dark:text-stone-400 text-sm mb-1">Speed (100m)</p>
            <p class="text-2xl font-bold text-amber-700 dark:text-orange-500 font-mono">10.9s</p>
          </div>
        </div>

      </div>
    </div>

    <!-- Calls to Action / Footer -->
    <div class="p-6 sm:p-8 lg:p-10 border-t-2 border-stone-300 dark:border-stone-700 flex flex-col sm:flex-row justify-between items-center gap-4">
      <button class="px-6 py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-lg shadow-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
        View Full Report
      </button>
      <div class="text-stone-600 dark:text-stone-400 text-sm">
        <a href="#" class="hover:underline">Export Data</a> | <a href="#" class="hover:underline">Settings</a>
      </div>
    </div>

  </div>
</div>