);
}
// ── Hero ───────────────────────────────────────────────────────
// Minimal hero: headline + sub + single live counter pill + CTA.
// Search controls live in the sticky filter bar below — no duplication.
function Hero({ count, onScrollTo }) {
return (
Inmobiliaria · Tenerife
Encuentra tu hogar donde vive el sol.
Tu agente inmobiliario de confianza en Tenerife y Canarias. Pisos, casas, áticos y locales en venta y alquiler con atención personalizada.
{count} propiedades activas
{ e.target.style.display = 'none'; }} />
Paula GutiérrezTu agente de confianza en Tenerife
);
}
function SearchBar({ filters, setFilters, onSearch }) {
const set = (k, v) => setFilters({ ...filters, [k]: v });
return (
set('area', e.target.value)} />
);
}
// ── Dual range slider ──────────────────────────────────────────
// Two overlaid native sliders + a fill bar between them. Native thumbs
// stay accessible; pointer-events:none on the rail and re-enabled on the
// thumbs only so each thumb is independently grabbable.
function DualRangeSlider({ min, max, step, valueMin, valueMax, onChange, format = (v) => v }) {
const vMin = valueMin === '' || valueMin == null ? min : Number(valueMin);
const vMax = valueMax === '' || valueMax == null ? max : Number(valueMax);
const pct = (v) => ((v - min) / (max - min)) * 100;
const handleMin = (e) => {
const v = Math.min(Number(e.target.value), vMax - step);
onChange({ min: v === min ? '' : v, max: valueMax });
};
const handleMax = (e) => {
const v = Math.max(Number(e.target.value), vMin + step);
onChange({ min: valueMin, max: v === max ? '' : v });
};
return (
Desde{format(vMin)}
Hasta{format(vMax)}{vMax === max ? '+' : ''}
);
}
// ── Filter chip popover ────────────────────────────────────────
// Popover is rendered into document.body via a portal so it escapes the
// subbar's backdrop-filter stacking context (which otherwise traps it
// behind the Leaflet map regardless of z-index).
function FilterChip({ label, value, hasValue, children, wide }) {
const [open, setOpen] = useState(false);
const btnRef = useRef(null);
const [pos, setPos] = useState({ left: 0, top: 0 });
useEffect(() => {
if (!open || !btnRef.current) return;
const r = btnRef.current.getBoundingClientRect();
// Anchor so the popover sits below + roughly aligned with the chip,
// but never past the viewport's right edge (popovers can be 320–380px).
const width = wide ? 380 : 320;
const left = Math.min(r.left, window.innerWidth - width - 16);
setPos({ left: Math.max(16, left), top: r.bottom + 8 });
}, [open, wide]);
return (
<>
{open && ReactDOM.createPortal(
<>
{ e.target.style.display = 'none'; }} />