/* sections.jsx — Nav, Featured, About, Services, Blog, ContactHero, Footer */ // ───────── Contacto por WhatsApp + validación ───────── const WA_PHONE = "523327947692"; // número de Emiliano (mismo que el resto del sitio) // Solo letras (con acentos), espacios y . ' - para nombres const RE_NAME = /^[\p{L}][\p{L}\s'.-]*$/u; // Correo con @ y dominio con punto + extensión (.com, .mx, etc.) const RE_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/; // Deja solo dígitos const onlyDigits = (s) => (s || "").replace(/\D+/g, ""); // Abre WhatsApp con un mensaje ya armado (líneas = array de strings) function openWhatsApp(lines) { const text = lines.filter(Boolean).join("\n"); const url = `https://wa.me/${WA_PHONE}?text=${encodeURIComponent(text)}`; window.open(url, "_blank", "noopener"); } // ───────── NAV ───────── function Nav({ t, lang, setLang }) { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); const navRef = React.useRef(null); // Bloquea el scroll del fondo mientras el menú móvil está abierto + cierra con Esc React.useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; const onKey = (e) => {if (e.key === 'Escape') setMenuOpen(false);}; if (menuOpen) document.addEventListener('keydown', onKey); return () => {document.body.style.overflow = '';document.removeEventListener('keydown', onKey);}; }, [menuOpen]); React.useEffect(() => { const onScroll = () => { const hero = document.getElementById('hero'); const navH = navRef.current ? navRef.current.offsetHeight : 64; if (hero) { // Cristal durante TODO el hero; sólido sólo cuando el hero termina // de pasar bajo la barra (el nav "sale" del hero). const bottom = hero.getBoundingClientRect().bottom; setScrolled(bottom <= navH); } else { setScrolled((window.scrollY || 0) > 40); } }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); onScroll(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, []); return ( <>
setMenuOpen(false)}> {t.about.cta}
); } // ───────── REVEAL hook ───────── function useReveal() { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) e.target.classList.add('is-in');}); }, { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); return ref; } // ───────── FEATURED ───────── // Muestra la propiedad marcada como "destacada" en el panel (campo featured). // Si no hay ninguna o la base no está conectada, usa el contenido de respaldo. function Featured({ t }) { const ref = useReveal(); const isEN = t.featured.thisMonth.indexOf("'s") !== -1; const mes = new Date().toLocaleString(isEN ? 'en-US' : 'es-MX', { month: 'long' }); const mesFrase = t.featured.thisMonth.replace('{m}', mes); const [prop, setProp] = React.useState(null); React.useEffect(() => { let alive = true; if (window.ECDB && ECDB.isConfigured()) { ECDB.loadPublic() .then((list) => { if (alive) { const fe = (list || []).find((x) => x.featured); if (fe) setProp(fe); } }) .catch(() => {}); } return () => { alive = false; }; }, []); const opLabel = (op) => ((isEN ? { venta: 'For sale', renta: 'For rent', preventa: 'Pre-sale' } : { venta: 'Venta', renta: 'Renta', preventa: 'Preventa' })[op] || op); const fmtPrice = (p) => '$' + Number(p.price || 0).toLocaleString(isEN ? 'en-US' : 'es-MX') + ' ' + (p.currency || 'MXN') + (p.pricePeriod ? (isEN ? ' /mo' : ' /' + p.pricePeriod) : ''); const waFor = (p) => `https://wa.me/${WA_PHONE}?text=` + encodeURIComponent(`${isEN ? 'Hi' : 'Hola'} Emiliano, ${isEN ? "I'm interested in" : 'me interesa'} "${p.title}" (${p.zone}).`); // Datos a pintar: propiedad real o respaldo estático let data; if (prop) { const specs = []; if (prop.bedrooms) specs.push([t.featured.beds, String(prop.bedrooms)]); if (prop.bathrooms) specs.push([t.featured.baths, String(prop.bathrooms)]); if (prop.constructionM2) specs.push([t.featured.area, prop.constructionM2 + ' m²']); if (prop.landM2) specs.push([t.featured.parking, prop.landM2 + ' m²']); data = { cover: prop.cover || (prop.photos && prop.photos[0]) || 'assets/featured-1.png', title: prop.title, loc: [prop.zone, prop.city].filter(Boolean).join(', '), desc: prop.description, specs: specs.slice(0, 4), priceLabel: opLabel(prop.operation), price: fmtPrice(prop), detailsHref: `propiedad.html?id=${encodeURIComponent(prop.id)}`, wa: waFor(prop), }; } else { data = { cover: 'assets/featured-1.png', title: t.featured.name, loc: t.featured.loc, desc: t.featured.desc, specs: [[t.featured.beds, '4'], [t.featured.baths, '4.5'], [t.featured.area, '420 m²'], [t.featured.parking, '600 m²']], priceLabel: t.featured.priceLabel, price: '$18,500,000 MXN', detailsHref: '#contact', wa: t.about.ctaUrl, }; } return ( ); } // ───────── COUNT UP ───────── // Anima un número de 0 → target cuando entra en viewport (una sola vez). // El target se extrae del string ("+6" → 6, "+100" → 100, "98%" → 98). function CountUp({ value, duration = 1400 }) { const ref = React.useRef(null); const [display, setDisplay] = React.useState(value); React.useEffect(() => { const el = ref.current; if (!el) return; // Parse: prefijo no-numérico ("+", "$"), número, sufijo ("%", "+", " MXN") const m = String(value).match(/^(\D*)(\d+)([\s\S]*)$/); if (!m) {setDisplay(value);return;} const prefix = m[1]; const target = parseInt(m[2], 10); const suffix = m[3]; let started = false; const animate = () => { const t0 = performance.now(); const tick = (now) => { const t = Math.min(1, (now - t0) / duration); const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic const n = Math.round(target * eased); setDisplay(`${prefix}${n}${suffix}`); if (t < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; setDisplay(`${prefix}0${suffix}`); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started) { started = true; animate(); } }); }, { threshold: 0.4 }); io.observe(el); return () => io.disconnect(); }, [value, duration]); return {display}; } // (About vive ahora en about.jsx — 3 variantes) // ───────── CONTACT MODAL ───────── // Popup que se abre desde cualquier service row con el contexto del servicio. function ContactModal({ open, onClose, service, t }) { const f = t.contact.form; const [form, setForm] = React.useState({ name: "", phone: "", email: "", preferred: "", message: "" }); const [errors, setErrors] = React.useState({}); React.useEffect(() => { if (!open) return; setForm({ name: "", phone: "", email: "", preferred: "", message: "" }); setErrors({}); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = (e) => {if (e.key === 'Escape') onClose();}; document.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; document.removeEventListener('keydown', onKey); }; }, [open, onClose]); if (!open) return null; const title = service?.title || ''; const interes = ({ compra: 'compra', vende: 'venta', renta: 'renta' })[title.toLowerCase()] || title.toLowerCase(); const set = (k, v) => { setForm((s) => ({ ...s, [k]: v })); setErrors((e) => ({ ...e, [k]: undefined })); }; const validate = () => { const er = {}; if (!RE_NAME.test(form.name.trim()) || form.name.trim().length < 2) er.name = f.errName; if (onlyDigits(form.phone).length < 10) er.phone = f.errPhone; if (!RE_EMAIL.test(form.email.trim())) er.email = f.errEmail; if (!form.preferred) er.preferred = f.errPreferred; if (!form.message.trim()) er.message = f.errMessage; setErrors(er); return Object.keys(er).length === 0; }; const onSubmit = (e) => { e.preventDefault(); if (!validate()) return; if (window.track) window.track('Lead', { content_name: interes, content_category: 'formulario_servicio' }); openWhatsApp([ `${f.waGreet} ${form.name.trim()}.`, `${f.waInterest}: ${interes} (${title})`, `${t.contact.phone}: ${form.phone}`, `${t.contact.email}: ${form.email.trim()}`, `${f.preferred}: ${form.preferred}`, `${f.message}: ${form.message.trim()}`, ]); onClose(); }; return (
e.stopPropagation()}>
{service?.tag}
{title}
{t.contact.eyebrow}

Cuéntame más sobre tu interés de {interes}

set('name', e.target.value)} className={errors.name ? 'invalid' : ''} autoComplete="name" /> {errors.name && {errors.name}}
set('phone', onlyDigits(e.target.value))} className={errors.phone ? 'invalid' : ''} autoComplete="tel" /> {errors.phone && {errors.phone}}
set('email', e.target.value)} className={errors.email ? 'invalid' : ''} autoComplete="email" /> {errors.email && {errors.email}}
{errors.preferred && {errors.preferred}}
{errors.message && {errors.message}}
{f.legal}
); } // ───────── SERVICES ───────── // 3 filas full-width: número + descripción + palabra grande. // Hover: imagen aparece como fondo + flecha → · Click: abre modal con form. function Services({ t, onOpenContact }) { const items = t.services.items; return (
{t.services.eyebrow}

Como puedo ayudarte.

); } // ───────── BLOG ───────── function Blog({ t }) { const isEN = !!(window.STRINGS && t === window.STRINGS.en); const lang = isEN ? "en" : "es"; const [posts, setPosts] = React.useState(null); React.useEffect(() => { let alive = true; const fallback = window.POSTS || []; if (window.ECDB && ECDB.isConfigured()) { ECDB.loadPublicPosts() .then((list) => { if (alive) setPosts(list && list.length ? list : fallback); }) .catch(() => { if (alive) setPosts(fallback); }); } else { setPosts(fallback); } return () => { alive = false; }; }, []); const pick = (p, base) => (p[base + "_" + lang] || p[base + "_es"] || p[base + "_en"] || ""); const fmtD = (iso) => { if (!iso) return ""; const d = new Date(iso + "T00:00:00"); if (isNaN(d.getTime())) return iso; return d.toLocaleDateString(isEN ? "en-US" : "es-MX", { year: "numeric", month: "short", day: "numeric" }); }; const readTxt = (p) => (p.readMinutes ? p.readMinutes + (isEN ? " min read" : " min de lectura") : ""); const list = (posts || []).slice(0, 3); return (

{t.blog.title} {t.blog.titleEm} {t.blog.title2}

{t.blog.lead}

{list.map((p, i) => (
{pick(p, "category")}

{pick(p, "title")}

{fmtD(p.publishedAt)} {readTxt(p) && <>·{readTxt(p)}}
))}
{t.blog.all}
); } // ───────── CONTACT HERO ───────── function ContactHero({ t, onContact }) { return (

{t.contact.headline1} {t.contact.headlineEm} {t.contact.headline2}

{t.contact.form.submit}
); } // ───────── BASIC CONTACT MODAL ───────── // Popup minimalista de contacto, abierto desde el botón "Enviar mensaje". function BasicContactModal({ open, onClose, t }) { const f = t.contact.form; const [sent, setSent] = React.useState(false); const [form, setForm] = React.useState({ name: "", phone: "", message: "" }); const [errors, setErrors] = React.useState({}); React.useEffect(() => { if (!open) return; setSent(false); setForm({ name: "", phone: "", message: "" }); setErrors({}); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = (e) => {if (e.key === 'Escape') onClose();}; document.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; document.removeEventListener('keydown', onKey); }; }, [open, onClose]); if (!open) return null; const set = (k, v) => { setForm((s) => ({ ...s, [k]: v })); setErrors((e) => ({ ...e, [k]: undefined })); }; const validate = () => { const er = {}; if (!RE_NAME.test(form.name.trim()) || form.name.trim().length < 2) er.name = f.errName; if (onlyDigits(form.phone).length < 10) er.phone = f.errPhone; setErrors(er); return Object.keys(er).length === 0; }; const onSubmit = (e) => { e.preventDefault(); if (!validate()) return; if (window.track) window.track('Lead', { content_category: 'formulario_contacto' }); openWhatsApp([ `${f.waGreet} ${form.name.trim()}.`, `${t.contact.phone}: ${form.phone}`, form.message.trim() ? `${f.message}: ${form.message.trim()}` : "", ]); setSent(true); }; return (
e.stopPropagation()}> {sent ?

{f.thanks}

{f.waNote}

:
{t.contact.eyebrow}

{f.submit}

set('name', e.target.value)} className={errors.name ? 'invalid' : ''} autoComplete="name" placeholder="—" /> {errors.name && {errors.name}}
set('phone', onlyDigits(e.target.value))} className={errors.phone ? 'invalid' : ''} autoComplete="tel" placeholder="—" /> {errors.phone && {errors.phone}}
{f.legal}
}
); } // ───────── FOOTER ───────── function Footer({ t }) { return ( ); } Object.assign(window, { Nav, Featured, Services, ContactModal, Blog, ContactHero, BasicContactModal, Footer, useReveal, CountUp });