Unify offer cards: RouteStepper + OfferResultCard components

- Add RouteStepper component with transport icons (🚛 🚂 🚢)
- Add OfferResultCard with price, distance, route stages
- Update hub page to use OfferResultCard
- Update CalcResultContent to use OfferResultCard

app/pages/catalog/hubs/[id].vue

@@ -59,22 +59,15 @@
         </template>
 
         <template #card="{ item }">
-          <Card padding="sm" interactive>
-            <div class="flex items-center justify-between">
-              <div>
-                <Text weight="semibold">{{ item.name }}</Text>
-                <Text tone="muted" size="sm">{{ selectedProductName }}</Text>
-              </div>
-              <div class="text-right">
-                <Text weight="semibold" class="text-primary">
-                  {{ getOfferPrice(item.uuid) }}
-                </Text>
-                <Text tone="muted" size="sm">
-                  {{ formatDistance(item.distanceKm) }} км
-                </Text>
-              </div>
-            </div>
-          </Card>
+          <OfferResultCard
+            :source-name="item.name"
+            :product-name="selectedProductName"
+            :price-per-unit="getOfferData(item.uuid)?.pricePerUnit"
+            :currency="getOfferData(item.uuid)?.currency"
+            :unit="getOfferData(item.uuid)?.unit"
+            :total-distance="item.distanceKm"
+            :stages="item.stages"
+          />
         </template>
 
         <template #empty>
@@ -120,7 +113,7 @@ const selectedProductName = computed(() => {
   return product?.name || ''
 })
 
-// Transform sources for CatalogPage (needs uuid, latitude, longitude, name)
+// Transform sources for CatalogPage (needs uuid, latitude, longitude, name, stages)
 const sources = computed(() => {
   return rawSources.value.map(source => ({
     uuid: source.sourceUuid || '',
@@ -128,15 +121,17 @@ const sources = computed(() => {
     latitude: source.sourceLat,
     longitude: source.sourceLon,
     distanceKm: source.distanceKm,
-    durationSeconds: source.routes?.[0]?.totalTimeSeconds
+    durationSeconds: source.routes?.[0]?.totalTimeSeconds,
+    stages: (source.routes?.[0]?.stages || []).map((stage: any) => ({
+      transportType: stage?.transportType,
+      distanceKm: stage?.distanceKm
+    }))
   }))
 })
 
-// Get offer price for display
-const getOfferPrice = (uuid: string) => {
-  const offer = offersData.value.get(uuid)
-  if (!offer) return '-'
-  return `${offer.pricePerUnit} ${offer.currency}/${offer.unit}`
+// Get offer data for card
+const getOfferData = (uuid: string) => {
+  return offersData.value.get(uuid)
 }
 
 // Load offer details for prices