Paper_Print_Sepia_Sports_Map_Component

<div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 min-h-screen">

  <div class="max-w-6xl mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden
              border border-stone-200 dark:border-stone-700
              transform transition-all duration-300 hover:shadow-2xl">

    <!-- Header Section -->
    <div class="bg-stone-100 dark:bg-stone-700 p-4 sm:p-5 flex items-center justify-between
                border-b border-stone-200 dark:border-stone-600
                relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
      <h2 class="text-xl sm:text-2xl font-serif text-stone-800 dark:text-stone-200
                 relative z-10 font-bold tracking-wide">Training Ground Map</h2>
      <button aria-label="View Settings" class="relative z-10 p-2 rounded-full bg-stone-200 dark:bg-stone-600
                         hover:bg-stone-300 dark:hover:bg-stone-500 transition-colors duration-200
                         shadow-sm dark:shadow-md">
        <svg class="w-5 h-5 text-stone-600 dark:text-stone-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.49 3.17c-.389-.111-.796-.16-1.21-.16s-.822.049-1.21.16zM9.54 2.1c.427-.122.875-.18 1.35-.18s.923.058 1.35.18l.8-.8a.75.75 0 011.06 0l1.25 1.25a.75.75 0 010 1.06l-.775.775a.75.75 0 00-.012.012c.11.23.2.47.27.708l.775.776a.75.75 0 010 1.06l-1.25 1.25a.75.75 0 01-1.06 0l-.775-.775a.75.75 0 00-.01-.01c-.24.11-.49.2-.748.27l-.776.775a.75.75 0 01-1.06 0l-1.25-1.25a.75.75 0 010-1.06l.775-.775a.75.75 0 00.01-.012c-.11-.23-.2-.47-.27-.708l-.775-.776a.75.75 0 010-1.06l1.25-1.25a.75.75 0 011.06 0l.775.775a.75.75 0 00.012.01z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M7.22 8.35s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 13.65s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 18.95s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0">

      <!-- Left Sidebar: Map Controls & Legend -->
      <div class="md:col-span-1 p-4 sm:p-5 bg-stone-50 dark:bg-stone-700
                  border-r-0 md:border-r border-b md:border-b-0 border-stone-200 dark:border-stone-600
                  relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-40 dark:opacity-5"></div>

        <div class="relative z-10 space-y-6">

          <!-- Map Controls -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Map Controls</h3>
            <div class="space-y-3">
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Zoom In
              </button>
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.5 10.5a.5.5 0 01-.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H7z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Zoom Out
              </button>
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm-5 8a.8.8 0 01.8-.8h8.4a.8.8 0 010 1.6H5.8A.8.8 0 015 10z"></path></svg>
                Recenter
              </button>
            </div>
          </div>

          <!-- Legend -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Legend</h3>
            <ul class="space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-red-500 dark:bg-red-600 shadow-sm"></span> Training Field</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-blue-500 dark:bg-blue-600 shadow-sm"></span> Water Station</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-emerald-500 dark:bg-emerald-600 shadow-sm"></span> First Aid</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-purple-500 dark:bg-purple-600 shadow-sm"></span> Rest Area</li>
            </ul>
          </div>

          <!-- Quick Stats (Example) -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Workout Overview</h3>
            <div class="space-y-2 text-stone-700 dark:text-stone-300">
              <p class="flex justify-between"><span>Total Distance:</span> <span class="font-semibold">5.2 km</span></p>
              <p class="flex justify-between"><span>Elevation Gain:</span> <span class="font-semibold">120 m</span></p>
              <p class="flex justify-between"><span>Avg Pace:</span> <span class="font-semibold">5:15 /km</span></p>
            </div>
          </div>

        </div>
      </div>

      <!-- Main Map Area -->
      <div class="md:col-span-2 lg:col-span-3 bg-amber-100 dark:bg-stone-900 min-h-[400px] md:min-h-[600px] lg:min-h-[700px]
                  flex items-center justify-center relative shadow-inner p-4 sm:p-6
                  border-l-0 md:border-l border-stone-200 dark:border-stone-700">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of training grounds" 
             class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-screen
             transform scale-105 filter sepia dark:invert dark:sepia-0 dark:contrast-125 dark:brightness-75">
        
        <div class="relative z-10 w-full h-full flex flex-col justify-center items-center p-4">
          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif text-stone-800 dark:text-stone-200 font-bold mb-6 text-center
                     drop-shadow-lg text-shadow-sm filter backdrop-blur-sm bg-white/20 dark:bg-stone-900/20 p-3 rounded-xl
                     border border-stone-300 dark:border-stone-600 
                     "><span class="hidden sm:inline">Interactive </span>Training Map</h2>

          <!-- Simulated Map Pins -->
          <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-red-500 dark:bg-red-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-red-500 dark:border-t-red-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Field A (Football)</span>
          </div>
          <div class="absolute top-2/3 right-1/4 transform translate-x-1/2 translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-blue-500 dark:border-t-blue-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Water Station 1</span>
          </div>
          <div class="absolute top-1/2 right-1/2 transform translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-emerald-500 dark:bg-emerald-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-emerald-500 dark:border-t-emerald-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Medical Tent</span>
          </div>

          <!-- Call to Action / Info Box -->
          <div class="absolute bottom-8 right-8 bg-white dark:bg-stone-700 rounded-lg p-3 sm:p-4 shadow-lg
                      border border-stone-200 dark:border-stone-600 max-w-xs text-sm
                      transform translate-y-0 hover:-translate-y-1 transition-transform duration-300
                      hidden sm:block">
            <div class="dark:text-stone-300 text-stone-700">
              <p class="font-bold font-serif mb-2 text-base text-stone-800 dark:text-stone-200">Ready to Explore?</p>
              <p>Click on the pins for more details about different areas. Track your progress here!</p>
              <button class="mt-3 w-full bg-amber-700 dark:bg-amber-600 text-white py-2 rounded-md
                             hover:bg-amber-800 dark:hover:bg-amber-500 transition-colors duration-200
                             shadow-md dark:shadow-lg">Start Tracking</button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer (simple for this component) -->
    <div class="bg-stone-100 dark:bg-stone-700 p-3 sm:p-4 text-center
                border-t border-stone-200 dark:border-stone-600
                relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
      <p class="text-xs text-stone-600 dark:text-stone-400 relative z-10">Data provided by GeoFit Innovations &copy; 2023</p>
    </div>

  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap');
  .font-sans { font-family: 'Open Sans', sans-serif; }
  .font-serif { font-family: 'Merriweather', serif; }

  /* Custom keyframes for ping animation */
  @keyframes bounce-short {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-short {
    animation: bounce-short 1.5s infinite;
  }
</style>