brickwise 0.1.0 → 0.1.5

package/src/components/ReformScenario.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+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 {
+  listingId: string;
+  price: number;
+  sizeSqft: number | null;
+  analysis: AnalysisRow;
+}
+
+/**
+ * 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.
+ */
+export default function ReformScenario({ listingId, price, sizeSqft, analysis }: Props) {
+  const [cost, setCost] = useState(() => {
+    const fallback = sizeSqft ? Math.round(sizeSqft * DEFAULT_AED_PER_SQFT) : 100000;
+    if (typeof window === "undefined") return fallback;
+    const saved = Number(localStorage.getItem(`bw-reform-${listingId}`));
+    return Number.isFinite(saved) && saved > 0 ? saved : 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 postReformYield = rent_p75 / (price + cost);
+  const uplift = rent_p75 - median_rent;
+  const paybackYears = uplift > 0 ? cost / uplift : null;
+  const spread = (rent_p75 - rent_p25) / median_rent;
+
+  const spreadReading =
+    spread >= 0.15
+      ? { txt: "El interior mueve mucho la renta en este edificio: hay margen real para la reforma.", cls: "text-emerald-700 dark:text-emerald-400" }
+      : spread >= 0.08
+        ? { txt: "Margen moderado: la reforma ayuda, pero no esperes milagros en este edificio.", cls: "text-amber-700 dark:text-amber-400" }
+        : { txt: "El edificio capa la renta: los comparables se alquilan casi igual estén como estén. La reforma difícilmente se paga aquí.", cls: "text-red-700 dark:text-red-400" };
+
+  const band = sizeSqft
+    ? `${Math.round(sizeSqft * (1 - SIZE_TOLERANCE))}–${Math.round(sizeSqft * (1 + SIZE_TOLERANCE))} sqft`
+    : null;
+
+  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{" "}
+        <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]">
+        {/* Rent range of comparables */}
+        <div>
+          <div className="mb-1 flex justify-between text-[11px] text-neutral-500">
+            <span>P25 (sin reformar)</span>
+            <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">
+            {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)}`}
+              />
+            )}
+          </div>
+          <div className="mt-1 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>
+          <p className={`mt-2 text-xs ${spreadReading.cls}`}>
+            Dispersión {fmtPct(spread, 0)} de la mediana — {spreadReading.txt}
+          </p>
+        </div>
+
+        <div className="hidden w-px bg-neutral-200 lg:block dark:bg-neutral-800" />
+
+        {/* Calculator */}
+        <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}
+          </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">
+            <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>
+            <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">Payback de la reforma</span>
+            <b>{paybackYears != null ? `${paybackYears.toFixed(1)} años` : "—"}</b>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/lib/db.ts

@@ -134,8 +134,15 @@ export function getDb(): Database.Database {
 
 function migrate(db: Database.Database) {
   const cols = (db.prepare(`PRAGMA table_info(analyses)`).all() as { name: string }[]).map((c) => c.name);
-  if (!cols.includes("median_sale_price")) db.exec(`ALTER TABLE analyses ADD COLUMN median_sale_price REAL`);
-  if (!cols.includes("asking_yield")) db.exec(`ALTER TABLE analyses ADD COLUMN asking_yield REAL`);
+  const add = (name: string) => {
+    if (!cols.includes(name)) db.exec(`ALTER TABLE analyses ADD COLUMN ${name} REAL`);
+  };
+  add("median_sale_price");
+  add("asking_yield");
+  add("rent_p25");
+  add("rent_p75");
+  add("sale_p25");
+  add("sale_p75");
 }
 
 export function now(): string {

package/src/lib/store.ts

@@ -112,8 +112,9 @@ export function saveAnalysis(listingId: string, y: YieldResult, gym: { gym_name:
     .prepare(
       `INSERT OR REPLACE INTO analyses
        (listing_id, gross_yield, asking_yield, median_rent, median_sale_price,
+        rent_p25, rent_p75, sale_p25, sale_p75,
         rent_n, buy_n, gym_distance_m, gym_name, computed_at)
-       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
     )
     .run(
       listingId,
@@ -121,6 +122,10 @@ export function saveAnalysis(listingId: string, y: YieldResult, gym: { gym_name:
       y.asking_yield,
       y.median_rent,
       y.median_sale_price,
+      y.rent_p25,
+      y.rent_p75,
+      y.sale_p25,
+      y.sale_p75,
       y.rent_n,
       y.buy_n,
       gym.distance_m,
@@ -160,6 +165,7 @@ export function listFavorites(): FavoriteListing[] {
   return getDb()
     .prepare(
       `SELECT l.*, a.gross_yield, a.asking_yield, a.median_rent, a.median_sale_price,
+              a.rent_p25, a.rent_p75, a.sale_p25, a.sale_p75,
               a.rent_n, a.buy_n, a.gym_distance_m, a.gym_name, a.computed_at,
               f.notes, f.added_at
        FROM favorites f
@@ -174,6 +180,7 @@ export function listAnalyzed(): AnalyzedListing[] {
   return getDb()
     .prepare(
       `SELECT l.*, a.gross_yield, a.asking_yield, a.median_rent, a.median_sale_price,
+              a.rent_p25, a.rent_p75, a.sale_p25, a.sale_p75,
               a.rent_n, a.buy_n, a.gym_distance_m, a.gym_name, a.computed_at
        FROM listings l JOIN analyses a ON a.listing_id = l.id
        ORDER BY a.gross_yield DESC NULLS LAST`

package/src/lib/types.ts

@@ -105,6 +105,10 @@ export interface AnalysisRow {
   asking_yield: number | null;
   median_rent: number | null;
   median_sale_price: number | null;
+  rent_p25: number | null;
+  rent_p75: number | null;
+  sale_p25: number | null;
+  sale_p75: number | null;
   rent_n: number;
   buy_n: number;
   gym_distance_m: number | null;
@@ -117,6 +121,10 @@ export interface YieldResult {
   asking_yield: number | null;
   median_rent: number | null;
   median_sale_price: number | null;
+  rent_p25: number | null;
+  rent_p75: number | null;
+  sale_p25: number | null;
+  sale_p75: number | null;
   rent_n: number;
   buy_n: number;
 }

package/src/lib/yield.ts

@@ -5,16 +5,21 @@ const WINDOW_MS = 24 * 30.44 * 24 * 3600 * 1000; // ~24 months
 const MIN_SAMPLES = 3;
 const SIZE_TOLERANCE = 0.2;
 
-function median(xs: number[]): number | null {
+function percentile(xs: number[], p: number): number | null {
   if (xs.length === 0) return null;
   const s = [...xs].sort((a, b) => a - b);
-  const m = Math.floor(s.length / 2);
-  return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+  const idx = (s.length - 1) * p;
+  const lo = Math.floor(idx);
+  const hi = Math.ceil(idx);
+  return lo === hi ? s[lo] : s[lo] + (s[hi] - s[lo]) * (idx - lo);
 }
 
+const median = (xs: number[]) => percentile(xs, 0.5);
+
 /**
- * Comparable units only: same bedrooms + similar size when possible, relaxing to
- * same bedrooms, then similar size. Never falls back to "every transaction in the
+ * Comparable units: SIMILAR SIZE (±20%) is the primary criterion, refined by same
+ * bedroom count when that still leaves a usable sample. Bedrooms-only is a last
+ * resort for listings with no size. Never falls back to "every transaction in the
  * building" — mixing unit types is what produces bogus yields.
  */
 function pickSample(txs: TxRow[], bedrooms: number | null, sizeSqft: number | null): TxRow[] {
@@ -24,16 +29,14 @@ function pickSample(txs: TxRow[], bedrooms: number | null, sizeSqft: number | nu
   const sameSize = (t: TxRow) =>
     sizeSqft != null && t.size_sqft != null && Math.abs(t.size_sqft - sizeSqft) / sizeSqft <= SIZE_TOLERANCE;
 
-  const byBoth = recent.filter((t) => sameBdr(t) && sameSize(t));
-  if (byBoth.length >= MIN_SAMPLES) return byBoth;
-  const byBdr = recent.filter(sameBdr);
-  if (byBdr.length >= MIN_SAMPLES) return byBdr;
+  const bySizeAndBdr = recent.filter((t) => sameSize(t) && sameBdr(t));
+  if (bySizeAndBdr.length >= MIN_SAMPLES) return bySizeAndBdr;
   const bySize = recent.filter(sameSize);
   if (bySize.length >= MIN_SAMPLES) return bySize;
-  // Below MIN_SAMPLES everywhere: use the best comparable set we have, even if tiny.
-  if (byBoth.length) return byBoth;
-  if (byBdr.length) return byBdr;
-  return bySize;
+  // Below MIN_SAMPLES everywhere: best comparable set we have, even if tiny.
+  if (bySizeAndBdr.length) return bySizeAndBdr;
+  if (bySize.length) return bySize;
+  return recent.filter(sameBdr); // only reachable when the listing has no size
 }
 
 /**
@@ -52,14 +55,22 @@ export function computeYield(
   const buySample = pickSample(buyTxs, bedrooms, sizeSqft);
   const rentSample = pickSample(rentTxs, bedrooms, sizeSqft);
 
-  const medianRent = median(rentSample.map((t) => t.amount));
-  const medianSalePrice = median(buySample.map((t) => t.amount));
+  const rents = rentSample.map((t) => t.amount);
+  const sales = buySample.map((t) => t.amount);
+  const medianRent = median(rents);
+  const medianSalePrice = median(sales);
 
   return {
     gross_yield: medianRent != null && medianSalePrice ? medianRent / medianSalePrice : null,
     asking_yield: medianRent != null && price > 0 ? medianRent / price : null,
     median_rent: medianRent,
     median_sale_price: medianSalePrice,
+    // Spread of comparable rents/sales: within one building + size band the location
+    // is fixed, so the P25→P75 range mostly reflects interior condition/furnishing.
+    rent_p25: percentile(rents, 0.25),
+    rent_p75: percentile(rents, 0.75),
+    sale_p25: percentile(sales, 0.25),
+    sale_p75: percentile(sales, 0.75),
     rent_n: rentSample.length,
     buy_n: buySample.length,
   };

package/src/app/api/search/route.ts

@@ -1,26 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { scrapeSearch } from "@/lib/pf/search";
-import { getAnalysis, upsertListing } from "@/lib/store";
-import { dedupeListings } from "@/lib/dedupe";
-import { SearchFilters } from "@/lib/types";
-
-export async function POST(req: NextRequest) {
-  try {
-    const filters = (await req.json()) as SearchFilters;
-    const { properties, totalCount } = await scrapeSearch(filters);
-    const rows = properties.map((p) => upsertListing(p));
-    // Collapse the same physical unit listed by several agents.
-    const { unique, removed } = dedupeListings(rows);
-    const results = unique.map((row) => ({
-      ...row,
-      images: JSON.parse(row.images_json),
-      amenities: JSON.parse(row.amenities_json),
-      // Cached analysis only — nothing is scraped here; the user analyzes on demand.
-      analysis: getAnalysis(row.id),
-    }));
-    return NextResponse.json({ totalCount, count: results.length, duplicatesRemoved: removed, results });
-  } catch (e) {
-    console.error("search failed:", e);
-    return NextResponse.json({ error: (e as Error).message }, { status: 500 });
-  }
-}

package/src/components/FiltersForm.tsx

@@ -1,240 +0,0 @@
-"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>
-  );
-}