From 61a37040d6fd1eb891343497df35103af02d994e Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Tue, 10 Mar 2026 11:52:35 +0700
Subject: [PATCH] feat: step-by-step quote flow like logistics project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New pages: /catalog/product → /catalog/destination → /catalog/quantity → /catalog/results
Each step has fullscreen map + white bottom sheet card (rounded-t-3xl).
Header capsule in quote mode now navigates between steps.
i18n keys added for step titles (en/ru).
---
 app/components/navigation/MainNavigation.vue |  80 +++---
 app/pages/catalog/destination.vue            | 172 +++++++++++++
 app/pages/catalog/product.vue                | 146 +++++++++++
 app/pages/catalog/quantity.vue               | 150 ++++++++++++
 app/pages/catalog/results.vue                | 242 +++++++++++++++++++
 i18n/locales/en/catalog.json                 |  13 +-
 i18n/locales/ru/catalog.json                 |  13 +-
 7 files changed, 775 insertions(+), 41 deletions(-)
 create mode 100644 app/pages/catalog/destination.vue
 create mode 100644 app/pages/catalog/product.vue
 create mode 100644 app/pages/catalog/quantity.vue
 create mode 100644 app/pages/catalog/results.vue

diff --git a/app/components/navigation/MainNavigation.vue b/app/components/navigation/MainNavigation.vue
index b36625e..e77427d 100644
--- a/app/components/navigation/MainNavigation.vue
+++ b/app/components/navigation/MainNavigation.vue
@@ -42,15 +42,15 @@
             >
               {{ $t('catalog.modes.explore') }}
             </button>
-            <button
+            <NuxtLink
+              :to="localePath('/catalog/product')"
               class="px-3 py-1 text-sm font-medium rounded-full transition-colors"
-              :class="showActiveMode && catalogMode === 'quote' && !isClientArea
+              :class="isQuoteStepPage
                 ? (useWhiteText ? 'bg-white/20 text-white' : 'bg-base-300 text-base-content')
                 : (useWhiteText ? 'text-white/70 hover:text-white hover:bg-white/10' : 'text-base-content/70 hover:text-base-content hover:bg-base-200')"
-              @click="$emit('set-catalog-mode', 'quote')"
             >
               {{ $t('catalog.modes.quote') }}
-            </button>
+            </NuxtLink>
             <!-- Role switcher: Я клиент + dropdown -->
             <div v-if="loggedIn" class="flex items-center">
               <NuxtLink
@@ -139,49 +139,39 @@
           </div>
         </template>
 
-        <!-- Quote mode: Simple segmented input with search inside (white glass) -->
+        <!-- Quote mode: Step-based capsule navigation (like logistics) -->
         <template v-else-if="catalogMode === 'quote'">
           <div class="flex items-center w-full rounded-full pill-glass overflow-hidden">
             <!-- Product segment -->
-            <button
-              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 rounded-l-full transition-colors min-w-0"
-              @click="$emit('edit-token', 'product')"
+            <NuxtLink
+              :to="localePath('/catalog/product')"
+              class="flex-1 px-4 py-2 text-left hover:bg-white/10 rounded-l-full transition-colors min-w-0"
             >
-              <div class="text-xs text-base-content/60">{{ $t('catalog.filters.product') }}</div>
+              <span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.product') }}</span>
               <div class="font-medium truncate text-base-content">{{ productLabel || $t('catalog.quote.selectProduct') }}</div>
-            </button>
-            <div class="w-px h-8 bg-white/20 self-center" />
+            </NuxtLink>
+            <div class="w-px h-8 bg-base-300/40 self-center" />
             <!-- Hub segment -->
-            <button
-              class="flex-1 px-4 py-2 text-left hover:bg-base-200/50 transition-colors min-w-0"
-              @click="$emit('edit-token', 'hub')"
+            <NuxtLink
+              :to="localePath('/catalog/destination')"
+              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
             >
-              <div class="text-xs text-base-content/60">{{ $t('catalog.filters.hub') }}</div>
+              <span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.hub') }}</span>
               <div class="font-medium truncate text-base-content">{{ hubLabel || $t('catalog.quote.selectHub') }}</div>
-            </button>
-            <div class="w-px h-8 bg-white/20 self-center" />
-            <!-- Quantity segment (inline input) -->
-            <div class="flex-1 px-4 py-2 min-w-0">
-              <div class="text-xs text-base-content/60">{{ $t('catalog.filters.quantity') }}</div>
-              <div class="flex items-center gap-1">
-                <input
-                  v-model="localQuantity"
-                  type="number"
-                  min="0"
-                  step="0.1"
-                  placeholder="—"
-                  class="w-16 font-medium bg-transparent outline-none text-base-content [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                  @blur="$emit('update-quantity', localQuantity)"
-                  @keyup.enter="$emit('update-quantity', localQuantity)"
-                />
-                <span v-if="localQuantity" class="text-base-content/60 text-sm">{{ $t('units.t') }}</span>
-              </div>
-            </div>
-            <!-- Search button inside -->
+            </NuxtLink>
+            <div class="w-px h-8 bg-base-300/40 self-center" />
+            <!-- Quantity segment -->
+            <NuxtLink
+              :to="localePath('/catalog/quantity')"
+              class="flex-1 px-4 py-2 text-left hover:bg-white/10 transition-colors min-w-0"
+            >
+              <span class="text-[10px] font-bold uppercase tracking-wider opacity-60">{{ $t('catalog.filters.quantity') }}</span>
+              <div class="font-medium truncate text-base-content">{{ quantity || '—' }} {{ quantity ? $t('units.t') : '' }}</div>
+            </NuxtLink>
+            <!-- Search button -->
             <button
               class="btn btn-primary btn-circle m-1"
-              :disabled="!canSearch"
-              @click="$emit('search')"
+              @click="navigateToSearch"
             >
               <Icon name="lucide:search" size="18" />
             </button>
@@ -449,6 +439,22 @@ const switchLocalePath = useSwitchLocalePath()
 const { t } = useI18n()
 const { chatOpen } = toRefs(props)
 
+const router = useRouter()
+
+// Check if we're on a quote step page
+const isQuoteStepPage = computed(() => {
+  const path = route.path
+  return path.includes('/catalog/product') ||
+    path.includes('/catalog/destination') ||
+    path.includes('/catalog/quantity') ||
+    path.includes('/catalog/results')
+})
+
+// Navigate to search results (quote mode step flow)
+const navigateToSearch = () => {
+  router.push(localePath('/catalog/product'))
+}
+
 // Check if client area tab is active
 const isClientAreaTabActive = (path: string) => {
   const currentPath = route.path
diff --git a/app/pages/catalog/destination.vue b/app/pages/catalog/destination.vue
new file mode 100644
index 0000000..a0a878c
--- /dev/null
+++ b/app/pages/catalog/destination.vue
@@ -0,0 +1,172 @@
+<template>
+  <div class="fixed inset-0 flex flex-col">
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          map-id="step-hub-map"
+          :items="hubMapItems"
+          :use-server-clustering="false"
+          point-color="#22c55e"
+          entity-type="hub"
+          @select-item="onMapSelect"
+          @bounds-change="onBoundsChange"
+        />
+      </ClientOnly>
+    </div>
+
+    <!-- Bottom sheet card -->
+    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
+      <article
+        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
+        style="max-height: 60vh"
+      >
+        <!-- Header -->
+        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
+          <div class="flex justify-center mb-4">
+            <div class="w-10 h-1 bg-base-300 rounded-full" />
+          </div>
+
+          <div class="flex items-center justify-between mb-1">
+            <div>
+              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 2 }) }}</p>
+              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectDestination') }}</h2>
+            </div>
+            <span class="badge badge-neutral">{{ hubs.length }}</span>
+          </div>
+
+          <!-- Selected product chip -->
+          <div v-if="productName" class="flex items-center gap-2 mt-2 mb-1">
+            <span class="badge badge-warning gap-1">
+              <Icon name="lucide:package" size="12" />
+              {{ productName }}
+            </span>
+          </div>
+
+          <!-- Search input -->
+          <label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
+            <Icon name="lucide:search" size="16" class="text-base-content/40" />
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="$t('catalog.search.searchHubs')"
+              class="grow bg-transparent"
+            />
+          </label>
+        </div>
+
+        <!-- Hub list -->
+        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
+          <div v-if="isLoading" class="flex items-center justify-center py-8">
+            <span class="loading loading-spinner loading-md" />
+          </div>
+
+          <div v-else-if="filteredHubs.length === 0" class="text-center py-8 text-base-content/50">
+            <Icon name="lucide:warehouse" size="32" class="mb-2" />
+            <p>{{ $t('catalog.empty.noHubs') }}</p>
+          </div>
+
+          <div v-else class="flex flex-col gap-2">
+            <button
+              v-for="hub in filteredHubs"
+              :key="hub.uuid"
+              class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
+              @click="selectHub(hub)"
+            >
+              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-green-400 to-green-600 shadow-lg">
+                <Icon name="lucide:warehouse" size="20" class="text-white" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <span class="text-base font-bold text-base-content block truncate">{{ hub.name || hub.uuid }}</span>
+                <span v-if="hub.country" class="text-sm text-base-content/50">{{ hub.country }}</span>
+              </div>
+              <Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
+            </button>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
+definePageMeta({ layout: 'topnav' })
+
+const { t } = useI18n()
+const router = useRouter()
+const localePath = useLocalePath()
+const route = useRoute()
+
+const mapRef = ref(null)
+const searchQuery = ref('')
+
+// Get product from query
+const productUuid = computed(() => route.query.product as string | undefined)
+const productName = computed(() => route.query.productName as string | undefined)
+
+// Load hubs (filtered by product if available)
+const { items: hubs, isLoading, init: initHubs, setProductFilter } = useCatalogHubs()
+
+const onBoundsChange = (_bounds: MapBounds) => {
+  // No clustering needed — showing hub items directly
+}
+
+// Hub items for map
+const hubMapItems = computed(() =>
+  hubs.value
+    .filter(h => h.latitude != null && h.longitude != null)
+    .map(h => ({
+      uuid: h.uuid || '',
+      name: h.name || '',
+      latitude: Number(h.latitude),
+      longitude: Number(h.longitude),
+      country: h.country || undefined,
+    }))
+)
+
+// Map click → select hub
+const onMapSelect = (uuid: string) => {
+  const hub = hubs.value.find(h => h.uuid === uuid)
+  if (hub) selectHub(hub)
+}
+
+// Filter hubs by search
+const filteredHubs = computed(() => {
+  if (!searchQuery.value.trim()) return hubs.value
+  const q = searchQuery.value.toLowerCase().trim()
+  return hubs.value.filter(h =>
+    (h.name || '').toLowerCase().includes(q) ||
+    (h.country || '').toLowerCase().includes(q)
+  )
+})
+
+// Select hub → navigate to quantity step
+const selectHub = (hub: { uuid?: string | null; name?: string | null }) => {
+  if (!hub.uuid) return
+  const query: Record<string, string> = {
+    ...route.query as Record<string, string>,
+    hub: hub.uuid,
+  }
+  if (hub.name) query.hubName = hub.name
+
+  router.push({
+    path: localePath('/catalog/quantity'),
+    query,
+  })
+}
+
+// Init
+onMounted(() => {
+  if (productUuid.value) {
+    setProductFilter(productUuid.value)
+  }
+  initHubs()
+})
+
+useHead(() => ({
+  title: t('catalog.steps.selectDestination')
+}))
+</script>
diff --git a/app/pages/catalog/product.vue b/app/pages/catalog/product.vue
new file mode 100644
index 0000000..86acb01
--- /dev/null
+++ b/app/pages/catalog/product.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="fixed inset-0 flex flex-col">
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          map-id="step-product-map"
+          :items="[]"
+          :clustered-points="clusteredNodes"
+          :use-server-clustering="true"
+          point-color="#f97316"
+          entity-type="offer"
+          @select-item="onMapSelect"
+          @bounds-change="onBoundsChange"
+        />
+      </ClientOnly>
+    </div>
+
+    <!-- Bottom sheet card -->
+    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
+      <article
+        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
+        style="max-height: 60vh"
+      >
+        <!-- Header -->
+        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
+          <!-- Drag handle -->
+          <div class="flex justify-center mb-4">
+            <div class="w-10 h-1 bg-base-300 rounded-full" />
+          </div>
+
+          <div class="flex items-center justify-between mb-1">
+            <div>
+              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 1 }) }}</p>
+              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.steps.selectProduct') }}</h2>
+            </div>
+            <span class="badge badge-neutral">{{ products.length }}</span>
+          </div>
+
+          <!-- Search input -->
+          <label class="input input-bordered w-full mt-3 rounded-full flex items-center gap-2">
+            <Icon name="lucide:search" size="16" class="text-base-content/40" />
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="$t('catalog.search.searchProducts')"
+              class="grow bg-transparent"
+            />
+          </label>
+        </div>
+
+        <!-- Product list -->
+        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
+          <div v-if="isLoading" class="flex items-center justify-center py-8">
+            <span class="loading loading-spinner loading-md" />
+          </div>
+
+          <div v-else-if="filteredProducts.length === 0" class="text-center py-8 text-base-content/50">
+            <Icon name="lucide:package-x" size="32" class="mb-2" />
+            <p>{{ $t('catalog.empty.noProducts') }}</p>
+          </div>
+
+          <div v-else class="flex flex-col gap-2">
+            <button
+              v-for="product in filteredProducts"
+              :key="product.uuid"
+              class="flex items-center gap-4 rounded-2xl p-4 text-left transition-all hover:bg-base-200/60 active:scale-[0.98] group"
+              @click="selectProduct(product)"
+            >
+              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 shadow-lg">
+                <Icon name="lucide:package" size="20" class="text-white" />
+              </div>
+              <div class="flex-1 min-w-0">
+                <span class="text-base font-bold text-base-content block truncate">{{ product.name || product.uuid }}</span>
+                <span v-if="product.offersCount" class="text-sm text-base-content/50">{{ product.offersCount }} {{ $t('catalog.offers') }}</span>
+              </div>
+              <Icon name="lucide:chevron-right" size="18" class="text-base-content/30 group-hover:text-base-content/60 transition-colors" />
+            </button>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
+
+definePageMeta({ layout: 'topnav' })
+
+const { t } = useI18n()
+const router = useRouter()
+const localePath = useLocalePath()
+const route = useRoute()
+
+const mapRef = ref(null)
+const searchQuery = ref('')
+
+// Load products
+const { items: products, isLoading, init: initProducts } = useCatalogProducts()
+
+// Clustering for map background
+const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, ref('offer'))
+
+const onBoundsChange = (bounds: MapBounds) => {
+  fetchClusters(bounds)
+}
+
+const onMapSelect = (uuid: string) => {
+  // Map click — ignore for product step
+}
+
+// Filter products by search
+const filteredProducts = computed(() => {
+  if (!searchQuery.value.trim()) return products.value
+  const q = searchQuery.value.toLowerCase().trim()
+  return products.value.filter(p =>
+    (p.name || '').toLowerCase().includes(q) ||
+    (p.uuid || '').toLowerCase().includes(q)
+  )
+})
+
+// Select product → navigate to hub step
+const selectProduct = (product: { uuid: string; name?: string | null }) => {
+  const query: Record<string, string> = {
+    ...route.query as Record<string, string>,
+    product: product.uuid,
+  }
+  if (product.name) query.productName = product.name
+
+  router.push({
+    path: localePath('/catalog/destination'),
+    query,
+  })
+}
+
+// Init
+onMounted(() => {
+  initProducts()
+})
+
+useHead(() => ({
+  title: t('catalog.steps.selectProduct')
+}))
+</script>
diff --git a/app/pages/catalog/quantity.vue b/app/pages/catalog/quantity.vue
new file mode 100644
index 0000000..425f721
--- /dev/null
+++ b/app/pages/catalog/quantity.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="fixed inset-0 flex flex-col">
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          map-id="step-quantity-map"
+          :items="mapPoints"
+          :use-server-clustering="false"
+          point-color="#22c55e"
+          entity-type="hub"
+          :related-points="relatedPoints"
+          :info-loading="false"
+          @bounds-change="() => {}"
+        />
+      </ClientOnly>
+    </div>
+
+    <!-- Bottom sheet card -->
+    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
+      <article
+        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
+        style="max-height: 60vh"
+      >
+        <div class="shrink-0 p-5 md:px-7 md:pt-7">
+          <div class="flex justify-center mb-4">
+            <div class="w-10 h-1 bg-base-300 rounded-full" />
+          </div>
+
+          <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.step', { n: 3 }) }}</p>
+          <h2 class="text-2xl font-black tracking-tight text-base-content mb-4">{{ $t('catalog.steps.setQuantity') }}</h2>
+
+          <!-- Selected product + hub chips -->
+          <div class="flex flex-wrap items-center gap-2 mb-6">
+            <span v-if="productName" class="badge badge-warning gap-1">
+              <Icon name="lucide:package" size="12" />
+              {{ productName }}
+            </span>
+            <Icon name="lucide:arrow-right" size="14" class="text-base-content/30" />
+            <span v-if="hubName" class="badge badge-success gap-1">
+              <Icon name="lucide:warehouse" size="12" />
+              {{ hubName }}
+            </span>
+          </div>
+
+          <!-- Quantity input -->
+          <div class="form-control w-full max-w-xs">
+            <label class="label">
+              <span class="label-text font-bold">{{ $t('catalog.filters.quantity') }}</span>
+            </label>
+            <label class="input input-bordered rounded-xl flex items-center gap-2">
+              <input
+                v-model="qty"
+                type="number"
+                min="0"
+                step="0.1"
+                placeholder="100"
+                class="grow bg-transparent [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+              />
+              <span class="text-base-content/50 text-sm">{{ $t('units.t') }}</span>
+            </label>
+          </div>
+
+          <!-- Search button -->
+          <button
+            class="btn btn-primary w-full mt-6 rounded-full text-base font-bold"
+            :disabled="!canSearch"
+            @click="goSearch"
+          >
+            <Icon name="lucide:search" size="18" />
+            {{ $t('catalog.quote.findOffers') }}
+          </button>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetNodeDocument } from '~/composables/graphql/public/geo-generated'
+
+definePageMeta({ layout: 'topnav' })
+
+const { t } = useI18n()
+const router = useRouter()
+const localePath = useLocalePath()
+const route = useRoute()
+const { execute } = useGraphQL()
+
+const mapRef = ref(null)
+const qty = ref('100')
+
+const productUuid = computed(() => route.query.product as string | undefined)
+const productName = computed(() => route.query.productName as string | undefined)
+const hubUuid = computed(() => route.query.hub as string | undefined)
+const hubName = computed(() => route.query.hubName as string | undefined)
+
+const canSearch = computed(() => !!(productUuid.value && hubUuid.value))
+
+// Load hub coordinates for map
+const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
+
+const loadHubPoint = async () => {
+  if (!hubUuid.value) return
+  const data = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
+  const node = data?.node
+  if (node?.latitude != null && node?.longitude != null) {
+    hubPoint.value = {
+      uuid: node.uuid,
+      name: node.name || hubName.value || '',
+      latitude: Number(node.latitude),
+      longitude: Number(node.longitude),
+    }
+  }
+}
+
+const mapPoints = computed(() => hubPoint.value ? [hubPoint.value] : [])
+
+const relatedPoints = computed(() => {
+  if (!hubPoint.value) return []
+  return [{
+    uuid: hubPoint.value.uuid,
+    name: hubPoint.value.name,
+    latitude: hubPoint.value.latitude,
+    longitude: hubPoint.value.longitude,
+    type: 'hub' as const,
+  }]
+})
+
+const goSearch = () => {
+  const query: Record<string, string> = {
+    ...route.query as Record<string, string>,
+  }
+  if (qty.value) query.qty = qty.value
+
+  router.push({
+    path: localePath('/catalog/results'),
+    query,
+  })
+}
+
+onMounted(() => {
+  loadHubPoint()
+})
+
+useHead(() => ({
+  title: t('catalog.steps.setQuantity')
+}))
+</script>
diff --git a/app/pages/catalog/results.vue b/app/pages/catalog/results.vue
new file mode 100644
index 0000000..99556a8
--- /dev/null
+++ b/app/pages/catalog/results.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="fixed inset-0 flex flex-col">
+    <!-- Fullscreen Map -->
+    <div class="absolute inset-0">
+      <ClientOnly>
+        <CatalogMap
+          ref="mapRef"
+          map-id="step-results-map"
+          :items="[]"
+          :use-server-clustering="false"
+          point-color="#f97316"
+          entity-type="offer"
+          :related-points="relatedPoints"
+          :info-loading="offersLoading"
+          @select-item="onMapSelect"
+          @bounds-change="() => {}"
+        />
+      </ClientOnly>
+    </div>
+
+    <!-- Bottom sheet card -->
+    <div class="fixed inset-x-0 bottom-0 z-10 flex flex-col items-center pointer-events-none">
+      <article
+        class="w-full max-w-[980px] rounded-t-3xl bg-white shadow-[0_-8px_40px_rgba(0,0,0,0.12)] pointer-events-auto flex flex-col"
+        style="max-height: 60vh"
+      >
+        <!-- Header -->
+        <div class="shrink-0 p-5 pb-0 md:px-7 md:pt-7">
+          <div class="flex justify-center mb-4">
+            <div class="w-10 h-1 bg-base-300 rounded-full" />
+          </div>
+
+          <div class="flex items-center justify-between mb-1">
+            <div>
+              <p class="text-xs font-bold uppercase tracking-wider text-base-content/50">{{ $t('catalog.steps.results') }}</p>
+              <h2 class="text-2xl font-black tracking-tight text-base-content">{{ $t('catalog.headers.offers') }}</h2>
+            </div>
+            <span v-if="!offersLoading" class="badge badge-neutral">{{ offers.length }}</span>
+          </div>
+
+          <!-- Selected filters summary -->
+          <div class="flex flex-wrap items-center gap-2 mt-2">
+            <span v-if="productName" class="badge badge-warning gap-1">
+              <Icon name="lucide:package" size="12" />
+              {{ productName }}
+            </span>
+            <Icon name="lucide:arrow-right" size="14" class="text-base-content/30" />
+            <span v-if="hubName" class="badge badge-success gap-1">
+              <Icon name="lucide:warehouse" size="12" />
+              {{ hubName }}
+            </span>
+            <span v-if="qty" class="badge badge-info gap-1">
+              {{ qty }} {{ $t('units.t') }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Offers list -->
+        <div class="min-h-0 flex-1 overflow-y-auto p-5 md:px-7">
+          <div v-if="offersLoading" class="flex items-center justify-center py-8">
+            <span class="loading loading-spinner loading-md" />
+          </div>
+
+          <div v-else-if="offers.length === 0" class="text-center py-8 text-base-content/50">
+            <Icon name="lucide:search-x" size="32" class="mb-2" />
+            <p>{{ $t('catalog.empty.noOffers') }}</p>
+            <button class="btn btn-ghost btn-sm mt-3" @click="goBack">
+              <Icon name="lucide:arrow-left" size="16" />
+              {{ $t('common.back') }}
+            </button>
+          </div>
+
+          <div v-else class="flex flex-col gap-3">
+            <div
+              v-for="offer in offers"
+              :key="offer.uuid"
+              class="cursor-pointer"
+              @click="onSelectOffer(offer)"
+            >
+              <OfferResultCard
+                :supplier-name="offer.supplier_name"
+                :location-name="offer.country || ''"
+                :product-name="offer.product_name"
+                :price-per-unit="offer.price_per_unit ? Number(offer.price_per_unit) : null"
+                :quantity="offer.quantity"
+                :currency="offer.currency"
+                :unit="offer.unit"
+                :stages="getOfferStages(offer)"
+                :total-time-seconds="offer.routes?.[0]?.total_time_seconds ?? null"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- New search button -->
+        <div class="shrink-0 p-5 pt-0 md:px-7">
+          <button class="btn btn-outline btn-sm w-full rounded-full" @click="goBack">
+            <Icon name="lucide:refresh-cw" size="14" />
+            {{ $t('catalog.steps.newSearch') }}
+          </button>
+        </div>
+      </article>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GetNodeDocument, NearestOffersDocument, type NearestOffersQueryResult } from '~/composables/graphql/public/geo-generated'
+
+type NearestOffer = NonNullable<NearestOffersQueryResult['nearest_offers'][number]>
+
+definePageMeta({ layout: 'topnav' })
+
+const { t } = useI18n()
+const router = useRouter()
+const localePath = useLocalePath()
+const route = useRoute()
+const { execute } = useGraphQL()
+
+const mapRef = ref(null)
+
+const productUuid = computed(() => route.query.product as string | undefined)
+const productName = computed(() => route.query.productName as string | undefined)
+const hubUuid = computed(() => route.query.hub as string | undefined)
+const hubName = computed(() => route.query.hubName as string | undefined)
+const qty = computed(() => route.query.qty as string | undefined)
+
+// Offers data
+const offers = ref<NearestOffer[]>([])
+const offersLoading = ref(false)
+
+// Hub point for map
+const hubPoint = ref<{ uuid: string; name: string; latitude: number; longitude: number } | null>(null)
+
+// Related points for map (hub + offer locations)
+const relatedPoints = computed(() => {
+  const points: Array<{ uuid: string; name: string; latitude: number; longitude: number; type: 'hub' | 'supplier' | 'offer' }> = []
+
+  if (hubPoint.value) {
+    points.push({
+      uuid: hubPoint.value.uuid,
+      name: hubPoint.value.name,
+      latitude: hubPoint.value.latitude,
+      longitude: hubPoint.value.longitude,
+      type: 'hub',
+    })
+  }
+
+  offers.value
+    .filter(o => o.latitude != null && o.longitude != null)
+    .forEach(o => {
+      points.push({
+        uuid: o.uuid,
+        name: o.product_name || '',
+        latitude: Number(o.latitude),
+        longitude: Number(o.longitude),
+        type: 'offer',
+      })
+    })
+
+  return points
+})
+
+const onMapSelect = (uuid: string) => {
+  const offer = offers.value.find(o => o.uuid === uuid)
+  if (offer) onSelectOffer(offer)
+}
+
+const onSelectOffer = (offer: NearestOffer) => {
+  const productUuid = offer.product_uuid || offer.productUuid
+  if (offer.uuid && productUuid) {
+    router.push(localePath(`/catalog/offers/${productUuid}?offer=${offer.uuid}`))
+  }
+}
+
+const getOfferStages = (offer: NearestOffer) => {
+  const r = offer.routes?.[0]
+  if (!r?.stages) return []
+  return r.stages
+    .filter((s): s is NonNullable<typeof s> => s !== null)
+    .map(s => ({
+      transportType: s.transport_type,
+      distanceKm: s.distance_km,
+      travelTimeSeconds: s.travel_time_seconds,
+      fromName: s.from_name,
+    }))
+}
+
+const goBack = () => {
+  router.push({
+    path: localePath('/catalog/product'),
+  })
+}
+
+// Search for offers
+const searchOffers = async () => {
+  if (!productUuid.value || !hubUuid.value) return
+  offersLoading.value = true
+  try {
+    // Load hub coordinates
+    const hubData = await execute(GetNodeDocument, { uuid: hubUuid.value }, 'public', 'geo')
+    const hub = hubData?.node
+    if (!hub?.latitude || !hub?.longitude) {
+      offers.value = []
+      return
+    }
+
+    hubPoint.value = {
+      uuid: hub.uuid,
+      name: hub.name || hubName.value || '',
+      latitude: Number(hub.latitude),
+      longitude: Number(hub.longitude),
+    }
+
+    // Search nearest offers
+    const data = await execute(
+      NearestOffersDocument,
+      {
+        lat: hub.latitude,
+        lon: hub.longitude,
+        productUuid: productUuid.value,
+        hubUuid: hubUuid.value,
+        limit: 20,
+      },
+      'public',
+      'geo'
+    )
+
+    offers.value = (data?.nearest_offers || []).filter((o): o is NearestOffer => o !== null)
+  } finally {
+    offersLoading.value = false
+  }
+}
+
+onMounted(() => {
+  searchOffers()
+})
+
+useHead(() => ({
+  title: t('catalog.steps.results')
+}))
+</script>
diff --git a/i18n/locales/en/catalog.json b/i18n/locales/en/catalog.json
index ad5225e..32d4e4f 100644
--- a/i18n/locales/en/catalog.json
+++ b/i18n/locales/en/catalog.json
@@ -87,7 +87,8 @@
       "selectSupplier": "Select supplier",
       "enterQty": "Quantity (t)",
       "search": "Search",
-      "clear": "Clear"
+      "clear": "Clear",
+      "findOffers": "Find offers"
     },
     "explore": {
       "title": "Explore the market",
@@ -95,6 +96,14 @@
     },
     "offers": "offer | offers",
     "list": "List",
-    "applyFilter": "Apply filter"
+    "applyFilter": "Apply filter",
+    "step": "Step {n}",
+    "steps": {
+      "selectProduct": "What are you looking for?",
+      "selectDestination": "Where to deliver?",
+      "setQuantity": "How much do you need?",
+      "results": "Results",
+      "newSearch": "New search"
+    }
   }
 }
\ No newline at end of file
diff --git a/i18n/locales/ru/catalog.json b/i18n/locales/ru/catalog.json
index 62379b8..2091329 100644
--- a/i18n/locales/ru/catalog.json
+++ b/i18n/locales/ru/catalog.json
@@ -87,7 +87,8 @@
       "selectSupplier": "Выберите поставщика",
       "enterQty": "Количество (т)",
       "search": "Найти",
-      "clear": "Очистить"
+      "clear": "Очистить",
+      "findOffers": "Найти предложения"
     },
     "explore": {
       "title": "Исследуйте рынок",
@@ -95,6 +96,14 @@
     },
     "offers": "предложение | предложения | предложений",
     "list": "Список",
-    "applyFilter": "Применить фильтр"
+    "applyFilter": "Применить фильтр",
+    "step": "Шаг {n}",
+    "steps": {
+      "selectProduct": "Что ищете?",
+      "selectDestination": "Куда доставить?",
+      "setQuantity": "Сколько нужно?",
+      "results": "Результаты",
+      "newSearch": "Новый поиск"
+    }
   }
 }
\ No newline at end of file