// ZADI — main app // Glues header / hero / filters / list / map / detail / sell into a single page. // Owns: filters, favorites, view (listado|mapa), active property, modal, tweaks. const PALETTES = { warm: { name: 'Marrón pastel', colors: ['#a88574', '#f5f1ed', '#d4c5b9', '#2a2520'] }, sage: { name: 'Salvia & oliva', colors: ['#8a9a7b', '#f1f2ed', '#c8d1bc', '#2a2f26'] }, terra: { name: 'Terracota cálido',colors: ['#c87858', '#faf0e9', '#e8c4ad', '#3d2a1f'] }, }; // ── Google Sheets endpoint (interest form) ────────────────────────────── // To wire the "Estoy interesado" form to a Google Sheet: // 1. Create a new Sheet. // 2. Extensions → Apps Script. Paste: // // function doPost(e) { // const data = JSON.parse(e.postData.contents); // const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); // sheet.appendRow([ // new Date(), data.nombre, data.apellidos, data.email, data.telefono, // data.propertyId, data.propertyTitle, data.operacion, data.precio, // data.zona, data.ciudad, data.m2, data.habitaciones // ]); // return ContentService.createTextOutput('ok'); // } // // 3. Deploy → New deployment → Type: Web app → Execute as: Me → // Who has access: Anyone → Deploy. Copy the URL. // 4. Replace `null` below with that URL (as a string). // // While null, the form runs in demo mode (logs payload to console). window.ZADI_SHEETS_URL = null; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": ["#a88574", "#f5f1ed", "#d4c5b9", "#2a2520"], "density": "regular", "displayFont": "Syne", "cardLayout": "vertical", "sheetsUrl": "" }/*EDITMODE-END*/; function App() { const [data, setData] = React.useState([]); const [loading, setLoading] = React.useState(true); const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Cargar propiedades desde API (polling cada 10s para reflejar cambios en tiempo real) React.useEffect(() => { const loadProperties = async () => { try { const response = await fetch(`/api/paula/properties?t=${Date.now()}`); const result = await response.json(); // El servidor ya devuelve el shape que la web espera (id, title, type, kind, area, price, rooms, baths, m2, lat, lng, photo, photos, description, address) const adapted = (result.properties || []).map((p, i) => ({ ...p, // alias / defaults para mantener compatibilidad con los componentes: rooms: p.rooms ?? p.habitaciones ?? 0, baths: p.baths ?? p.banos ?? 0, m2: p.m2 ?? p.metros_cuadrados ?? 0, area: p.area || p.zona || p.ciudad || 'Tenerife', city: p.city || 'Tenerife', tone: p.tone ?? (i * 47) % 360, furnished: p.furnished ?? false, images: p.images || p.photos || [], })); setData(adapted); } catch (err) { console.error('Error cargando propiedades:', err); setData([]); } finally { setLoading(false); } }; loadProperties(); const interval = setInterval(loadProperties, 10000); // Recargar cada 10 segundos return () => clearInterval(interval); }, []); // Filters const [filters, setFilters] = React.useState({ type: 'compra', area: '', minPrice: '', maxPrice: '', rooms: '', kind: '', furnished: '', sort: 'novedad', }); const [view, setView] = React.useState('listado'); const [active, setActive] = React.useState(null); const [openProperty, setOpenPropertyRaw] = React.useState(null); // Opening the detail view from the map should also dismiss the floating // marker card so the two surfaces never overlap. const setOpenProperty = React.useCallback((p) => { setOpenPropertyRaw(p); if (p) setActive(null); }, []); const [favorites, setFavorites] = React.useState(() => new Set()); const [toast, setToast] = React.useState(''); // Apply palette to root React.useEffect(() => { const [accent, bg, soft, ink] = t.palette; const root = document.documentElement; root.style.setProperty('--accent', accent); root.style.setProperty('--bg', bg); root.style.setProperty('--soft', soft); root.style.setProperty('--ink', ink); root.style.setProperty('--display-font', t.displayFont); root.setAttribute('data-density', t.density); root.setAttribute('data-layout', t.cardLayout); }, [t.palette, t.density, t.displayFont, t.cardLayout]); // Wire Sheets URL from tweaks (so the user can paste it without editing files). React.useEffect(() => { window.ZADI_SHEETS_URL = (t.sheetsUrl && t.sheetsUrl.trim()) || null; }, [t.sheetsUrl]); // Show/hide toast React.useEffect(() => { if (!toast) return; const id = setTimeout(() => setToast(''), 2800); return () => clearTimeout(id); }, [toast]); const showToast = (msg) => setToast(msg); const toggleFav = (id) => { setFavorites(prev => { const s = new Set(prev); s.has(id) ? s.delete(id) : s.add(id); return s; }); }; // Filter + sort properties (real-time) const filtered = React.useMemo(() => { let out = data.filter(p => p.type === filters.type); if (filters.area) { const q = filters.area.trim().toLowerCase(); out = out.filter(p => p.area.toLowerCase().includes(q) || p.city.toLowerCase().includes(q) ); } if (filters.minPrice) out = out.filter(p => p.price >= Number(filters.minPrice)); if (filters.maxPrice) out = out.filter(p => p.price <= Number(filters.maxPrice)); if (filters.rooms) out = out.filter(p => p.rooms >= Number(filters.rooms)); if (filters.kind) out = out.filter(p => p.kind === filters.kind); if (filters.furnished && filters.type === 'alquiler') { out = out.filter(p => filters.furnished === 'si' ? p.furnished : !p.furnished); } // sort switch (filters.sort) { case 'precio-asc': out = [...out].sort((a, b) => a.price - b.price); break; case 'precio-desc': out = [...out].sort((a, b) => b.price - a.price); break; case 'm2': out = [...out].sort((a, b) => b.m2 - a.m2); break; default: break; } return out; }, [data, filters]); const onScrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }; if (loading) { return
Cargando propiedades...
; } return ( <>