// page-servicios-inmo.jsx — Landing "Servicios inmobiliarios". Exports PageServiciosInmo → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const SIImg = (f, w = 1400) => `https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=${w},fit=crop/Jcf6EuSlCZ7Z3w5j/${f}`;
const SI_WA = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 🏠 quiero asesorarme sobre servicios inmobiliarios.");

const SI_CARDS = [
  ["01", "Venta de propiedades", "Comercializamos tu inmueble con estrategia, fotos y video profesional, publicación en portales y acompañamiento hasta la firma.", "Servicios inmobiliarios - Venta.html"],
  ["02", "Tasaciones", "Determinamos el valor real de mercado de tu propiedad con un informe profesional, objetivo y respaldado en datos.", "Servicios inmobiliarios - Tasaciones.html"],
  ["03", "Informe Pre-Compra", "Asesoramiento técnico antes de comprar: evaluamos el inmueble, detectamos riesgos y estimamos reformas para que compres sin sorpresas.", "Servicios inmobiliarios - Informe pre-compra.html"],
  ["04", "Alquileres", "Gestión y promoción de inmuebles para propietarios e inquilinos, con asesoramiento y contratos claros de punta a punta.", "Servicios inmobiliarios - Alquileres.html"]];

function PageServiciosInmo() {
  return (
    <>
      <section className="page-hero" data-screen-label="Servicios inmobiliarios · Hero">
        <div className="blueprint-grid" data-speed="0.05" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Compra · Venta · Tasación · Alquiler</span></div>
          <h1>
            <span className="line-mask"><span>Servicios</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">inmobiliarios.</span></span></span>
          </h1>
          <p className="sub">Tu aliado integral en operaciones inmobiliarias en CABA y GBA. Combinamos análisis,
            estrategia comercial y gestión profesional para que vender, tasar, comprar o alquilar sea simple,
            seguro y transparente.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Asesorate gratis")} target="_blank" rel="noopener">Asesorate gratis <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>

      {/* GRUPO REMODELAR COMO ALIADO */}
      <section className="section" data-screen-label="GR como aliado inmobiliario">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Quiénes somos en lo inmobiliario</div>
              <h2>Un equipo completo<br />de punta<br /><span className="yb">a punta.</span></h2>
            </div>
            <p className="lead">Junto a nuestros socios comerciales formamos un equipo completo. Entendemos el
              valor real de una propiedad.</p>
          </div>
          <div className="prose reveal" data-d="1" style={{ marginTop: 48 }}>
            <p>En Grupo Remodelar acompañamos cada operación con <span className="hl">criterio técnico y
              comercial</span>. Conocemos CABA y GBA, los valores por zona y qué hace que una propiedad se
              venda más rápido y mejor. Ponemos ese conocimiento a tu favor en cada servicio.</p>
          </div>
          <div className="band reveal" data-d="2">
            <div className="cell"><div className="v">4 <em>SERVICIOS</em></div><div className="l">Venta · tasación · compra · alquiler</div></div>
            <div className="cell"><div className="v">CABA <em>+ GBA</em></div><div className="l">Cobertura y conocimiento de zona</div></div>
            <div className="cell"><div className="v">OBRA <em>+ VENTA</em></div><div className="l">Constructores e inmobiliaria a la vez</div></div>
          </div>
          <div className="wideshot reveal" data-d="2">
            <img src={SIImg("house-investments-elements-assortment-vgThpvZXjKchFcg6.jpg")} alt="Servicios inmobiliarios Grupo Remodelar" />
          </div>
        </div>
      </section>

      {/* LOS 4 SERVICIOS */}
      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Los 4 servicios">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Nuestros servicios</div>
              <h2>Elegí lo<br />que necesitás.</h2>
            </div>
            <p className="lead">Cada servicio tiene su propia página con todo el detalle. Entrá al que te interese
              y pedí asesoramiento sin costo.</p>
          </div>
          <div className="svc-group reveal" data-d="1" style={{ marginTop: 48 }}>
            {SI_CARDS.map(([n, t, d, href]) =>
            <a className="svc-row" key={n} href={href}>
                <span className="fill" />
                <span className="n">{n}</span>
                <span><span className="t">{t}</span></span>
                <span className="d">{d}</span>
                <span className="go">→</span>
              </a>
            )}
          </div>
        </div>
      </section>

      {/* CTA BAND */}
      <section className="cta-band" data-screen-label="CTA servicios inmobiliarios">
        <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
        <div className="wrap reveal">
          <h3>¿No sabés por dónde empezar? <span className="yb">Te asesoramos sin costo.</span></h3>
          <a className="btn solid" href={GRWA_LINK("Quiero asesorarme")} target="_blank" rel="noopener">Quiero asesorarme <span className="arrow">→</span></a>
        </div>
      </section>
    </>);
}

Object.assign(window, { PageServiciosInmo });