// page-nosotros.jsx — "Quiénes somos".  Exports PageNosotros → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const NImg = (f, w = 1100) => `https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=${w},fit=crop/Jcf6EuSlCZ7Z3w5j/${f}`;
const WA_NOS = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 👷 quiero asesorarme, ¿me cuentan más?");

const NOS_POINTS = [
  ["Gestión transparente", "Presupuesto claro, contratos firmados e informes paso a paso."],
  ["Diseño inteligente", "Materiales y soluciones que elevan el valor de tu propiedad y reducen el mantenimiento."],
  ["Ejecución controlada", "Cronograma real, responsable asignado y control de calidad en obra."],
  ["Menos tiempo, más ganancia", "Mejoras enfocadas en acelerar la venta, el alquiler o el estado de la propiedad."],
  ["Cumplimiento normativo", "Planos, permisos y seguridad según corresponda."],
  ["Equipo profesional", "Dirección de obra, gremios homologados y garantías post-obra."],
  ["Cierre llave en mano", "Limpieza final, contenido de calidad, imágenes y videos de entrega."],
  ["Gestión comercial", "Comercialización de la propiedad con planes de marketing y publicidad."],
];

function PageNosotros() {
  return (
    <>
      <section className="page-hero" data-screen-label="Nosotros · Hero">
        <div className="blueprint-grid" data-speed="0.05" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Expertos y profesionales · CABA y GBA</span></div>
          <h1>
            <span className="line-mask"><span>Quiénes</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">somos.</span></span></span>
          </h1>
          <p className="sub">Expertos y profesionales en bienes raíces: remodelamos, construimos y ampliamos
            propiedades. No dejes tu inversión al azar — confiá en nosotros.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Quiero asesorarme gratis")} target="_blank" rel="noopener">Quiero asesorarme 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>

      {/* HISTORIA */}
      <section className="section" data-screen-label="Historia">
        <div className="wrap">
          <div className="feature reveal">
            <div>
              <div className="idx">/ Nuestra historia</div>
              <h3>Una gran<br /><span className="yb">familia.</span></h3>
              <p>Somos un grupo de personas que trabaja hace <span className="hl">más de 10 años</span> en el rubro de la
                construcción y la remodelación de propiedades. Una gran familia que crece con el paso del tiempo.</p>
              <p>Profesionales con un objetivo claro: <span className="hl">alcanzar los objetivos</span> y satisfacer las
                necesidades de nuestros clientes, de forma transparente y efectiva.</p>
              <p>Queremos ser una parte clave de tu crecimiento, y sabemos lo importante que es llevar a cabo una
                inversión inmobiliaria.</p>
            </div>
            <div className="feature-media">
              <div className="ph"><img src={NImg("581839161_835579832294200_2268606676077958719_n-kvGk7dIgyPJYWQc0.jpg")} alt="Equipo de Grupo Remodelar en obra" /><div className="sizer" /></div>
            </div>
          </div>
          <div className="band reveal" data-d="1">
            <div className="cell"><div className="v"><em>+10</em></div><div className="l">Años de experiencia</div></div>
            <div className="cell"><div className="v">Llave<br />en mano</div><div className="l">Proyecto, obra y entrega</div></div>
            <div className="cell"><div className="v">CABA<br />y GBA</div><div className="l">Zona de trabajo</div></div>
          </div>
        </div>
      </section>

      {/* POR QUÉ ELEGIRNOS */}
      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Por qué elegirnos">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Por qué elegirnos</div>
              <h2>Para<br />gestionar tus<br />proyectos.</h2>
            </div>
            <p className="lead">Ocho razones por las que propietarios e inversores confían en Grupo Remodelar para su
              próxima obra o inversión.</p>
          </div>
          <div className="points reveal" data-d="1">
            {NOS_POINTS.map(([t, d], i) => (
              <div className="point" key={t}>
                <span className="pi">{String(i + 1).padStart(2, "0")}</span>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CONFIÁ EN NOSOTROS */}
      <section className="section" data-screen-label="Confiá en nosotros">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Confiá en nosotros</div>
              <h2>Somos un<br />gran <span className="yb">equipo.</span></h2>
            </div>
            <p className="lead">Estimación sin costo. Empezá tu próxima obra o inversión con respaldo profesional.</p>
          </div>
          <div className="prose reveal" data-d="1" style={{ marginTop: 44 }}>
            <p>Somos tu equipo para <span className="hl">remodelación estratégica residencial y comercial</span>.
              Integramos tendencias de mercado, diseño funcional y obra auditada para potenciar la propiedad y agilizar
              su alquiler o venta.</p>
            <p>Presupuesto al detalle, reglas claras y <span className="hl">gestión integral de inicio a fin</span>, en
              CABA y GBA.</p>
            <div className="hero-actions" style={{ marginTop: 28 }}>
              <a className="btn red" href={GRWA_LINK("Estimá tu remodelación gratis")} target="_blank" rel="noopener">Estimá tu remodelación gratis <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageNosotros });