{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "freight-quote-calculator",
  "title": "Freight Quote Calculator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/freight-quote-calculator/FreightQuoteCalculator.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  ArrowLeftRight,\n  ArrowRight,\n  Boxes,\n  Check,\n  CheckCircle2,\n  Clock,\n  Download,\n  FileText,\n  Info,\n  Leaf,\n  Package,\n  Plane,\n  Scale,\n  Ship,\n  Truck,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\n\ninterface Props {\n  initialOrigin?: string\n  initialDestination?: string\n  initialPallets?: number\n  initialLengthCm?: number\n  initialWidthCm?: number\n  initialHeightCm?: number\n  initialGrossWeightKg?: number\n  initialCurrency?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialOrigin: 'CNSHA',\n  initialDestination: 'USLAX',\n  initialPallets: 6,\n  initialLengthCm: 120,\n  initialWidthCm: 80,\n  initialHeightCm: 160,\n  initialGrossWeightKg: 400,\n  initialCurrency: 'USD',\n})\n\n// Route Ports & Hubs\nconst ORIGIN_PORTS = [\n  { code: 'CNSHA', name: 'Shanghai Port (CNSHA)', country: 'China', type: 'Marine & Air' },\n  { code: 'CNNGB', name: 'Ningbo-Zhoushan Port (CNNGB)', country: 'China', type: 'Marine Port' },\n  { code: 'SGSIN', name: 'Port of Singapore (SGSIN)', country: 'Singapore', type: 'Hub Port' },\n  { code: 'DEHAM', name: 'Port of Hamburg (DEHAM)', country: 'Germany', type: 'Marine & Rail' },\n  { code: 'NLRTM', name: 'Port of Rotterdam (NLRTM)', country: 'Netherlands', type: 'Main Gateway' },\n  { code: 'JPTYO', name: 'Port of Tokyo (JPTYO)', country: 'Japan', type: 'Marine & Air' },\n]\n\nconst DESTINATION_PORTS = [\n  { code: 'USLAX', name: 'Port of Los Angeles (USLAX)', country: 'United States', type: 'West Coast Gateway' },\n  { code: 'USNYC', name: 'Port of New York & New Jersey (USNYC)', country: 'United States', type: 'East Coast Hub' },\n  { code: 'USORD', name: 'Chicago O’Hare Logistics Hub (USORD)', country: 'United States', type: 'Inland Hub' },\n  { code: 'GBFXT', name: 'Port of Felixstowe (GBFXT)', country: 'United Kingdom', type: 'Deep Sea Port' },\n  { code: 'AUMEL', name: 'Port of Melbourne (AUMEL)', country: 'Australia', type: 'Marine Port' },\n  { code: 'AEJEA', name: 'Jebel Ali Port (AEJEA)', country: 'United Arab Emirates', type: 'Middle East Hub' },\n]\n\n// Currencies\ninterface CurrencyConfig {\n  code: string\n  symbol: string\n  label: string\n  rate: number // USD to currency\n}\n\nconst CURRENCIES: Record<string, CurrencyConfig> = {\n  USD: { code: 'USD', symbol: '$', label: 'USD ($)', rate: 1.0 },\n  EUR: { code: 'EUR', symbol: '€', label: 'EUR (€)', rate: 0.92 },\n  GBP: { code: 'GBP', symbol: '£', label: 'GBP (£)', rate: 0.79 },\n  CNY: { code: 'CNY', symbol: '¥', label: 'CNY (¥)', rate: 7.23 },\n  SGD: { code: 'SGD', symbol: 'S$', label: 'SGD (S$)', rate: 1.34 },\n}\n\n// Reactive Form State\nconst origin = ref(props.initialOrigin)\nconst destination = ref(props.initialDestination)\nconst pallets = ref(props.initialPallets)\nconst lengthCm = ref(props.initialLengthCm)\nconst widthCm = ref(props.initialWidthCm)\nconst heightCm = ref(props.initialHeightCm)\nconst grossWeightKg = ref(props.initialGrossWeightKg)\nconst selectedCurrency = ref(props.initialCurrency)\n\n// Add-on Services\nconst addCustoms = ref(false)\nconst addInsurance = ref(false)\nconst addLiftgate = ref(false)\n\n// Selected Freight Quote Option\ntype FreightMode = 'ocean-fcl' | 'ocean-lcl' | 'air' | 'ground'\nconst selectedMode = ref<FreightMode>('ocean-fcl')\n\n// UI Feedback States\nconst isBooked = ref(false)\nconst isDownloading = ref(false)\n\nfunction swapRoute() {\n  const temp = origin.value\n  origin.value = destination.value\n  destination.value = temp\n}\n\n// Calculations\n// 1. Single pallet volume in CBM = (L * W * H) / 1,000,000\nconst singlePalletVolumeCbm = computed(() => {\n  const l = Number(lengthCm.value) || 0\n  const w = Number(widthCm.value) || 0\n  const h = Number(heightCm.value) || 0\n  return (l * w * h) / 1_000_000\n})\n\n// 2. Total Volume in CBM\nconst totalVolumeCbm = computed(() => {\n  const count = Number(pallets.value) || 0\n  return count * singlePalletVolumeCbm.value\n})\n\n// 3. Total Actual Gross Weight in KG\nconst totalGrossWeightKg = computed(() => {\n  const count = Number(pallets.value) || 0\n  const unitWeight = Number(grossWeightKg.value) || 0\n  return count * unitWeight\n})\n\n// 4. Air Volumetric Chargeable Weight (IATA 1 CBM = 166.67 kg)\nconst airVolumetricWeightKg = computed(() => {\n  return Math.round(totalVolumeCbm.value * (1000 / 6)) // 1 CBM = 166.6667 kg -> 9.216 * 166.6667 = 1536 kg\n})\n\n// 5. Mode-Specific Chargeable Weight\nconst chargeableWeightKg = computed(() => {\n  return Math.max(totalGrossWeightKg.value, airVolumetricWeightKg.value)\n})\n\n// Currency Formatting Helper\nconst currentCurrency = computed(() => CURRENCIES[selectedCurrency.value] ?? CURRENCIES.USD)\n\nfunction formatMoney(amountInUsd: number): string {\n  const converted = amountInUsd * currentCurrency.value.rate\n  return new Intl.NumberFormat('en-US', {\n    style: 'currency',\n    currency: currentCurrency.value.code,\n    minimumFractionDigits: 2,\n    maximumFractionDigits: 2,\n  }).format(converted)\n}\n\n// Base USD Pricing calculation based on volume, weight, pallets\nconst fclContainersCount = computed(() => Math.max(1, Math.ceil(pallets.value / 10)))\n\n// Option 1: Ocean FCL 20ft Container\nconst oceanFclBaseUsd = computed(() => {\n  // 1x 20ft container handles up to 10 pallets / 28 CBM: $2,850.00 baseline\n  return fclContainersCount.value * 2850\n})\n\n// Option 2: Ocean LCL (Shared Container by CBM)\nconst oceanLclBaseUsd = computed(() => {\n  // $140 per CBM + $130 CFS handling/consolidation\n  const cbm = totalVolumeCbm.value || 1\n  return Math.round(cbm * 140 + 130)\n})\n\n// Option 3: Express Air Freight (by Air Volumetric / Chargeable kg)\nconst airFreightBaseUsd = computed(() => {\n  // $4.18 per kg of air volumetric chargeable weight\n  const weight = airVolumetricWeightKg.value || 100\n  return Math.round(weight * 4.18)\n})\n\n// Option 4: Ground Freight Trucking (LTL / Pallet rate)\nconst groundFreightBaseUsd = computed(() => {\n  const count = Number(pallets.value) || 1\n  return count * 265\n})\n\n// Value-added services in USD\nconst CUSTOMS_USD = 150\nconst INSURANCE_USD = 85\nconst LIFTGATE_USD = 50\n\nconst addonsTotalUsd = computed(() => {\n  let sum = 0\n  if (addCustoms.value) sum += CUSTOMS_USD\n  if (addInsurance.value) sum += INSURANCE_USD\n  if (addLiftgate.value) sum += LIFTGATE_USD\n  return sum\n})\n\n// Active Selected Option Calculations\nconst activeBasePriceUsd = computed(() => {\n  switch (selectedMode.value) {\n    case 'ocean-fcl':\n      return oceanFclBaseUsd.value\n    case 'ocean-lcl':\n      return oceanLclBaseUsd.value\n    case 'air':\n      return airFreightBaseUsd.value\n    case 'ground':\n      return groundFreightBaseUsd.value\n    default:\n      return oceanFclBaseUsd.value\n  }\n})\n\nconst activeTotalPriceUsd = computed(() => {\n  return activeBasePriceUsd.value + addonsTotalUsd.value\n})\n\nconst activeTransitTime = computed(() => {\n  switch (selectedMode.value) {\n    case 'ocean-fcl':\n      return '14-18 days'\n    case 'ocean-lcl':\n      return '18-22 days'\n    case 'air':\n      return '3-5 days'\n    case 'ground':\n      return '5-7 days'\n  }\n})\n\nconst activeCarbonEmission = computed(() => {\n  switch (selectedMode.value) {\n    case 'ocean-fcl':\n      return `${(1.2 * fclContainersCount.value).toFixed(1)} tCO2`\n    case 'ocean-lcl':\n      return `${(totalVolumeCbm.value * 0.087).toFixed(1)} tCO2`\n    case 'air':\n      return `${(airVolumetricWeightKg.value * 0.003125).toFixed(1)} tCO2`\n    case 'ground':\n      return `${(pallets.value * 0.26).toFixed(1)} tCO2`\n  }\n})\n\nfunction handleBookQuote() {\n  isBooked.value = true\n  setTimeout(() => {\n    isBooked.value = false\n  }, 3500)\n}\n\nfunction handleDownloadPdf() {\n  isDownloading.value = true\n  setTimeout(() => {\n    isDownloading.value = false\n  }, 2000)\n}\n</script>\n\n<template>\n  <div\n    data-slot=\"freight-quote-calculator\"\n    :class=\"cn('mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8', props.class)\"\n  >\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex items-center gap-2\">\n          <Badge variant=\"outline\" class=\"gap-1.5 px-2.5 py-0.5 text-xs font-medium\">\n            <Boxes class=\"text-primary size-3.5\" />\n            Multimodal Logistics\n          </Badge>\n          <Badge variant=\"secondary\" class=\"text-xs font-normal\"> Spot Rates Live </Badge>\n        </div>\n        <h2 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n          Freight Rate &amp; Cargo Quote Calculator\n        </h2>\n        <p class=\"text-muted-foreground text-sm\">\n          Compare spot rates across Ocean FCL/LCL, Air Freight, and Ground Trucking with instant CBM volumetric\n          analysis.\n        </p>\n      </div>\n\n      <!-- Currency Selector -->\n      <div class=\"flex items-center gap-2 sm:self-start\">\n        <span class=\"text-muted-foreground text-xs font-medium\">Currency:</span>\n        <Select v-model=\"selectedCurrency\">\n          <SelectTrigger class=\"w-[125px] text-xs font-medium\">\n            <SelectValue :placeholder=\"selectedCurrency\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\">\n            <SelectItem v-for=\"curr in CURRENCIES\" :key=\"curr.code\" :value=\"curr.code\" class=\"text-xs\">\n              {{ curr.label }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n    </div>\n\n    <!-- Main 2-Column Layout -->\n    <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-start\">\n      <!-- Left Column: Input Form & Volumetric Calculator (7 cols) -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <!-- 1. Route Configuration Card -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">1. Shipping Route</CardTitle>\n              <span class=\"text-muted-foreground text-xs font-medium\">International Corridors</span>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Select origin loading port and destination discharge terminal.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-[1fr,auto,1fr] sm:items-end\">\n              <!-- Origin -->\n              <div class=\"space-y-1.5\">\n                <label for=\"route-origin\" class=\"text-foreground text-xs font-medium\"> Origin (Port / Hub) </label>\n                <Select v-model=\"origin\">\n                  <SelectTrigger id=\"route-origin\" class=\"text-xs [&_svg]:shrink-0 [&>span]:truncate\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem v-for=\"p in ORIGIN_PORTS\" :key=\"p.code\" :value=\"p.code\" class=\"text-xs\">\n                      {{ p.name }}\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <!-- Swap Button -->\n              <div class=\"flex justify-center pb-0.5 sm:pb-0\">\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"icon\"\n                  class=\"size-9 shrink-0\"\n                  aria-label=\"Swap Origin and Destination\"\n                  @click=\"swapRoute\"\n                >\n                  <ArrowLeftRight class=\"size-4\" />\n                </Button>\n              </div>\n\n              <!-- Destination -->\n              <div class=\"space-y-1.5\">\n                <label for=\"route-destination\" class=\"text-foreground text-xs font-medium\">\n                  Destination (Port / Hub)\n                </label>\n                <Select v-model=\"destination\">\n                  <SelectTrigger id=\"route-destination\" class=\"text-xs [&_svg]:shrink-0 [&>span]:truncate\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem v-for=\"p in DESTINATION_PORTS\" :key=\"p.code\" :value=\"p.code\" class=\"text-xs\">\n                      {{ p.name }}\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n\n            <!-- Route Info Banner -->\n            <div\n              class=\"bg-muted/40 border-border/80 flex flex-wrap items-center justify-between rounded-lg border px-3 py-2 text-xs\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <Ship class=\"text-primary size-4 shrink-0\" />\n                <span class=\"text-foreground font-medium\">Transpacific Direct Corridor</span>\n              </div>\n              <span class=\"text-muted-foreground tabular-nums\">Distance: ~5,800 NM (10,740 km)</span>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- 2. Cargo Type & Mode Selector -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">2. Cargo Freight Mode</CardTitle>\n              <span class=\"text-muted-foreground text-xs\">Select primary transport</span>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Choose your preferred multimodal transit mode to evaluate rates.\n            </CardDescription>\n          </CardHeader>\n          <CardContent>\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <!-- Ocean FCL -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'border-border focus-visible:ring-ring relative flex flex-col justify-between gap-3 rounded-lg border p-3.5 text-left transition-colors outline-none focus-visible:ring-2',\n                    selectedMode === 'ocean-fcl'\n                      ? 'border-primary bg-primary/5 ring-primary ring-1'\n                      : 'hover:border-border/80 hover:bg-muted/30 bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'ocean-fcl'\"\n              >\n                <div class=\"flex w-full items-start justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n                    <Ship class=\"size-4\" />\n                  </div>\n                  <Badge variant=\"default\" class=\"text-xs\">Recommended</Badge>\n                </div>\n                <div>\n                  <div class=\"text-foreground text-sm font-semibold\">Ocean FCL (Full Container)</div>\n                  <div class=\"text-muted-foreground mt-0.5 text-xs\">20ft / 40ft dedicated sea freight container</div>\n                </div>\n                <div class=\"border-border/50 flex w-full items-center justify-between border-t pt-1 text-xs\">\n                  <span class=\"text-muted-foreground\">Est. Transit: 14-18 days</span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">{{ formatMoney(oceanFclBaseUsd) }}</span>\n                </div>\n              </button>\n\n              <!-- Ocean LCL -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'border-border focus-visible:ring-ring relative flex flex-col justify-between gap-3 rounded-lg border p-3.5 text-left transition-colors outline-none focus-visible:ring-2',\n                    selectedMode === 'ocean-lcl'\n                      ? 'border-primary bg-primary/5 ring-primary ring-1'\n                      : 'hover:border-border/80 hover:bg-muted/30 bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'ocean-lcl'\"\n              >\n                <div class=\"flex w-full items-start justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n                    <Boxes class=\"size-4\" />\n                  </div>\n                  <Badge variant=\"outline\" class=\"text-xs font-normal\">Economy</Badge>\n                </div>\n                <div>\n                  <div class=\"text-foreground text-sm font-semibold\">Ocean LCL (Shared)</div>\n                  <div class=\"text-muted-foreground mt-0.5 text-xs\">Consolidated sea freight priced by CBM volume</div>\n                </div>\n                <div class=\"border-border/50 flex w-full items-center justify-between border-t pt-1 text-xs\">\n                  <span class=\"text-muted-foreground\">Est. Transit: 18-22 days</span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">{{ formatMoney(oceanLclBaseUsd) }}</span>\n                </div>\n              </button>\n\n              <!-- Express Air Freight -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'border-border focus-visible:ring-ring relative flex flex-col justify-between gap-3 rounded-lg border p-3.5 text-left transition-colors outline-none focus-visible:ring-2',\n                    selectedMode === 'air'\n                      ? 'border-primary bg-primary/5 ring-primary ring-1'\n                      : 'hover:border-border/80 hover:bg-muted/30 bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'air'\"\n              >\n                <div class=\"flex w-full items-start justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n                    <Plane class=\"size-4\" />\n                  </div>\n                  <Badge variant=\"secondary\" class=\"text-xs\">Fastest</Badge>\n                </div>\n                <div>\n                  <div class=\"text-foreground text-sm font-semibold\">Express Air Freight</div>\n                  <div class=\"text-muted-foreground mt-0.5 text-xs\">Priority belly/freighter aircraft dispatch</div>\n                </div>\n                <div class=\"border-border/50 flex w-full items-center justify-between border-t pt-1 text-xs\">\n                  <span class=\"text-muted-foreground\">Est. Transit: 3-5 days</span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">{{ formatMoney(airFreightBaseUsd) }}</span>\n                </div>\n              </button>\n\n              <!-- Ground Freight -->\n              <button\n                type=\"button\"\n                :class=\"\n                  cn(\n                    'border-border focus-visible:ring-ring relative flex flex-col justify-between gap-3 rounded-lg border p-3.5 text-left transition-colors outline-none focus-visible:ring-2',\n                    selectedMode === 'ground'\n                      ? 'border-primary bg-primary/5 ring-primary ring-1'\n                      : 'hover:border-border/80 hover:bg-muted/30 bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'ground'\"\n              >\n                <div class=\"flex w-full items-start justify-between\">\n                  <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n                    <Truck class=\"size-4\" />\n                  </div>\n                  <Badge variant=\"outline\" class=\"text-xs font-normal\">Overland</Badge>\n                </div>\n                <div>\n                  <div class=\"text-foreground text-sm font-semibold\">Ground Freight</div>\n                  <div class=\"text-muted-foreground mt-0.5 text-xs\">\n                    Regional linehaul, FTL &amp; pallet LTL trucking\n                  </div>\n                </div>\n                <div class=\"border-border/50 flex w-full items-center justify-between border-t pt-1 text-xs\">\n                  <span class=\"text-muted-foreground\">Est. Transit: 5-7 days</span>\n                  <span class=\"text-foreground font-semibold tabular-nums\">{{\n                    formatMoney(groundFreightBaseUsd)\n                  }}</span>\n                </div>\n              </button>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- 3. Package Dimensions & Volumetric CBM Calculator -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">3. Cargo Dimensions &amp; Volumetric Weight</CardTitle>\n              <Badge variant=\"outline\" class=\"gap-1 text-xs font-normal\">\n                <Scale class=\"text-primary size-3\" />\n                IATA 1:6 Standard\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Enter pallet quantity, unit dimensions, and individual gross weight.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-5\">\n            <!-- Dimensions Inputs Grid -->\n            <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-5\">\n              <div class=\"col-span-2 space-y-1.5 sm:col-span-1\">\n                <label for=\"dim-pallets\" class=\"text-foreground text-xs font-medium\">Quantity</label>\n                <div class=\"relative\">\n                  <Input\n                    id=\"dim-pallets\"\n                    v-model.number=\"pallets\"\n                    type=\"number\"\n                    min=\"1\"\n                    max=\"100\"\n                    class=\"pr-8 text-xs tabular-nums\"\n                  />\n                  <span class=\"text-muted-foreground absolute top-1/2 right-2.5 -translate-y-1/2 text-xs\">pal</span>\n                </div>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <label for=\"dim-length\" class=\"text-foreground text-xs font-medium\">Length (L)</label>\n                <div class=\"relative\">\n                  <Input\n                    id=\"dim-length\"\n                    v-model.number=\"lengthCm\"\n                    type=\"number\"\n                    min=\"10\"\n                    max=\"1000\"\n                    class=\"pr-8 text-xs tabular-nums\"\n                  />\n                  <span class=\"text-muted-foreground absolute top-1/2 right-2.5 -translate-y-1/2 text-xs\">cm</span>\n                </div>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <label for=\"dim-width\" class=\"text-foreground text-xs font-medium\">Width (W)</label>\n                <div class=\"relative\">\n                  <Input\n                    id=\"dim-width\"\n                    v-model.number=\"widthCm\"\n                    type=\"number\"\n                    min=\"10\"\n                    max=\"1000\"\n                    class=\"pr-8 text-xs tabular-nums\"\n                  />\n                  <span class=\"text-muted-foreground absolute top-1/2 right-2.5 -translate-y-1/2 text-xs\">cm</span>\n                </div>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <label for=\"dim-height\" class=\"text-foreground text-xs font-medium\">Height (H)</label>\n                <div class=\"relative\">\n                  <Input\n                    id=\"dim-height\"\n                    v-model.number=\"heightCm\"\n                    type=\"number\"\n                    min=\"10\"\n                    max=\"1000\"\n                    class=\"pr-8 text-xs tabular-nums\"\n                  />\n                  <span class=\"text-muted-foreground absolute top-1/2 right-2.5 -translate-y-1/2 text-xs\">cm</span>\n                </div>\n              </div>\n\n              <div class=\"col-span-2 space-y-1.5 sm:col-span-1\">\n                <label for=\"dim-weight\" class=\"text-foreground text-xs font-medium\">Weight/Pallet</label>\n                <div class=\"relative\">\n                  <Input\n                    id=\"dim-weight\"\n                    v-model.number=\"grossWeightKg\"\n                    type=\"number\"\n                    min=\"1\"\n                    max=\"5000\"\n                    class=\"pr-8 text-xs tabular-nums\"\n                  />\n                  <span class=\"text-muted-foreground absolute top-1/2 right-2.5 -translate-y-1/2 text-xs\">kg</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Computed Volumetric Display Cards -->\n            <div class=\"border-border/80 bg-muted/30 space-y-3 rounded-lg border p-4\">\n              <div class=\"flex flex-wrap items-center justify-between text-xs\">\n                <span class=\"text-foreground flex items-center gap-1.5 font-semibold\">\n                  <Package class=\"text-primary size-3.5\" />\n                  Cargo Metric Computations\n                </span>\n                <span class=\"text-muted-foreground\">Standard Euro/US Pallet Basis</span>\n              </div>\n\n              <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n                <!-- Metric 1: Total Volume -->\n                <div class=\"bg-card border-border/80 rounded-md border p-2.5\">\n                  <div class=\"text-muted-foreground text-xs\">Total Volume</div>\n                  <div class=\"text-foreground mt-0.5 text-lg font-bold tabular-nums\">\n                    {{ totalVolumeCbm.toFixed(2) }} <span class=\"text-muted-foreground text-xs font-normal\">CBM</span>\n                  </div>\n                  <div class=\"text-muted-foreground mt-1 text-xs\">{{ singlePalletVolumeCbm.toFixed(2) }} m³ / unit</div>\n                </div>\n\n                <!-- Metric 2: Actual Gross Weight -->\n                <div class=\"bg-card border-border/80 rounded-md border p-2.5\">\n                  <div class=\"text-muted-foreground text-xs\">Actual Gross Wt.</div>\n                  <div class=\"text-foreground mt-0.5 text-lg font-bold tabular-nums\">\n                    {{ totalGrossWeightKg.toLocaleString('en-US') }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">kg</span>\n                  </div>\n                  <div class=\"text-muted-foreground mt-1 text-xs\">{{ pallets }} × {{ grossWeightKg }} kg</div>\n                </div>\n\n                <!-- Metric 3: Air Volumetric Weight -->\n                <div class=\"bg-card border-border/80 rounded-md border p-2.5\">\n                  <div class=\"text-muted-foreground text-xs\">Chargeable Wt. (Air)</div>\n                  <div class=\"text-foreground mt-0.5 text-lg font-bold tabular-nums\">\n                    {{ airVolumetricWeightKg.toLocaleString('en-US') }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">kg</span>\n                  </div>\n                  <div class=\"text-muted-foreground mt-1 text-xs\">Volumetric (1:6000)</div>\n                </div>\n\n                <!-- Metric 4: Ocean Revenue Ton -->\n                <div class=\"bg-card border-border/80 rounded-md border p-2.5\">\n                  <div class=\"text-muted-foreground text-xs\">Ocean Revenue Ton</div>\n                  <div class=\"text-foreground mt-0.5 text-lg font-bold tabular-nums\">\n                    {{ Math.max(totalVolumeCbm, totalGrossWeightKg / 1000).toFixed(2) }}\n                    <span class=\"text-muted-foreground text-xs font-normal\">RT</span>\n                  </div>\n                  <div class=\"text-muted-foreground mt-1 text-xs\">Max(CBM, Weight/T)</div>\n                </div>\n              </div>\n\n              <!-- Note -->\n              <p class=\"text-muted-foreground flex items-center gap-1.5 pt-1 text-xs\">\n                <Info class=\"text-primary size-3.5 shrink-0\" />\n                <span\n                  >Computed Total Volume ({{ totalVolumeCbm.toFixed(2) }} CBM) &amp; Chargeable Weight ({{\n                    airVolumetricWeightKg.toLocaleString('en-US')\n                  }}\n                  kg) apply dynamically to quotes.</span\n                >\n              </p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- 4. Value-Added Services -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <CardTitle class=\"text-base font-semibold\">4. Value-Added Freight Services</CardTitle>\n              <span class=\"text-muted-foreground text-xs font-medium\">Optional Add-ons</span>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Enhance shipment handling with customs, all-risk insurance, and destination equipment.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-3\">\n            <!-- Service 1: Customs Clearance -->\n            <label\n              class=\"border-border hover:border-primary/40 bg-card flex cursor-pointer items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors\"\n            >\n              <div class=\"flex items-start gap-3\">\n                <Checkbox :model-value=\"addCustoms\" @update:model-value=\"(val) => (addCustoms = Boolean(val))\" />\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-medium\">Customs Clearance</span>\n                    <Badge variant=\"outline\" class=\"text-xs font-normal tabular-nums\">\n                      +{{ formatMoney(CUSTOMS_USD) }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Export filing, ISF 10+2 documentation, automated customs broker import clearance.\n                  </p>\n                </div>\n              </div>\n            </label>\n\n            <!-- Service 2: Cargo Insurance -->\n            <label\n              class=\"border-border hover:border-primary/40 bg-card flex cursor-pointer items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors\"\n            >\n              <div class=\"flex items-start gap-3\">\n                <Checkbox :model-value=\"addInsurance\" @update:model-value=\"(val) => (addInsurance = Boolean(val))\" />\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-medium\">All-Risk Cargo Insurance</span>\n                    <Badge variant=\"outline\" class=\"text-xs font-normal tabular-nums\">\n                      +{{ formatMoney(INSURANCE_USD) }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Comprehensive door-to-door insurance coverage up to $100,000 against damage or loss.\n                  </p>\n                </div>\n              </div>\n            </label>\n\n            <!-- Service 3: Liftgate Delivery -->\n            <label\n              class=\"border-border hover:border-primary/40 bg-card flex cursor-pointer items-start justify-between gap-3 rounded-lg border p-3.5 transition-colors\"\n            >\n              <div class=\"flex items-start gap-3\">\n                <Checkbox :model-value=\"addLiftgate\" @update:model-value=\"(val) => (addLiftgate = Boolean(val))\" />\n                <div class=\"space-y-0.5\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-foreground text-sm font-medium\">Liftgate at Delivery</span>\n                    <Badge variant=\"outline\" class=\"text-xs font-normal tabular-nums\">\n                      +{{ formatMoney(LIFTGATE_USD) }}\n                    </Badge>\n                  </div>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Hydraulic liftgate truck delivery for destinations without a dedicated loading dock.\n                  </p>\n                </div>\n              </div>\n            </label>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Sticky Instant Rate Quotes Card (5 cols) -->\n      <div class=\"space-y-6 lg:sticky lg:top-8 lg:col-span-5\">\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Instant Spot Rates\n              </span>\n              <Badge variant=\"default\" class=\"gap-1 text-xs\">\n                <Zap class=\"size-3\" />\n                Live Quote\n              </Badge>\n            </div>\n\n            <!-- Route Preview -->\n            <div class=\"border-border/60 mt-2 flex flex-wrap items-center justify-between border-b pb-3 text-xs\">\n              <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <span>{{ origin }}</span>\n                <ArrowRight class=\"text-muted-foreground size-3\" />\n                <span>{{ destination }}</span>\n              </div>\n              <span class=\"text-muted-foreground tabular-nums\"\n                >{{ pallets }} Pallets · {{ totalVolumeCbm.toFixed(2) }} CBM</span\n              >\n            </div>\n\n            <!-- Primary Selected Quote Header -->\n            <div class=\"mt-4 space-y-1\">\n              <div class=\"text-muted-foreground text-xs font-medium\">Total Estimated Landed Freight Cost</div>\n              <div class=\"flex items-baseline gap-2\">\n                <span class=\"text-foreground text-4xl font-bold tracking-tight tabular-nums\">\n                  {{ formatMoney(activeTotalPriceUsd) }}\n                </span>\n                <span class=\"text-muted-foreground text-xs font-medium\"> ({{ currentCurrency.code }}) </span>\n              </div>\n              <div class=\"text-muted-foreground flex items-center gap-3 pt-1 text-xs\">\n                <span class=\"flex items-center gap-1\">\n                  <Clock class=\"text-primary size-3\" />\n                  Transit: {{ activeTransitTime }}\n                </span>\n                <span>·</span>\n                <span class=\"flex items-center gap-1\">\n                  <Leaf class=\"text-success size-3\" />\n                  Est. {{ activeCarbonEmission }}\n                </span>\n              </div>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 pt-0\">\n            <!-- Rate Quotes Comparison Cards -->\n            <div class=\"space-y-2\">\n              <span class=\"text-foreground text-xs font-semibold tracking-wider uppercase\">\n                Compare Multimodal Options:\n              </span>\n\n              <!-- Option 1: Ocean FCL -->\n              <div\n                :class=\"\n                  cn(\n                    'border-border hover:border-primary/50 cursor-pointer rounded-lg border p-3 transition-colors',\n                    selectedMode === 'ocean-fcl' ? 'border-primary bg-primary/5 ring-primary ring-1' : 'bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'ocean-fcl'\"\n              >\n                <div class=\"flex flex-wrap items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <Ship class=\"text-primary size-4 shrink-0\" />\n                    <div>\n                      <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                        Ocean FCL (20ft Container)\n                        <Badge variant=\"default\" class=\"px-1.5 py-0.5 text-xs\">Recommended</Badge>\n                      </div>\n                      <div class=\"text-muted-foreground text-xs\">Transit: 14-18 days · 1.2 tCO2</div>\n                    </div>\n                  </div>\n                  <div class=\"text-right\">\n                    <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                      {{ formatMoney(oceanFclBaseUsd + addonsTotalUsd) }}\n                    </div>\n                    <div class=\"text-muted-foreground text-xs\">Port-to-Port</div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Option 2: Ocean LCL -->\n              <div\n                :class=\"\n                  cn(\n                    'border-border hover:border-primary/50 cursor-pointer rounded-lg border p-3 transition-colors',\n                    selectedMode === 'ocean-lcl' ? 'border-primary bg-primary/5 ring-primary ring-1' : 'bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'ocean-lcl'\"\n              >\n                <div class=\"flex flex-wrap items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <Boxes class=\"text-primary size-4 shrink-0\" />\n                    <div>\n                      <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                        Ocean LCL (Shared)\n                        <Badge variant=\"outline\" class=\"px-1.5 py-0.5 text-xs font-normal\">Economy</Badge>\n                      </div>\n                      <div class=\"text-muted-foreground text-xs\">Transit: 18-22 days · 0.8 tCO2</div>\n                    </div>\n                  </div>\n                  <div class=\"text-right\">\n                    <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                      {{ formatMoney(oceanLclBaseUsd + addonsTotalUsd) }}\n                    </div>\n                    <div class=\"text-muted-foreground text-xs\">CFS-to-CFS</div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Option 3: Express Air Freight -->\n              <div\n                :class=\"\n                  cn(\n                    'border-border hover:border-primary/50 cursor-pointer rounded-lg border p-3 transition-colors',\n                    selectedMode === 'air' ? 'border-primary bg-primary/5 ring-primary ring-1' : 'bg-card',\n                  )\n                \"\n                @click=\"selectedMode = 'air'\"\n              >\n                <div class=\"flex flex-wrap items-center justify-between\">\n                  <div class=\"flex items-center gap-2\">\n                    <Plane class=\"text-primary size-4 shrink-0\" />\n                    <div>\n                      <div class=\"text-foreground flex items-center gap-1.5 text-xs font-semibold\">\n                        Express Air Freight\n                        <Badge variant=\"secondary\" class=\"px-1.5 py-0.5 text-xs\">Fastest</Badge>\n                      </div>\n                      <div class=\"text-muted-foreground text-xs\">Transit: 3-5 days · 4.8 tCO2</div>\n                    </div>\n                  </div>\n                  <div class=\"text-right\">\n                    <div class=\"text-foreground text-sm font-bold tabular-nums\">\n                      {{ formatMoney(airFreightBaseUsd + addonsTotalUsd) }}\n                    </div>\n                    <div class=\"text-muted-foreground text-xs\">Airport-to-Airport</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Cost Breakdown Table -->\n            <div class=\"space-y-2 text-xs\">\n              <span class=\"text-muted-foreground font-medium tracking-wider uppercase\">Itemized Breakdown</span>\n              <div class=\"space-y-1.5\">\n                <div class=\"flex flex-wrap items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Base Freight Carrier Rate</span>\n                  <span class=\"text-foreground font-medium tabular-nums\">{{ formatMoney(activeBasePriceUsd) }}</span>\n                </div>\n                <div v-if=\"addCustoms\" class=\"flex flex-wrap items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Customs Clearance Service</span>\n                  <span class=\"text-foreground font-medium tabular-nums\">+{{ formatMoney(CUSTOMS_USD) }}</span>\n                </div>\n                <div v-if=\"addInsurance\" class=\"flex flex-wrap items-center justify-between\">\n                  <span class=\"text-muted-foreground\">All-Risk Cargo Insurance</span>\n                  <span class=\"text-foreground font-medium tabular-nums\">+{{ formatMoney(INSURANCE_USD) }}</span>\n                </div>\n                <div v-if=\"addLiftgate\" class=\"flex flex-wrap items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Destination Liftgate Equipment</span>\n                  <span class=\"text-foreground font-medium tabular-nums\">+{{ formatMoney(LIFTGATE_USD) }}</span>\n                </div>\n                <div class=\"text-muted-foreground flex flex-wrap items-center justify-between\">\n                  <span>Bunker / Fuel Surcharge (BAF)</span>\n                  <span class=\"text-success font-medium\">Included</span>\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Trust / Guarantee Points -->\n            <ul class=\"text-muted-foreground space-y-1.5 text-xs\">\n              <li class=\"flex items-center gap-2\">\n                <Check class=\"text-primary size-3.5 shrink-0\" />\n                <span>Rate locked for 7 calendar days</span>\n              </li>\n              <li class=\"flex items-center gap-2\">\n                <Check class=\"text-primary size-3.5 shrink-0\" />\n                <span>IATA &amp; FMC compliant licensed forwarders</span>\n              </li>\n              <li class=\"flex items-center gap-2\">\n                <Check class=\"text-primary size-3.5 shrink-0\" />\n                <span>Automated EDI customs documentation &amp; bill of lading</span>\n              </li>\n            </ul>\n          </CardContent>\n\n          <CardFooter class=\"flex flex-col gap-2.5 pt-2\">\n            <!-- Book Button -->\n            <Button class=\"w-full gap-2 font-semibold shadow-xs\" size=\"lg\" @click=\"handleBookQuote\">\n              <template v-if=\"isBooked\">\n                <CheckCircle2 class=\"text-success size-4\" />\n                Freight Quote Booked!\n              </template>\n              <template v-else>\n                Book Freight Quote\n                <ArrowRight class=\"size-4\" />\n              </template>\n            </Button>\n\n            <!-- Download PDF Button -->\n            <Button\n              aria-label=\"Download attachment\"\n              variant=\"outline\"\n              class=\"w-full gap-2 text-xs\"\n              size=\"default\"\n              @click=\"handleDownloadPdf\"\n            >\n              <Download v-if=\"!isDownloading\" class=\"size-3.5\" />\n              <FileText v-else class=\"size-3.5 animate-pulse\" />\n              {{ isDownloading ? 'Generating PDF Manifest...' : 'Download Detailed Quote PDF' }}\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FreightQuoteCalculator.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Multimodal Air, Ocean, and Ground freight rate estimator with CBM volumetric weight calculation, dynamic route pricing, value-added services, and live comparison quotes.",
  "categories": [
    "logistics",
    "calculator"
  ]
}