// page-alquileres.jsx — "Alquileres". Exports PageAlquileres → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const ALQ_WA = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 🏠 quiero consultar por el servicio de alquileres.");

const ALQ_PROP = [
  ["A", "Gestión y promoción", "Publicamos y promocionamos tu inmueble con fotos y fichas profesionales para alquilarlo rápido."],
  ["B", "Selección de inquilinos", "Filtramos interesados y verificamos garantías para reducir el riesgo y darte tranquilidad."],
  ["C", "Contratos claros", "Acompañamiento en contrato, ajustes y condiciones según la normativa vigente."]];

const ALQ_INQ = [
  ["A", "Opciones a tu medida", "Te mostramos propiedades acordes a tu presupuesto, zona y necesidad."],
  ["B", "Trámite simple", "Te guiamos con la documentación y las garantías para que el proceso sea claro."],
  ["C", "Acompañamiento real", "Estamos disponibles durante el contrato para lo que necesites resolver."]];

const ALQ_STEPS = [
  ["01", "Relevamiento", "Conocemos la propiedad o tu necesidad de alquiler y definimos condiciones."],
  ["02", "Promoción o búsqueda", "Publicamos el inmueble o buscamos opciones según seas propietario o inquilino."],
  ["03", "Visitas y selección", "Coordinamos visitas y seleccionamos el mejor match entre propietario e inquilino."],
  ["04", "Contrato y firma", "Preparamos el contrato, garantías y documentación hasta la firma."],
  ["05", "Acompañamiento", "Seguimos disponibles durante toda la vigencia del contrato."]];

function PageAlquileres() {
  return (
    <>
      <section className="page-hero" data-screen-label="Alquileres · Hero">
        <div className="blueprint-grid" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Servicios inmobiliarios · Alquileres</span></div>
          <h1>
            <span className="line-mask"><span>Alquileres</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">sin vueltas.</span></span></span>
          </h1>
          <p className="sub">Gestión de alquileres para propietarios e inquilinos en CABA y GBA. Promoción
            profesional, selección cuidada y contratos claros. Acompañamiento de principio a fin.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Quiero consultar por alquileres")} target="_blank" rel="noopener">Quiero consultar <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="Alquileres · Propietarios">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Para propietarios</div>
              <h2>Alquilá tu<br /><span className="yb">propiedad tranquilo.</span></h2>
            </div>
            <p className="lead">Nos ocupamos de promocionar, mostrar y seleccionar inquilinos para que tu inmueble
              se alquile rápido y bien, sin que tengas que estar encima de todo.</p>
          </div>
          <div className="points reveal" data-d="1" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {ALQ_PROP.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("Alquilá tu casa")} target="_blank" rel="noopener">Alquilá tu casa <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Alquileres · Inquilinos">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Para inquilinos</div>
              <h2>Encontrá tu<br />próximo hogar.</h2>
            </div>
            <p className="lead">Te ayudamos a encontrar la propiedad que buscás y te acompañamos en todo el
              trámite para que alquilar sea simple.</p>
          </div>
          <div className="points reveal" data-d="1" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {ALQ_INQ.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("Encontrá tu hogar")} target="_blank" rel="noopener">Encontrá tu hogar <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      <section className="section" data-screen-label="Alquileres · Proceso">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Proceso de alquiler</div>
              <h2>Cómo<br /><span className="yb">trabajamos.</span></h2>
            </div>
            <p className="lead">Un proceso claro y ordenado, seas propietario o inquilino.</p>
          </div>
          <div className="numlist reveal" data-d="1">
            {ALQ_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="Alquileres · CTA">
        <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
        <div className="wrap reveal">
          <h3>¿Tenés una propiedad o buscás alquilar? <span className="yb">Escribinos.</span></h3>
          <a className="btn solid" href={GRWA_LINK("Quiero consultar por alquileres")} target="_blank" rel="noopener">Quiero consultar <span className="arrow">→</span></a>
        </div>
      </section>
    </>);
}

Object.assign(window, { PageAlquileres });