const { PropertyCard, Button, IconButton, Card, Icon, Input, Dialog, Badge } = window.MiradorDesignSystem_4bae5c;

/* ── BACKEND CONTRACT ──────────────────────────────────────────────
   Search → the /compra filter page, same query keys the old site uses.
   Properties → Notion "Propiedades CasaMia" (Estado = publicado).
   Set rest.properties to the worker/endpoint that returns that database as
   JSON and the grid switches from the bundled snapshot to live data. */
const FILEMODE = /\.html$/i.test(location.pathname);
const route = (n) => FILEMODE ? n + '.html' : (n === 'index' ? '/' : '/' + n);
const slug = (s = '') => s.toString().normalize('NFD').replace(/[\u0300-\u036f]/g, '')
  .toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 70);
/* Ficha de una propiedad. En el editor es ficha.html?id=; en producción /propiedad/<id>-<slug>. */
const detailUrl = (id, titulo) => FILEMODE
  ? 'ficha.html?id=' + encodeURIComponent(id)
  : '/propiedad/' + encodeURIComponent(id) + (titulo ? '-' + slug(titulo) : '');

const BACKEND = {
  site: 'https://casamia.ec',
  searchPath: '/compra/',
  searchParams: { location: 'q', type: 'tipo', min: 'pmin', max: 'pmax' },
  rest: { properties: location.protocol === 'file:' ? '' : '/api/propiedades', posts: FILEMODE ? '' : '/api/novedades' },
  whatsapp: '593988957054',
  links: {
    compra: route('propiedades'), publicar: route('publicar'),
    creditos: route('creditos'), contacto: route('contacto'),
    novedades: route('novedades'),
    facebook: 'https://web.facebook.com/casamia.ec.quito/', instagram: 'https://www.instagram.com/casamia.ecuador/',
    tiktok: 'https://www.tiktok.com/@casamia.ecuador', agencia: 'https://agavemkt.com'
  }
};
const WA = (t) => `https://wa.me/${BACKEND.whatsapp}?text=${encodeURIComponent(t || 'Hola, me gustaría recibir asistencia.')}`;
const TYPES = ['Todos los tipos', 'Casa', 'Departamento', 'Terreno', 'Local comercial', 'Oficina', 'Villa']
  .map(l => ({ value: l === 'Todos los tipos' ? '' : l, label: l }));
const ZONAS = ['Calderón', 'Tumbaco', 'Cumbayá', 'Llano Grande', 'La Ecuatoriana', 'Quito Norte', 'Conocoto', 'Pomasqui', 'Nayón', 'Valle de los Chillos'];
const money = (n) => '$' + Number(n).toLocaleString('es-EC').replace(/,/g, '.');
/* Searches land on the in-project results page, keeping the query keys the old site uses. */
const searchUrl = (o = {}) => {
  const p = BACKEND.searchParams, q = new URLSearchParams();
  if (o.loc) q.set(p.location, o.loc);
  if (o.type) q.set(p.type, o.type);
  if (o.min) q.set(p.min, o.min);
  if (o.max) q.set(p.max, o.max);
  return BACKEND.links.compra + (q.toString() ? '?' + q : '');
};
/* Enlaces del sitio: misma pestaña. Solo WhatsApp, redes y correo se abren
   aparte (esos van con target="_blank" en su propio <a>). */
const go = (url) => { location.href = url; };
const clean = (s = '') => { const d = document.createElement('textarea'); d.innerHTML = s.replace(/<[^>]+>/g, ''); return d.value.replace(/[\u{1F000}-\u{1FAFF}\u{2600}-\u{27BF}\u{FE0F}]/gu, '').replace(/\s{2,}/g, ' ').trim(); };

function useRemote(path, map, fallback) {
  const [data, setData] = React.useState(path ? [] : fallback);
  const [status, setStatus] = React.useState(path ? 'loading' : 'offline');
  React.useEffect(() => {
    if (!path) return;
    let alive = true, pending = false, controller;
    const url = path.startsWith('/api/') ? path : BACKEND.site + path;
    const traer = async () => {
      if (pending || document.visibilityState === 'hidden') return;
      pending = true;
      controller = new AbortController();
      const timer = setTimeout(() => controller.abort(), 15000);
      try {
        const response = await fetch(url, { cache: 'no-store', signal: controller.signal, headers: { Accept: 'application/json' } });
        if (!response.ok) throw new Error('feed');
        const j = await response.json();
        const rows = Array.isArray(j) ? j : j.results;
        if (!Array.isArray(rows)) throw new Error('format');
        if (alive) { setData(rows.map(map)); setStatus('live'); }
      } catch (e) { if (alive) setStatus('error'); }
      finally { clearTimeout(timer); pending = false; }
    };
    traer();
    const t = setInterval(traer, 15000);
    const alVolver = () => { if (document.visibilityState === 'visible') traer(); };
    document.addEventListener('visibilitychange', alVolver);
    window.addEventListener('focus', alVolver);
    window.addEventListener('online', alVolver);
    return () => { alive = false; controller?.abort(); clearInterval(t); document.removeEventListener('visibilitychange', alVolver); window.removeEventListener('focus', alVolver); window.removeEventListener('online', alVolver); };
  }, [path]);
  return [data, status === 'live', status];
}

const artUrl = (s) => FILEMODE ? 'articulo.html?slug=' + encodeURIComponent(s) : '/novedades/' + s;
const mapPost = (p) => ({
  id: String(p.id || p.slug), url: artUrl(p.slug),
  kicker: p.categoria || 'Novedades',
  date: (() => { const d = new Date((p.fecha || '').length === 10 ? p.fecha + 'T12:00:00' : p.fecha); return isNaN(d) ? '' : d.toLocaleDateString('es-EC', { day: 'numeric', month: 'short', year: 'numeric' }); })(),
  title: p.titulo || '',
  photoUrl: p.portada || ''
})

/* ── Header: wordmark, plain text nav, publish CTA, account menu ── */
function Header({ onJoin, savedCount }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const [user, setAuthUser] = React.useState(null);
  React.useEffect(() => { CasaMiaAuth.session().then(setAuthUser).catch(() => {}); }, []);
  const initials = user?.nombre ? user.nombre.split(' ').filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join('') : null;
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h);
  }, []);
  const item = (label, onClick, icon) => (
    <button key={label} onClick={() => { setOpen(false); onClick(); }} className="cm-menu-item">
      <Icon name={icon} size={16} />{label}
    </button>
  );
  return (
    <header className="cm-header">
      <div className="cm-header-in">
        <a href={BACKEND.site} className="cm-logo"><img src="assets/logo-casamia-alpha.png" alt="casamia.ec" /></a>
        <nav className="cm-nav">
          <a href={BACKEND.links.compra}><Icon name="house" size={15} />Propiedades</a>
          <a href={BACKEND.links.creditos}><Icon name="calculator" size={15} />Créditos</a>
          <a href={BACKEND.links.novedades}><Icon name="newspaper" size={15} />Novedades</a>
          <a href={BACKEND.links.contacto}><Icon name="message-circle" size={15} />Contacto</a>
        </nav>
        <div className="cm-header-right" ref={ref}>
          <span className="cm-hide-sm"><Button size="sm" variant="outline" onClick={() => go(BACKEND.links.publicar)}>Publica tu propiedad</Button></span>
          <button className="cm-account" aria-label="Menú de cuenta" aria-expanded={open} onClick={() => setOpen(!open)}>
            <Icon name="menu" size={16} />
            <span className="cm-avatar">{initials || <Icon name="user" size={14} />}</span>
          </button>
          {open ? (
            <div className="cm-menu" role="menu">
              {user ? <div className="cm-menu-head">{user.nombre}</div> : null}
              {item(user ? 'Mi cuenta' : 'Iniciar sesión', () => go(BACKEND.links.publicar), 'user')}
              {item('Publica tu propiedad', () => go(BACKEND.links.publicar), 'key-round')}
              {item(savedCount ? `Guardadas (${savedCount})` : 'Guardadas', () => go(BACKEND.links.compra), 'heart')}
              {item('Créditos hipotecarios', () => go(BACKEND.links.creditos), 'calculator')}
              <div className="cm-menu-sep"></div>
              {item('Trabaja con nosotros', onJoin, 'handshake')}
              {item('Contacto', () => go(BACKEND.links.contacto), 'message-circle')}
            </div>) : null}
        </div>
      </div>
    </header>
  );
}

/* ── Functional pill search: same fields and destination as the old page ── */
function SearchPill() {
  const [open, setOpen] = React.useState(null);
  const [loc, setLoc] = React.useState('');
  const [type, setType] = React.useState('');
  const [min, setMin] = React.useState('');
  const [max, setMax] = React.useState('');
  const ref = React.useRef(null);
  React.useEffect(() => {
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(null); };
    document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h);
  }, []);
  /* While a filter sheet is up, the mobile bottom bar must get out of its way. */
  React.useEffect(() => {
    document.body.classList.toggle('cm-sheet-open', !!open);
    return () => document.body.classList.remove('cm-sheet-open');
  }, [open]);
  const typeLabel = (TYPES.find(t => t.value === type) || TYPES[0]).label;
  const priceLabel = min || max ? [min && 'desde ' + money(min), max && 'hasta ' + money(max)].filter(Boolean).join(' · ') : 'Cualquier precio';
  const seg = (id, label, value, isSet) => (
    <button type="button" onClick={() => setOpen(open === id ? null : id)} className={'cm-seg' + (open === id ? ' is-open' : '')}>
      <span className="cm-seg-label">{label}</span>
      <span className="cm-seg-value" style={{ color: isSet ? 'var(--text-heading)' : 'var(--text-muted)' }}>{value}</span>
    </button>
  );
  const pop = (title, children) => (
    <React.Fragment>
      <div className="cm-pop-scrim" onClick={() => setOpen(null)}></div>
      <div className="cm-pop">
        <div className="cm-pop-head">
          <span>{title}</span>
          <button type="button" aria-label="Cerrar" onClick={() => setOpen(null)}><Icon name="x" size={18} /></button>
        </div>
        {children}
      </div>
    </React.Fragment>
  );
  return (
    <div ref={ref} style={{ position: 'relative' }}>
      <form className="cm-search" onSubmit={(e) => { e.preventDefault(); go(searchUrl({ loc: loc.trim(), type, min, max })); }}>
        {seg('loc', 'Ubicación', loc || 'Calderón, Tumbaco, Cumbayá…', !!loc)}
        <span className="cm-seg-div"></span>
        {seg('type', 'Tipo', typeLabel, !!type)}
        <span className="cm-seg-div"></span>
        {seg('price', 'Precio', priceLabel, !!(min || max))}
        <button type="submit" className="cm-search-btn" aria-label="Buscar"><Icon name="search" size={18} />Buscar</button>
      </form>
      {open === 'loc' ? pop('¿Dónde buscas?',
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Input autoFocus icon="map-pin" placeholder="Escribe un sector o ciudad" value={loc} onChange={(e) => setLoc(e.target.value)} />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {ZONAS.slice(0, 6).map(z => <button key={z} type="button" className={'cm-chip' + (loc === z ? ' is-on' : '')} onClick={() => { setLoc(z); setOpen(null); }}>{z}</button>)}
          </div>
        </div>) : null}
      {open === 'type' ? pop('Tipo de propiedad',
        <div className="cm-type-grid">
          {TYPES.map(t => <button key={t.label} type="button" className={'cm-tile' + (type === t.value ? ' is-on' : '')} onClick={() => { setType(t.value); setOpen(null); }}>{t.label}</button>)}
        </div>) : null}
      {open === 'price' ? pop('Rango de precio',
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <Input label="Mínimo" type="number" min="0" step="1000" placeholder="0" value={min} onChange={(e) => setMin(e.target.value)} />
            <Input label="Máximo" type="number" min="0" step="1000" placeholder="500.000" value={max} onChange={(e) => setMax(e.target.value)} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12 }}>
            <Button variant="ghost" size="sm" onClick={() => { setMin(''); setMax(''); }}>Limpiar</Button>
            <Button size="sm" onClick={() => setOpen(null)}>Aplicar</Button>
          </div>
        </div>) : null}
    </div>
  );
}

/* Financiamiento sets the badge tone — BIESS, Miti-Miti, VIP and banca each read differently. */
const finTone = (f = '') => /vip/i.test(f) ? 'premium' : /biess/i.test(f) ? 'wash' : /miti/i.test(f) ? 'verified' : /banca|privada/i.test(f) ? 'dark' : 'floating';
const finIcon = (f = '') => /vip/i.test(f) ? 'shield-check' : /biess/i.test(f) ? 'badge-check' : /miti/i.test(f) ? 'handshake' : 'landmark';

/* Hero. El objeto vive en R2 con espacios y comas en el nombre, así que va
   codificado; si alguna vez no responde, cae a la primera foto del catálogo —
   una casa real, nunca el marcador a rayas. */
const HERO_BASE = 'https://pub-7ed4f5add2904a6fba20305edf49e4aa.r2.dev/propiedades/Hero/';
const HERO = HERO_BASE + encodeURIComponent('Codex Image Sep 17, 2026, 08_58_05 PM.png');
const HERO_ALT = (window.CASAMIA_CATALOGO || []).find(p => p.fotos && p.fotos.length)?.fotos[0] || 'assets/ph-hero.png';

function PropCard({ p, saved, onSave }) {
  const fotos = p.fotos || [];
  const [i, setI] = React.useState(0);
  /* Solo tres capas montadas (la vista y sus vecinas): el cambio de foto es un
     display, sin transición ni descarga. El resto se precarga en memoria al
     acercarse a la tarjeta, así el primer clic ya no espera nada. */
  const vecinas = (n) => fotos.length < 2 ? [0] : [n, (n + 1) % fotos.length, (n - 1 + fotos.length) % fotos.length];
  const montadas = vecinas(i);
  const ir = (k) => setI((k + fotos.length) % fotos.length);
  const step = (d) => (e) => { e.preventDefault(); e.stopPropagation(); ir(i + d); };
  const precargado = React.useRef(false);
  const precargar = () => {
    if (precargado.current || fotos.length < 2) return;
    precargado.current = true;
    fotos.forEach(src => { const im = new Image(); im.src = src; });
  };
  const tocar = React.useRef(null);
  const onTouchStart = (e) => { precargar(); tocar.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (tocar.current == null || fotos.length < 2) return;
    const d = e.changedTouches[0].clientX - tocar.current;
    tocar.current = null;
    if (Math.abs(d) > 40) { e.preventDefault(); ir(i + (d < 0 ? 1 : -1)); }
  };
  const meta = [p.habitaciones && p.habitaciones + ' dorm', p.banos && p.banos + ' baños', p.area && Math.round(p.area) + ' m²'].filter(Boolean).join(' · ');
  return (
    <a className="cm-card" href={detailUrl(p.id, p.titulo)}>
      <div className={'cm-card-photo' + (fotos.length > 1 ? ' cm-slider' : '')} onMouseEnter={precargar} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
        {fotos.length > 1
          ? fotos.map((src, k) => montadas.indexOf(k) >= 0
            ? <img key={src} src={src} alt={k === i ? p.titulo : ''} className={k === i ? 'is-on' : ''} loading={k ? 'lazy' : 'eager'} decoding="async" />
            : null)
          : <img src={fotos[0]} alt={p.titulo} loading="lazy" />}
        {p.financiamiento ? <span className="cm-card-badge"><Badge tone={finTone(p.financiamiento)} icon={finIcon(p.financiamiento)}>{p.financiamiento}</Badge></span> : null}
        <span className="cm-card-heart">
          <IconButton icon="heart" variant="overlay" size={32} active={saved} label="Guardar" onClick={(e) => { e.preventDefault(); e.stopPropagation(); onSave(); }} />
        </span>
        {fotos.length > 1 ? (
          <React.Fragment>
            <button className="cm-arrow is-prev" aria-label="Foto anterior" onClick={step(-1)}><Icon name="chevron-left" size={16} /></button>
            <button className="cm-arrow is-next" aria-label="Siguiente foto" onClick={step(1)}><Icon name="chevron-right" size={16} /></button>
            <span className="cm-dots">{fotos.map((_, k) => <span key={k} className={k === i ? 'is-on' : ''} onClick={(e) => { e.preventDefault(); e.stopPropagation(); ir(k); }}></span>)}</span>
          </React.Fragment>) : null}
      </div>
      <div className="cm-card-body">
        <span className="cm-card-title">{p.titulo}</span>
        <span className="cm-card-sub">{p.sector}, {p.ciudad}</span>
        <span className="cm-card-sub">{meta}</span>
        <span className="cm-card-price">{money(p.precio)}</span>
      </div>
    </a>
  );
}

function Section({ title, sub, link, href, children }) {
  return (
    <section className="cm-section">
      <div className="cm-section-head">
        <div>
          <h2>{title}</h2>
          {sub ? <p>{sub}</p> : null}
        </div>
        {link ? <a href={href} className="cm-section-link">{link}</a> : null}
      </div>
      {children}
    </section>
  );
}

function JoinDialog({ open, onClose }) {
  const [role, setRole] = React.useState('agente');
  const [form, setForm] = React.useState({ nombre: '', email: '', tel: '', msg: '' });
  const [err, setErr] = React.useState({});
  const [sent, setSent] = React.useState(false);
  React.useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [open]);
  if (!open) return null;
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = () => {
    const e = {};
    if (!form.nombre.trim()) e.nombre = 'Escribe tu nombre completo';
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Escribe un correo válido';
    if (form.tel && form.tel.replace(/\D/g, '').length < 9) e.tel = 'Ingresa 10 dígitos';
    setErr(e);
    if (!Object.keys(e).length) {

      /* Aviso por Resend: el equipo recibe la solicitud con rol, teléfono y nota. */
      if (window.API) API.post('contacto', {
        nombre: form.nombre, email: form.email || 'sin-correo@casamia.ec', tel: form.tel,
        motivo: 'Quiero trabajar con casamia.ec · ' + (form.rol || 'sin rol'),
        mensaje: form.msg || 'Solicitud enviada desde el diálogo «Trabaja con nosotros».'
      }).catch(() => {});
      setSent(true);
    }
  };
  const roleCard = (id, icon, title, sub) => (
    <button type="button" onClick={() => setRole(id)} className={'cm-role' + (role === id ? ' is-on' : '')}>
      <Icon name={icon} size={22} />
      <span>
        <span className="cm-role-t">{title}</span>
        <span className="cm-role-s">{sub}</span>
      </span>
    </button>
  );
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 80 }}>
      <Dialog open onClose={onClose} width={560} title={sent ? 'Solicitud enviada' : 'Trabaja con nosotros'}
        footer={sent ? <Button block onClick={onClose}>Cerrar</Button> : <Button block onClick={submit}>Enviar solicitud</Button>}>
        {sent ? (
          <div style={{ textAlign: 'center', padding: '16px 0 8px' }}>
            <Icon name="check-circle" size={36} style={{ color: 'var(--verified)' }} />
            <h3 style={{ marginTop: 12, fontSize: 'var(--fs-display-sm)', fontWeight: 600, color: 'var(--text-heading)' }}>Recibimos tu solicitud</h3>
            <p style={{ marginTop: 6, fontSize: 'var(--fs-body-md)', color: 'var(--text-muted)' }}>El equipo de casamia.ec revisa tu información y te escribe en menos de 24 horas.</p>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p style={{ fontSize: 'var(--fs-body-md)', color: 'var(--text-muted)' }}>Selecciona cómo quieres colaborar con casamia.ec</p>
            <div className="cm-roles">
              {roleCard('agente', 'handshake', 'Agente vendedor', 'Vendo propiedades y gano comisiones')}
              {roleCard('proyecto', 'building-2', 'Proyecto inmobiliario', 'Tengo un proyecto para comercializar')}
            </div>
            <Input label="Nombre completo" placeholder="Tu nombre y apellido" value={form.nombre} onChange={set('nombre')} error={err.nombre} />
            <Input label="Email" type="email" placeholder="tucorreo@ejemplo.com" value={form.email} onChange={set('email')} error={err.email} />
            <Input label="Teléfono / WhatsApp" placeholder="0988957054" value={form.tel} onChange={set('tel')} error={err.tel} hint="Te escribimos por WhatsApp" />
            <Input label="Cuéntanos sobre ti" placeholder="Zonas donde trabajas, experiencia, proyecto…" value={form.msg} onChange={set('msg')} />
          </div>
        )}
      </Dialog>
    </div>
  );
}

function App() {
  const [join, setJoin] = React.useState(false);
  const [saved, setSaved] = React.useState(() => { try { return JSON.parse(localStorage.getItem('casamia:saved') || '{}'); } catch (e) { return {}; } });
  const [props_, live, catalogStatus] = useRemote(BACKEND.rest.properties, (p) => p, window.CASAMIA_PROPERTIES);
  const [posts] = useRemote(BACKEND.rest.posts, mapPost, window.CASAMIA_POSTS);
  const toggleSave = (id) => setSaved(s => { const n = { ...s, [id]: !s[id] }; try { localStorage.setItem('casamia:saved', JSON.stringify(n)); } catch (e) {} return n; });
  const savedCount = Object.values(saved).filter(Boolean).length;
  React.useEffect(() => {
    setSeo({
      title: 'casamia.ec — Casas y departamentos en venta en Quito',
      description: 'Portal inmobiliario en Ecuador: casas, departamentos y terrenos en venta y arriendo en Quito y los valles. Precios reales, fotos y contacto directo. Financiamiento BIESS, VIP, Miti-Miti y banca privada.',
      canonical: SEO.site + SEO.paths.inicio,
      keywords: 'casas en venta Quito, departamentos en venta Quito, terrenos Quito, inmobiliaria Ecuador, BIESS, crédito VIP'
    });
    jsonLd('organizacion', orgLd());
    jsonLd('sitio', siteLd());
  }, []);
  React.useEffect(() => { if (props_?.length) jsonLd('destacadas', itemListLd(props_.slice(0, 8), 'Propiedades destacadas en casamia.ec', SEO.paths.inicio)); }, [props_]);
  /* The float only appears once the hero search pill is scrolled past, so it never covers a CTA. */
  const [waOn, setWaOn] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('.cm-search-wrap');
    const onScroll = () => {
      const footer = document.querySelector('.cm-footer');
      const pastHero = !el || el.getBoundingClientRect().bottom < 0;
      const beforeFooter = !footer || footer.getBoundingClientRect().top > window.innerHeight - 40;
      setWaOn(pastHero && beforeFooter);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); };
  }, []);

  return (
    <div>
      <Header onJoin={() => setJoin(true)} savedCount={savedCount} />

      <section className="cm-hero-wrap">
        <div className="cm-hero">
          <img src={HERO} alt="" fetchpriority="high"
            onError={(e) => { if (e.target.src !== HERO_ALT) e.target.src = HERO_ALT; }} />
          <div className="cm-hero-copy">
            <h1>Encuentra tu próxima casa en Quito</h1>
            <p>Casas, departamentos y terrenos publicados por propietarios y constructoras, con precio y financiamiento claros.</p>
          </div>
        </div>
        <div className="cm-search-wrap"><SearchPill /></div>
      </section>

      <Section title="Propiedades destacadas" sub="Las últimas propiedades publicadas en casamia.ec" link="Ver todas" href={BACKEND.links.compra}>
        {catalogStatus === 'loading' && <p role="status">Cargando propiedades…</p>}
        {catalogStatus === 'error' && <p role="status">No pudimos actualizar las propiedades. Reintentaremos la conexión automáticamente.</p>}
        {catalogStatus === 'live' && !props_.length && <p>No hay propiedades publicadas por el momento.</p>}
        <div className="cm-grid-4">
          {props_.slice(0, 8).map(p => (
            <PropCard key={p.id} p={p} saved={!!saved[p.id]} onSave={() => toggleSave(p.id)} />
          ))}
        </div>
      </Section>

      <Section title="Cómo empezar">
        <div className="cm-grid-4 cm-starts">
          {[
            { icon: 'house', t: 'Compra tu hogar', d: 'Casas, departamentos y terrenos en Quito y los valles, con fotos y precio publicados.', cta: 'Explorar', href: BACKEND.links.compra, primary: true },
            { icon: 'key-round', t: 'Vende tu propiedad', d: 'Publica tu propiedad en casamia.ec y la revisamos antes de que salga al portal.', cta: 'Publicar', href: BACKEND.links.publicar },
            { icon: 'message-circle', t: 'Contacta a un agente', d: 'Escribe por WhatsApp y un asesor de casamia.ec te acompaña en el proceso de compra.', cta: 'Escribir', href: WA() },
            { icon: 'calculator', t: 'Calcula tu crédito', d: 'Revisa tasas, plazos y cuotas de BIESS, VIP, Miti-Miti y banca privada.', cta: 'Calcular', href: BACKEND.links.creditos }
          ].map(c => (
            <Card key={c.t} className="cm-soft" style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 196 }}>
              <Icon name={c.icon} size={24} />
              <span style={{ fontSize: 'var(--fs-display-sm)', fontWeight: 600, color: 'var(--text-heading)' }}>{c.t}</span>
              <p style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>{c.d}</p>
              <span style={{ marginTop: 'auto' }}><Button size="sm" variant={c.primary ? 'primary' : 'outline'} onClick={() => go(c.href)}>{c.cta}</Button></span>
            </Card>
          ))}
        </div>
      </Section>

      <Section title="Por qué casamia.ec">
        <div className="cm-why">
          {[
            { icon: 'dollar-sign', t: 'Publicar es gratis', d: 'Subes tu propiedad desde el portal y nuestro equipo la revisa antes de publicarla.' },
            { icon: 'calculator', t: 'Financiamiento claro', d: 'Cada anuncio indica si aplica a BIESS, crédito VIP, Miti-Miti o banca privada.' },
            { icon: 'phone', t: 'Un asesor te responde', d: 'Escribes por WhatsApp al +593 98 895 7054 y te contesta una persona del equipo.' }
          ].map(f => (
            <div key={f.t} className="cm-why-item">
              <Icon name={f.icon} size={22} />
              <span className="cm-why-t">{f.t}</span>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
      </Section>

      <Section title="Busca por zona" sub="Los sectores donde más se publica en Quito">
        <div className="cm-zones">
          {ZONAS.map(z => (
            <a key={z} href={searchUrl({ loc: z })} className="cm-zone">
              <Icon name="map-pin" size={16} />{z}
            </a>
          ))}
        </div>
      </Section>

      <Section title="Créditos hipotecarios">
        <div className="cm-credit">
          <div className="cm-credit-hero">
            <img src="https://pub-7ed4f5add2904a6fba20305edf49e4aa.r2.dev/propiedades/Creditos/Codex%20Image%20Sep%2017%2C%202026%2C%2011_39_59%20PM.png" alt="" loading="lazy" onError={(e) => { e.target.src = 'assets/ph-credito.png'; }} />
            <div className="cm-credit-copy">
              <span className="cm-credit-title">BIESS, crédito VIP, Miti-Miti y banca privada</span>
              <span><Button pill size="sm" onClick={() => go(BACKEND.links.creditos)}>Ver opciones</Button></span>
            </div>
          </div>
          <Card className="cm-soft" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Icon name="calculator" size={24} />
            <span style={{ fontSize: 'var(--fs-display-sm)', fontWeight: 600, color: 'var(--text-heading)' }}>Simula tu cuota</span>
            <p style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>Revisa montos, plazos y tasas vigentes antes de reservar una casa.</p>
            <a href={BACKEND.links.creditos} style={{ marginTop: 'auto', fontSize: 'var(--fs-body-sm)' }}>Ver créditos</a>
          </Card>
          <Card className="cm-soft" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Icon name="message-circle" size={24} />
            <span style={{ fontSize: 'var(--fs-display-sm)', fontWeight: 600, color: 'var(--text-heading)' }}>¿Dudas con tu crédito?</span>
            <p style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>Cuéntanos tu caso por WhatsApp y te decimos qué opciones tienes.</p>
            <a href={WA('Hola, tengo dudas sobre el crédito hipotecario.')} target="_blank" rel="noopener" style={{ marginTop: 'auto', fontSize: 'var(--fs-body-sm)' }}>Escribir por WhatsApp</a>
          </Card>
        </div>
      </Section>

      <Section title="Novedades inmobiliarias" sub="Lo último del mercado inmobiliario en Quito" link="Ver todas" href={BACKEND.links.novedades}>
        <div className="cm-grid-4 cm-posts">
          {posts.slice(0, 4).map(n => (
            <a key={n.id} href={n.url} className="cm-post">
              <div className="cm-post-img">{n.photoUrl ? <img src={n.photoUrl} alt="" loading="lazy" /> : null}</div>
              <span className="cm-post-meta">{n.kicker} · {n.date}</span>
              <span className="cm-post-title">{n.title}</span>
            </a>
          ))}
        </div>
      </Section>

      <footer className="cm-footer">
        <div className="cm-footer-in">
          <div className="cm-footer-brand">
            <img src="assets/logo-casamia-alpha.png" alt="casamia.ec" />
            <p className="cm-footer-tag">Tu hogar ideal en minutos.</p>
            <a className="cm-footer-wa" href={WA()} target="_blank" rel="noopener"><Icon name="message-circle" size={15} />+593 98 895 7054</a>
          </div>
          {[
            { t: 'Propiedades', l: [['Comprar', BACKEND.links.compra], ['Vender', BACKEND.links.publicar], ['Créditos hipotecarios', BACKEND.links.creditos]] },
            { t: 'Empresa', l: [['Contacto', BACKEND.links.contacto], ['Novedades', BACKEND.links.novedades]] },
            { t: 'Contacto', l: [['hola@casamia.ec', 'mailto:hola@casamia.ec'], ['Quito, Ecuador', BACKEND.links.contacto]] }
          ].map(c => (
            <div key={c.t}>
              <div className="cm-footer-h">{c.t}</div>
              <ul className="cm-footer-list">
                {c.l.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}
                {c.t === 'Empresa' ? <li><a href="#" onClick={(e) => { e.preventDefault(); setJoin(true); }}>Trabaja con nosotros</a></li> : null}
              </ul>
            </div>
          ))}
        </div>
        <div className="cm-footer-legal">
          <span>© 2026 casamia.ec</span>
          <span className="cm-footer-social">
            <a href={BACKEND.links.facebook} target="_blank" rel="noopener" aria-label="Facebook"><Icon name="facebook" size={16} /></a>
            <a href={BACKEND.links.instagram} target="_blank" rel="noopener" aria-label="Instagram"><Icon name="instagram" size={16} /></a>
            <a href={BACKEND.links.tiktok} target="_blank" rel="noopener" aria-label="TikTok"><Icon name="music-2" size={16} /></a>
          </span>
          <a className="cm-agency" href={BACKEND.links.agencia} target="_blank" rel="noopener" aria-label="agave">agave<i>.</i></a>
        </div>
      </footer>

      <a className={"cm-wa" + (waOn ? " is-on" : "")} href={WA()} target="_blank" rel="noopener" aria-label="Escríbenos por WhatsApp">
        <Icon name="message-circle" size={18} />WhatsApp
      </a>

      <div className="cm-bar">
        <nav className="cm-bar-main">
          <a href={BACKEND.links.compra}><Icon name="search" size={19} />Explorar</a>
          <a href={BACKEND.links.creditos}><Icon name="calculator" size={19} />Créditos</a>
          <a href={BACKEND.links.publicar}><Icon name="key-round" size={19} />Publicar</a>
        </nav>
        <a className="cm-bar-wa" href={WA()} target="_blank" rel="noopener" aria-label="Escríbenos por WhatsApp"><Icon name="message-circle" size={22} /></a>
      </div>

      <JoinDialog open={join} onClose={() => setJoin(false)} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);