// page-remodela.jsx — "Remodelá tu casa".  Exports PageRemodela → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const RImg = (f, w = 1100) => `https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=${w},fit=crop/Jcf6EuSlCZ7Z3w5j/${f}`;
const WA_REM = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 👷 quiero remodelar mi casa, ¿me pasás info?");

const REM_SPACES = [
  { t: "Baños",                 d: "Baños grandes o pequeños, no importan los m². Hacelo funcional.", img: "e501f503fb377144655553fca8cc3022-6GhyxUSo709BD6yD.jpg" },
  { t: "Cocinas",               d: "Renová tu espacio: la cocina es donde pasás gran parte de tu vida.", img: "whatsapp-image-2025-07-02-at-2.09.40-pm-b78X9vUGWn2ramj5.jpeg" },
  { t: "Habitaciones y livings", d: "Date un gusto, te merecés descansar en un espacio personalizado.", img: "whatsapp-image-2025-07-02-at-2.09.37-pm-dHNWP3cT6FYL1SXC.jpeg" },
];

const REM_CHIPS = [
  "Living-comedor", "Dormitorios a medida", "Home office", "Lavadero", "Quincho y parrillas",
  "Garaje", "Pasillos y hall", "Terrazas y balcones", "Patio / jardín", "Frentes y contrafrentes",
  "Iluminación", "Pisos de porcelanato", "Aberturas e instalaciones", "Llave en mano",
];

const REM_GALLERY = [
  "whatsapp-image-2025-07-02-at-2.09.40-pm-b78X9vUGWn2ramj5.jpeg",
  "0f272919d9c4314ee232c642d9932ab4-GbAv4ZZNIAvcplL0.jpg",
  "491005481_2474886312850168_5553680809385159897_n-2VnpaD0WtfIRFtp8.jpg",
  "whatsapp-image-2025-11-10-at-15.33.04-HMOrHgfgnIj7ohZC.jpeg",
  "482514666_549881371067774_7956040541204904259_n-okz9tAKp30r4KBq5.jpg",
  "876e33c19eb0157851444b2af8408ae5-hqrCkaewPlIJC6XJ.jpg",
  "490993811_1569747100388396_372947257338847253_n-otmE8hZ3L5G5ra3s.jpg",
  "nano-banana-2025-09-17t23-03-09-J1Xb5eWYJ5ECmN7j.png",
];

function PageRemodela() {
  return (
    <>
      <section className="page-hero" data-screen-label="Remodelá · Hero">
        <div className="blueprint-grid" data-speed="0.05" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Diseño · Obra · Gestión · CABA y GBA</span></div>
          <h1>
            <span className="line-mask"><span>Remodelá</span></span>
            <span className="line-mask" data-d="1"><span>tu <span className="ya">casa.</span></span></span>
          </h1>
          <p className="sub">Diseño funcional, obra transparente y gestión en cada paso. Dale valor agregado a tu propiedad —
            no dejes que el tiempo te gane ni que tu casa se venga abajo.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Presupuesto gratis")} target="_blank" rel="noopener">Presupuesto gratis <span className="arrow">→</span></a>
            <a className="btn ghost" href={GRWA_LINK("Te asesoramos sin costo")} target="_blank" rel="noopener">Te asesoramos sin costo</a>
          </div>
        </div>
      </section>

      {/* VENTAJAS DE REMODELAR */}
      <section className="section" data-screen-label="Ventajas de remodelar">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Ventajas de remodelar</div>
              <h2>Ganás<br />o ganás.</h2>
            </div>
            <p className="lead">Remodelar es la forma más directa de darle valor agregado. La revalorización de tu
              propiedad es ganancia futura: con remodelaciones y refacciones bien planificadas, ganás o ganás.</p>
          </div>
          <div className="feature reveal" data-d="1" style={{ marginTop: 64 }}>
            <div>
              <h3>Revalorizá<br /><span className="yb">tu propiedad.</span></h3>
              <p>La <span className="hl">dirección de obra</span> ordena tiempos y costos, mientras la
                <span className="hl"> remodelación de cocina y baño</span> eleva la plusvalía de tu propiedad.</p>
              <p>Podés sumar m² útiles con <span className="hl">ampliaciones y quinchos</span>, cuidando estética y
                normativa para que tu inmueble se venda o se alquile mejor.</p>
              <p>Trabajamos con presupuestos y contratos transparentes, integrando diseño, ejecución y control de
                calidad. Ideal para propietarios que buscan una inversión inmobiliaria inteligente.</p>
            </div>
            <div className="feature-media">
              <div className="ph"><img src={RImg("whatsapp-image-2025-11-07-at-19.06.03-21GAYg7Zpunu3vQt.jpeg")} alt="Remodelación de propiedad" /><div className="sizer" /></div>
            </div>
          </div>
        </div>
      </section>

      {/* GESTIÓN / REMODELACIÓN DE CASAS */}
      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Remodelación de casas">
        <div className="wrap">
          <div className="feature flip reveal">
            <div>
              <div className="idx">/ Remodelación de casas</div>
              <h3>La gestión<br /><span className="yb">lo es todo.</span></h3>
              <p>Optimiza el resultado de la obra y de los presupuestos, evita sobrecostos y sorpresas relacionadas
                con las estafas. No se trata de simplemente llamar a un “albañil”.</p>
              <p>Trabajamos con <span className="hl">gestión profesional</span>: presupuestos claros, cronograma de
                seguimiento y estados de cuenta, control de avances y de calidad. Sin excusas.</p>
              <p>Dejá atrás la incertidumbre y el miedo del “vemos sobre la marcha”. Te acompañamos paso a paso.</p>
              <div className="hero-actions" style={{ marginTop: 28 }}>
                <a className="btn red" href={GRWA_LINK("Quiero remodelar mi casa")} target="_blank" rel="noopener">Quiero remodelar mi casa <span className="arrow">→</span></a>
              </div>
            </div>
            <div className="feature-media">
              <div className="ph"><img src={RImg("7f8ff04d13a7718712ff961e260f4f52-00aI8J8l6YfiVzYE.jpg")} alt="Obra en proceso" /><div className="sizer" /></div>
            </div>
          </div>
        </div>
      </section>

      {/* ESPACIOS PARA REMODELAR */}
      <section className="section" data-screen-label="Espacios para remodelar">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Espacios para remodelar</div>
              <h2>Cada rincón<br />cuenta.</h2>
            </div>
            <p className="lead">Son muchos los espacios de una casa. Acá te dejamos los más remodelados por nuestros
              clientes en CABA y GBA.</p>
          </div>
          <div className="spaces reveal" data-d="1">
            {REM_SPACES.map((s) => (
              <div className="space-card" key={s.t} data-hot>
                <div className="ph"><img src={RImg(s.img, 800)} alt={s.t} /></div>
                <div className="sizer" />
                <div className="ovl"><h4>{s.t}</h4><p>{s.d}</p></div>
              </div>
            ))}
          </div>
          <div className="chips reveal" data-d="2">{REM_CHIPS.map((c) => <span key={c}>{c}</span>)}</div>
        </div>
      </section>

      {/* TRABAJOS REALIZADOS */}
      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Trabajos realizados">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Trabajos realizados</div>
              <h2>Obras<br />reales.</h2>
            </div>
            <p className="lead">Cocinas, baños y livings terminados por nuestro equipo. El antes y el después de cada
              obra en CABA y GBA.</p>
          </div>
          <div className="gallery reveal" data-d="1">
            {REM_GALLERY.map((f, i) => (
              <div className="ph" key={i}><img src={RImg(f, 700)} alt={"Trabajo realizado " + (i + 1)} /></div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageRemodela });