@loafmarkets/ui 0.1.359 → 0.1.361

package/dist/index.js

@@ -14,6 +14,8 @@ var md = require('react-icons/md');
 var bi = require('react-icons/bi');
 var fa = require('react-icons/fa');
 var fi = require('react-icons/fi');
+var chart_js = require('chart.js');
+var reactChartjs2 = require('react-chartjs-2');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -183,7 +185,7 @@ var PortfolioSummary = React5__namespace.forwardRef(
     onResetAccount,
     positionsHeading = "Current Positions",
     emptyPositionsText = "No positions yet. Start trading to build your portfolio!",
-    formatCurrency: formatCurrency6 = defaultFormatCurrency,
+    formatCurrency: formatCurrency5 = defaultFormatCurrency,
     formatPercent: formatPercent2 = defaultFormatPercent,
     formatSignedCurrency = defaultFormatSignedCurrency,
     className,
@@ -221,11 +223,11 @@ var PortfolioSummary = React5__namespace.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Available Cash" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency6(availableCash) })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency5(availableCash) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Portfolio Value" }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency6(portfolioValue) })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-[1.25rem] font-semibold text-white", children: formatCurrency5(portfolioValue) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs uppercase tracking-[0.5px] text-white/50", children: "Total Return" }),
@@ -7869,7 +7871,7 @@ var MiniLiveFeed = () => {
     }, 2e3 + Math.random() * 2e3);
     return () => clearInterval(interval);
   }, []);
-  const formatCurrency6 = (amount) => `$${amount.toLocaleString()}`;
+  const formatCurrency5 = (amount) => `$${amount.toLocaleString()}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -7959,7 +7961,7 @@ var MiniLiveFeed = () => {
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", position: "relative", zIndex: 1 }, children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: "var(--color-text-secondary, #848e9c)" }, children: "bought" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", fontWeight: 600, color: "#fff" }, children: formatCurrency6(purchase.amount) })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", fontWeight: 600, color: "#fff" }, children: formatCurrency5(purchase.amount) })
                 ] })
               ]
             },
@@ -8505,7 +8507,8 @@ function GalleryMapSection({
   autoPlayInterval = 4e3,
   hideMap = false,
   hideGallery = false,
-  hideSuburb = false
+  hideSuburb = false,
+  featuresSlot
 }) {
   const [carouselIndex, setCarouselIndex] = React5.useState(0);
   const [showVideo, setShowVideo] = React5.useState(false);
@@ -8598,6 +8601,7 @@ function GalleryMapSection({
         }, children: cat.name }, cat.name);
       }) })
     ] }),
+    featuresSlot,
     !hideMap && /* @__PURE__ */ jsxRuntime.jsxs(MapPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(PanelHeader, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
@@ -9176,24 +9180,23 @@ function PropertyOverview({
       /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "The Asset" }),
       galleryImages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(GallerySpecRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(GallerySpecLeft, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              GalleryMapSection,
-              {
-                images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
-                categories: galleryCategories,
-                propertyLocation: location,
-                videoUrl,
-                tokenName,
-                onPhotoClick: onPhotosClick
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(FeaturesPanel, { children: features.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(AssetFeatureItem, { children: [
-              item.icon && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureIcon, { children: item.icon }),
-              item.value && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureValue, { children: item.value }),
-              /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureLabel, { children: item.label })
-            ] }, i)) })
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(GallerySpecLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            GalleryMapSection,
+            {
+              images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
+              categories: galleryCategories,
+              propertyLocation: location,
+              videoUrl,
+              tokenName,
+              onPhotoClick: onPhotosClick,
+              hideSuburb: true,
+              featuresSlot: /* @__PURE__ */ jsxRuntime.jsx(FeaturesPanel, { children: features.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(AssetFeatureItem, { children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureIcon, { children: item.icon }),
+                item.value && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureValue, { children: item.value }),
+                /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureLabel, { children: item.label })
+              ] }, i)) })
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Asset Specification" }),
             /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
@@ -16325,568 +16328,413 @@ var ActionButton = styled9__default.default.button`
     color: ${({ $variant }) => $variant === "danger" ? "#ff8f8f" : "#f4d07f"};
   }
 `;
-var CHART_WIDTH = 1200;
-var CHART_HEIGHT = 200;
-var CHART_PADDING = 10;
-var FALLBACK_RECENT_SALES = [
-  {
-    imageUrl: "https://images.unsplash.com/photo-1464146072230-91cabc968266?auto=format&fit=crop&w=1200&q=80",
-    price: 165e5,
-    saleDate: "Nov 2024",
-    address: "15 Wentworth Road",
-    suburb: "Vaucluse",
-    bedrooms: 5,
-    bathrooms: 5,
-    landSize: "1,420 sqm"
-  },
-  {
-    imageUrl: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?auto=format&fit=crop&w=1200&q=80",
-    price: 149e5,
-    saleDate: "Sep 2024",
-    address: "42 Vaucluse Road",
-    suburb: "Vaucluse",
-    bedrooms: 4,
-    bathrooms: 4,
-    landSize: "980 sqm"
-  },
-  {
-    imageUrl: "https://images.unsplash.com/photo-1505693314120-0d443867891c?auto=format&fit=crop&w=1200&q=80",
-    price: 1325e4,
-    saleDate: "Jun 2024",
-    address: "18 Olola Avenue",
-    suburb: "Vaucluse",
-    bedrooms: 4,
-    bathrooms: 3,
-    landSize: "860 sqm"
-  }
-];
+chart_js.Chart.register(chart_js.CategoryScale, chart_js.LinearScale, chart_js.PointElement, chart_js.LineElement, chart_js.Title, chart_js.Tooltip, chart_js.Legend);
+var musgraveComparisonData = {
+  labels: ["2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026"],
+  datasets: [
+    {
+      name: "Musgrave",
+      color: "#D4AF37",
+      data: [100, 115, 125, 118, 130, 145, 155, 165, 180, 195, 210, 225, 240, 225, 235, 231, 265, 285, 300, 310, 320]
+    },
+    {
+      name: "ASX 200",
+      color: "#2196f3",
+      data: [100, 113, 110, 69, 89, 93, 83, 95, 101, 109, 98, 110, 118, 114, 137, 129, 136, 146, 150, 166, 170]
+    },
+    {
+      name: "Bank Deposits",
+      color: "#e91e63",
+      data: [100, 107, 114, 119, 124, 131, 137, 142, 146, 150, 154, 157, 160, 163, 164, 165, 167, 174, 182, 190, 198]
+    }
+  ],
+  saleMarkers: [
+    { year: "2006", label: "Purchase", price: "$11.25M", description: "" },
+    { year: "2021", label: "Covid Flash Sale", price: "$13M", description: "Sold at ~50% discount due to Covid uncertainty" },
+    { year: "2026", label: "Offering", price: "$36M", description: "Current offering valuation" }
+  ]
+};
 function PropertyValuation({
-  propertyName,
-  tokenPrice,
-  totalTokens,
-  summary = null,
-  history = [],
-  loading = false,
-  error = null
+  propertyTitle,
+  tokenPriceValue,
+  valSummary,
+  offeringValuationValue,
+  totalUnits
 }) {
-  const now = React5.useMemo(() => /* @__PURE__ */ new Date(), []);
-  const lastPrice = React5.useMemo(() => {
-    const fallback = Number.isFinite(tokenPrice) && tokenPrice > 0 ? tokenPrice : 0;
-    if (!summary?.lastPrice || summary.lastPrice <= 0) {
-      return fallback;
-    }
-    return summary.lastPrice;
-  }, [summary, tokenPrice]);
-  const fairValue = React5.useMemo(() => {
-    if (summary?.fairValue && summary.fairValue > 0) {
-      return summary.fairValue;
-    }
-    return lastPrice || 1;
-  }, [summary, lastPrice]);
-  const tokensOutstanding = React5.useMemo(() => {
-    if (summary?.totalTokens && summary.totalTokens > 0) {
-      return summary.totalTokens;
-    }
-    if (totalTokens && totalTokens > 0) {
-      return totalTokens;
+  const [hoveredSaleYear, setHoveredSaleYear] = React5.useState(null);
+  const gaugePosition = React5.useMemo(() => {
+    const under = valSummary?.undervaluedThreshold;
+    const over = valSummary?.overvaluedThreshold;
+    const price = tokenPriceValue;
+    if (under != null && over != null && price != null && over > under) {
+      const pct = (price - under) / (over - under) * 100;
+      return Math.max(5, Math.min(95, pct));
     }
-    return 5e4;
-  }, [summary, totalTokens]);
-  const undervaluedThreshold = summary?.undervaluedThreshold ?? fairValue * 0.9;
-  const overvaluedThreshold = summary?.overvaluedThreshold ?? fairValue * 1.1;
-  const gaugePosition = calculatePositionFromPrice(lastPrice, undervaluedThreshold, fairValue, overvaluedThreshold);
-  const valuationStatus = summary?.valuationStatus ?? (lastPrice < fairValue ? "Undervalued" : lastPrice > fairValue ? "Overvalued" : "Fair Value");
-  const valuationDelta = summary?.valuationDeltaPercent ?? (lastPrice - fairValue) / fairValue * 100;
-  const valuationDeltaFormatted = `${valuationDelta >= 0 ? "+" : ""}${valuationDelta.toFixed(1)}%`;
-  const { valuationPath, fairValuePath, axisLabels } = React5.useMemo(() => buildChartPaths(history, fairValue), [history, fairValue]);
-  const recentSales = React5.useMemo(() => {
-    if (summary?.recentSales?.length) {
-      return summary.recentSales;
+    return 50;
+  }, [valSummary?.undervaluedThreshold, valSummary?.overvaluedThreshold, tokenPriceValue]);
+  const chartOptions = React5.useMemo(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    onHover: (_event, elements) => {
+      if (elements.length > 0) {
+        const dataIndex = elements[0].index;
+        const year = musgraveComparisonData.labels[dataIndex];
+        if (["2006", "2021", "2026"].includes(year)) {
+          setHoveredSaleYear(year);
+          return;
+        }
+      }
+      setHoveredSaleYear(null);
+    },
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        mode: "index",
+        intersect: false,
+        backgroundColor: "rgba(30, 32, 38, 0.9)",
+        titleColor: "#f8f9fa",
+        bodyColor: "#f8f9fa",
+        borderColor: "rgba(255, 255, 255, 0.1)",
+        borderWidth: 1,
+        callbacks: {
+          label(context) {
+            return `${context.dataset.label}: ${(context.parsed.y ?? 0).toFixed(0)}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        grid: { color: "rgba(255, 255, 255, 0.05)" },
+        ticks: { color: "#848e9c", font: { size: 9 }, maxRotation: 45, minRotation: 45 }
+      },
+      y: {
+        grid: { color: "rgba(255, 255, 255, 0.05)" },
+        ticks: { color: "#848e9c", font: { size: 10 } },
+        min: 50
+      }
     }
-    return FALLBACK_RECENT_SALES;
-  }, [summary]);
-  const areaDemandLabel = summary?.areaDemand ?? "Hot";
-  const propertyMoatLabel = summary?.propertyMoat ?? "Wide";
-  return /* @__PURE__ */ jsxRuntime.jsxs(ValuationWrapper, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SectionTitle, { children: "Valuation Model" }),
+  }), []);
+  const chartData = React5.useMemo(() => ({
+    labels: musgraveComparisonData.labels,
+    datasets: musgraveComparisonData.datasets.map((dataset, index) => ({
+      label: dataset.name,
+      data: dataset.data,
+      borderColor: dataset.color,
+      backgroundColor: `${dataset.color}20`,
+      borderWidth: index === 0 ? 3 : 2,
+      pointRadius: (ctx) => {
+        if (index === 0) {
+          const year = musgraveComparisonData.labels[ctx.dataIndex];
+          if (["2006", "2021", "2026"].includes(year)) {
+            return hoveredSaleYear === year ? 14 : 8;
+          }
+        }
+        return 1;
+      },
+      pointBackgroundColor: (ctx) => {
+        if (index === 0) {
+          const year = musgraveComparisonData.labels[ctx.dataIndex];
+          if (year === "2006") return "#4CAF50";
+          if (year === "2021") return "#FF5722";
+          if (year === "2026") return "#D4AF37";
+        }
+        return dataset.color;
+      },
+      pointBorderColor: (ctx) => {
+        if (index === 0 && ["2006", "2021", "2026"].includes(musgraveComparisonData.labels[ctx.dataIndex])) return "#fff";
+        return dataset.color;
+      },
+      pointBorderWidth: (ctx) => {
+        if (index === 0 && ["2006", "2021", "2026"].includes(musgraveComparisonData.labels[ctx.dataIndex])) {
+          return hoveredSaleYear === musgraveComparisonData.labels[ctx.dataIndex] ? 4 : 2;
+        }
+        return 0;
+      },
+      pointHoverRadius: 6,
+      tension: 0.3,
+      fill: false
+    }))
+  }), [hoveredSaleYear]);
+  const handleMarkerEnter = React5.useCallback((year) => setHoveredSaleYear(year), []);
+  const handleMarkerLeave = React5.useCallback(() => setHoveredSaleYear(null), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ValuationHeading, { children: "Valuation Model" }),
     /* @__PURE__ */ jsxRuntime.jsxs(LoafPricingSection, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionSubheading, { children: "Loaf Pricing Model" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(PricingModelCard, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { color: "#D4AF37", marginBottom: "0" }, children: "Loaf Pricing Model" }),
+      /* @__PURE__ */ jsxRuntime.jsx(BlurredContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(PricingModelCard, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(PricingModelHeader, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PricingModelTitle, { children: propertyName }),
-          /* @__PURE__ */ jsxRuntime.jsx(PricingModelValue, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "valuation-info", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Valuation as of" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--color-accent)" }, children: now.toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              now.toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: "Australia/Sydney" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PricingModelTitle, { children: propertyTitle }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.7)" }, children: "Valuation as of" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#D4AF37", fontWeight: "600" }, children: (valSummary?.valuationAsOf ? new Date(valSummary.valuationAsOf) : /* @__PURE__ */ new Date()).toLocaleDateString("en-US", { day: "2-digit", month: "short", year: "numeric" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.75rem", color: "rgba(255,255,255,0.7)" }, children: [
+              (valSummary?.valuationAsOf ? new Date(valSummary.valuationAsOf) : /* @__PURE__ */ new Date()).toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false, timeZone: "Australia/Sydney" }),
               " AEST"
             ] })
-          ] }) })
+          ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetails, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Last Price" }),
-              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: formatCurrency5(lastPrice) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Fair Value" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.75rem", color: "#4CAF50", fontWeight: "bold" }, children: [
-                  "Confidence: ",
-                  summary?.confidence ?? "High"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(PricingDetailValue, { style: { color: "var(--color-accent)", fontWeight: "bold" }, children: [
-                formatCurrency5(fairValue),
-                " ",
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.85em", fontWeight: "normal", opacity: 0.8 }, children: [
-                  "(",
-                  formatCurrency5(fairValue * tokensOutstanding, { maximumFractionDigits: 0 }),
-                  ")"
-                ] })
-              ] })
-            ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailLabel, { children: "IPO Price" }),
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: tokenPriceValue != null ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 18 }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ValuationIndicator, { className: "mobile-only-valuation", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(ValuationHeader, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "#4CAF50" }, children: "Undervalued" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "var(--color-accent)" }, children: "Fair Value" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "#F44336" }, children: "Overvalued" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ValuationGauge, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(GaugeBackground, {}),
-              /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "fairValue", position: 50 }),
-              /* @__PURE__ */ jsxRuntime.jsxs(GaugePriceTag, { position: gaugePosition, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Last Price" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency5(lastPrice) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "lastPrice", position: gaugePosition })
+          /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailLabel, { style: { marginBottom: 0 }, children: "Fair Value" }),
+              valSummary?.confidence && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.75rem", color: "#4CAF50", fontWeight: "bold" }, children: [
+                "Confidence: ",
+                valSummary.confidence
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ValuationDetails, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#4CAF50" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "< ",
-                  formatCurrency5(undervaluedThreshold)
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
-                  "(",
-                  formatMillions(undervaluedThreshold * tokensOutstanding),
-                  ")"
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "var(--color-accent)" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency5(fairValue) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
-                  "(",
-                  formatMillions(fairValue * tokensOutstanding),
-                  ")"
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#F44336" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "> ",
-                  formatCurrency5(overvaluedThreshold)
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
-                  "(",
-                  formatMillions(overvaluedThreshold * tokensOutstanding),
-                  ")"
-                ] })
-              ] }) })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HiddenMobileChart, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(ChartBackground, { children: [
-              axisLabels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
-              /* @__PURE__ */ jsxRuntime.jsxs(ValuationSvg, { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, preserveAspectRatio: "none", children: [
-                valuationPath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: valuationPath, fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null,
-                fairValuePath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: fairValuePath, fill: "none", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { style: { color: "#D4AF37", fontWeight: "bold" }, children: valSummary?.fairValue != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              `$${valSummary.fairValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
+              totalUnits > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.85em", fontWeight: "normal", opacity: 0.8 }, children: [
+                " ($",
+                (valSummary.fairValue * totalUnits).toLocaleString(),
+                ")"
               ] })
-            ] }) })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 140, height: 18 }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Valuation" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(ValuationCallout, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#4CAF50", fontWeight: 600, fontSize: "16px", letterSpacing: "0.3px" }, children: valuationStatus }),
-              /* @__PURE__ */ jsxRuntime.jsx(ValuationBadge, { children: valuationDeltaFormatted })
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailLabel, { children: "Valuation" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              background: "linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.1) 100%)",
+              borderRadius: "8px",
+              padding: "10px 16px",
+              border: "1px solid rgba(212, 175, 55, 0.2)"
+            }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#D4AF37", fontWeight: "600" }, children: valSummary?.valuationStatus ?? "Fair Value" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                background: "linear-gradient(135deg, #D4AF37 0%, #B8960C 100%)",
+                color: "white",
+                padding: "5px 12px",
+                borderRadius: "20px",
+                fontSize: "14px",
+                fontWeight: "600"
+              }, children: valSummary?.valuationDeltaPercent != null ? `${valSummary.valuationDeltaPercent.toFixed(1)}%` : valSummary ? "0.0%" : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 44, height: 14 }) })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Area Demand" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: areaDemandLabel }),
-              /* @__PURE__ */ jsxRuntime.jsxs(AreaDemandChart, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "60", viewBox: "0 0 180 60", preserveAspectRatio: "none", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "180", height: "20", fill: "rgba(244, 67, 54, 0.2)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "20", width: "180", height: "20", fill: "rgba(255, 152, 0, 0.15)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "40", width: "180", height: "20", fill: "rgba(158, 158, 158, 0.15)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "20", x2: "180", y2: "20", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "40", x2: "180", y2: "40", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "45", y1: "0", x2: "45", y2: "60", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "90", y1: "0", x2: "90", y2: "60", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "135", y1: "0", x2: "135", y2: "60", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,35 C10,30 20,25 30,20 C40,15 50,25 60,15 C70,30 80,10 90,25 C100,15 110,5 120,15 C130,10 140,20 150,5 C160,10 170,5 180,5", fill: "none", stroke: "#F44336", strokeWidth: "2" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { top: "3px" }, children: "Hot" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { top: "23px" }, children: "Warm" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { top: "43px" }, children: "Cold" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: 0 }, children: "2020" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: "45px" }, children: "2021" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: "90px" }, children: "2022" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: "135px" }, children: "2023" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", right: 0 }, children: "2025" })
-              ] })
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailLabel, { children: "Area Demand" }),
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { style: { color: "#F44336", marginBottom: "0.5rem" }, children: valSummary?.areaDemand ?? (valSummary ? "Hot" : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 60, height: 16 })) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(MiniChartContainer, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "60", viewBox: "0 0 180 60", preserveAspectRatio: "none", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "180", height: "20", fill: "rgba(244, 67, 54, 0.2)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "20", width: "180", height: "20", fill: "rgba(255, 152, 0, 0.15)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "40", width: "180", height: "20", fill: "rgba(158, 158, 158, 0.15)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "20", x2: "180", y2: "20", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "40", x2: "180", y2: "40", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,35 C10,30 20,25 30,20 C40,15 50,25 60,15 C70,30 80,10 90,25 C100,15 110,5 120,15 C130,10 140,20 150,5 C160,10 170,5 180,5", fill: "none", stroke: "#F44336", strokeWidth: "2" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartLabel, { style: { top: "3px" }, children: "Hot" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartLabel, { style: { top: "23px" }, children: "Warm" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartLabel, { style: { top: "43px" }, children: "Cold" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "0" }, children: "2020" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "25%" }, children: "2021" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "50%" }, children: "2022" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "75%" }, children: "2023" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { right: "0", left: "auto" }, children: "2025" })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Property Moat" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: propertyMoatLabel }),
-              /* @__PURE__ */ jsxRuntime.jsxs(AreaDemandChart, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "60", viewBox: "0 0 180 60", preserveAspectRatio: "none", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "180", height: "20", fill: "rgba(0, 137, 123, 0.2)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "20", width: "180", height: "20", fill: "rgba(102, 187, 106, 0.15)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "40", width: "180", height: "20", fill: "rgba(200, 230, 201, 0.15)" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "20", x2: "180", y2: "20", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "40", x2: "180", y2: "40", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "45", y1: "0", x2: "45", y2: "60", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "90", y1: "0", x2: "90", y2: "60", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "135", y1: "0", x2: "135", y2: "60", stroke: "rgba(255,255,255,0.05)", strokeWidth: "1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,15 C10,12 20,8 30,10 C40,5 50,12 60,8 C70,15 80,10 90,5 C100,12 110,8 120,15 C130,10 140,5 150,12 C160,8 170,10 180,5", fill: "none", stroke: "#00897B", strokeWidth: "2" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { top: "3px" }, children: "Wide Moat" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { top: "23px" }, children: "Narrow Moat" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { top: "43px" }, children: "No Moat" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: 0 }, children: "2020" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: "45px" }, children: "2021" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: "90px" }, children: "2022" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", left: "135px" }, children: "2023" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ChartLabel, { style: { bottom: "-15px", right: 0 }, children: "2025" })
-              ] })
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailLabel, { children: "Property Moat" }),
+            /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { style: { color: "#00897B", marginBottom: "0.5rem" }, children: valSummary?.propertyMoat ?? (valSummary ? "Wide" : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 60, height: 16 })) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(MiniChartContainer, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "100%", height: "60", viewBox: "0 0 180 60", preserveAspectRatio: "none", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "180", height: "20", fill: "rgba(0, 137, 123, 0.2)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "20", width: "180", height: "20", fill: "rgba(102, 187, 106, 0.15)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "40", width: "180", height: "20", fill: "rgba(200, 230, 201, 0.15)" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "20", x2: "180", y2: "20", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "40", x2: "180", y2: "40", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,15 C10,12 20,8 30,10 C40,5 50,12 60,8 C70,15 80,10 90,5 C100,12 110,8 120,15 C130,10 140,5 150,12 C160,8 170,10 180,5", fill: "none", stroke: "#00897B", strokeWidth: "2" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartLabel, { style: { top: "3px" }, children: "Wide Moat" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartLabel, { style: { top: "23px" }, children: "Narrow Moat" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartLabel, { style: { top: "43px" }, children: "No Moat" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "0" }, children: "2020" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "25%" }, children: "2021" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "50%" }, children: "2022" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { left: "75%" }, children: "2023" }),
+              /* @__PURE__ */ jsxRuntime.jsx(MiniChartYearLabel, { style: { right: "0", left: "auto" }, children: "2025" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ValuationIndicator, { className: "desktop-only-valuation", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ValuationIndicator, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(ValuationHeader, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "#4CAF50" }, children: "Undervalued" }),
-            /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "var(--color-accent)" }, children: "Fair Value" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "#D4AF37" }, children: "Fair Value" }),
             /* @__PURE__ */ jsxRuntime.jsx(ValuationTitle, { style: { color: "#F44336" }, children: "Overvalued" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(ValuationGauge, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(GaugeBackground, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "fairValue", position: 50 }),
-            /* @__PURE__ */ jsxRuntime.jsxs(GaugePriceTag, { position: gaugePosition, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Last Price" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency5(lastPrice) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "lastPrice", position: gaugePosition })
+            /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { $position: gaugePosition }),
+            /* @__PURE__ */ jsxRuntime.jsxs(GaugePriceTag, { $position: gaugePosition, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "IPO Price" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#D4AF37" }, children: tokenPriceValue != null ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 60, height: 12 }) })
+            ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(ValuationDetails, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#0ecb81" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ValuationValue, { style: { color: "#4CAF50" }, children: valSummary?.undervaluedThreshold != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                 "< ",
-                formatCurrency5(undervaluedThreshold)
+                `$${valSummary.undervaluedThreshold.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
-                "(",
-                formatMillions(undervaluedThreshold * tokensOutstanding),
-                ")"
+              totalUnits > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.8rem", fontWeight: "normal", color: "rgba(255,255,255,0.6)" }, children: [
+                "($",
+                (valSummary.undervaluedThreshold * totalUnits / 1e6).toFixed(1),
+                "m)"
               ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#f0b90b" }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency5(fairValue) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
-                "(",
-                formatMillions(fairValue * tokensOutstanding),
-                ")"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 16 }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ValuationValue, { style: { color: "#D4AF37" }, children: tokenPriceValue != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` }),
+              totalUnits > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.8rem", fontWeight: "normal", color: "rgba(255,255,255,0.6)" }, children: [
+                "($",
+                (tokenPriceValue * totalUnits / 1e6).toFixed(1),
+                "m)"
               ] })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#f6465d" }, children: [
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 16 }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsx(ValuationValue, { style: { color: "#F44336" }, children: valSummary?.overvaluedThreshold != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                 "> ",
-                formatCurrency5(overvaluedThreshold)
+                `$${valSummary.overvaluedThreshold.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
-                "(",
-                formatMillions(overvaluedThreshold * tokensOutstanding),
-                ")"
+              totalUnits > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.8rem", fontWeight: "normal", color: "rgba(255,255,255,0.6)" }, children: [
+                "($",
+                (valSummary.overvaluedThreshold * totalUnits / 1e6).toFixed(1),
+                "m)"
               ] })
-            ] }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "desktop-only-historical-chart", style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { className: "desktop-only-historical-chart", children: /* @__PURE__ */ jsxRuntime.jsxs(ChartBackground, { children: [
-          axisLabels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
-          /* @__PURE__ */ jsxRuntime.jsxs(ValuationSvg, { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, preserveAspectRatio: "none", children: [
-            valuationPath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: valuationPath, fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null,
-            fairValuePath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: fairValuePath, fill: "none", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 16 }) }) })
           ] })
-        ] }) })
-      ] })
+        ] })
+      ] }) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(RecentSalesSection, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionSubheading, { children: "Recent Sales in Comparable Suburbs" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(SwipeIndicator, { children: [
-        "Swipe to see more",
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) })
+    /* @__PURE__ */ jsxRuntime.jsx(BlurredContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationSection, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(ValuationSectionTitle, { children: [
+        "Returns Comparison (Modelled for ",
+        propertyTitle,
+        ")"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(SalesGrid, { children: recentSales.map((sale, index) => /* @__PURE__ */ jsxRuntime.jsxs(SaleCard, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(SaleImageContainer, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SaleImage,
+      /* @__PURE__ */ jsxRuntime.jsxs(MainChartContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactChartjs2.Line, { options: chartOptions, data: chartData }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChartOverlayTitle, { children: "20yr Performance (2006-2026)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChartLegendColumn, { children: musgraveComparisonData.datasets.map((dataset, i) => {
+          const growth = (dataset.data[dataset.data.length - 1] - 100).toFixed(0);
+          return /* @__PURE__ */ jsxRuntime.jsxs(ChartLegendItem, { style: { color: dataset.color }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ChartLegendDot, { style: { backgroundColor: dataset.color } }),
+            dataset.name,
+            " ",
+            Number(growth) >= 0 ? "+" : "",
+            growth,
+            "%"
+          ] }, i);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SaleHistoryBox, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SaleHistoryLabel, { children: "Sale History" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SaleHistoryGrid, { children: musgraveComparisonData.saleMarkers.map((marker, i) => {
+          const displayPrice = marker.year === "2026" && offeringValuationValue ? `$${(offeringValuationValue / 1e6).toFixed(0)}M` : marker.price;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            SaleHistoryItem,
             {
-              src: sale.imageUrl ?? "https://images.unsplash.com/photo-1505693314120-0d443867891c?auto=format&fit=crop&w=1200&q=80",
-              alt: sale.address ?? "Recent sale"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(SoldTag, { children: [
-            "SOLD",
-            /* @__PURE__ */ jsxRuntime.jsx(SoldIcon, {})
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(SalePriceBar, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(SalePriceLeft, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SalePriceLabel, { children: "Sale Price" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SalePriceAmount, { children: formatCurrency5(sale.price) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SaleDate, { children: sale.saleDate ?? "\u2014" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(SaleContent, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SaleAddress, { children: sale.address ?? "Private Sale" }),
-          /* @__PURE__ */ jsxRuntime.jsx(SaleSuburb, { children: sale.suburb ?? "" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(SaleStatsBar, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(SaleStatItem, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(BedIcon, {}),
-              formatBedroomLabel(sale.bedrooms)
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SaleStatItem, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(BathIcon, {}),
-              formatBathroomLabel(sale.bathrooms)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SaleStatItem, { style: { color: "var(--color-text-secondary)" }, children: sale.landSize ?? "\u2014" })
-        ] })
-      ] }, `${sale.address ?? sale.suburb ?? "sale"}-${index}`)) })
-    ] }),
-    loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingOverlay, { children: "Loading valuation data\u2026" }) : null,
-    error ? /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { children: error }) : null
+              onMouseEnter: () => handleMarkerEnter(marker.year),
+              onMouseLeave: handleMarkerLeave,
+              $active: hoveredSaleYear === marker.year,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SaleHistoryDot,
+                  {
+                    $active: hoveredSaleYear === marker.year,
+                    style: {
+                      backgroundColor: marker.year === "2006" ? "#4CAF50" : marker.year === "2021" ? "#FF5722" : "#D4AF37",
+                      boxShadow: hoveredSaleYear === marker.year ? `0 0 12px ${marker.year === "2006" ? "#4CAF50" : marker.year === "2021" ? "#FF5722" : "#D4AF37"}` : "none"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.8rem", fontWeight: "600", color: "var(--color-text, #f8f9fa)", marginBottom: "2px" }, children: [
+                    marker.year,
+                    ": ",
+                    marker.label,
+                    " \u2014 ",
+                    displayPrice
+                  ] }),
+                  marker.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.7rem", color: "var(--color-text-secondary, #848e9c)", lineHeight: "1.3" }, children: marker.description })
+                ] })
+              ]
+            },
+            i
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.8rem", color: "var(--color-text-secondary, #848e9c)", textAlign: "center", marginBottom: "0.5rem" }, children: "Mosman Heritage properties of this calibre are beyond scarce, and have consistently outperformed broader markets with lower volatility" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.65rem", color: "var(--color-text-secondary, #848e9c)", textAlign: "center", opacity: 0.7 }, children: "Sources: CoreLogic, Bloomberg, RBA" })
+    ] }) })
   ] });
 }
-function formatCurrency5(value, options) {
-  if (value == null || Number.isNaN(value)) {
-    return "\u2014";
-  }
-  const { minimumFractionDigits = 2, maximumFractionDigits = 2, ...rest } = options ?? {};
-  const minDigits = Math.max(0, Math.min(20, minimumFractionDigits));
-  const maxDigits = Math.max(minDigits, Math.min(20, maximumFractionDigits));
-  return value.toLocaleString("en-US", {
-    style: "currency",
-    currency: "USD",
-    minimumFractionDigits: minDigits,
-    maximumFractionDigits: maxDigits,
-    ...rest
-  });
-}
-function formatMillions(value) {
-  if (!Number.isFinite(value) || value === 0) {
-    return "$0m";
-  }
-  return `$${(value / 1e6).toFixed(2)}m`;
-}
-function formatBedroomLabel(bedrooms) {
-  if (!Number.isFinite(bedrooms)) return "\u2014";
-  return `${bedrooms} Bed`;
-}
-function formatBathroomLabel(bathrooms) {
-  if (!Number.isFinite(bathrooms)) return "\u2014";
-  return `${bathrooms} Bath`;
-}
-function buildChartPaths(history, fallbackValue) {
-  if (!history.length) {
-    return { valuationPath: null, fairValuePath: null, axisLabels: ["$0", "$0", "$0", "$0", "$0"] };
-  }
-  const values = history.map((point) => point.valuation);
-  const minValue = Math.min(...values);
-  const maxValue = Math.max(...values);
-  const minTime = Math.min(...history.map((point) => point.timestamp));
-  const maxTime = Math.max(...history.map((point) => point.timestamp));
-  const adjustedMinValue = minValue === maxValue ? minValue * 0.9 : minValue;
-  const adjustedMaxValue = minValue === maxValue ? maxValue * 1.1 : maxValue;
-  const valuationSegments = history.map((point, index) => {
-    const x = normalize(point.timestamp, minTime, maxTime, CHART_PADDING, CHART_WIDTH - CHART_PADDING);
-    const y = mapValueToY(point.valuation, adjustedMinValue, adjustedMaxValue);
-    return `${index === 0 ? "M" : "L"} ${x} ${y}`;
-  });
-  const fairValuePoints = history.filter((point) => Number.isFinite(point.fairValue));
-  const fairValueSegments = fairValuePoints.map((point, index) => {
-    const x = normalize(point.timestamp, minTime, maxTime, CHART_PADDING, CHART_WIDTH - CHART_PADDING);
-    const y = mapValueToY(point.fairValue ?? fallbackValue, adjustedMinValue, adjustedMaxValue);
-    return `${index === 0 ? "M" : "L"} ${x} ${y}`;
-  });
-  const axisLabels = buildAxisLabels(adjustedMinValue, adjustedMaxValue);
-  return {
-    valuationPath: valuationSegments.length > 1 ? valuationSegments.join(" ") : null,
-    fairValuePath: fairValueSegments.length > 1 ? fairValueSegments.join(" ") : null,
-    axisLabels
-  };
-}
-function normalize(value, min, max, targetMin, targetMax) {
-  if (max === min) return (targetMin + targetMax) / 2;
-  return targetMin + (value - min) / (max - min) * (targetMax - targetMin);
-}
-function mapValueToY(value, min, max) {
-  const normalized = normalize(value, min, max, 0, 1);
-  const clamped = Math.min(1, Math.max(0, normalized));
-  const drawableHeight = CHART_HEIGHT - CHART_PADDING * 2;
-  return CHART_PADDING + (1 - clamped) * drawableHeight;
-}
-function buildAxisLabels(min, max) {
-  const steps = 5;
-  const labels = [];
-  for (let i = 0; i < steps; i += 1) {
-    const ratio = i / (steps - 1);
-    const value = max - ratio * (max - min);
-    labels.push(formatCurrency5(value, { maximumFractionDigits: 0, minimumFractionDigits: 0 }));
-  }
-  return labels;
-}
-function calculatePositionFromPrice(price, undervaluedPrice, fairValue, overvaluedPrice) {
-  if (price <= undervaluedPrice) return 0;
-  if (price >= overvaluedPrice) return 100;
-  if (price < fairValue) {
-    return 50 * (price - undervaluedPrice) / (fairValue - undervaluedPrice);
-  }
-  return 50 + 50 * (price - fairValue) / (overvaluedPrice - fairValue);
-}
-var ValuationIndicator = styled9__default.default.div`
-  background-color: rgba(50, 52, 58, 0.95);
-  border-radius: 6px;
-  padding: 1rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-
-  &.desktop-only-valuation {
-    @media (max-width: 480px) {
-      display: none;
-    }
-  }
-
-  &.mobile-only-valuation {
-    display: none;
-    @media (max-width: 480px) {
-      display: block;
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-    }
-  }
-`;
-var GaugeIndicator = styled9__default.default.div`
-  position: absolute;
-  left: ${(props) => props.position}%;
-  top: 0.35rem;
-  transform: translateX(-50%);
-  width: 3px;
-  height: 36px;
-  border-radius: 999px;
-  background: ${(props) => props.type === "fairValue" ? "#f0b90b" : "rgba(10, 12, 18, 0.95)"};
-  box-shadow: ${(props) => props.type === "lastPrice" ? "0 6px 18px rgba(0, 0, 0, 0.65)" : "0 6px 16px rgba(0, 0, 0, 0.45)"};
+var BlurredContent = styled9__default.default.div`
+  filter: blur(8px);
+  pointer-events: none;
+  user-select: none;
+  overflow: hidden;
 `;
-var GaugePriceTag = styled9__default.default.div`
-  position: absolute;
-  left: ${(props) => props.position}%;
-  top: -46px;
-  transform: translateX(-50%);
-  background: rgba(7, 9, 13, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-size: 0.75rem;
+var ValuationHeading = styled9__default.default.h2`
+  font-size: 1.4rem;
+  font-weight: 600;
   color: #fff;
-  font-weight: 500;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  text-align: center;
-  backdrop-filter: blur(6px);
+  margin: 0 0 1.5rem;
 
-  span:last-child {
-    font-size: 0.95em;
-    font-weight: 600;
-    letter-spacing: 0.2px;
-    color: var(--color-accent);
-  }
-`;
-var HiddenMobileChart = styled9__default.default.div`
-  display: none;
   @media (max-width: 480px) {
-    display: block;
+    font-size: 1.15rem;
+    margin-bottom: 1rem;
   }
 `;
-var ValuationWrapper = styled9__default.default.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-`;
-var LoadingOverlay = styled9__default.default.div`
-  margin-top: 1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.05);
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.9rem;
-`;
-var ErrorMessage = styled9__default.default.div`
-  margin-top: 1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  background: rgba(244, 67, 54, 0.15);
-  color: #ff8a80;
-  font-size: 0.9rem;
-  border: 1px solid rgba(244, 67, 54, 0.4);
-`;
-var SectionTitle = styled9__default.default.h2`
-  margin: 0;
-  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
 var LoafPricingSection = styled9__default.default.div`
   background-color: rgba(30, 32, 38, 0.95);
   border-radius: 8px;
   padding: 1.25rem;
   margin-bottom: 1.5rem;
-`;
-var SectionSubheading = styled9__default.default.h2`
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.02em;
+
+  @media (max-width: 768px) {
+    padding: 1rem;
+    overflow: hidden;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    border-radius: 6px;
+  }
 `;
 var PricingModelCard = styled9__default.default.div`
   background-color: rgba(40, 42, 48, 0.95);
   border-radius: 8px;
   padding: 1.5rem;
   margin-top: 1rem;
+
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+  }
 `;
 var PricingModelHeader = styled9__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1.5rem;
+  flex-wrap: wrap;
   gap: 1rem;
 
-  .valuation-info {
-    display: flex;
+  @media (max-width: 480px) {
     flex-direction: column;
-    gap: 0.25rem;
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.75);
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
   }
 `;
 var PricingModelTitle = styled9__default.default.h3`
@@ -16894,14 +16742,9 @@ var PricingModelTitle = styled9__default.default.h3`
   font-size: 1.2rem;
   font-weight: 600;
   color: #fff;
-`;
-var PricingModelValue = styled9__default.default.div`
-  font-size: 1.4rem;
-  font-weight: 700;
-  color: var(--color-primary);
 
-  @media (max-width: 768px) {
-    font-size: 1.2rem;
+  @media (max-width: 480px) {
+    font-size: 1rem;
   }
 `;
 var PricingModelDetails = styled9__default.default.div`
@@ -16909,13 +16752,27 @@ var PricingModelDetails = styled9__default.default.div`
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.5rem;
   margin-bottom: 1.5rem;
+
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
 `;
 var PricingModelDetail = styled9__default.default.div`
   background-color: rgba(50, 52, 58, 0.95);
   border-radius: 6px;
   padding: 1rem;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+  }
 `;
-var PropertyDetailLabel = styled9__default.default.div`
+var PricingDetailLabel = styled9__default.default.div`
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 0.5rem;
@@ -16925,6 +16782,35 @@ var PricingDetailValue = styled9__default.default.div`
   color: #fff;
   font-weight: 500;
 `;
+var MiniChartContainer = styled9__default.default.div`
+  height: 60px;
+  width: 100%;
+  position: relative;
+  margin-bottom: 15px;
+`;
+var MiniChartLabel = styled9__default.default.div`
+  position: absolute;
+  right: 5px;
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.7);
+`;
+var MiniChartYearLabel = styled9__default.default.div`
+  position: absolute;
+  bottom: -15px;
+  font-size: 9px;
+  color: rgba(255, 255, 255, 0.5);
+`;
+var ValuationIndicator = styled9__default.default.div`
+  background-color: rgba(50, 52, 58, 0.95);
+  border-radius: 6px;
+  padding: 1rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+  }
+`;
 var ValuationHeader = styled9__default.default.div`
   display: flex;
   justify-content: space-between;
@@ -16932,277 +16818,219 @@ var ValuationHeader = styled9__default.default.div`
 `;
 var ValuationTitle = styled9__default.default.div`
   font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.7);
+  font-weight: 500;
+
+  @media (max-width: 480px) {
+    font-size: 0.75rem;
+  }
 `;
 var ValuationGauge = styled9__default.default.div`
   position: relative;
   width: 100%;
   padding: 1.1rem 0 2rem;
-  margin: 0.75rem 0 1rem;
 `;
 var GaugeBackground = styled9__default.default.div`
-  width: 100%;
-  height: 18px;
-  border-radius: 999px;
-  background: linear-gradient(90deg, #0ecb81 0%, #4dd482 30%, #f8e36c 50%, #f98b6c 70%, #f6465d 100%);
-  position: relative;
-  overflow: hidden;
-  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.25);
+  height: 8px;
+  border-radius: 4px;
+  background: linear-gradient(to right, #4CAF50 0%, #4CAF50 33%, #D4AF37 33%, #D4AF37 66%, #F44336 66%, #F44336 100%);
+`;
+var GaugeIndicator = styled9__default.default.div`
+  position: absolute;
+  top: 0;
+  left: ${(props) => props.$position}%;
+  transform: translateX(-50%);
+  width: 3px;
+  height: 30px;
+  background: #D4AF37;
+  border-radius: 2px;
+`;
+var GaugePriceTag = styled9__default.default.div`
+  position: absolute;
+  left: ${(props) => props.$position}%;
+  top: -30px;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  span:first-child {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.65rem;
+  }
+
+  span:last-child {
+    color: #fff;
+    font-weight: 600;
+  }
 `;
 var ValuationDetails = styled9__default.default.div`
   display: flex;
   justify-content: space-between;
   margin-top: 1rem;
+
+  @media (max-width: 480px) {
+    gap: 0.25rem;
+  }
 `;
 var ValuationItem = styled9__default.default.div`
   display: flex;
   flex-direction: column;
+
+  &:nth-child(2) {
+    text-align: center;
+  }
+
+  &:last-child {
+    text-align: right;
+  }
 `;
 var ValuationValue = styled9__default.default.div`
   font-size: 1rem;
   font-weight: 600;
-  color: #fff;
-`;
-var ChartContainer = styled9__default.default.div`
-  width: 100%;
-  height: 301.52px;
-  margin-top: 1.5rem;
-  background-color: rgba(50, 52, 58, 0.5);
-  border-radius: 6px;
-  padding: 1rem;
-  position: relative;
-`;
-var ChartBackground = styled9__default.default.div`
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 8px;
-`;
-var ValuationSvg = styled9__default.default.svg`
-  position: absolute;
-  top: 10px;
-  right: 0;
-  bottom: 25px;
-  left: 0;
-  overflow: visible;
-  width: 100%;
-  height: calc(100% - 35px);
-`;
-var YAxisLabel = styled9__default.default.div`
-  position: absolute;
-  left: -40px;
-  font-size: 10px;
-  color: rgba(255, 255, 255, 0.6);
-  text-align: right;
-  padding-right: 5px;
-`;
-var ValuationCallout = styled9__default.default.div`
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: linear-gradient(90deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0.1) 100%);
-  border-radius: 8px;
-  padding: 10px 16px;
-  border: 1px solid rgba(76, 175, 80, 0.2);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-`;
-var ValuationBadge = styled9__default.default.div`
-  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-  color: white;
-  padding: 5px 12px;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 600;
-  box-shadow: 0 2px 4px rgba(76, 175, 80, 0.25);
-`;
-var AreaDemandChart = styled9__default.default.div`
-  height: 60px;
-  width: 100%;
-  position: relative;
-`;
-var ChartLabel = styled9__default.default.div`
-  position: absolute;
-  font-size: 9px;
-  color: rgba(255, 255, 255, 0.7);
-`;
-var RecentSalesSection = styled9__default.default.div`
-  background-color: rgba(30, 32, 38, 0.95);
-  border-radius: 8px;
-  padding: 1.25rem;
-  margin-bottom: 1.5rem;
+  flex-direction: column;
+  gap: 0.15rem;
 
-  @media (max-width: 768px) {
-    position: relative;
+  @media (max-width: 480px) {
+    font-size: 0.85rem;
   }
 `;
-var SalesGrid = styled9__default.default.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.5rem;
-  margin-top: 1rem;
+var ValuationSection = styled9__default.default.section`
+  background-color: var(--color-card, rgba(30, 35, 41, 0.8));
+  border-radius: 12px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
 
   @media (max-width: 768px) {
-    display: flex;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    gap: 1rem;
-    padding-bottom: 1rem;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    scrollbar-width: none;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding: 1rem;
   }
-`;
-var SaleCard = styled9__default.default.div`
-  background-color: var(--color-card, #1e2329);
-  border-radius: var(--border-radius, 8px);
-  overflow: hidden;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  border: 1px solid rgba(255, 255, 255, 0.05);
 
-  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+    border-radius: 8px;
   }
+`;
+var ValuationSectionTitle = styled9__default.default.h2`
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding-bottom: 0.75rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--color-text, #f8f9fa);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var MainChartContainer = styled9__default.default.div`
+  position: relative;
+  height: 450px;
+  margin-bottom: 1rem;
 
   @media (max-width: 768px) {
-    min-width: 280px;
-    width: 85%;
-    scroll-snap-align: start;
-    flex-shrink: 0;
-    margin-right: 0.5rem;
-
-    &:last-child {
-      margin-right: 1rem;
-    }
+    height: 350px;
   }
-`;
-var SaleImageContainer = styled9__default.default.div`
-  position: relative;
-  width: 100%;
-  height: 200px;
-  overflow: hidden;
-`;
-var SaleImage = styled9__default.default.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  transition: transform 0.3s ease;
 
-  ${SaleCard}:hover & {
-    transform: scale(1.05);
+  @media (max-width: 480px) {
+    height: 260px;
   }
 `;
-var SoldTag = styled9__default.default.div`
+var ChartOverlayTitle = styled9__default.default.div`
   position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background-color: var(--color-accent, #f0b90b);
-  color: var(--color-background, #0b0e11);
-  font-weight: 600;
-  font-size: 0.75rem;
-  padding: 0.25rem 0.5rem;
+  left: 10px;
+  top: 10px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #f8f9fa;
+  background-color: rgba(30, 32, 38, 0.7);
+  padding: 2px 8px;
   border-radius: 4px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-var SoldIcon = styled9__default.default.div`
-  display: none;
-`;
-var SalePriceBar = styled9__default.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background: linear-gradient(90deg, rgba(240, 185, 11, 0.1) 0%, rgba(240, 185, 11, 0.05) 100%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  z-index: 10;
+
+  @media (max-width: 480px) {
+    font-size: 0.7rem;
+    padding: 2px 6px;
+  }
 `;
-var SalePriceLeft = styled9__default.default.div`
+var ChartLegendColumn = styled9__default.default.div`
+  position: absolute;
+  right: 10px;
+  top: 40px;
   display: flex;
   flex-direction: column;
+  gap: 6px;
+  z-index: 10;
 `;
-var SalePriceLabel = styled9__default.default.span`
+var ChartLegendItem = styled9__default.default.div`
   font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  background-color: rgba(30, 32, 38, 0.7);
+  padding: 2px 6px;
+  border-radius: 4px;
 `;
-var SalePriceAmount = styled9__default.default.span`
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--color-accent, #f0b90b);
+var ChartLegendDot = styled9__default.default.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 6px;
+  flex-shrink: 0;
 `;
-var SaleContent = styled9__default.default.div`
-  padding: 1rem;
+var SaleHistoryBox = styled9__default.default.div`
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
 `;
-var SaleAddress = styled9__default.default.h3`
-  margin: 0;
-  margin-bottom: 0.25rem;
-  font-size: 1rem;
+var SaleHistoryLabel = styled9__default.default.div`
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--color-text, #eaecef);
-`;
-var SaleSuburb = styled9__default.default.div`
-  font-size: 0.8rem;
   color: var(--color-text-secondary, #848e9c);
-  margin-bottom: 0.5rem;
-`;
-var SaleStatsBar = styled9__default.default.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  background-color: rgba(0, 0, 0, 0.3);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.75rem;
 `;
-var SaleStatItem = styled9__default.default.div`
+var SaleHistoryGrid = styled9__default.default.div`
   display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary, #848e9c);
+  flex-wrap: wrap;
+  gap: 1rem;
 
-  svg {
-    width: 14px;
-    height: 14px;
-    opacity: 0.7;
+  @media (max-width: 480px) {
+    flex-direction: column;
+    gap: 0.75rem;
   }
 `;
-var SaleDate = styled9__default.default.div`
-  font-size: 0.75rem;
-  color: var(--color-text-secondary, #848e9c);
-`;
-var SwipeIndicator = styled9__default.default.div`
-  display: none;
-
-  @media (max-width: 768px) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 0.75rem;
-    color: rgba(255, 255, 255, 0.6);
-    font-size: 0.8rem;
-
-    svg {
-      margin-left: 0.25rem;
-      animation: swipeAnimation 1.5s infinite;
-    }
+var SaleHistoryItem = styled9__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  flex: 1 1 200px;
+  transition: transform 0.2s ease;
+  transform: ${(props) => props.$active ? "scale(1.05)" : "scale(1)"};
+  cursor: pointer;
 
-    @keyframes swipeAnimation {
-      0% { transform: translateX(0); }
-      50% { transform: translateX(5px); }
-      100% { transform: translateX(0); }
-    }
+  @media (max-width: 480px) {
+    flex: 1 1 auto;
   }
 `;
-var BedIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 14c1.66 0 3-1.34 3-3S8.66 8 7 8s-3 1.34-3 3 1.34 3 3 3zm0-4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm12-3h-8v8H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4zm2 8h-8V9h6c1.1 0 2 .9 2 2v4z" }) });
-var BathIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 7c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm5 14H4v-2c0-2.21 1.79-4 4-4h2c2.21 0 4 1.79 4 4v2zm6-8h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z" }) });
+var SaleHistoryDot = styled9__default.default.div`
+  width: ${(props) => props.$active ? "16px" : "12px"};
+  height: ${(props) => props.$active ? "16px" : "12px"};
+  border-radius: 50%;
+  border: ${(props) => props.$active ? "3px solid #fff" : "2px solid #fff"};
+  flex-shrink: 0;
+  margin-top: 2px;
+  transition: all 0.2s ease;
+`;
 var fadeIn = styled9.keyframes`
   from { opacity: 0; }
   to { opacity: 1; }