const { Button, Card, Icon, Input, Badge, Select } = window.MiradorDesignSystem_4bae5c;

const HERO = 'https://pub-7ed4f5add2904a6fba20305edf49e4aa.r2.dev/propiedades/Creditos/couple%20credit.png';
const ASESOR = 'Hola, quisiera asesoría sobre un crédito hipotecario';
/* Cuota de un crédito francés: P·i / (1 − (1+i)^−n). */
const cuotaMensual = (monto, tasaAnual, anios) => {
  const i = tasaAnual / 100 / 12, n = anios * 12;
  if (!monto || !n) return 0;
  return i ? monto * i / (1 - Math.pow(1 + i, -n)) : monto / n;
};
const usd = (n) => '$' + Math.round(n).toLocaleString('es-EC').replace(/,/g, '.');
const pct = (n) => String(n).replace('.', ',') + '%';

const PROGRAMAS = [
  {
    id: 'credicasa', badge: 'Nuevo', tag: 'Tasa más baja del país',
    titulo: 'BIESS Credicasa', sub: 'Plan Vivienda Premier',
    tasa: 2.99, plazo: 30, entrada: 5, valor: 65000,
    desc: 'Crédito hipotecario del BIESS para primera vivienda nueva. Financia hasta $65.000 para afiliados y jubilados del IESS con buen historial crediticio.',
    puntos: ['Plazo hasta 30 años', 'El crédito es sin entrada; algunas constructoras piden un 5% que devuelven al otorgarse', 'Solo afiliados o jubilados del IESS · score 650+']
  },
  {
    id: 'mitimiti', badge: 'Nuevo', tag: 'Subsidio del Estado',
    titulo: 'Crédito Miti-Miti', sub: 'Vivienda de Interés Social y Público (VIS/VIP)',
    tasa: 4.9, plazo: 25, entrada: 5, valor: 85000,
    desc: 'El Estado cubre parte de la tasa de interés. Disponible en Banco Pichincha, Banco del Pacífico, Banco Rumiñahui y Mutualistas Pichincha y Azuay, solo para primera vivienda nueva.',
    puntos: ['Plazo de 20 a 30 años (hasta 30 con Banco del Pacífico)', 'Entrada del 5%', 'VIS hasta $85.796 · VIP hasta $110.378']
  }
];

const BANCOS = [
  { id: 'pacifico', nombre: 'Banco del Pacífico', tasa: 7.35, plazo: 20, fin: 'Hasta 80%', entrada: 20, etiqueta: 'Banco público', desc: 'Conoce los valores estimados para un crédito hipotecario con Banco del Pacífico. Financia vivienda nueva, construcción y programas del Gobierno.' },
  { id: 'pichincha', nombre: 'Banco Pichincha', tasa: 7.5, plazo: 20, fin: 'Hasta 83%', entrada: 20, etiqueta: 'Privado', desc: 'Descubre los valores estimados para un crédito hipotecario con Banco Pichincha. Vivienda nueva, usada y construcción con tasa competitiva.' },
  { id: 'mutualista', nombre: 'Mutualista Pichincha', tasa: 8.97, plazo: 20, fin: 'Hasta 80%', entrada: 20, etiqueta: 'Especializada en vivienda', desc: 'Explora los valores estimados con Mutualista Pichincha, orientada al financiamiento de vivienda con condiciones accesibles.' }
];

const TABLA = [
  { nombre: 'BIESS Credicasa', sub: 'Plan Vivienda Premier', tasa: '2,99%', plazo: 'Hasta 30 años', fin: 'Sin entrada (constructoras piden 5% y la devuelven)', sim: PROGRAMAS[0] },
  { nombre: 'Miti-Miti', sub: 'Vivienda VIS / VIP', tasa: '4,9%', plazo: '20 a 30 años', fin: 'Entrada del 5%', sim: PROGRAMAS[1] },
  { nombre: 'Banco del Pacífico', sub: 'Banca pública', tasa: '~7,35%', plazo: '20 años', fin: 'Hasta 80%', sim: BANCOS[0] },
  { nombre: 'Banco Pichincha', sub: 'Banca privada', tasa: '~7,5%', plazo: '20 años', fin: 'Hasta 83%', sim: BANCOS[1] },
  { nombre: 'Mutualista Pichincha', sub: 'Mutualista', tasa: '~8,97%', plazo: '20 años', fin: 'Hasta 80%', sim: BANCOS[2] }
];

const REQUISITOS = [
  {
    t: 'Documentos personales', icon: 'user', items: [
      ['Cédula de identidad', 'Vigente. Incluye la del cónyuge si aplica.'],
      ['Comprobante de ingresos', 'Roles de pago de los últimos 3 meses, o declaración de renta y RUC activo si eres independiente.'],
      ['Estados de cuenta bancarios', 'Últimos 3 a 6 meses del banco donde recibes tu sueldo.'],
      ['Historial crediticio limpio', 'Sin deudas vencidas. El BIESS pide score mínimo de 650 para Credicasa.']
    ]
  },
  {
    t: 'Documentos del inmueble', icon: 'house', items: [
      ['Avalúo actualizado', 'Municipal o catastral. El banco solicita el propio en la aprobación.'],
      ['Escritura o promesa de compraventa', 'Firmada ante notario.'],
      ['Certificado de gravámenes', 'Del Registro de la Propiedad, con no más de 30 días de emisión.'],
      ['Impuesto predial al día', 'Carta de pago del año en curso.']
    ]
  }
];

const PASOS = [
  ['Simula tu crédito', 'Estima la cuota mensual con distintos bancos, plazos y entradas.'],
  ['Habla con un asesor', 'Un asesor de casamia.ec te orienta y resuelve tus dudas sin costo.'],
  ['Prepara tu documentación', 'Te indicamos qué documentos necesitas según el banco y tu perfil.'],
  ['Recibe tu aprobación', 'Te acompañamos hasta que tengas la aprobación del crédito.']
];

const FAQ = [
  ['¿Cuál es la tasa hipotecaria más baja en Ecuador en 2026?', 'El Plan Credicasa – Vivienda Premier del BIESS, con 2,99% anual hasta 30 años, para primera vivienda nueva de hasta $65.000 y afiliados o jubilados del IESS con score mínimo de 650.'],
  ['¿Qué es el crédito Miti-Miti?', 'Un crédito de vivienda VIS/VIP en el que el Estado subsidia parte de la tasa de interés: 4,9% anual, plazo de 20 a 30 años y entrada del 5%. Aplica a primera vivienda nueva de hasta $85.796 (VIS) o $110.378 (VIP).'],
  ['¿Qué tasa cobra la banca privada para vivienda?', 'En junio de 2026 la tasa promedio de la banca privada para vivienda es de 7,35% anual y la tasa máxima legal vigente es de 10,19% anual, según el Banco Central del Ecuador.'],
  ['¿Cuánto cuesta la asesoría de casamia.ec?', 'Nada. casamia.ec orienta sin costo: revisamos tu perfil, te decimos a qué crédito calificas y qué documentos preparar.']
];

/* Simulador. Mismo componente inline en la página y dentro del modal por banco. */
function Simulador({ preset, nombre, compact, onAsesor }) {
  const [valor, setValor] = React.useState(preset?.valor || 85000);
  const [entrada, setEntrada] = React.useState(preset?.entrada ?? 20);
  const [plazo, setPlazo] = React.useState(preset?.plazo || 20);
  const [tasa, setTasa] = React.useState(preset?.tasa || 7.35);
  const financiado = Math.max(0, valor - valor * entrada / 100);
  const cuota = cuotaMensual(financiado, tasa, plazo);
  const intereses = cuota * plazo * 12 - financiado;
  const msg = `Hola, simulé un crédito en casamia.ec: ${nombre ? nombre + ', ' : ''}vivienda de ${usd(valor)}, entrada ${entrada}%, ${plazo} años al ${pct(tasa)} — cuota estimada de ${usd(cuota)} al mes. ¿Me ayudan a avanzar?`;
  return (
    <div className={'cm-sim' + (compact ? ' is-compact' : '')}>
      <div className="cm-sim-form">
        <label className="cm-f">
          <span className="cm-f-l">Valor de la propiedad (USD)</span>
          <Input value={valor} inputMode="numeric" onChange={(e) => setValor(Math.min(2000000, Number(String(e.target.value).replace(/\D/g, '')) || 0))} />
        </label>
        <div className="cm-f">
          <span className="cm-f-l">Entrada</span>
          <div className="cm-chips">
            {[5, 20, 25, 30, 40].map(v => (
              <button key={v} type="button" className={'cm-chip' + (entrada === v ? ' is-on' : '')} onClick={() => setEntrada(v)}>{v}%</button>
            ))}
          </div>
          <span className="cm-f-h">{usd(valor * entrada / 100)} de entrada · {usd(financiado)} financiados</span>
        </div>
        <div className="cm-sim-two">
          <label className="cm-f">
            <span className="cm-f-l">Plazo</span>
            <Select options={[10, 15, 20, 25, 30].map(v => v + ' años')} value={plazo + ' años'} onChange={(e) => setPlazo(parseInt(e.target.value, 10))} />
          </label>
          <label className="cm-f">
            <span className="cm-f-l">Tasa anual (%)</span>
            <Input value={tasa} inputMode="decimal" onChange={(e) => { const v = String(e.target.value).replace(',', '.').replace(/[^\d.]/g, ''); setTasa(v === '' ? 0 : Math.min(20, Number(v))); }} />
          </label>
        </div>
      </div>
      <div className="cm-sim-out">
        <span className="cm-sim-l">Cuota mensual estimada</span>
        <strong className="cm-sim-v">{usd(cuota)}</strong>
        <ul className="cm-sim-rows">
          <li><span>Monto financiado</span><b>{usd(financiado)}</b></li>
          <li><span>Intereses en {plazo} años</span><b>{usd(Math.max(0, intereses))}</b></li>
          <li><span>Total a pagar</span><b>{usd(financiado + Math.max(0, intereses))}</b></li>
        </ul>
        <Button block icon="message-circle" onClick={() => { if (onAsesor) onAsesor(); go(WA(msg)); }}>Hablar con un asesor</Button>
        <p className="cm-legal-sm">Valores estimados. No constituyen una oferta formal del banco.</p>
      </div>
    </div>
  );
}

function Modal({ open, title, sub, onClose, wide, children }) {
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', h); document.body.style.overflow = ''; };
  }, [open]);
  if (!open) return null;
  return (
    <div className="cm-scrim" onClick={onClose}>
      <div className={'cm-modal' + (wide ? ' is-wide' : '')} role="dialog" aria-modal="true" aria-label={title} onClick={(e) => e.stopPropagation()}>
        <header className="cm-modal-head">
          <span><strong>{title}</strong>{sub ? <em>{sub}</em> : null}</span>
          <button type="button" className="cm-modal-x" aria-label="Cerrar" onClick={onClose}><Icon name="x" size={18} /></button>
        </header>
        <div className="cm-modal-body">{children}</div>
      </div>
    </div>
  );
}

function Tabs({ tabs, value, onChange }) {
  return (
    <div className="cm-tabs" role="tablist">
      {tabs.map(t => (
        <button key={t} role="tab" aria-selected={value === t} className={'cm-tab' + (value === t ? ' is-on' : '')} onClick={() => onChange(t)}>{t}</button>
      ))}
    </div>
  );
}

const Spec = ({ l, v }) => <div className="cm-spec"><span>{l}</span><b>{v}</b></div>;

function App() {
  const [join, setJoin] = React.useState(false);
  const [sim, setSim] = React.useState(null);
  const [reqs, setReqs] = React.useState(false);
  const [tab, setTab] = React.useState('BIESS');
  React.useEffect(() => {
    setSeo({
      title: 'Créditos hipotecarios en Ecuador 2026: simula y compara | casamia.ec',
      description: 'Compara el crédito BIESS Credicasa al 2,99%, el Miti-Miti al 4,9% y la banca privada. Simula tu cuota mensual y recibe asesoría sin costo en casamia.ec.',
      canonical: SEO.paths.creditos, image: HERO, imageAlt: 'Créditos hipotecarios en Ecuador — casamia.ec',
      keywords: 'créditos hipotecarios ecuador, biess credicasa 2.99, crédito miti-miti, simulador crédito hipotecario, tasas hipotecarias 2026'
    });
    jsonLd('organizacion', orgLd());
    jsonLd('ruta', breadcrumbLd([['Inicio', SEO.paths.inicio], ['Créditos hipotecarios', SEO.paths.creditos]]));
    jsonLd('faq', faqLd(FAQ));
  }, []);
  const abrirSim = (p, nombre) => setSim({ preset: p, nombre: nombre || p.titulo || p.nombre });

  return (
    <div>
      <Header onJoin={() => setJoin(true)} />
      <main>
        <section className="cm-hero">
          <div className="cm-hero-copy">
            <Badge tone="wash" icon="badge-check">Asesoría sin costo</Badge>
            <h1>Encuentra el mejor crédito hipotecario para tu hogar</h1>
            <p>Te acompañamos en cada paso para que obtengas el financiamiento ideal. Sin complicaciones y sin costos ocultos.</p>
            <div className="cm-hero-cta">
              <Button icon="calculator" onClick={() => { location.hash = '#simulador'; }}>Simular mi crédito</Button>
              <Button variant="outline" icon="message-circle" onClick={() => go(WA(ASESOR))}>Hablar con un asesor</Button>
            </div>
            <ul className="cm-hero-list">
              {['Sin costos ocultos', 'Asesores especializados', 'Respuesta en menos de 24 horas', 'BIESS, Miti-Miti y banca privada'].map(t => (
                <li key={t}><Icon name="check" size={15} />{t}</li>
              ))}
            </ul>
          </div>
          <div className="cm-hero-foto">
            <img src={HERO} alt="Créditos hipotecarios en Ecuador — casamia.ec" onError={(e) => { e.target.src = 'assets/ph-credito.png'; }} />
          </div>
        </section>

        <section className="cm-band">
          <div className="cm-head">
            <Badge tone="wash">Tasas 2026</Badge>
            <h2>Las tasas hipotecarias más bajas de Ecuador</h2>
            <p>El Gobierno y el BIESS ampliaron sus programas de vivienda en 2026. Revisa si calificas antes de ir a la banca privada: la diferencia puede ser de miles de dólares en intereses.</p>
          </div>
          <div className="cm-prog">
            {PROGRAMAS.map(p => (
              <Card key={p.id} className="cm-prog-card">
                <div className="cm-prog-top">
                  <Badge tone="verified" icon="badge-check">{p.badge}</Badge>
                  <span className="cm-prog-tag">{p.tag}</span>
                </div>
                <h3>{p.titulo}<em>{p.sub}</em></h3>
                <p className="cm-prog-desc">{p.desc}</p>
                <div className="cm-prog-rate"><strong>{pct(p.tasa)}</strong><span>anual</span></div>
                <ul className="cm-prog-list">
                  {p.puntos.map(t => <li key={t}><Icon name="check" size={15} />{t}</li>)}
                </ul>
                <Button block icon="calculator" onClick={() => abrirSim(p)}>Calcular cuota</Button>
              </Card>
            ))}
          </div>
        </section>

        <section className="cm-band">
          <div className="cm-head">
            <Badge tone="neutral">También puedes comparar</Badge>
            <h2>Banca privada tradicional</h2>
            <p>Si no calificas para Miti-Miti o BIESS, estas son las opciones de la banca privada. Ingresa los datos de tu propiedad y compara.</p>
          </div>
          <div className="cm-bancos">
            {BANCOS.map(b => (
              <Card key={b.id} className="cm-banco">
                <span className="cm-banco-tag">{b.etiqueta}</span>
                <h3>{b.nombre}</h3>
                <p>{b.desc}</p>
                <Spec l="Tasa desde" v={'~' + pct(b.tasa) + ' anual'} />
                <Spec l="Plazo máximo" v={b.plazo + ' años'} />
                <Spec l="Financiamiento" v={b.fin} />
                <Button block variant="outline" icon="calculator" onClick={() => abrirSim(b, b.nombre)}>Calcular cuota</Button>
              </Card>
            ))}
          </div>
        </section>

        <section className="cm-band" id="simulador">
          <div className="cm-head">
            <Badge tone="wash" icon="calculator">Simulador</Badge>
            <h2>Simula tu crédito</h2>
            <p>Cambia el valor de la vivienda, la entrada, el plazo y la tasa para ver cómo se mueve tu cuota mensual.</p>
          </div>
          <Card className="cm-sim-card"><Simulador /></Card>
        </section>

        <section className="cm-band">
          <div className="cm-head">
            <Badge tone="neutral">Comparativa</Badge>
            <h2>Créditos hipotecarios en Ecuador</h2>
            <p>Compara opciones por tipo de crédito y elige la que mejor encaja con tu perfil.</p>
          </div>
          <Tabs tabs={['BIESS', 'Miti-Miti', 'Bancos privados', 'Requisitos']} value={tab} onChange={setTab} />

          {tab === 'BIESS' ? (
            <div className="cm-cards">
              <Card className="cm-detcard">
                <div className="cm-detcard-h"><h3>BIESS Credicasa – Vivienda Premier</h3><Badge tone="verified">Tasa más baja del mercado</Badge></div>
                <div className="cm-specs">
                  <Spec l="Tasa" v="2,99% anual" /><Spec l="Plazo máximo" v="30 años" />
                  <Spec l="Financiamiento máx." v="Hasta $65.000" /><Spec l="Entrada" v="5% (la constructora la devuelve)" />
                </div>
                <p>Vigente desde el 27 de enero de 2026 y ampliado en febrero y abril. Solo para primera vivienda nueva terminada, con ingresos familiares máximos de $1.527,94 al mes. Precalificación en línea, score mínimo de 650 y al menos 36 aportaciones al IESS (las 13 últimas consecutivas).</p>
                <div className="cm-pills">{['2,99% anual', 'Afiliados o jubilados IESS', 'Solo vivienda nueva'].map(t => <span key={t}>{t}</span>)}</div>
                <Button variant="outline" icon="calculator" onClick={() => abrirSim(PROGRAMAS[0])}>Calcular cuota</Button>
              </Card>
              <Card className="cm-detcard">
                <div className="cm-detcard-h"><h3>BIESS – Vivienda preferencial y Credicasa general</h3><Badge tone="neutral">Otros montos</Badge></div>
                <div className="cm-specs">
                  <Spec l="Tasa" v="5,99% – 9,75% anual" /><Spec l="Plazo máximo" v="25 años" />
                  <Spec l="Financiamiento" v="Hasta 95%" /><Spec l="Destinos" v="Nueva, usada, remodelación" />
                </div>
                <p>La tasa varía según el monto y el plazo. Es la vía para viviendas que superan el límite de $65.000 del Plan Premier.</p>
                <Button variant="outline" icon="calculator" onClick={() => abrirSim({ valor: 120000, entrada: 5, plazo: 25, tasa: 7.5 }, 'BIESS Credicasa general')}>Calcular cuota</Button>
              </Card>
              <div className="cm-nota"><Icon name="badge-check" size={18} /><p><strong>¿Tienes aportes al IESS?</strong> Con Credicasa al 2,99%, una vivienda de $50.000 a 30 años cuesta cerca de $210 al mes: la tasa hipotecaria más baja en la historia del Ecuador.</p></div>
            </div>) : null}

          {tab === 'Miti-Miti' ? (
            <div className="cm-cards">
              <Card className="cm-detcard">
                <div className="cm-detcard-h"><h3>Nuevo Tu Casa Miti-Miti</h3><Badge tone="verified">Tasa subsidiada por el Estado</Badge></div>
                <div className="cm-specs">
                  <Spec l="Tasa" v="4,9% anual" /><Spec l="Plazo" v="20 a 30 años" />
                  <Spec l="Entrada mínima" v="5%" /><Spec l="Ingreso familiar máx." v="$3.055 al mes" />
                  <Spec l="VIS – precio máx." v="Hasta $85.796" /><Spec l="VIP – precio máx." v="Hasta $110.378" />
                </div>
                <p>El Estado cubre parte de la tasa de interés a través de un fideicomiso con el sector privado. Con Banco del Pacífico el plazo llega hasta 30 años (mínimo 20) con entrada del 5%. Disponible también en Banco Pichincha, Banco Rumiñahui y Mutualistas Pichincha y Azuay. Solo para primera vivienda registrada en el MIT.</p>
                <div className="cm-pills">{['Tasa 4,9%', '95% de financiamiento', 'Solo vivienda nueva', 'Primera vivienda'].map(t => <span key={t}>{t}</span>)}</div>
                <Button variant="outline" icon="calculator" onClick={() => abrirSim(PROGRAMAS[1])}>Calcular cuota</Button>
              </Card>
              <div className="cm-nota"><Icon name="landmark" size={18} /><p><strong>Ejemplo de ahorro:</strong> una vivienda de $85.000 a 20 años con Miti-Miti (4,9%) tiene una cuota cercana a $555 al mes. Con tasa bancaria normal (~10%) serían unos $820: más de $265 de diferencia cada mes.</p></div>
            </div>) : null}

          {tab === 'Bancos privados' ? (
            <div className="cm-cards">
              {BANCOS.map(b => (
                <Card key={b.id} className="cm-detcard">
                  <div className="cm-detcard-h"><h3>{b.nombre}</h3><Badge tone="neutral">{b.etiqueta}</Badge></div>
                  <div className="cm-specs">
                    <Spec l="Tasa desde" v={'~' + pct(b.tasa) + ' anual'} /><Spec l="Plazo máximo" v={b.plazo + ' años'} />
                    <Spec l="Financiamiento" v={b.fin} /><Spec l="Monto mínimo" v={b.id === 'pichincha' ? '$10.000' : 'Según avalúo'} />
                  </div>
                  <Button variant="outline" icon="calculator" onClick={() => abrirSim(b, b.nombre)}>Calcular cuota</Button>
                </Card>
              ))}
              <div className="cm-nota"><Icon name="landmark" size={18} /><p>Tasa promedio de la banca privada para vivienda en junio de 2026: 7,35% anual. Tasa máxima legal vigente: 10,19% anual, según el Banco Central del Ecuador.</p></div>
            </div>) : null}

          {tab === 'Requisitos' ? (
            <div className="cm-cards cm-cards-2">
              {REQUISITOS.map(g => (
                <Card key={g.t} className="cm-detcard">
                  <div className="cm-detcard-h"><h3><Icon name={g.icon} size={18} />{g.t}</h3></div>
                  <ul className="cm-docs">
                    {g.items.map(([t, d]) => <li key={t}><strong>{t}</strong><span>{d}</span></li>)}
                  </ul>
                </Card>
              ))}
              <div className="cm-nota"><Icon name="message-circle" size={18} /><p><strong>¿No sabes qué documentos necesitas?</strong> En casamia.ec te indicamos exactamente qué preparar según el banco y tu perfil, sin costo.</p></div>
            </div>) : null}
        </section>

        <section className="cm-band">
          <div className="cm-head">
            <Badge tone="neutral">Compara antes de decidir</Badge>
            <h2>Todas las opciones, en un vistazo</h2>
          </div>
          <div className="cm-tabla-wrap">
            <table className="cm-tabla">
              <thead><tr><th>Programa</th><th>Tasa anual</th><th>Plazo</th><th>Financiamiento</th><th></th></tr></thead>
              <tbody>
                {TABLA.map(r => (
                  <tr key={r.nombre}>
                    <td><strong>{r.nombre}</strong><span>{r.sub}</span></td>
                    <td className="cm-tabla-tasa">{r.tasa}</td>
                    <td>{r.plazo}</td>
                    <td>{r.fin}</td>
                    <td><Button size="sm" variant="outline" onClick={() => abrirSim(r.sim, r.nombre)}>Calcular</Button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div className="cm-tabla-foot">
            <p>BIESS y Miti-Miti requieren cumplir requisitos específicos: afiliación al IESS, ingresos máximos y que sea tu primera vivienda nueva.</p>
            <Button variant="outline" size="sm" icon="file-text" onClick={() => setReqs(true)}>Ver requisitos completos</Button>
          </div>
        </section>

        <section className="cm-band">
          <div className="cm-head">
            <Badge tone="neutral">Proceso simple</Badge>
            <h2>Del simulador a las llaves</h2>
            <p>Cuatro pasos para obtener tu crédito sin complicaciones.</p>
          </div>
          <div className="cm-pasos">
            {PASOS.map(([t, d], i) => (
              <div key={t} className="cm-paso">
                <span className="cm-paso-n">{i + 1}</span>
                <strong>{t}</strong>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="cm-band">
          <div className="cm-cta">
            <div>
              <h2>Un asesor revisa tu perfil gratis</h2>
              <p>Te decimos a qué crédito calificas, qué documentos necesitas y cómo avanzar. Sin costo y sin compromiso.</p>
            </div>
            <div className="cm-cta-btns">
              <Button icon="message-circle" onClick={() => go(WA('Hola, quisiera comenzar mi proceso de crédito hipotecario'))}>Escribir ahora</Button>
              <Button variant="outline" onClick={() => { location.hash = '#simulador'; }}>Simular primero</Button>
            </div>
          </div>
        </section>

        <section className="cm-band">
          <div className="cm-head"><h2>Preguntas frecuentes</h2></div>
          <div className="cm-faq">
            {FAQ.map(([q, a]) => (
              <details key={q}>
                <summary>{q}<Icon name="chevron-down" size={17} /></summary>
                <p>{a}</p>
              </details>
            ))}
          </div>
          <div className="cm-aviso">
            <span className="cm-aviso-l">Aviso legal</span>
            <p>casamia.ec es un servicio de orientación independiente. No financiamos ni estamos afiliados a Banco Pichincha, Mutualista Pichincha, Banco del Pacífico ni al BIESS. Los valores mostrados son referenciales y no constituyen una oferta formal de crédito. Tasas de Miti-Miti y BIESS Credicasa actualizadas a junio de 2026 según información oficial del BIESS, el Ministerio de Infraestructura y Transporte (MIT) y el Banco Central del Ecuador. Consulta directamente con cada institución para condiciones definitivas.</p>
          </div>
        </section>
      </main>

      <Modal open={!!sim} title={sim?.nombre || 'Simular crédito'} sub={sim ? pct(sim.preset.tasa) + ' anual · hasta ' + sim.preset.plazo + ' años' : ''} onClose={() => setSim(null)} wide>
        {sim ? <Simulador preset={sim.preset} nombre={sim.nombre} compact /> : null}
      </Modal>
      <Modal open={reqs} title="Documentos y requisitos" sub="Lo que pide el banco según tu perfil" onClose={() => setReqs(false)} wide>
        <div className="cm-docs-grid">
          {REQUISITOS.map(g => (
            <div key={g.t}>
              <h4><Icon name={g.icon} size={17} />{g.t}</h4>
              <ul className="cm-docs">
                {g.items.map(([t, d]) => <li key={t}><strong>{t}</strong><span>{d}</span></li>)}
              </ul>
            </div>
          ))}
        </div>
        <Button block icon="message-circle" onClick={() => go(WA('Hola, quisiera información sobre créditos hipotecarios'))}>Hablar con un asesor</Button>
      </Modal>

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