service-finder/frontend/src/components/analytics/FunStats.vue

<template>
  <div class="fun-stats">
    <h2 class="text-2xl font-bold text-gray-800 mb-6">🎮 Fun Stats & Achievements</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Moon Trip Card -->
      <div class="bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl p-6 shadow-lg border border-blue-200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
            <span class="text-2xl">🌙</span>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800">Moon Trip</h3>
            <p class="text-sm text-gray-600">Distance traveled</p>
          </div>
        </div>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-blue-700">{{ funFacts.moonTrips }}</div>
          <p class="text-gray-600 mt-2">trips to the Moon</p>
        </div>
        <p class="text-sm text-gray-500 text-center">
          You've driven <span class="font-semibold">{{ formatNumber(funFacts.totalKmDriven) }} km</span> - that's {{ funFacts.moonTrips }} trip{{ funFacts.moonTrips !== 1 ? 's' : '' }} to the Moon!
        </p>
      </div>

      <!-- Earth Circuits Card -->
      <div class="bg-gradient-to-br from-green-50 to-emerald-100 rounded-2xl p-6 shadow-lg border border-green-200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-4">
            <span class="text-2xl">🌍</span>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800">Earth Circuits</h3>
            <p class="text-sm text-gray-600">Around the world</p>
          </div>
        </div>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-green-700">{{ funFacts.earthCircuits }}</div>
          <p class="text-gray-600 mt-2">times around Earth</p>
        </div>
        <p class="text-sm text-gray-500 text-center">
          Equivalent to {{ funFacts.earthCircuits }} circuit{{ funFacts.earthCircuits !== 1 ? 's' : '' }} around the equator!
        </p>
      </div>

      <!-- Trees Saved Card -->
      <div class="bg-gradient-to-br from-amber-50 to-orange-100 rounded-2xl p-6 shadow-lg border border-amber-200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-amber-100 rounded-xl flex items-center justify-center mr-4">
            <span class="text-2xl">🌳</span>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800">Trees Saved</h3>
            <p class="text-sm text-gray-600">Environmental impact</p>
          </div>
        </div>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-amber-700">{{ funFacts.totalTreesSaved }}</div>
          <p class="text-gray-600 mt-2">trees preserved</p>
        </div>
        <p class="text-sm text-gray-500 text-center">
          Your efficient driving saved {{ funFacts.totalTreesSaved }} tree{{ funFacts.totalTreesSaved !== 1 ? 's' : '' }} from CO₂ emissions!
        </p>
      </div>

      <!-- CO₂ Saved Card -->
      <div class="bg-gradient-to-br from-purple-50 to-pink-100 rounded-2xl p-6 shadow-lg border border-purple-200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mr-4">
            <span class="text-2xl">☁️</span>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800">CO₂ Saved</h3>
            <p class="text-sm text-gray-600">Carbon footprint</p>
          </div>
        </div>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-purple-700">{{ funFacts.totalCo2Saved }}</div>
          <p class="text-gray-600 mt-2">tons of CO₂</p>
        </div>
        <p class="text-sm text-gray-500 text-center">
          That's like taking {{ Math.round(funFacts.totalCo2Saved * 1.8) }} cars off the road for a year!
        </p>
      </div>

      <!-- Money Saved Card -->
      <div class="bg-gradient-to-br from-cyan-50 to-teal-100 rounded-2xl p-6 shadow-lg border border-cyan-200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-cyan-100 rounded-xl flex items-center justify-center mr-4">
            <span class="text-2xl">💰</span>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800">Money Saved</h3>
            <p class="text-sm text-gray-600">Smart driving pays off</p>
          </div>
        </div>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-cyan-700">€{{ formatNumber(funFacts.totalMoneySaved) }}</div>
          <p class="text-gray-600 mt-2">total savings</p>
        </div>
        <p class="text-sm text-gray-500 text-center">
          Compared to average drivers, you saved €{{ formatNumber(funFacts.totalMoneySaved) }}!
        </p>
      </div>

      <!-- Fuel Efficiency Card -->
      <div class="bg-gradient-to-br from-rose-50 to-red-100 rounded-2xl p-6 shadow-lg border border-rose-200">
        <div class="flex items-center mb-4">
          <div class="w-12 h-12 bg-rose-100 rounded-xl flex items-center justify-center mr-4">
            <span class="text-2xl">⛽</span>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-gray-800">Fuel Efficiency</h3>
            <p class="text-sm text-gray-600">Your average</p>
          </div>
        </div>
        <div class="text-center py-4">
          <div class="text-4xl font-bold text-rose-700">{{ averageFuelEfficiency.toFixed(1) }}</div>
          <p class="text-gray-600 mt-2">km per liter</p>
        </div>
        <p class="text-sm text-gray-500 text-center">
          {{ getEfficiencyMessage(averageFuelEfficiency) }}
        </p>
      </div>
    </div>

    <!-- Fun Fact of the Day -->
    <div class="mt-8 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-6 text-white shadow-lg">
      <div class="flex items-center">
        <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4">
          <span class="text-xl">💡</span>
        </div>
        <div>
          <h3 class="text-xl font-bold">Fun Fact of the Day</h3>
          <p class="text-indigo-100">Did you know?</p>
        </div>
      </div>
      <p class="mt-4 text-lg">
        If every driver in your city achieved your fuel efficiency, we'd save enough CO₂ to fill {{ Math.round(funFacts.totalCo2Saved * 100) }} hot air balloons every year!
      </p>
    </div>
  </div>
</template>

<script setup>
import { useAnalyticsStore } from '@/stores/analyticsStore'
import { storeToRefs } from 'pinia'

const analyticsStore = useAnalyticsStore()
const { funFacts, averageFuelEfficiency } = storeToRefs(analyticsStore)

const formatNumber = (num) => {
  return new Intl.NumberFormat('en-US').format(num)
}

const getEfficiencyMessage = (efficiency) => {
  if (efficiency > 15) return "Outstanding! You're among the top 5% most efficient drivers."
  if (efficiency > 12) return "Great job! You're more efficient than 80% of drivers."
  if (efficiency > 10) return "Good! You're above average in fuel efficiency."
  return 'Room for improvement. Check our tips to save more fuel.'
}
</script>

<style scoped>
.fun-stats {
  font-family: 'Inter', sans-serif;
}
</style>