brickwise 0.1.0

package/src/components/FiltersForm.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { SearchFilters } from "@/lib/types";
+
+const AMENITIES = [
+  { value: "SY", label: "Gimnasio compartido" },
+  { value: "PY", label: "Gimnasio privado" },
+  { value: "CP", label: "Parking cubierto" },
+  { value: "SP", label: "Piscina compartida" },
+  { value: "PP", label: "Piscina privada" },
+  { value: "BA", label: "Balcón" },
+  { value: "AC", label: "A/C central" },
+  { value: "MR", label: "Cuarto de servicio" },
+  { value: "BW", label: "Armarios empotrados" },
+  { value: "ST", label: "Estudio/despacho" },
+  { value: "VW", label: "Vistas al agua" },
+  { value: "PA", label: "Mascotas" },
+];
+
+const PROPERTY_TYPES = [
+  { value: "", label: "Cualquiera" },
+  { value: "1", label: "Apartamento" },
+  { value: "35", label: "Villa" },
+  { value: "22", label: "Townhouse" },
+  { value: "20", label: "Penthouse" },
+  { value: "24", label: "Dúplex" },
+];
+
+const BEDROOM_OPTS = ["0", "1", "2", "3", "4", "5"];
+
+interface LocOption {
+  id: string;
+  name: string;
+  path_name: string;
+}
+
+export default function FiltersForm({
+  onSearch,
+  searching,
+}: {
+  onSearch: (f: SearchFilters) => void;
+  searching: boolean;
+}) {
+  const [locQuery, setLocQuery] = useState("");
+  const [locOptions, setLocOptions] = useState<LocOption[]>([]);
+  const [location, setLocation] = useState<LocOption | null>(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [minPrice, setMinPrice] = useState("");
+  const [maxPrice, setMaxPrice] = useState("");
+  const [minArea, setMinArea] = useState("");
+  const [maxArea, setMaxArea] = useState("");
+  const [bedrooms, setBedrooms] = useState<string[]>([]);
+  const [propertyTypeId, setPropertyTypeId] = useState("");
+  const [amenities, setAmenities] = useState<string[]>([]);
+  const [maxGymKm, setMaxGymKm] = useState("");
+  const [maxPages, setMaxPages] = useState("2");
+  const debounce = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    if (debounce.current) clearTimeout(debounce.current);
+    debounce.current = setTimeout(() => {
+      if (locQuery.trim().length < 2 || locQuery === location?.name) {
+        setLocOptions([]);
+        return;
+      }
+      fetch(`/api/locations?q=${encodeURIComponent(locQuery)}`)
+        .then((r) => r.json())
+        .then((j) => setLocOptions(j.locations || []))
+        .catch(() => {});
+    }, 250);
+  }, [locQuery, location]);
+
+  const toggle = (arr: string[], v: string, set: (x: string[]) => void) =>
+    set(arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]);
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSearch({
+      locationId: location?.id,
+      locationLabel: location ? `${location.name} (${location.path_name})` : "Dubai",
+      minPrice: minPrice ? Number(minPrice) : undefined,
+      maxPrice: maxPrice ? Number(maxPrice) : undefined,
+      minArea: minArea ? Number(minArea) : undefined,
+      maxArea: maxArea ? Number(maxArea) : undefined,
+      bedrooms: bedrooms.length ? bedrooms : undefined,
+      propertyTypeId: propertyTypeId || undefined,
+      amenities: amenities.length ? amenities : undefined,
+      maxGymDistanceM: maxGymKm ? Number(maxGymKm) * 1000 : undefined,
+      maxPages: Number(maxPages) || 2,
+    });
+  };
+
+  const inputCls =
+    "w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm outline-none focus:border-neutral-500 dark:border-neutral-700 dark:bg-neutral-900";
+
+  return (
+    <form onSubmit={submit} className="rounded-xl border border-neutral-200 bg-white p-4 shadow-sm dark:border-neutral-800 dark:bg-neutral-900">
+      <div className="grid gap-3 md:grid-cols-4">
+        <div className="relative md:col-span-2">
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Ubicación</label>
+          <input
+            className={inputCls}
+            placeholder="Ciudad, zona o edificio (p. ej. Dubai Marina)"
+            value={locQuery}
+            onChange={(e) => {
+              setLocQuery(e.target.value);
+              setLocation(null);
+              setShowDropdown(true);
+            }}
+            onFocus={() => setShowDropdown(true)}
+          />
+          {showDropdown && locOptions.length > 0 && (
+            <ul className="absolute z-30 mt-1 max-h-64 w-full overflow-auto rounded-lg border border-neutral-200 bg-white shadow-lg dark:border-neutral-700 dark:bg-neutral-900">
+              {locOptions.map((o) => (
+                <li key={o.id}>
+                  <button
+                    type="button"
+                    className="w-full px-3 py-2 text-left text-sm hover:bg-neutral-100 dark:hover:bg-neutral-800"
+                    onClick={() => {
+                      setLocation(o);
+                      setLocQuery(o.name);
+                      setShowDropdown(false);
+                    }}
+                  >
+                    <span className="font-medium">{o.name}</span>
+                    <span className="ml-2 text-xs text-neutral-500">{o.path_name}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Tipo</label>
+          <select className={inputCls} value={propertyTypeId} onChange={(e) => setPropertyTypeId(e.target.value)}>
+            {PROPERTY_TYPES.map((t) => (
+              <option key={t.value} value={t.value}>
+                {t.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Páginas a scrapear (×25)</label>
+          <select className={inputCls} value={maxPages} onChange={(e) => setMaxPages(e.target.value)}>
+            {["1", "2", "3", "4", "5"].map((p) => (
+              <option key={p} value={p}>
+                {p}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Precio mín. (AED)</label>
+          <input className={inputCls} type="number" min="0" placeholder="500000" value={minPrice} onChange={(e) => setMinPrice(e.target.value)} />
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Precio máx. (AED)</label>
+          <input className={inputCls} type="number" min="0" placeholder="2000000" value={maxPrice} onChange={(e) => setMaxPrice(e.target.value)} />
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Superficie mín. (sqft)</label>
+          <input className={inputCls} type="number" min="0" placeholder="800" value={minArea} onChange={(e) => setMinArea(e.target.value)} />
+        </div>
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Superficie máx. (sqft)</label>
+          <input className={inputCls} type="number" min="0" placeholder="1500" value={maxArea} onChange={(e) => setMaxArea(e.target.value)} />
+        </div>
+      </div>
+
+      <div className="mt-3">
+        <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Habitaciones</label>
+        <div className="flex flex-wrap gap-2">
+          {BEDROOM_OPTS.map((b) => (
+            <button
+              key={b}
+              type="button"
+              onClick={() => toggle(bedrooms, b, setBedrooms)}
+              className={`rounded-full border px-3 py-1 text-sm ${
+                bedrooms.includes(b)
+                  ? "border-neutral-900 bg-neutral-900 text-white dark:border-white dark:bg-white dark:text-neutral-900"
+                  : "border-neutral-300 dark:border-neutral-700"
+              }`}
+            >
+              {b === "0" ? "Studio" : b === "5" ? "5+" : b}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-3">
+        <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">Características</label>
+        <div className="flex flex-wrap gap-2">
+          {AMENITIES.map((a) => (
+            <button
+              key={a.value}
+              type="button"
+              onClick={() => toggle(amenities, a.value, setAmenities)}
+              className={`rounded-full border px-3 py-1 text-xs ${
+                amenities.includes(a.value)
+                  ? "border-neutral-900 bg-neutral-900 text-white dark:border-white dark:bg-white dark:text-neutral-900"
+                  : "border-neutral-300 dark:border-neutral-700"
+              }`}
+            >
+              {a.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-3 flex flex-wrap items-end gap-3">
+        <div>
+          <label className="mb-1 block text-xs font-semibold text-neutral-600 dark:text-neutral-400">
+            Dist. máx. a gimnasio externo (km, opcional)
+          </label>
+          <input
+            className={inputCls}
+            type="number"
+            step="0.1"
+            min="0"
+            placeholder="p. ej. 0.5"
+            value={maxGymKm}
+            onChange={(e) => setMaxGymKm(e.target.value)}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={searching}
+          className="ml-auto rounded-lg bg-blue-600 px-6 py-2.5 text-sm font-bold text-white hover:bg-blue-500 disabled:opacity-50"
+        >
+          {searching ? "Scrapeando…" : "Buscar en Property Finder"}
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/components/ListingCard.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import YieldBadge from "./YieldBadge";
+import { fmtAED, fmtDist, fmtSqft } from "@/lib/format";
+import { AnalysisRow } from "@/lib/types";
+
+export interface CardListing {
+  id: string;
+  url: string;
+  title: string;
+  price: number;
+  size_sqft: number | null;
+  bedrooms: number | null;
+  bathrooms: number | null;
+  property_type: string;
+  tower_name: string | null;
+  images: { small: string; medium: string }[];
+  amenities: string[];
+}
+
+export default function ListingCard({
+  listing,
+  analysis: initialAnalysis,
+  onAnalyzed,
+}: {
+  listing: CardListing;
+  analysis?: AnalysisRow | null;
+  onAnalyzed?: (id: string, a: AnalysisRow) => void;
+}) {
+  const [analysis, setAnalysis] = useState<AnalysisRow | null>(initialAnalysis ?? null);
+  const [loading, setLoading] = useState(false);
+  const [imgIdx, setImgIdx] = useState(0);
+  const images = listing.images || [];
+
+  const analyze = () => {
+    if (loading || analysis) return;
+    setLoading(true);
+    fetch(`/api/listing/${listing.id}?url=${encodeURIComponent(listing.url)}`)
+      .then(async (r) => {
+        const j = await r.json();
+        if (!r.ok) throw new Error(j.error || `HTTP ${r.status}`);
+        setAnalysis(j.analysis);
+        onAnalyzed?.(listing.id, j.analysis);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  };
+
+  return (
+    <div className="group flex flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-sm transition hover:shadow-md dark:border-neutral-800 dark:bg-neutral-900">
+      <div className="relative aspect-[3/2] bg-neutral-100 dark:bg-neutral-800">
+        {images.length > 0 && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={images[imgIdx]?.medium || images[imgIdx]?.small}
+            alt={listing.title}
+            className="h-full w-full object-cover"
+            loading="lazy"
+          />
+        )}
+        {images.length > 1 && (
+          <div className="absolute inset-x-0 bottom-0 flex items-center justify-between p-2 opacity-0 transition group-hover:opacity-100">
+            <button
+              onClick={() => setImgIdx((imgIdx - 1 + images.length) % images.length)}
+              className="rounded-full bg-black/50 px-2.5 py-1 text-sm text-white"
+            >
+              ‹
+            </button>
+            <span className="rounded-full bg-black/50 px-2 py-0.5 text-xs text-white">
+              {imgIdx + 1}/{images.length}
+            </span>
+            <button
+              onClick={() => setImgIdx((imgIdx + 1) % images.length)}
+              className="rounded-full bg-black/50 px-2.5 py-1 text-sm text-white"
+            >
+              ›
+            </button>
+          </div>
+        )}
+        <div className="absolute left-2 top-2">
+          {loading ? (
+            <span className="inline-flex items-center rounded-full bg-black/60 px-2 py-0.5 text-xs font-medium text-white">
+              analizando…
+            </span>
+          ) : analysis ? (
+            <YieldBadge value={analysis.gross_yield} n={analysis.rent_n} />
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex flex-1 flex-col gap-1.5 p-3">
+        <div className="flex items-baseline justify-between gap-2">
+          <span className="text-lg font-bold">{fmtAED(listing.price)}</span>
+          <span className="shrink-0 text-xs text-neutral-500">{listing.property_type}</span>
+        </div>
+        <Link href={`/listing/${listing.id}`} className="line-clamp-2 text-sm font-medium hover:underline">
+          {listing.title}
+        </Link>
+        <div className="text-xs text-neutral-500">
+          {listing.bedrooms === 0 ? "Studio" : `${listing.bedrooms ?? "?"} hab`} · {listing.bathrooms ?? "?"} baños ·{" "}
+          {fmtSqft(listing.size_sqft)}
+        </div>
+        {listing.tower_name && (
+          <div className="truncate text-xs text-neutral-500">📍 {listing.tower_name}</div>
+        )}
+        {analysis && (
+          <div className="mt-1 grid grid-cols-2 gap-x-3 gap-y-0.5 text-xs text-neutral-600 dark:text-neutral-400">
+            <span>Alquiler/año: {fmtAED(analysis.median_rent)}</span>
+            <span>🏋️ {fmtDist(analysis.gym_distance_m)}</span>
+            <span>Venta med.: {fmtAED(analysis.median_sale_price)}</span>
+            <span>s/ anuncio: {analysis.asking_yield != null ? (analysis.asking_yield * 100).toFixed(1) + " %" : "—"}</span>
+          </div>
+        )}
+        <div className="mt-auto flex items-center gap-3 pt-2">
+          {analysis ? (
+            <Link
+              href={`/listing/${listing.id}`}
+              className="rounded-lg bg-neutral-900 px-3 py-1.5 text-xs font-semibold text-white hover:bg-neutral-700 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200"
+            >
+              Ver análisis
+            </Link>
+          ) : (
+            <button
+              onClick={analyze}
+              disabled={loading}
+              className="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-500 disabled:opacity-60"
+            >
+              {loading ? "Analizando…" : "⚡ Analizar"}
+            </button>
+          )}
+          <a
+            href={listing.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs font-medium text-blue-600 hover:underline dark:text-blue-400"
+          >
+            Ver en Property Finder ↗
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Nav.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const ITEMS = [
+  { href: "/search", label: "🔍 Buscar" },
+  { href: "/favorites", label: "⭐ Favoritos + Mapa" },
+  { href: "/", label: "📊 Analizados" },
+];
+
+export default function Nav() {
+  const pathname = usePathname();
+  return (
+    <nav className="mx-auto flex h-14 w-full max-w-[1800px] items-center gap-2 px-4">
+      <Link href="/" className="mr-4 flex items-center gap-2 text-lg font-bold tracking-tight">
+        🧱 Brickwise
+      </Link>
+      {ITEMS.map((it) => {
+        const active = it.href === "/" ? pathname === "/" : pathname.startsWith(it.href);
+        return (
+          <Link
+            key={it.href}
+            href={it.href}
+            className={`rounded-full px-3 py-1.5 text-sm font-medium transition ${
+              active
+                ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+                : "text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-white"
+            }`}
+          >
+            {it.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/PsqftChart.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { TxRow } from "@/lib/pf/transactions";
+
+interface Props {
+  buy: TxRow[];
+  rent: TxRow[];
+  listingBedrooms: number | null;
+  listingPsqft: number | null; // asking price / size
+}
+
+interface Pt {
+  t: number; // date ms
+  y: number; // AED/sqft
+  bedrooms: number | null;
+  amount: number;
+  size: number | null;
+  comparable: boolean;
+}
+
+const W = 760;
+const H = 320;
+const M = { top: 16, right: 16, bottom: 34, left: 52 };
+const IW = W - M.left - M.right;
+const IH = H - M.top - M.bottom;
+
+const ACCENT = "#2563eb"; // comparable (same bedrooms)
+const MUTED = "#9ca3af"; // other units
+const REF = "#059669"; // this listing
+
+function niceTicks(min: number, max: number, count: number): number[] {
+  if (min === max) return [min];
+  const span = max - min;
+  const step0 = span / count;
+  const mag = Math.pow(10, Math.floor(Math.log10(step0)));
+  const norm = step0 / mag;
+  const step = (norm >= 5 ? 5 : norm >= 2 ? 2 : 1) * mag;
+  const start = Math.ceil(min / step) * step;
+  const out: number[] = [];
+  for (let v = start; v <= max + 1e-6; v += step) out.push(v);
+  return out;
+}
+
+const fmtMonth = (ms: number) =>
+  new Date(ms).toLocaleDateString("es-ES", { month: "short", year: "2-digit" });
+const fmtDate = (ms: number) => new Date(ms).toLocaleDateString("es-ES");
+const fmtAED = (n: number) => new Intl.NumberFormat("en-AE", { maximumFractionDigits: 0 }).format(n);
+
+export default function PsqftChart({ buy, rent, listingBedrooms, listingPsqft }: Props) {
+  const [mode, setMode] = useState<"buy" | "rent">("buy");
+  const [hover, setHover] = useState<{ p: Pt; x: number; y: number } | null>(null);
+
+  const rows = mode === "buy" ? buy : rent;
+
+  const pts: Pt[] = useMemo(
+    () =>
+      rows
+        .filter((r) => r.size_sqft && r.size_sqft > 0 && r.amount > 0 && r.date)
+        .map((r) => ({
+          t: Date.parse(r.date),
+          y: r.amount / (r.size_sqft as number), // sale AED/sqft, or annual rent AED/sqft
+          bedrooms: r.bedrooms,
+          amount: r.amount,
+          size: r.size_sqft,
+          comparable: listingBedrooms != null && r.bedrooms === listingBedrooms,
+        }))
+        .filter((p) => Number.isFinite(p.t) && Number.isFinite(p.y))
+        .sort((a, b) => a.t - b.t),
+    [rows, listingBedrooms]
+  );
+
+  const scales = useMemo(() => {
+    if (!pts.length) return null;
+    const ts = pts.map((p) => p.t);
+    const ys = pts.map((p) => p.y);
+    const refY = mode === "buy" ? listingPsqft ?? null : null;
+    const tMin = Math.min(...ts);
+    const tMax = Math.max(...ts);
+    let yMin = Math.min(...ys, ...(refY ? [refY] : []));
+    let yMax = Math.max(...ys, ...(refY ? [refY] : []));
+    const pad = (yMax - yMin) * 0.1 || yMax * 0.1 || 1;
+    yMin = Math.max(0, yMin - pad);
+    yMax = yMax + pad;
+    const x = (t: number) => (tMax === tMin ? IW / 2 : ((t - tMin) / (tMax - tMin)) * IW);
+    const y = (v: number) => IH - ((v - yMin) / (yMax - yMin)) * IH;
+    // median of comparable set (fallback to all)
+    const comp = pts.filter((p) => p.comparable);
+    const base = (comp.length ? comp : pts).map((p) => p.y).sort((a, b) => a - b);
+    const median = base.length ? base[Math.floor(base.length / 2)] : null;
+    return { x, y, tMin, tMax, yMin, yMax, refY, median };
+  }, [pts, mode, listingPsqft]);
+
+  const compCount = pts.filter((p) => p.comparable).length;
+
+  return (
+    <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <h3 className="text-sm font-bold">
+          AED/sqft por transacción{" "}
+          <span className="font-normal text-neutral-500">
+            ({mode === "buy" ? "ventas" : "alquileres anuales"} del edificio · {pts.length})
+          </span>
+        </h3>
+        <div className="flex overflow-hidden rounded-lg border border-neutral-300 text-xs dark:border-neutral-700">
+          {(["buy", "rent"] as const).map((m) => (
+            <button
+              key={m}
+              onClick={() => {
+                setMode(m);
+                setHover(null);
+              }}
+              className={`px-3 py-1 font-semibold ${
+                mode === m
+                  ? "bg-neutral-900 text-white dark:bg-white dark:text-neutral-900"
+                  : "text-neutral-600 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800"
+              }`}
+            >
+              {m === "buy" ? "Venta" : "Alquiler"}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {!scales ? (
+        <p className="py-10 text-center text-sm text-neutral-500">
+          Sin transacciones de {mode === "buy" ? "venta" : "alquiler"} registradas.
+        </p>
+      ) : (
+        <div className="relative">
+          <svg viewBox={`0 0 ${W} ${H}`} className="w-full" style={{ height: "auto" }} role="img">
+            <g transform={`translate(${M.left},${M.top})`}>
+              {/* Y grid + labels */}
+              {niceTicks(scales.yMin, scales.yMax, 5).map((v) => (
+                <g key={v}>
+                  <line x1={0} x2={IW} y1={scales.y(v)} y2={scales.y(v)} stroke="currentColor" strokeOpacity={0.12} />
+                  <text x={-8} y={scales.y(v)} dy="0.32em" textAnchor="end" className="fill-neutral-500 text-[10px]">
+                    {fmtAED(v)}
+                  </text>
+                </g>
+              ))}
+              {/* X labels */}
+              {niceTicks(scales.tMin, scales.tMax, 5).map((t) => (
+                <text
+                  key={t}
+                  x={scales.x(t)}
+                  y={IH + 20}
+                  textAnchor="middle"
+                  className="fill-neutral-500 text-[10px]"
+                >
+                  {fmtMonth(t)}
+                </text>
+              ))}
+
+              {/* median line */}
+              {scales.median != null && (
+                <line
+                  x1={0}
+                  x2={IW}
+                  y1={scales.y(scales.median)}
+                  y2={scales.y(scales.median)}
+                  stroke={MUTED}
+                  strokeDasharray="4 4"
+                  strokeWidth={1.5}
+                />
+              )}
+              {/* this-listing reference line (sale only) */}
+              {scales.refY != null && (
+                <>
+                  <line
+                    x1={0}
+                    x2={IW}
+                    y1={scales.y(scales.refY)}
+                    y2={scales.y(scales.refY)}
+                    stroke={REF}
+                    strokeWidth={2}
+                  />
+                  <text x={IW} y={scales.y(scales.refY) - 5} textAnchor="end" className="text-[10px]" fill={REF}>
+                    este anuncio {fmtAED(scales.refY)}
+                  </text>
+                </>
+              )}
+
+              {/* points: muted first, comparable on top */}
+              {pts
+                .slice()
+                .sort((a, b) => Number(a.comparable) - Number(b.comparable))
+                .map((p, i) => (
+                  <circle
+                    key={i}
+                    cx={scales.x(p.t)}
+                    cy={scales.y(p.y)}
+                    r={p.comparable ? 5 : 3.5}
+                    fill={p.comparable ? ACCENT : "none"}
+                    stroke={p.comparable ? "#fff" : MUTED}
+                    strokeWidth={p.comparable ? 1.5 : 1.5}
+                    opacity={p.comparable ? 1 : 0.7}
+                    onMouseEnter={() => setHover({ p, x: scales.x(p.t), y: scales.y(p.y) })}
+                    onMouseLeave={() => setHover(null)}
+                    style={{ cursor: "pointer" }}
+                  />
+                ))}
+            </g>
+          </svg>
+
+          {hover && (
+            <div
+              className="pointer-events-none absolute z-10 rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 text-[11px] shadow-lg dark:border-neutral-700 dark:bg-neutral-800"
+              style={{
+                left: `calc(${((M.left + hover.x) / W) * 100}% + 8px)`,
+                top: `calc(${((M.top + hover.y) / H) * 100}% - 8px)`,
+                transform: hover.x > IW * 0.7 ? "translateX(-100%) translateX(-16px)" : undefined,
+              }}
+            >
+              <div className="font-bold">{fmtAED(hover.p.y)} AED/sqft</div>
+              <div className="text-neutral-500">
+                {fmtDate(hover.p.t)} · {hover.p.bedrooms === 0 ? "Studio" : `${hover.p.bedrooms ?? "?"} hab`}
+              </div>
+              <div className="text-neutral-500">
+                {fmtAED(hover.p.amount)} AED · {hover.p.size ? Math.round(hover.p.size) : "—"} sqft
+              </div>
+            </div>
+          )}
+
+          <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-neutral-500">
+            <span className="flex items-center gap-1.5">
+              <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: ACCENT }} />
+              Mismo nº de habitaciones ({compCount})
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span className="inline-block h-2.5 w-2.5 rounded-full border-[1.5px]" style={{ borderColor: MUTED }} />
+              Otras unidades
+            </span>
+            <span className="flex items-center gap-1.5">
+              <span className="inline-block h-0 w-4 border-t-[1.5px] border-dashed" style={{ borderColor: MUTED }} />
+              Mediana
+            </span>
+            {mode === "buy" && listingPsqft != null && (
+              <span className="flex items-center gap-1.5">
+                <span className="inline-block h-0 w-4 border-t-2" style={{ borderColor: REF }} />
+                Este anuncio
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}