// page-venta.jsx — "Venta de propiedades". Exports PageVenta → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const VENTA_WA = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 🏠 quiero vender mi propiedad y necesito asesoramiento.");

const VENTA_PTS = [
  ["A", "Precio justo y real", "Definimos el valor con una tasación profesional para vender en el menor tiempo posible sin resignar dinero."],
  ["B", "Producción profesional", "Fotos, video y reels con estabilizadores y drones. Tu propiedad se muestra como se merece."],
  ["C", "Máxima exposición", "Publicación en los principales portales, redes y pauta segmentada para llegar a compradores reales."],
  ["D", "Filtro de interesados", "Coordinamos y filtramos visitas, gestionamos objeciones y te llevamos solo ofertas serias."],
  ["E", "Negociación experta", "Defendemos tu interés en cada propuesta hasta cerrar las mejores condiciones."],
  ["F", "Acompañamiento total", "Te guiamos en reserva, firma y documentación. Un solo equipo de principio a fin."]];

const VENTA_STEPS = [
  ["01", "Tasación y estrategia", "Visitamos la propiedad, la tasamos y definimos precio, público objetivo y plan de venta."],
  ["02", "Puesta en valor", "Si conviene, sugerimos mejoras de bajo costo y alto impacto para vender más rápido y mejor."],
  ["03", "Producción de contenido", "Fotos profesionales, video y ficha técnica. Material listo para destacar en cada portal."],
  ["04", "Publicación y difusión", "Cargamos en portales y redes con pauta segmentada para acelerar las consultas."],
  ["05", "Visitas y negociación", "Coordinamos visitas, filtramos interesados y negociamos cada oferta a tu favor."],
  ["06", "Reserva y firma", "Acompañamos toda la documentación hasta la escritura. Operación cerrada con tranquilidad."]];

function PageVenta() {
  return (
    <>
      <section className="page-hero" data-screen-label="Venta · Hero">
        <div className="blueprint-grid" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Servicios inmobiliarios · Venta</span></div>
          <h1>
            <span className="line-mask"><span>Venta de</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">propiedades.</span></span></span>
          </h1>
          <p className="sub">Vendé tu propiedad con un equipo que combina estrategia comercial, producción
            profesional y obra. Más exposición, mejores ofertas y acompañamiento hasta la firma.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Quiero vender")} target="_blank" rel="noopener">Quiero vender <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="Venta · Descripción">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Por qué vender con nosotros</div>
              <h2>Vendé mejor,<br /><span className="yb">vendé antes.</span></h2>
            </div>
            <p className="lead">Comercializamos inmuebles en CABA y GBA con una mirada que pocos tienen: una mirada
              profesional. Analizamos la propiedad con una metodología distinta, los datos importan.</p>
          </div>
          <div className="points reveal" data-d="1">
            {VENTA_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("Vendé tu propiedad")} target="_blank" rel="noopener">Vendé tu propiedad <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Venta · Proceso">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Estrategia de comercialización</div>
              <h2>Cómo vendemos<br />tu propiedad.</h2>
            </div>
            <p className="lead">Un proceso ordenado, transparente y pensado para conseguir la mejor venta en el
              menor tiempo posible.</p>
          </div>
          <div className="numlist reveal" data-d="1">
            {VENTA_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="Venta · CTA">
        <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
        <div className="wrap reveal">
          <h3>Contanos qué querés vender. <span className="yb">La tasación es sin costo.</span></h3>
          <a className="btn solid" href={GRWA_LINK("Quiero vender")} target="_blank" rel="noopener">Quiero vender <span className="arrow">→</span></a>
        </div>
      </section>
    </>);
}

Object.assign(window, { PageVenta });