setHovered(true)} onMouseLeave={()=>{setHovered(false);setTilt({x:0,y:0});}} data-cursor="property" style={{ background:'#fff', border:`1.5px solid ${hovered?'rgba(21,80,232,0.3)':'rgba(0,0,0,0.06)'}`, borderRadius:20, overflow:'hidden', cursor:'pointer', boxShadow: hovered?'0 20px 60px rgba(21,80,232,0.12), 0 4px 20px rgba(0,0,0,0.06)':'0 2px 12px rgba(0,0,0,0.06)', transform:`perspective(1000px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg) scale(${hovered?1.02:1})`, transformStyle:'preserve-3d', transitionProperty:'transform,border-color,box-shadow', transitionDuration:hovered?'0.05s,0.3s,0.3s':'0.5s,0.3s,0.3s', }}>

{heroImg && ( {prop.name}

{ e.target.style.display='none'; e.target.parentNode.style.background=`linear-gradient(160deg,hsl(${prop.accentHue},55%,88%),hsl(${prop.accentHue},40%,78%))`; }} style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', transform:hovered?'scale(1.06)':'scale(1)', transition:'transform 0.6s ease', }} /> )} {!heroImg && Array.from({length:5}).map((_,r)=>Array.from({length:7}).map((_,c)=>(

0.4?0.35:0.07})`, left:14+c*20, top:16+r*30 }} /> )))}

{prop.type}

{hovered && Ver proyecto →}

{prop.name}

{prop.location}

{prop.priceStr}

{[{icon:'\ud83d\udecf',val:`${prop.beds} rec.`},{icon:'\ud83d\udebf',val:`${prop.baths} baños`},{icon:'\ud83d\udccf',val:`${prop.sqm} m²`}].map(item=>(

{item.icon}{item.val}

))}

Entrega: {prop.completion}

{prop.developer}

); }; const Listings = ({ setPage, setSelectedProperty }) => { useDataVersion(); // re-render when API data loads from Google Sheets const [filter, setFilter] = React.useState('todos'); const [typeFilter, setTypeFilter] = React.useState('todos'); const [sortBy, setSortBy] = React.useState('default'); const [search, setSearch] = React.useState(''); const [ref, vis] = useScrollReveal(0.05); // Build zone chips dynamically from loaded data const availableBuckets = React.useMemo(() => { const seen = new Set(); PROPERTIES.forEach(p => { const b = zoneToFilter(p.zone); if (b) seen.add(b); }); return seen; }, [PROPERTIES.length]); const zones = React.useMemo(() => { const chips = [{ id:'todos', label:'Todos' }]; ['cdmx','cancun','cabos','guadalajara','monterrey','oaxaca','acapulco','vallarta'] .filter(b => availableBuckets.has(b)) .forEach(b => chips.push({ id:b, label: BUCKET_LABELS[b] || b })); return chips; }, [availableBuckets]); React.useEffect(() => { if (filter !== 'todos' && !availableBuckets.has(filter)) setFilter('todos'); }, [availableBuckets]); let filtered = PROPERTIES.filter(p => { if (filter !== 'todos' && zoneToFilter(p.zone) !== filter) return false; if (typeFilter !== 'todos' && p.type !== typeFilter) return false; if (search) { const q = search.toLowerCase(); if (!p.name.toLowerCase().includes(q) && !p.location.toLowerCase().includes(q)) return false; } return true; }); if(sortBy==='price-asc') filtered=[...filtered].sort((a,b)=>a.price-b.price); if(sortBy==='price-desc') filtered=[...filtered].sort((a,b)=>b.price-a.price); const chipStyle = (active) => ({ fontFamily:'DM Sans', fontSize:13, fontWeight:active?700:500, color:active?'#fff':'#6B6560', background:active?'#1550E8':'#fff', border:`1.5px solid ${active?'#1550E8':'rgba(0,0,0,0.1)'}`, borderRadius:100, padding:'7px 18px', cursor:'pointer', transition:'all 0.2s', whiteSpace:'nowrap', boxShadow:active?'0 4px 12px rgba(21,80,232,0.25)':'none', }); return (

Marketplace

Encuentra tu departamento

{PROPERTIES.length} proyectos disponibles en México

setSearch(e.target.value)} placeholder="Buscar proyecto o colonia..." style={{ background:'none', border:'none', outline:'none', fontFamily:'DM Sans', fontSize:13, color:'#0E0E0C', width:'100%', caretColor:'#1550E8' }} />

{zones.map(z=>)}

{['todos','preventa','venta'].map(t=>)}

{filtered.length>0 ? (

{filtered.map(p=>)}

) : (

\ud83c\udfe2

No encontramos proyectos con esos filtros.

)}

); }; Object.assign(window, { Listings, PropertyCard, PROJECT_IMAGES });