Memphis_Finance_Charts_Component

<div class="font-sans bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-purple-950 p-4 sm:p-8 md:p-12 min-h-screen text-gray-800 dark:text-gray-100 relative overflow-hidden">

  <!-- Memphis background elements (for visual interest) -->
  <div class="absolute top-0 left-0 w-48 h-48 bg-purple-400 dark:bg-purple-700 opacity-30 dark:opacity-20 rounded-full blur-3xl -ml-24 -mt-24"></div>
  <div class="absolute bottom-0 right-0 w-64 h-64 bg-yellow-300 dark:bg-yellow-600 opacity-30 dark:opacity-20 rounded-full blur-3xl -mr-32 -mb-32"></div>
  <div class="absolute top-1/2 left-1/4 w-32 h-32 bg-pink-400 dark:bg-pink-700 opacity-30 dark:opacity-20 rounded-lg blur-xl -translate-x-1/2 -translate-y-1/2 rotate-45"></div>
  <div class="absolute bottom-1/2 right-1/4 w-40 h-40 bg-teal-300 dark:bg-teal-600 opacity-20 dark:opacity-10 rounded-full blur-2xl translate-x-1/2 translate-y-1/2"></div>

  <div class="max-w-7xl mx-auto relative z-10">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-center drop-shadow-lg leading-tight" style="text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.2), 4px 4px 0px rgba(0, 0, 0, 0.1);">
      <span class="text-fuchsia-600 dark:text-fuchsia-400">F</span>inancial <span class="text-lime-500 dark:text-lime-300">P</span>erformance
    </h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
      <!-- Main Overview Card -->
      <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-fuchsia-400 dark:border-fuchsia-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-24 h-24 bg-teal-300 dark:bg-teal-600 -mt-12 -mr-12 rounded-full opacity-20"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-lime-300 dark:bg-lime-600 -mb-16 -ml-16 rounded-lg opacity-20 transform rotate-12"></div>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 relative z-10">
          <h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-50 drop-shadow">Portfolio Growth</h2>
          <div class="mt-4 sm:mt-0 flex space-x-2">
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 bg-fuchsia-100 dark:bg-fuchsia-800 transition-colors duration-200">6M</button>
            <button class="px-4 py-2 border-2 border-fuchsia-500 dark:border-fuchsia-400 text-fuchsia-600 dark:text-fuchsia-400 rounded-full font-semibold text-sm hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 transition-colors duration-200">1Y</button>
          </div>
        </div>
        <div class="relative flex justify-center items-center h-64 md:h-80 bg-gradient-to-tr from-fuchsia-100 to-purple-100 dark:from-purple-900 dark:to-fuchsia-900 rounded-xl mb-6 overflow-hidden border-2 border-fuchsia-500 dark:border-fuchsia-700">
          <!-- Placeholder for Chart Image -->
          <img src="https://picsum.photos/800/400?random=1&grayscale&blur=2" alt="Placeholder chart" class="absolute inset-0 w-full h-full object-cover opacity-30 dark:opacity-10 rounded-xl">
          <div class="absolute inset-0 flex items-center justify-center p-4">
            <div class="w-full h-full border-2 border-dashed border-fuchsia-500 dark:border-fuchsia-300 rounded-lg flex flex-col justify-center items-center text-center p-4">
                <p class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 drop-shadow-md">+15.7%</p>
                <p class="text-lg sm:text-xl font-semibold text-gray-600 dark:text-gray-300">Total Return (6 Months)</p>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 relative z-10">
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Current Value</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$85,450</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Invested</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$73,800</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Daily Change</p>
            <p class="text-lg font-bold text-lime-600 dark:text-lime-300">+$345</p>
          </div>
          <div class="bg-purple-50 dark:bg-purple-900 p-4 rounded-xl shadow-inner border-2 border-purple-300 dark:border-purple-600 text-center">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Asset Count</p>
            <p class="text-lg font-bold text-orange-600 dark:text-orange-300">12</p>
          </div>
        </div>
      </div>

      <!-- Top Holdings Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-lime-400 dark:border-lime-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-20 h-20 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-10 -ml-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Top Holdings</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=2" alt="Stock Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">NASDAQ 100</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">35% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+2.1%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=3" alt="Crypto Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Bitcoin (BTC)</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">20% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+1.8%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=4" alt="Bond Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">US Treasury Bonds</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">15% of Portfolio</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-0.5%</span>
          </li>
          <li class="flex items-center space-x-4 bg-teal-50 dark:bg-teal-900 p-3 rounded-lg border-2 border-teal-300 dark:border-teal-600 transition-colors duration-200">
            <img src="https://picsum.photos/40/40?random=5" alt="Gold Icon" class="w-10 h-10 rounded-full border-2 border-teal-500 dark:border-teal-400">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Gold ETF</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">10% of Portfolio</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+0.9%</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Recent Transactions & Risk Assessment -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Recent Transactions Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-purple-400 dark:border-purple-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute top-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mt-10 -mr-10 rounded-full opacity-20"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Recent Activity</h2>
        <ul class="space-y-4 relative z-10">
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-lime-200 dark:bg-lime-700 flex items-center justify-center text-lime-700 dark:text-lime-300 font-bold text-xl drop-shadow">↑</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Deposit</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">From Checking Account</p>
            </div>
            <span class="ml-auto text-lime-600 dark:text-lime-300 font-bold">+$1,500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-red-200 dark:bg-red-700 flex items-center justify-center text-red-700 dark:text-red-300 font-bold text-xl drop-shadow">↓</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Withdrawal</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">To Savings Account</p>
            </div>
            <span class="ml-auto text-red-600 dark:text-red-300 font-bold">-$500</span>
          </li>
          <li class="flex items-center space-x-4 bg-fuchsia-50 dark:bg-fuchsia-900 p-3 rounded-lg border-2 border-fuchsia-300 dark:border-fuchsia-600 transition-colors duration-200">
            <div class="w-10 h-10 rounded-full bg-purple-200 dark:bg-purple-700 flex items-center justify-center text-purple-700 dark:text-purple-300 font-bold text-xl drop-shadow">📈</div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">Buy NASDAQ</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">100 Units</p>
            </div>
            <span class="ml-auto text-purple-600 dark:text-purple-300 font-bold">-$10,000</span>
          </li>
        </ul>
      </div>

      <!-- Risk Assessment Card -->
      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-teal-400 dark:border-teal-700 transform hover:scale-[1.01] transition-transform duration-300 relative overflow-hidden">
        <div class="absolute bottom-0 right-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mb-12 -mr-12 rounded-lg opacity-20 transform -rotate-12"></div>
        <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Risk Assessment</h2>
        <div class="relative flex justify-center items-center h-48 bg-gradient-to-br from-teal-100 to-lime-100 dark:from-lime-900 dark:to-teal-900 rounded-xl mb-6 overflow-hidden border-2 border-teal-500 dark:border-teal-700">
          <img src="https://picsum.photos/600/300?random=6&grayscale&blur=2" alt="Placeholder risk chart" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 rounded-xl">
          <div class="relative z-10 flex flex-col items-center justify-center p-4">
            <p class="text-5xl font-extrabold text-teal-700 dark:text-teal-300 drop-shadow-md mb-2">Moderate</p>
            <p class="text-lg font-semibold text-gray-600 dark:text-gray-300 text-center">Your portfolio risk is currently balanced.</p>
            <a href="#" class="mt-4 inline-block px-5 py-2 bg-teal-500 dark:bg-teal-600 text-white rounded-full font-semibold hover:bg-teal-600 dark:hover:bg-teal-700 transition-colors duration-200 shadow-md">View Details</a>
          </div>
        </div>

        <div class="p-4 bg-teal-50 dark:bg-teal-900 rounded-xl border-2 border-teal-300 dark:border-teal-600 relative z-10">
          <p class="text-sm text-gray-600 dark:text-gray-300">
            Your current risk score is <strong>4.5/10</strong>, primarily driven by your exposure to tech stocks. Consider diversifying further for optimal balance.
          </p>
        </div>
      </div>
    </div>

    <!-- Advisory Section -->
    <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-6 md:p-8 border-4 border-orange-400 dark:border-orange-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-24 h-24 bg-fuchsia-300 dark:bg-fuchsia-600 -mt-12 -ml-12 rounded-full opacity-20"></div>
      <div class="absolute bottom-0 right-0 w-20 h-20 bg-lime-300 dark:bg-lime-600 -mb-10 -mr-10 rounded-lg opacity-20 transform -rotate-45"></div>
      <h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-50 drop-shadow relative z-10">Expert Insights</h2>
      <div class="flex flex-col sm:flex-row items-center gap-6 relative z-10">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Financial Advisor" class="w-24 h-24 rounded-full border-4 border-orange-500 dark:border-orange-400 shadow-lg">
        <div>
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">"Market trends indicate potential for growth in renewable energy. Consider allocating a small portion of your portfolio."</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">— <span class="font-medium text-orange-600 dark:text-orange-300">Alex Chen, Senior Financial Advisor</span></p>
          <a href="#" class="mt-3 inline-block px-5 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 dark:from-orange-600 dark:to-yellow-600 text-white rounded-full font-semibold hover:from-orange-600 hover:to-yellow-600 dark:hover:from-orange-700 dark:hover:to-yellow-700 transition-colors duration-200 shadow-md">Schedule a Call</a>
        </div>
      </div>
    </div>
  </div>
</div>