// page-tasaciones.jsx — "Tasaciones". Exports PageTasaciones → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const TASA_WA = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 🏠 quiero solicitar una tasación de mi propiedad.");

const TASA_STEPS = [
  ["01", "Solicitud y datos", "Nos contás los datos básicos del inmueble: ubicación, metros, tipología y estado general."],
  ["02", "Visita técnica", "Relevamos la propiedad en persona: estado, terminaciones, orientación y características de valor. Hacemos un análisis general."],
  ["03", "Análisis de mercado", "Realizamos un análisis con comparables reales y la situación actual del mercado."],
  ["04", "Informe de tasación", "Entregamos una devolución clara del valor de tu propiedad, con una estrategia y criterios que lo respaldan."]];

const TASA_FACTORS = [
  ["A", "Ubicación y entorno", "Barrio, conectividad, servicios y demanda de la zona en CABA o GBA."],
  ["B", "Estado de conservación", "Antigüedad, calidad constructiva, instalaciones y nivel de mantenimiento."],
  ["C", "Superficie y distribución", "Metros cubiertos y descubiertos, cantidad de ambientes y funcionalidad de la planta."],
  ["D", "Oferta y demanda del mercado", "Valores de cierre reales en propiedades comparables y situación actual del mercado."]];

const TASA_DIAG = [
  "Indicios de humedad y filtraciones",
  "Estado general de paredes, techos y terminaciones",
  "Pérdidas visibles en instalaciones sanitarias",
  "Patologías constructivas que puedan afectar la propiedad",
  "Necesidades de mantenimiento o renovación",
  "Oportunidades de mejora para aumentar el valor de venta"];

const TASA_BENEF = [
  ["A", "Decisiones informadas", "Sabés cuánto vale realmente tu propiedad antes de vender, comprar o invertir."],
  ["B", "Vendé al precio correcto", "Ni de más ni de menos: el precio justo es lo que acelera una venta."],
  ["C", "Respaldo objetivo", "Un informe profesional para negociar, presentar o tomar decisiones con confianza."]];

function PageTasaciones() {
  return (
    <>
      <section className="page-hero" data-screen-label="Tasaciones · Hero">
        <div className="blueprint-grid" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Servicios inmobiliarios · Tasaciones</span></div>
          <h1>
            <span className="line-mask"><span>Tasaciones</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">profesionales.</span></span></span>
          </h1>
          <p className="sub">Conocé el valor real de tu propiedad con un análisis profesional, objetivo
            y respaldado por datos. Da el primer paso para cualquier operación inmobiliaria segura.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Solicitar tasación")} target="_blank" rel="noopener">Solicitar tasación <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="Tasaciones · Proceso">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Cómo es el proceso</div>
              <h2>Una tasación<br /><span className="yb">seria y clara.</span></h2>
            </div>
            <p className="lead">No improvisamos un número: relevamos, comparamos y justificamos. Así sabés
              exactamente cuánto vale tu propiedad y por qué.</p>
          </div>
          <div className="numlist reveal" data-d="1">
            {TASA_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="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Tasaciones · Factores">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Factores que influyen en la tasación</div>
              <h2>Factores que<br /><span className="yb">influyen.</span></h2>
            </div>
            <p className="lead">El valor de una propiedad no son solo sus metros cuadrados. Estos son los puntos que
              pesan en un análisis real.</p>
          </div>
          <div className="points reveal" data-d="1">
            {TASA_FACTORS.map(([i, t, d]) =>
            <div className="point" key={i}><div className="pi">{i}</div><h4>{t}</h4><p>{d}</p></div>
            )}
          </div>
        </div>
      </section>

      {/* DIAGNÓSTICO TÉCNICO COMPLEMENTARIO — servicio diferencial */}
      <section className="section" data-screen-label="Tasaciones · Diagnóstico técnico">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Diagnóstico técnico complementario</div>
              <h2>Más que una<br /><span className="yb">tasación común.</span></h2>
            </div>
            <p className="lead">En Grupo Remodelar vamos más allá de una tasación profesional. Complementamos el
              análisis con una evaluación técnica del inmueble para identificar aspectos que influyen en su valor.</p>
          </div>
          <div className="feature reveal" data-d="1" style={{ marginTop: 48, alignItems: "start" }}>
            <div>
              <div className="idx">¿Qué evaluamos?</div>
              <div className="prose">
                <ul className="facts">
                  {TASA_DIAG.map((x) => <li key={x}>{x}</li>)}
                </ul>
              </div>
            </div>
            <div>
              <h3>¿Por qué es <span className="yb">importante?</span></h3>
              <p>Muchos factores que afectan el valor de una propiedad no son evidentes a simple vista. Una
                evaluación técnica permite detectar posibles inconvenientes antes de salir al mercado y ayuda a
                definir una estrategia de venta más sólida y transparente.</p>
              <p>Nuestro objetivo es que el propietario conozca no solo cuánto vale hoy su inmueble, sino también
                qué acciones podrían incrementar su valor y atractivo frente a potenciales compradores.</p>
              <a className="btn solid" href={GRWA_LINK("Solicitar tasación")} target="_blank" rel="noopener" style={{ marginTop: 8 }}>Solicitar tasación <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Tasaciones · Beneficios">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Beneficios</div>
              <h2>Por qué tasar<br /><span className="yb">con nosotros.</span></h2>
            </div>
            <p className="lead">Una tasación profesional es información que te ahorra tiempo y dinero en cualquier
              operación.</p>
          </div>
          <div className="points reveal" data-d="1" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {TASA_BENEF.map(([i, t, d]) =>
            <div className="point" key={i}><div className="pi">{i}</div><h4>{t}</h4><p>{d}</p></div>
            )}
          </div>
        </div>
      </section>

      <section className="cta-band" data-screen-label="Tasaciones · CTA">
        <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
        <div className="wrap reveal">
          <h3>Pedí tu tasación. <span className="yb">Sabé cuánto vale tu propiedad.</span></h3>
          <a className="btn solid" href={GRWA_LINK("Solicitar tasación")} target="_blank" rel="noopener">Solicitar tasación <span className="arrow">→</span></a>
        </div>
      </section>
    </>);
}

Object.assign(window, { PageTasaciones });