brickwise 0.1.7 → 0.1.21

package/src/app/listing/[id]/page.tsx

@@ -79,10 +79,6 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
           <h1 className="text-2xl font-bold">{listing.title}</h1>
           <YieldBadge value={analysis.gross_yield} n={analysis.rent_n} />
         </div>
-        <p className="mt-1 text-sm text-neutral-500">
-          {listing.tower_name} · {listing.bedrooms === 0 ? "Studio" : `${listing.bedrooms ?? "?"} hab`} ·{" "}
-          {listing.bathrooms ?? "?"} baños · {fmtSqft(listing.size_sqft)} · {listing.property_type}
-        </p>
         <div className="mt-1 flex items-center gap-4">
           <a
             href={listing.url}
@@ -143,41 +139,68 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
         </div>
       )}
 
-      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-        <Stat
-          label="Rentabilidad anual de alquiler"
-          value={fmtPct(analysis.gross_yield)}
-          sub="renta anual mediana ÷ precio de venta mediana (unidades comparables del edificio)"
-          accent={analysis.gross_yield != null && analysis.gross_yield >= 0.06 ? "good" : undefined}
-        />
-        <Stat
-          label="Se alquila por (año, mediana)"
-          value={fmtAED(analysis.median_rent)}
-          sub={`${analysis.rent_n} alquiler${analysis.rent_n === 1 ? "" : "es"} de tamaño similar (±20%, 24 meses)${
-            analysis.rent_p25 != null && analysis.rent_p75 != null
-              ? ` · rango ${fmtAED(analysis.rent_p25)}–${fmtAED(analysis.rent_p75)}`
-              : ""
-          }`}
-        />
-        <Stat
-          label="Se vende por (mediana)"
-          value={fmtAED(analysis.median_sale_price)}
-          sub={`${analysis.buy_n} venta${analysis.buy_n === 1 ? "" : "s"} de tamaño similar (±20%, 24 meses)${
-            analysis.sale_p25 != null ? ` · objetivo compra p/ reformar ≈ ${fmtAED(analysis.sale_p25)} (P25)` : ""
-          }`}
-        />
-        <Stat
-          label="Rentabilidad sobre el precio del anuncio"
-          value={fmtPct(analysis.asking_yield)}
-          sub={`si lo compras por ${fmtAED(listing.price)}`}
-        />
-        <Stat
-          label="Gimnasio más cercano (OSM)"
-          value={fmtDist(analysis.gym_distance_m)}
-          sub={analysis.gym_name ?? undefined}
-        />
-        <Stat label="AED/sqft del anuncio" value={listing.size_sqft ? `${Math.round(listing.price / listing.size_sqft)} AED/sqft` : "—"} />
-      </div>
+      {/* -------- Datos básicos (raw property facts) ------------------------ */}
+      <section>
+        <h2 className="mb-2 text-sm font-bold uppercase tracking-wide text-neutral-500">Datos básicos</h2>
+        <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
+          <p className="flex items-baseline gap-2">
+            <span className="text-3xl font-bold" style={{ color: "var(--accent)" }}>{fmtAED(listing.price)}</span>
+            {listing.size_sqft ? (
+              <span className="text-sm text-neutral-500">· {Math.round(listing.price / listing.size_sqft)} AED/sqft</span>
+            ) : null}
+          </p>
+          <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3 lg:grid-cols-6">
+            <Fact label="Superficie" value={fmtSqft(listing.size_sqft)} />
+            <Fact label="Habitaciones" value={listing.bedrooms === 0 ? "Studio" : listing.bedrooms != null ? String(listing.bedrooms) : "—"} />
+            <Fact label="Baños" value={listing.bathrooms != null ? String(listing.bathrooms) : "—"} />
+            <Fact label="Tipo" value={listing.property_type || "—"} />
+            <Fact label="AED/sqft" value={listing.size_sqft ? `${Math.round(listing.price / listing.size_sqft)}` : "—"} />
+            <Fact label="Edificio" value={listing.tower_name || "—"} />
+          </div>
+        </div>
+      </section>
+
+      {/* -------- Análisis (computed metrics) ------------------------------- */}
+      <section>
+        <h2 className="mb-2 flex items-center text-sm font-bold uppercase tracking-wide text-neutral-500">
+          Análisis
+          <InfoList items={ANALYSIS_HELP} />
+        </h2>
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <Stat
+            label="Rentabilidad anual de alquiler"
+            value={fmtPct(analysis.gross_yield)}
+            sub="renta anual mediana ÷ precio de venta mediana (unidades comparables del edificio)"
+            accent={analysis.gross_yield != null && analysis.gross_yield >= 0.06 ? "good" : undefined}
+          />
+          <Stat
+            label="Se alquila por (año, mediana)"
+            value={fmtAED(analysis.median_rent)}
+            sub={`${analysis.rent_n} alquiler${analysis.rent_n === 1 ? "" : "es"} de tamaño similar (±20%, 24 meses)${
+              analysis.rent_p25 != null && analysis.rent_p75 != null
+                ? ` · rango ${fmtAED(analysis.rent_p25)}–${fmtAED(analysis.rent_p75)}`
+                : ""
+            }`}
+          />
+          <Stat
+            label="Se vende por (mediana)"
+            value={fmtAED(analysis.median_sale_price)}
+            sub={`${analysis.buy_n} venta${analysis.buy_n === 1 ? "" : "s"} de tamaño similar (±20%, 24 meses)${
+              analysis.sale_p25 != null ? ` · objetivo compra p/ reformar ≈ ${fmtAED(analysis.sale_p25)} (P25)` : ""
+            }`}
+          />
+          <Stat
+            label="Rentabilidad sobre el precio del anuncio"
+            value={fmtPct(analysis.asking_yield)}
+            sub={`si lo compras por ${fmtAED(listing.price)}`}
+          />
+          <Stat
+            label="Gimnasio más cercano (OSM)"
+            value={fmtDist(analysis.gym_distance_m)}
+            sub={analysis.gym_name ?? undefined}
+          />
+        </div>
+      </section>
 
       {listing.amenities?.length > 0 && (
         <div className="flex flex-wrap gap-1.5">
@@ -228,6 +251,57 @@ export default function ListingPage({ params }: { params: Promise<{ id: string }
   );
 }
 
+const ANALYSIS_HELP: { term: string; desc: string }[] = [
+  {
+    term: "Rentabilidad anual de alquiler",
+    desc: "Renta anual mediana ÷ precio de venta mediana de unidades comparables (mismo edificio, tamaño ±20%, últimos 24 meses). Es la rentabilidad bruta que da el mercado, independiente del precio de este anuncio.",
+  },
+  {
+    term: "Se alquila por (año, mediana)",
+    desc: "Mediana de los contratos de alquiler anuales de unidades de tamaño similar (±20%) del edificio, últimos 24 meses. El rango es P25–P75: lo que pagan los pisos peor y mejor acondicionados.",
+  },
+  {
+    term: "Se vende por (mediana)",
+    desc: "Mediana de las ventas registradas en el DLD de tamaño similar (±20%), últimos 24 meses. El P25 es el tramo bajo del mercado ≈ precio objetivo de compra para reformar.",
+  },
+  {
+    term: "Rentabilidad sobre el precio del anuncio",
+    desc: "Renta anual mediana ÷ el precio que pide ESTE anuncio. Indica si este piso, a su precio, rinde por encima o por debajo de la mediana del edificio.",
+  },
+  {
+    term: "Gimnasio más cercano",
+    desc: "Distancia en línea recta al gimnasio más próximo según OpenStreetMap.",
+  },
+];
+
+function Fact({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <div className="text-[11px] font-semibold uppercase tracking-wide text-neutral-400">{label}</div>
+      <div className="mt-0.5 text-sm font-medium">{value}</div>
+    </div>
+  );
+}
+
+function InfoList({ items }: { items: { term: string; desc: string }[] }) {
+  return (
+    <span className="group relative ml-2 inline-flex align-middle normal-case">
+      <span className="flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-neutral-400 text-[10px] font-bold text-neutral-500 dark:border-neutral-500">
+        ?
+      </span>
+      <span className="pointer-events-none absolute left-0 top-6 z-30 w-80 rounded-md border border-neutral-200 bg-white p-3 text-left opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:border-neutral-700 dark:bg-neutral-800">
+        <span className="mb-1 block text-[11px] font-bold uppercase tracking-wide text-neutral-500">Cómo leer cada campo</span>
+        {items.map((it) => (
+          <span key={it.term} className="mb-2 block last:mb-0">
+            <span className="block text-[11px] font-semibold text-neutral-700 dark:text-neutral-200">{it.term}</span>
+            <span className="block text-[11px] font-normal leading-snug text-neutral-500 dark:text-neutral-400">{it.desc}</span>
+          </span>
+        ))}
+      </span>
+    </span>
+  );
+}
+
 function Stat({ label, value, sub, accent }: { label: string; value: string; sub?: string; accent?: "good" | "bad" }) {
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">

package/src/components/ReformScenario.tsx

@@ -4,7 +4,6 @@ import { useState } from "react";
 import { fmtAED, fmtPct } from "@/lib/format";
 import { AnalysisRow } from "@/lib/types";
 
-const DEFAULT_AED_PER_SQFT = 300;
 const SIZE_TOLERANCE = 0.2;
 
 interface Props {
@@ -15,30 +14,101 @@ interface Props {
 }
 
 /**
- * Buy → light reform → rent higher. Within one building + size band the location
- * is fixed, so the comparable-rent spread (P25→P75) approximates what the market
- * pays for interior condition; renting at ~P75 is the realistic post-reform rent.
+ * Itemized reform model. The rent uplift you can claim depends on the SCOPE of
+ * the reform (which items you do), not on the money you type in: each item
+ * captures a share ("weight") of the median→P75 spread. Costs only affect the
+ * payback. This prevents "cheap reform + full P75 rent" from inflating yields.
+ *
+ * Default costs are rough Dubai light-reform figures per sqft; edit them freely.
  */
+const ITEMS = {
+  mobiliario: { label: "Mobiliario", defaults: { comprado: 45, medida: 100 }, weights: { comprado: 0.4, medida: 0.5 } },
+  suelo: { label: "Suelo", perSqft: 55, weight: 0.25 },
+  paredes: { label: "Paredes (pintura y arreglos)", perSqft: 12, weight: 0.2 },
+  techos: { label: "Techos (falso techo e iluminación)", perSqft: 20, weight: 0.1 },
+} as const;
+
+type FurnitureType = "comprado" | "medida";
+
+interface ReformState {
+  mobiliario: { on: boolean; tipo: FurnitureType; cost: number };
+  suelo: { on: boolean; cost: number };
+  paredes: { on: boolean; cost: number };
+  techos: { on: boolean; cost: number };
+}
+
+function defaultState(sizeSqft: number | null): ReformState {
+  const s = sizeSqft ?? 500;
+  return {
+    mobiliario: { on: true, tipo: "comprado", cost: Math.round(s * ITEMS.mobiliario.defaults.comprado) },
+    suelo: { on: true, cost: Math.round(s * ITEMS.suelo.perSqft) },
+    paredes: { on: true, cost: Math.round(s * ITEMS.paredes.perSqft) },
+    techos: { on: false, cost: Math.round(s * ITEMS.techos.perSqft) },
+  };
+}
+
+const REFORM_HELP =
+  "Comparamos los alquileres de pisos de TAMAÑO SIMILAR (±20%) del mismo edificio (24 meses). " +
+  "P25 = piso sin reformar; P75 = bien reformado; mediana = el típico. La reforma solo puede capturar " +
+  "el margen mediana→P75, y CADA PARTIDA captura una parte: mobiliario 40% (50% si es a medida), " +
+  "suelo 25%, paredes 20%, techos 10%. Marcar o desmarcar partidas cambia la renta esperada; " +
+  "el coste que escribas solo cambia el payback — así una reforma barata no infla la rentabilidad.";
+
+/** Small "?" badge with a hover tooltip. */
+function InfoTip({ text }: { text: string }) {
+  return (
+    <span className="group relative ml-1 inline-flex align-middle normal-case">
+      <span className="flex h-4 w-4 cursor-help items-center justify-center rounded-full border border-neutral-400 text-[10px] font-bold text-neutral-500 dark:border-neutral-500">
+        ?
+      </span>
+      <span className="pointer-events-none absolute left-0 top-5 z-30 w-72 rounded-md border border-neutral-200 bg-white p-2.5 text-[11px] font-normal leading-snug text-neutral-600 opacity-0 shadow-lg transition-opacity group-hover:opacity-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300">
+        {text}
+      </span>
+    </span>
+  );
+}
+
 export default function ReformScenario({ listingId, price, sizeSqft, analysis }: Props) {
-  const [cost, setCost] = useState(() => {
-    const fallback = sizeSqft ? Math.round(sizeSqft * DEFAULT_AED_PER_SQFT) : 100000;
+  const [state, setState] = useState<ReformState>(() => {
+    const fallback = defaultState(sizeSqft);
     if (typeof window === "undefined") return fallback;
-    const saved = Number(localStorage.getItem(`bw-reform-${listingId}`));
-    return Number.isFinite(saved) && saved > 0 ? saved : fallback;
+    try {
+      const saved = JSON.parse(localStorage.getItem(`bw-reform-${listingId}`) ?? "");
+      // Older versions stored a plain number — ignore those.
+      if (saved && typeof saved === "object" && saved.mobiliario) return saved as ReformState;
+    } catch {}
+    return fallback;
   });
 
   const { rent_p25, rent_p75, median_rent, rent_n, asking_yield } = analysis;
   if (rent_p25 == null || rent_p75 == null || median_rent == null || rent_n < 3) return null;
 
-  const setAndSave = (v: number) => {
-    setCost(v);
-    if (Number.isFinite(v) && v >= 0) localStorage.setItem(`bw-reform-${listingId}`, String(v));
+  const update = (next: ReformState) => {
+    setState(next);
+    localStorage.setItem(`bw-reform-${listingId}`, JSON.stringify(next));
   };
 
-  const postReformYield = rent_p75 / (price + cost);
-  const uplift = rent_p75 - median_rent;
-  const paybackYears = uplift > 0 ? cost / uplift : null;
+  const uplift = rent_p75 - median_rent; // full spread captured by a complete reform
+  const weightOf = {
+    mobiliario: state.mobiliario.on ? ITEMS.mobiliario.weights[state.mobiliario.tipo] : 0,
+    suelo: state.suelo.on ? ITEMS.suelo.weight : 0,
+    paredes: state.paredes.on ? ITEMS.paredes.weight : 0,
+    techos: state.techos.on ? ITEMS.techos.weight : 0,
+  };
+  const scope = Math.min(1, weightOf.mobiliario + weightOf.suelo + weightOf.paredes + weightOf.techos);
+  const totalCost =
+    (state.mobiliario.on ? state.mobiliario.cost : 0) +
+    (state.suelo.on ? state.suelo.cost : 0) +
+    (state.paredes.on ? state.paredes.cost : 0) +
+    (state.techos.on ? state.techos.cost : 0);
+
+  const expectedRent = median_rent + uplift * scope;
+  const capturedUplift = expectedRent - median_rent;
+  const postReformYield = expectedRent / (price + totalCost);
+  const paybackYears = capturedUplift > 0 && totalCost > 0 ? totalCost / capturedUplift : null;
   const spread = (rent_p75 - rent_p25) / median_rent;
+  const medianPct =
+    rent_p75 > rent_p25 ? Math.min(96, Math.max(4, ((median_rent - rent_p25) / (rent_p75 - rent_p25)) * 100)) : 50;
 
   const spreadReading =
     spread >= 0.15
@@ -51,16 +121,48 @@ export default function ReformScenario({ listingId, price, sizeSqft, analysis }:
     ? `${Math.round(sizeSqft * (1 - SIZE_TOLERANCE))}–${Math.round(sizeSqft * (1 + SIZE_TOLERANCE))} sqft`
     : null;
 
+  const rowCls = "flex items-center gap-2 py-1";
+  const inputCls =
+    "w-24 rounded border border-neutral-300 bg-white px-1.5 py-0.5 text-right text-xs outline-none focus:border-blue-500 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950";
+
+  const itemRow = (
+    key: "suelo" | "paredes" | "techos",
+    label: string,
+    weight: number
+  ) => (
+    <label className={rowCls}>
+      <input
+        type="checkbox"
+        checked={state[key].on}
+        onChange={(e) => update({ ...state, [key]: { ...state[key], on: e.target.checked } })}
+        className="h-3.5 w-3.5 accent-blue-600"
+      />
+      <span className="flex-1 text-xs">{label}</span>
+      <span className="text-[10px] text-neutral-400">+{Math.round(weight * 100)}%</span>
+      <input
+        type="number"
+        min={0}
+        step={1000}
+        disabled={!state[key].on}
+        value={state[key].cost}
+        suppressHydrationWarning
+        onChange={(e) => update({ ...state, [key]: { ...state[key], cost: Number(e.target.value) } })}
+        className={inputCls}
+      />
+    </label>
+  );
+
   return (
     <div className="rounded-xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
       <h3 className="text-sm font-bold">
-        Escenario de reforma{" "}
+        Escenario de reforma
+        <InfoTip text={REFORM_HELP} />{" "}
         <span className="font-normal text-neutral-500">
           ({rent_n} alquileres comparables{band ? ` · ${band}` : ""})
         </span>
       </h3>
 
-      <div className="mt-3 grid gap-4 lg:grid-cols-[1fr_auto_1fr]">
+      <div className="mt-3 grid gap-4 lg:grid-cols-[1fr_auto_1.15fr]">
         {/* Rent range of comparables */}
         <div>
           <div className="mb-1 flex justify-between text-[11px] text-neutral-500">
@@ -68,20 +170,32 @@ export default function ReformScenario({ listingId, price, sizeSqft, analysis }:
             <span>mediana</span>
             <span>P75 (reformado)</span>
           </div>
-          <div className="relative h-2 rounded-full bg-gradient-to-r from-red-300 via-amber-300 to-emerald-400 dark:from-red-900 dark:via-amber-700 dark:to-emerald-600">
+          <div className="relative h-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800">
             {rent_p75 > rent_p25 && (
-              <span
-                className="absolute -top-1 h-4 w-1 rounded bg-neutral-900 dark:bg-white"
-                style={{ left: `${Math.min(99, Math.max(1, ((median_rent - rent_p25) / (rent_p75 - rent_p25)) * 100))}%` }}
-                title={`mediana ${fmtAED(median_rent)}`}
-              />
+              <>
+                {/* upside captured by the CURRENT scope */}
+                <div
+                  className="absolute inset-y-0 rounded-r-full bg-emerald-400 dark:bg-emerald-600"
+                  style={{ left: `${medianPct}%`, width: `${(100 - medianPct) * scope}%` }}
+                  title={`Margen capturado por esta reforma (${Math.round(scope * 100)}%)`}
+                />
+                <span
+                  className="absolute -top-[3px] h-[17px] w-[3px] -translate-x-1/2 rounded bg-neutral-900 dark:bg-white"
+                  style={{ left: `${medianPct}%` }}
+                  title={`mediana ${fmtAED(median_rent)}`}
+                />
+              </>
             )}
           </div>
-          <div className="mt-1 flex justify-between text-xs font-semibold">
+          <div className="mt-1.5 flex justify-between text-xs font-semibold">
             <span>{fmtAED(rent_p25)}</span>
             <span className="text-neutral-500">{fmtAED(median_rent)}</span>
             <span>{fmtAED(rent_p75)}</span>
           </div>
+          <div className="mt-1 flex items-center gap-1.5 text-[10px] text-neutral-500">
+            <span className="inline-block h-2 w-3 rounded-sm bg-emerald-400 dark:bg-emerald-600" />
+            margen capturado por esta reforma ({Math.round(scope * 100)}% del total)
+          </div>
           <p className={`mt-2 text-xs ${spreadReading.cls}`}>
             Dispersión {fmtPct(spread, 0)} de la mediana — {spreadReading.txt}
           </p>
@@ -89,30 +203,71 @@ export default function ReformScenario({ listingId, price, sizeSqft, analysis }:
 
         <div className="hidden w-px bg-neutral-200 lg:block dark:bg-neutral-800" />
 
-        {/* Calculator */}
+        {/* Itemized reform */}
         <div className="text-sm">
-          <label className="text-xs font-semibold text-neutral-600 dark:text-neutral-400">
-            Coste de la reforma (AED)
-            {sizeSqft ? <span className="ml-1 font-normal text-neutral-400">(defecto {DEFAULT_AED_PER_SQFT}/sqft)</span> : null}
+          <div className="mb-1 flex items-center justify-between">
+            <span className="text-xs font-semibold text-neutral-600 dark:text-neutral-400">Partidas de la reforma</span>
+            <span className="text-[10px] text-neutral-400">% del margen · coste AED</span>
+          </div>
+
+          {/* Mobiliario: checkbox + type selector */}
+          <label className={rowCls}>
+            <input
+              type="checkbox"
+              checked={state.mobiliario.on}
+              onChange={(e) => update({ ...state, mobiliario: { ...state.mobiliario, on: e.target.checked } })}
+              className="h-3.5 w-3.5 accent-blue-600"
+            />
+            <span className="text-xs">Mobiliario</span>
+            <select
+              disabled={!state.mobiliario.on}
+              value={state.mobiliario.tipo}
+              onChange={(e) => {
+                const tipo = e.target.value as FurnitureType;
+                const cost = sizeSqft ? Math.round(sizeSqft * ITEMS.mobiliario.defaults[tipo]) : state.mobiliario.cost;
+                update({ ...state, mobiliario: { ...state.mobiliario, tipo, cost } });
+              }}
+              className="rounded border border-neutral-300 bg-white px-1 py-0.5 text-[11px] disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950"
+            >
+              <option value="comprado">comprado</option>
+              <option value="medida">a medida</option>
+            </select>
+            <span className="flex-1" />
+            <span className="text-[10px] text-neutral-400">
+              +{Math.round(ITEMS.mobiliario.weights[state.mobiliario.tipo] * 100)}%
+            </span>
+            <input
+              type="number"
+              min={0}
+              step={1000}
+              disabled={!state.mobiliario.on}
+              value={state.mobiliario.cost}
+              suppressHydrationWarning
+              onChange={(e) => update({ ...state, mobiliario: { ...state.mobiliario, cost: Number(e.target.value) } })}
+              className={inputCls}
+            />
           </label>
-          <input
-            type="number"
-            min={0}
-            step={5000}
-            suppressHydrationWarning
-            value={cost}
-            onChange={(e) => setAndSave(Number(e.target.value))}
-            className="mt-1 w-40 rounded-lg border border-neutral-300 bg-white px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 dark:border-neutral-700 dark:bg-neutral-950"
-          />
-          <div className="mt-3 grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
+
+          {itemRow("suelo", "Suelo", ITEMS.suelo.weight)}
+          {itemRow("paredes", "Paredes (pintura y arreglos)", ITEMS.paredes.weight)}
+          {itemRow("techos", "Techos (falso techo, iluminación)", ITEMS.techos.weight)}
+
+          <div className="mt-2 grid grid-cols-2 gap-x-6 gap-y-1.5 border-t border-neutral-200 pt-2 text-xs dark:border-neutral-800">
+            <span className="text-neutral-500">Coste total</span>
+            <b>{fmtAED(totalCost)}</b>
+            <span className="text-neutral-500">Renta esperada post-reforma</span>
+            <b>
+              {fmtAED(Math.round(expectedRent))}
+              <span className="ml-1 font-normal text-neutral-400">({Math.round(scope * 100)}% del margen)</span>
+            </b>
             <span className="text-neutral-500">Yield actual (mediana / precio)</span>
             <b>{fmtPct(asking_yield)}</b>
-            <span className="text-neutral-500">Yield post-reforma (P75 / precio+reforma)</span>
+            <span className="text-neutral-500">Yield post-reforma</span>
             <b className={postReformYield > (asking_yield ?? 0) ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}>
               {fmtPct(postReformYield)}
             </b>
-            <span className="text-neutral-500">Renta extra al año (P75 − mediana)</span>
-            <b>{fmtAED(uplift)}</b>
+            <span className="text-neutral-500">Renta extra al año</span>
+            <b>{fmtAED(Math.round(capturedUplift))}</b>
             <span className="text-neutral-500">Payback de la reforma</span>
             <b>{paybackYears != null ? `${paybackYears.toFixed(1)} años` : "—"}</b>
           </div>

package/src/components/YieldBadge.tsx

@@ -1,4 +1,5 @@
 import { fmtPct } from "@/lib/format";
+import { yieldColor } from "@/lib/yieldColor";
 
 export default function YieldBadge({ value, n }: { value: number | null; n?: number }) {
   if (value == null)
@@ -7,18 +8,13 @@ export default function YieldBadge({ value, n }: { value: number | null; n?: num
         sin datos
       </span>
     );
-  const color =
-    value >= 0.07
-      ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300"
-      : value >= 0.055
-        ? "bg-lime-100 text-lime-800 dark:bg-lime-950 dark:text-lime-300"
-        : value >= 0.04
-          ? "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300"
-          : "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300";
   return (
-    <span className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ${color}`}>
+    <span
+      className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+      style={{ background: yieldColor(value) }}
+    >
       {fmtPct(value)}
-      {n != null && <span className="font-normal opacity-70">({n} tx)</span>}
+      {n != null && <span className="font-normal opacity-80">({n} tx)</span>}
     </span>
   );
 }

package/src/lib/db.ts

@@ -100,6 +100,14 @@ CREATE TABLE IF NOT EXISTS gyms_list_cache (
   fetched_at TEXT NOT NULL
 );
 
+CREATE TABLE IF NOT EXISTS poi_list_cache (
+  geo_key TEXT NOT NULL,
+  kind TEXT NOT NULL,
+  json TEXT NOT NULL,
+  fetched_at TEXT NOT NULL,
+  PRIMARY KEY (geo_key, kind)
+);
+
 CREATE TABLE IF NOT EXISTS favorites (
   listing_id TEXT PRIMARY KEY REFERENCES listings(id),
   notes TEXT NOT NULL DEFAULT '',

package/src/lib/gyms.ts

@@ -1,104 +1,20 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { getDb, now } from "./db";
+import { poisNear, Poi } from "./pois";
 
-// Overpass instances are flaky under load; try each twice, in order.
-const OVERPASS_ENDPOINTS = [
-  "https://overpass-api.de/api/interpreter",
-  "https://overpass-api.de/api/interpreter",
-  "https://overpass.private.coffee/api/interpreter",
-  "https://overpass.kumi.systems/api/interpreter",
-];
-const RADIUS_M = 2000;
-const TTL_MS = 30 * 24 * 3600 * 1000;
-
-export interface Gym {
-  name: string;
-  lat: number;
-  lon: number;
-  distance_m: number;
-}
+export type Gym = Poi;
 
 export interface GymResult {
   gym_name: string | null;
   distance_m: number | null;
 }
 
-function haversineM(lat1: number, lon1: number, lat2: number, lon2: number): number {
-  const R = 6371000;
-  const toRad = (d: number) => (d * Math.PI) / 180;
-  const dLat = toRad(lat2 - lat1);
-  const dLon = toRad(lon2 - lon1);
-  const a =
-    Math.sin(dLat / 2) ** 2 +
-    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
-  return 2 * R * Math.asin(Math.sqrt(a));
-}
-
-// Overpass allows very few concurrent requests per IP — serialize ours.
-let queue: Promise<unknown> = Promise.resolve();
-
-/** All gyms (OSM fitness centres) within 2 km, nearest first; cached by ~100 m grid cell. */
+/** All gyms (OSM fitness centres) within 2 km, nearest first; cached. */
 export function gymsNear(lat: number, lon: number): Promise<Gym[] | null> {
-  const task = queue.then(() => doGymsNear(lat, lon));
-  queue = task.catch(() => null);
-  return task;
-}
-
-/** null = Overpass unavailable (not cached); [] = confirmed no gyms nearby. */
-async function doGymsNear(lat: number, lon: number): Promise<Gym[] | null> {
-  const db = getDb();
-  const geoKey = `${lat.toFixed(3)},${lon.toFixed(3)}`;
-  const cached = db.prepare(`SELECT * FROM gyms_list_cache WHERE geo_key = ?`).get(geoKey) as any;
-  if (cached && Date.now() - Date.parse(cached.fetched_at) < TTL_MS) {
-    return JSON.parse(cached.gyms_json);
-  }
-
-  const query = `[out:json][timeout:15];(node["leisure"="fitness_centre"](around:${RADIUS_M},${lat},${lon});way["leisure"="fitness_centre"](around:${RADIUS_M},${lat},${lon}););out center 60;`;
-  for (const endpoint of OVERPASS_ENDPOINTS) {
-    try {
-      const res = await fetch(endpoint, {
-        method: "POST",
-        body: "data=" + encodeURIComponent(query),
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-          // overpass-api.de answers 406 to requests without a User-Agent
-          "User-Agent": "brickwise-local/0.1 (personal use)",
-        },
-        signal: AbortSignal.timeout(20000),
-      });
-      if (!res.ok) continue;
-      const j = await res.json();
-      // Overloaded instances answer 200 + empty elements + a "remark" runtime error.
-      if (j.remark && !(j.elements || []).length) continue;
-      const gyms: Gym[] = [];
-      for (const el of j.elements || []) {
-        const eLat = el.lat ?? el.center?.lat;
-        const eLon = el.lon ?? el.center?.lon;
-        if (eLat == null || eLon == null) continue;
-        gyms.push({
-          name: el.tags?.name || "Gym",
-          lat: eLat,
-          lon: eLon,
-          distance_m: Math.round(haversineM(lat, lon, eLat, eLon)),
-        });
-      }
-      gyms.sort((a, b) => a.distance_m - b.distance_m);
-      db.prepare(
-        `INSERT OR REPLACE INTO gyms_list_cache (geo_key, gyms_json, fetched_at) VALUES (?, ?, ?)`
-      ).run(geoKey, JSON.stringify(gyms), now());
-      return gyms;
-    } catch {
-      continue;
-    }
-  }
-  return null; // all endpoints down: unknown, not cached
+  return poisNear(lat, lon, "gym");
 }
 
 /** Nearest gym within 2 km (derived from the cached list). */
 export async function nearestGym(lat: number, lon: number): Promise<GymResult> {
   const gyms = await gymsNear(lat, lon);
   const best = gyms?.[0];
-  return best
-    ? { gym_name: best.name, distance_m: best.distance_m }
-    : { gym_name: null, distance_m: null };
+  return best ? { gym_name: best.name, distance_m: best.distance_m } : { gym_name: null, distance_m: null };
 }