// page-informe-precompra.jsx — "Informe Pre-Compra". Exports PageInformePrecompra → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const IPC_WA = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 🏠 quiero un informe pre-compra antes de comprar una propiedad.");

const IPC_PTS = [
  ["A", "Evaluación general del inmueble", "Relevamos la propiedad en persona: estructura, instalaciones, terminaciones y estado general."],
  ["B", "Detección de problemas visibles", "Identificamos humedades, fisuras, instalaciones obsoletas y todo lo que no se ve a primera vista."],
  ["C", "Potencial de revalorización", "Analizamos qué se puede mejorar y cuánto puede subir el valor de la propiedad tras una reforma."],
  ["D", "Estimación preliminar de reformas", "Te damos un estimado de presupuesto para poner la propiedad a punto."],
  ["E", "Identificación de riesgos", "Marcamos los puntos críticos y los costos ocultos para que no haya sorpresas después de comprar."],
  ["F", "Recomendaciones para negociar", "Con el informe en mano tenés argumentos reales para negociar precio y condiciones."]];

const IPC_STEPS = [
  ["01", "Nos pasás la propiedad", "Compartís el aviso o los datos del inmueble que estás por comprar."],
  ["02", "Visita técnica", "Vamos a verlo y relevamos cada detalle relevante."],
  ["03", "Informe pre-compra", "Te entregamos un informe claro con detalles generales, riesgos, potencial y estimación de reformas."],
  ["04", "Decidí con respaldo", "Comprás con información real y argumentos para negociar mejor."]];

function PageInformePrecompra() {
  return (
    <>
      <section className="page-hero" data-screen-label="Informe pre-compra · Hero">
        <div className="blueprint-grid" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Servicios inmobiliarios · Informe Pre-Compra</span></div>
          <h1>
            <span className="line-mask"><span>Informe</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">pre-compra.</span></span></span>
          </h1>
          <p className="sub">Antes de comprar, asesorate con un experto. Evaluamos la propiedad, detectamos
            problemas y riesgos, estimamos reformas y te damos un informe real. Comprá sin sorpresas.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Pedir informe")} target="_blank" rel="noopener">Pedir informe <span className="arrow">→</span></a>
            <a className="btn ghost" href={GRWA_LINK("Quiero hacer una consulta")} target="_blank" rel="noopener">Hablar por WhatsApp</a>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Informe · Qué incluye">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Qué incluye el informe</div>
              <h2>Lo que mira<br /><span className="yb">un experto.</span></h2>
            </div>
            <p className="lead">Una propiedad puede parecer perfecta y esconder costos importantes. El informe
              pre-compra te da la mirada técnica que necesitás antes de firmar.</p>
          </div>
          <div className="points reveal" data-d="1">
            {IPC_PTS.map(([i, t, d]) =>
            <div className="point" key={i}><div className="pi">{i}</div><h4>{t}</h4><p>{d}</p></div>
            )}
          </div>
          <div className="hero-actions reveal" data-d="2" style={{ marginTop: 40 }}>
            <a className="btn solid" href={GRWA_LINK("Consultale a un experto")} target="_blank" rel="noopener">Consultale a un experto <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Informe · Proceso">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Cómo trabajamos</div>
              <h2>Del aviso<br />a la decisión.</h2>
            </div>
            <p className="lead">Un proceso rápido y claro para que tengas la información antes de comprometerte.</p>
          </div>
          <div className="numlist reveal" data-d="1">
            {IPC_STEPS.map(([n, t, d]) =>
            <div className="numrow" key={n}><span className="nn">{n}</span><div><h4>{t}</h4><p>{d}</p></div></div>
            )}
          </div>
        </div>
      </section>

      <section className="cta-band" data-screen-label="Informe · CTA">
        <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
        <div className="wrap reveal">
          <h3>¿Estás por comprar? <span className="yb">Asesorate antes de firmar.</span></h3>
          <a className="btn solid" href={GRWA_LINK("Pedir informe pre-compra")} target="_blank" rel="noopener">Pedir informe pre-compra <span className="arrow">→</span></a>
        </div>
      </section>
    </>);
}

Object.assign(window, { PageInformePrecompra });