Industrial_Retro_RealEstate_Charts

<div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 font-sans text-stone-800 dark:text-stone-200">
  <div class="max-w-4xl mx-auto border border-stone-300 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-200 dark:bg-stone-800 p-4 sm:p-6">
    <div class="flex justify-between items-center mb-4 sm:mb-6 border-b border-stone-400 dark:border-stone-600 pb-2">
      <h2 class="text-xl sm:text-2xl font-semibold text-stone-700 dark:text-stone-300 uppercase tracking-wide">Property Insights</h2>
      <div class="relative inline-block text-left">
        <select class="block appearance-none w-full bg-stone-300 dark:bg-stone-700 border border-stone-400 dark:border-stone-600 text-stone-700 dark:text-stone-300 py-2 pl-3 pr-8 rounded leading-tight focus:outline-none focus:bg-stone-400 dark:focus:bg-stone-600 focus:border-stone-500 dark:focus:border-stone-500 text-sm sm:text-base">
          <option>Last 30 Days</option>
          <option>Last 3 Months</option>
          <option>Last 6 Months</option>
          <option>Last Year</option>
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-stone-700 dark:text-stone-300">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">

      <!-- Chart 1: Average Price -->
      <div class="bg-stone-300 dark:bg-stone-700 border border-stone-400 dark:border-stone-600 p-4 rounded-md shadow-inner">
        <h3 class="text-md sm:text-lg font-medium mb-2 text-stone-700 dark:text-stone-300">Avg. Property Price ($)</h3>
        <div class="h-32 sm:h-40 xl:h-48 bg-stone-400 dark:bg-stone-600 rounded-sm flex items-end overflow-hidden">
          <div class="w-1/6 bg-amber-600 dark:bg-amber-700 h-1/3" title="$250k"></div>
          <div class="w-1/6 bg-amber-500 dark:bg-amber-600 h-1/2" title="$300k"></div>
          <div class="w-1/6 bg-amber-600 dark:bg-amber-700 h-3/5" title="$370k"></div>
          <div class="w-1/6 bg-amber-500 dark:bg-amber-600 h-4/5" title="$450k"></div>
          <div class="w-1/6 bg-amber-600 dark:bg-amber-700 h-3/4" title="$420k"></div>
          <div class="w-1/6 bg-amber-500 dark:bg-amber-600 h-2/3" title="$380k"></div>
        </div>
        <p class="text-center text-sm mt-3 text-stone-700 dark:text-stone-300">Trend over time</p>
      </div>

      <!-- Chart 2: Listings by Type -->
      <div class="bg-stone-300 dark:bg-stone-700 border border-stone-400 dark:border-stone-600 p-4 rounded-md shadow-inner">
        <h3 class="text-md sm:text-lg font-medium mb-2 text-stone-700 dark:text-stone-300">Listings by Type (Units)</h3>
        <div class="h-32 sm:h-40 xl:h-48 flex items-center justify-around bg-stone-400 dark:bg-stone-600 rounded-sm">
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-teal-600 dark:bg-teal-700 rounded-full flex items-center justify-center text-stone-100 text-sm font-bold">55%</div>
            <span class="text-xs sm:text-sm mt-1 text-stone-800 dark:text-stone-200">Houses</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-cyan-600 dark:bg-cyan-700 rounded-full flex items-center justify-center text-stone-100 text-sm font-bold">30%</div>
            <span class="text-xs sm:text-sm mt-1 text-stone-800 dark:text-stone-200">Apartments</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="w-10 h-10 sm:w-12 sm:h-12 bg-red-600 dark:bg-red-700 rounded-full flex items-center justify-center text-stone-100 text-sm font-bold">15%</div>
            <span class="text-xs sm:text-sm mt-1 text-stone-800 dark:text-stone-200">Land</span>
          </div>
        </div>
        <p class="text-center text-sm mt-3 text-stone-700 dark:text-stone-300">Distribution of listings</p>
      </div>

    </div>

    <div class="mt-4 sm:mt-6 border-t border-stone-400 dark:border-stone-600 pt-4 text-center">
      <p class="text-sm text-stone-600 dark:text-stone-400">Data updated daily. For detailed reports, contact support.</p>
    </div>

  </div>
</div>