WIP jordan

app/components/quotes/auto/SetupStep.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { AutoQuoteDraft, AutoQuoteMode, AutoQuoteSegment } from '~/types/auto-quote-intake'
+
+const props = defineProps<{
+  draft: AutoQuoteDraft
+  modeCards: { id: AutoQuoteMode; title: string; hint: string; icon: string }[]
+  segmentCards: { id: AutoQuoteSegment; title: string; hint: string; icon: string }[]
+}>()
+
+function setMode(m: AutoQuoteMode) {
+  props.draft.quoteMode = m
+}
+
+function setSegment(s: AutoQuoteSegment) {
+  props.draft.segment = s
+}
+
+/** Mount vehicle + selects after first paint — avoids blocking the main thread when the route opens */
+const showDetails = ref(false)
+onMounted(() => {
+  requestAnimationFrame(() => {
+    showDetails.value = true
+  })
+})
+</script>
+
+<template>
+  <div class="space-y-10">
+    <section class="space-y-4">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">How can I help?</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Single quote or comparative — same workflow; comparative opens the comparison sheet after you send requests.</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-2">
+        <button
+          v-for="card in modeCards"
+          :key="card.id"
+          type="button"
+          class="group rounded-xl border p-5 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.quoteMode === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setMode(card.id)"
+        >
+          <div class="flex items-start gap-3">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--brand-faint)] text-[var(--brand)]"
+            >
+              <UIcon :name="card.icon" class="h-5 w-5" />
+            </div>
+            <div class="min-w-0">
+              <p class="font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+              <p class="mt-1 text-sm text-[var(--text-muted)]">{{ card.hint }}</p>
+            </div>
+          </div>
+        </button>
+      </div>
+    </section>
+
+    <section class="space-y-4 border-t border-[var(--sidebar-border)] pt-10">
+      <div>
+        <h3 class="text-base font-semibold text-[var(--text-primary)]">Policy type</h3>
+        <p class="mt-1 text-sm text-[var(--text-muted)]">Who is this policy for?</p>
+      </div>
+      <div class="grid gap-3 sm:grid-cols-3">
+        <button
+          v-for="card in segmentCards"
+          :key="card.id"
+          type="button"
+          class="rounded-xl border p-4 text-left transition focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]"
+          :class="
+            draft.segment === card.id
+              ? 'border-[var(--brand)] bg-[var(--brand-soft)] ring-1 ring-[var(--brand)]/30'
+              : 'border-[var(--sidebar-border)] bg-[var(--surface)] hover:border-[var(--brand)]/40'
+          "
+          @click="setSegment(card.id)"
+        >
+          <UIcon :name="card.icon" class="h-7 w-7 text-[var(--brand)]" />
+          <p class="mt-2 font-semibold text-[var(--text-primary)]">{{ card.title }}</p>
+          <p class="mt-0.5 text-xs text-[var(--text-muted)]">{{ card.hint }}</p>
+        </button>
+      </div>
+    </section>
+
+    <section class="border-t border-[var(--sidebar-border)] pt-10">
+      <QuotesAutoCustomerVehicleStep v-if="showDetails" :draft="draft" :segment="draft.segment" />
+      <div
+        v-else
+        class="min-h-[14rem] rounded-xl bg-[var(--sidebar-border)]/25 animate-pulse"
+        aria-busy="true"
+        aria-label="Loading form"
+      />
+    </section>
+  </div>
+</template>