Retro_Vintage_Pastel_Social_Charts_Component

<div class="font-mono min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 p-4 sm:p-6 lg:p-8 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-3xl border-4 border-purple-300 dark:border-purple-600">
    <div class="p-6 sm:p-8 border-b-4 border-purple-300 dark:border-purple-600 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900">
      <div class="flex flex-col sm:flex-row items-center justify-between">
        <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-600 dark:text-blue-400 mb-4 sm:mb-0 drop-shadow-lg tracking-wide">Retrowave Insights <span class="text-pink-500 dark:text-pink-400 text-2xl">📊</span></h1>
        <div class="flex space-x-2">
          <button class="px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-pink-300 dark:border-pink-500">Week</button>
          <button class="px-4 py-2 bg-purple-400 dark:bg-purple-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-purple-300 dark:border-purple-500">Month</button>
          <button class="px-4 py-2 bg-yellow-400 dark:bg-yellow-600 text-white font-bold rounded-lg shadow-md hover:scale-105 transition-transform duration-200 transform-gpu text-sm sm:text-base border-2 border-yellow-300 dark:border-yellow-500">Year</button>
        </div>
      </div>
    </div>

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

      <!-- Engagement Chart -->
      <div class="bg-blue-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-blue-200 dark:border-blue-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-300 mb-4 flex items-center"><span class="text-3xl mr-2">⚡</span>Engagement Overview</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your popularity rocketed this month!</p>
        <div class="relative h-48 bg-blue-100 dark:bg-gray-600 rounded-lg p-2 flex items-end justify-around border-2 border-blue-200 dark:border-blue-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>100K</span><span>75K</span><span>50K</span><span>25K</span><span>0</span>
          </div>
          <!-- Bars (simplified for HTML/Tailwind) -->
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-2/3 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">75K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-4/5 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">90K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-1/2 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">50K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-full transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">100K</span>
          </div>
          <div class="w-8 bg-blue-400 dark:bg-blue-500 rounded-t-lg shadow-md border border-blue-500 h-3/4 transform hover:scale-x-110 transition-transform duration-200 relative group">
            <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-blue-700 dark:text-blue-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">80K</span>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span>
        </div>
      </div>

      <!-- Follower Growth -->
      <div class="bg-pink-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-pink-200 dark:border-pink-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-pink-600 dark:text-pink-300 mb-4 flex items-center"><span class="text-3xl mr-2">💖</span>Follower Growth</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">You gained 1.2K new cool followers!</p>
        <div class="relative h-48 bg-pink-100 dark:bg-gray-600 rounded-lg p-2 flex flex-col justify-end items-start border-2 border-pink-200 dark:border-pink-800 shadow-inner overflow-hidden">
          <div class="absolute top-2 left-2 right-2 flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>20K</span><span>15K</span><span>10K</span><span>5K</span><span>0</span>
          </div>
          <!-- Line chart simulation with divs -->
          <div class="absolute left-0 bottom-0 w-full h-full flex items-end justify-between px-2 pb-2">
            <div class="relative flex flex-col items-center w-8" style="height: 20%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">4K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 50%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">10K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 70%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">14K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 90%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">18K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
            <div class="relative flex flex-col items-center w-8" style="height: 100%;">
              <div class="w-4 h-4 bg-pink-400 dark:bg-pink-500 rounded-full shadow-md border border-pink-500 mb-1 group relative">
                <span class="absolute -top-6 left-1/2 -translate-x-1/2 text-sm text-pink-700 dark:text-pink-200 opacity-0 group-hover:opacity-100 transition-opacity duration-200">20K</span>
              </div>
              <div class="w-1 bg-pink-400 dark:bg-pink-500 h-full"></div>
            </div>
          </div>
        </div>
        <div class="flex justify-around text-xs mt-2 text-gray-500 dark:text-gray-400">
          <span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span>
        </div>
      </div>

      <!-- Top Posts / Content Performance -->
      <div class="bg-yellow-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-yellow-200 dark:border-yellow-700 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-yellow-600 dark:text-yellow-300 mb-4 flex items-center"><span class="text-3xl mr-2">🌟</span>Top Content</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Your latest 8-bit art is blowing up!</p>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=1" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Pixelated Sunset Vibes</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">15.2K Likes • 2.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#1</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=2" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">Neon City Remix</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">12.8K Likes • 1.8K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#2</span>
          </div>
          <div class="flex items-center space-x-3 bg-yellow-100 dark:bg-gray-600 p-3 rounded-lg border border-yellow-200 dark:border-yellow-800 shadow-sm">
            <img src="https://picsum.photos/60/60?random=3" alt="Post thumbnail" class="w-16 h-16 rounded-md object-cover border border-yellow-300 dark:border-yellow-600">
            <div class="flex-1">
              <h3 class="font-semibold text-yellow-700 dark:text-yellow-200 truncate">VHS Dreams Mixtape</h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">9.5K Likes • 1.1K Comments</p>
            </div>
            <span class="text-xl font-bold text-yellow-600 dark:text-yellow-300">#3</span>
          </div>
        </div>
      </div>

      <!-- Audience Demographics (Pie Chart) -->
      <div class="bg-purple-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-purple-200 dark:border-purple-700 col-span-1 md:col-span-2 lg:col-span-1 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-purple-600 dark:text-purple-300 mb-4 flex items-center"><span class="text-3xl mr-2">👾</span>Audience Vibe</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">Who's grooving to your tunes?</p>
        <div class="relative h-48 flex items-center justify-center bg-purple-100 dark:bg-gray-600 rounded-lg p-2 border-2 border-purple-200 dark:border-purple-800 shadow-inner">
          <!-- Simple Pie Chart Simulation with Tailwind - Uses nested divs for segments -->
          <div class="relative w-40 h-40 bg-gray-300 dark:bg-gray-500 rounded-full flex items-center justify-center overflow-hidden shadow-xl border border-purple-300 dark:border-purple-600">
            <!-- Segment 1: 50% - Female -->
            <div class="absolute inset-0 bg-pink-400 dark:bg-pink-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(0deg);"></div>
            <!-- Segment 2: 30% - Male -->
            <div class="absolute inset-0 bg-blue-400 dark:bg-blue-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(180deg);"></div>
            <!-- Segment 3: 20% - Other -->
            <div class="absolute inset-0 bg-yellow-400 dark:bg-yellow-600 origin-center-left rounded-full" style="clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%); transform: rotate(288deg);"></div>
            <div class="absolute w-20 h-20 bg-purple-100 dark:bg-gray-700 rounded-full border border-purple-300 dark:border-purple-600"></div>
          </div>
        </div>
        <div class="flex justify-center flex-wrap gap-4 mt-4 text-sm font-semibold">
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-pink-400 dark:bg-pink-600 rounded-full mr-2 border border-pink-300 dark:border-pink-500"></span>Female <span class="ml-1 text-pink-600 dark:text-pink-300">(50%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-blue-400 dark:bg-blue-600 rounded-full mr-2 border border-blue-300 dark:border-blue-500"></span>Male <span class="ml-1 text-blue-600 dark:text-blue-300">(30%)</span>
          </div>
          <div class="flex items-center">
            <span class="block w-4 h-4 bg-yellow-400 dark:bg-yellow-600 rounded-full mr-2 border border-yellow-300 dark:border-yellow-500"></span>Other <span class="ml-1 text-yellow-600 dark:text-yellow-300">(20%)</span>
          </div>
        </div>
      </div>

      <!-- Recent Mentions/Comments -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-xl p-6 shadow-lg border-2 border-green-200 dark:border-green-700 col-span-1 md:col-span-2 transform transition-transform duration-300 hover:scale-[1.02]">
        <h2 class="text-2xl font-bold text-green-600 dark:text-green-300 mb-4 flex items-center"><span class="text-3xl mr-2">💬</span>Latest Echoes</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">People are buzzing about your content!</p>
        <div class="space-y-4">
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@SynthWaveDude</span>: "Totally obsessed with your new track! 🎶 Brings back so many memories!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@NeonDreamer</span>: "This pixel art is pure perfection! Keep it up! 🤩"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">yesterday</p>
            </div>
          </div>
          <div class="flex items-start space-x-3 bg-green-100 dark:bg-gray-600 p-3 rounded-lg border border-green-200 dark:border-green-800 shadow-sm">
            <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-green-300 dark:border-green-600">
            <div class="flex-1">
              <p class="font-semibold text-green-700 dark:text-green-200"><span class="text-green-500 dark:text-green-400">@VaporWaveViking</span>: "Your commitment to the aesthetic is unmatched. Love the consistency!"</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gradient-to-l from-purple-100 to-pink-100 dark:from-gray-700 dark:to-gray-900 border-t-4 border-purple-300 dark:border-purple-600 text-center">
      <p class="text-sm text-gray-700 dark:text-gray-300">Insights generated with <span class="text-pink-500 dark:text-pink-400 font-bold">✨ RetroBoost AI ✨</span></p>
    </div>
  </div>
</div>