Memphis_Marketplace_Charts_Component

<div class="p-4 sm:p-6 md:p-8 bg-pink-100 dark:bg-zinc-900 font-sans min-h-screen flex items-center justify-center">
  <div class="w-full max-w-7xl bg-white dark:bg-zinc-800 rounded-3xl shadow-xl overflow-hidden
              border-4 border-fuchsia-500 dark:border-teal-400
              grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8 lg:p-10
              relative"> 
    
    <!-- Memphis background patterns -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden rounded-3xl">
      <div class="absolute -bottom-16 -left-16 w-64 h-64 bg-teal-400 dark:bg-fuchsia-600 rounded-full mix-blend-multiply opacity-30"></div>
      <div class="absolute -top-20 -right-20 w-80 h-80 bg-fuchsia-500 dark:bg-cyan-500 rounded-full mix-blend-multiply opacity-20"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-300 dark:bg-purple-600 rounded-lg transform rotate-45 mix-blend-multiply opacity-30"></div>
      <div class="absolute bottom-1/3 right-1/4 w-48 h-12 bg-blue-400 dark:bg-orange-500 rounded-full mix-blend-multiply opacity-20"></div>
    </div>

    <!-- Main Content Grid -->
    <div class="relative z-10 lg:col-span-2 space-y-6">
      
      <!-- Header -->
      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b-4 border-dashed border-cyan-400 dark:border-yellow-500 pb-6">
        <div>
          <h1 class="text-4xl sm:text-5xl font-extrabold text-fuchsia-600 dark:text-teal-400 mb-2 leading-tight">Marketplace Insights</h1>
          <p class="text-zinc-600 dark:text-zinc-300 text-lg sm:text-xl font-medium">Performance overview for your vendors.</p>
        </div>
        <button class="px-6 py-3 bg-teal-500 dark:bg-fuchsia-600 text-white rounded-xl shadow-lg
                       transform hover:scale-105 transition-all duration-300
                       border-2 border-fuchsia-600 dark:border-teal-500
                       text-lg font-semibold whitespace-nowrap">View All Reports</button>
      </div>

      <!-- Main Charts Section -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <!-- Sales Volume Chart -->
        <div class="bg-violet-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-fuchsia-400 dark:border-cyan-400">
          <h3 class="text-2xl font-bold text-fuchsia-700 dark:text-teal-300 mb-4">Sales Volume by Category</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10 ">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-teal-300 to-transparent dark:from-teal-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Total Sales: <span class="text-fuchsia-600 dark:text-teal-400 font-bold">$1.2M</span></p>
          </div>
        </div>

        <!-- Vendor Performance Chart -->
        <div class="bg-yellow-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-cyan-400 dark:border-fuchsia-400">
          <h3 class="text-2xl font-bold text-cyan-700 dark:text-yellow-300 mb-4">Top 5 Vendor Performance</h3>
          <div class="h-48 sm:h-64 bg-white dark:bg-zinc-900 rounded-xl flex items-center justify-center border-2 border-slate-300 dark:border-zinc-600 relative overflow-hidden">
             <!-- Placeholder for Chart -->
            <div class="absolute inset-0 opacity-20 dark:opacity-10">
              <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-fuchsia-300 to-transparent dark:from-fuchsia-600"></div>
              <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-300 to-transparent dark:from-teal-600"></div>
            </div>
            <p class="text-zinc-500 dark:text-zinc-400 z-10 text-xl">Chart Placeholder</p>
          </div>
          <div class="text-center mt-4 text-zinc-600 dark:text-zinc-300">
            <p class="font-medium">Average Rating: <span class="text-cyan-600 dark:text-yellow-400 font-bold">4.7/5</span></p>
          </div>
        </div>
      </div>

      <!-- Quick Stats Section -->
      <div class="bg-indigo-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-teal-500 dark:border-purple-400">
        <h3 class="text-2xl font-bold text-teal-700 dark:text-purple-300 mb-4">Quick Stats</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-teal-400 dark:border-purple-400 shadow-sm">
            <p class="text-3xl font-extrabold text-teal-500 dark:text-purple-300 leading-none">150+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Active Vendors</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-fuchsia-400 dark:border-cyan-400 shadow-sm">
            <p class="text-3xl font-extrabold text-fuchsia-500 dark:text-cyan-300 leading-none">8k+</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Products Listed</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-yellow-400 dark:border-orange-400 shadow-sm">
            <p class="text-3xl font-extrabold text-yellow-500 dark:text-orange-300 leading-none">$1.8M</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Total Commission</p>
          </div>
          <div class="bg-white dark:bg-zinc-800 p-4 rounded-xl text-center border-2 border-blue-400 dark:border-lime-400 shadow-sm">
            <p class="text-3xl font-extrabold text-blue-500 dark:text-lime-300 leading-none">92%</p>
            <p class="text-zinc-600 dark:text-zinc-300 text-sm font-medium">Vendor Retention</p>
          </div>
        </div>
      </div>

    </div>

    <!-- Sidebar / Latest Activity -->
    <div class="relative z-10 lg:col-span-1 space-y-6">
      <div class="bg-orange-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-purple-500 dark:border-fuchsia-400">
        <h3 class="text-2xl font-bold text-purple-700 dark:text-fuchsia-300 mb-4">Latest Vendor Activity</h3>
        <div class="space-y-4">
          <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor A <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">15 min ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Added <span class="font-bold text-purple-600 dark:text-fuchsia-300">3 new products</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor B <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">1 hour ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Updated <span class="font-bold text-purple-600 dark:text-fuchsia-300">shipping info</span></p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor C <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">3 hours ago</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold <span class="font-bold text-purple-600 dark:text-fuchsia-300">5 items</span> (electronics)</p>
            </div>
          </div>
           <div class="flex items-center gap-4 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-400">
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="" class="w-12 h-12 rounded-full border-2 border-purple-400 dark:border-fuchsia-300 shadow-md">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Vendor D <span class="text-sm text-zinc-500 dark:text-zinc-400 ml-2">Yesterday</span></p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Responded to <span class="font-bold text-purple-600 dark:text-fuchsia-300">2 customer reviews</span></p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Trending Products -->
      <div class="bg-lime-100 dark:bg-zinc-700 p-6 rounded-2xl shadow-md border-4 border-blue-500 dark:border-orange-400">
        <h3 class="text-2xl font-bold text-blue-700 dark:text-orange-300 mb-4">Trending Products</h3>
        <ul class="space-y-3">
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/198/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Smart Watch X Pro</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">120 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/166/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Noise Cancelling Headphones</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">95 units</span></p>
            </div>
          </li>
          <li class="flex items-center gap-3 bg-white dark:bg-zinc-800 p-3 rounded-xl border-2 border-blue-300 dark:border-orange-400">
            <img src="https://picsum.photos/id/175/60/60" alt="Product Image" class="w-16 h-16 object-cover rounded-md border-2 border-blue-400 dark:border-orange-300">
            <div>
              <p class="font-semibold text-zinc-800 dark:text-zinc-200">Ergonomic Office Chair</p>
              <p class="text-zinc-600 dark:text-zinc-300 text-sm">Sold: <span class="text-blue-600 dark:text-orange-400 font-bold">78 units</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </div>
</div>