// page-socios.jsx — "Nuestros socios comerciales".  Exports PageSocios → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const SImg = (f, w = 900) => `https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=${w},fit=crop/Jcf6EuSlCZ7Z3w5j/${f}`;
const WA_SOC = "https://wa.me/5491150522993?text=" +
encodeURIComponent("Hola Grupo Remodelar 👷 quiero sumarme a su comunidad de socios comerciales.");
const WA_CAFE = "https://wa.me/5491150522993?text=" +
encodeURIComponent("Hola Grupo Remodelar 👷 me gustaría agendar un café para conversar un proyecto.");

const SOC_GARANTIAS = [
["Profesionalismo y transparencia", "Equipos certificados y reales."],
["Seriedad y orden", "Personas 100% responsables y ordenadas."],
["Comunicación constante", "Seguimiento en cada paso que damos."],
["Compromiso total con el cliente", "Nuestro objetivo final es que vuelvas a contactarnos."]];


const SOC_PARTNERS = [
["Grupo Remodelar", "Construcción / Remodelación de interiores", "assets/socios/socio-grupo-remodelar.png"],
["Loana Del Vecchio", "Tasaciones y propiedades", "assets/socios/socio-loana-del-vecchio.png"],
["Inversión Inmobiliaria AMBA", "Desarrollo de bienes raíces", "assets/socios/socio-inversion-amba.png"],
["Vende tu Inmueble Hoy", "Expertos en marketing inmobiliario", "assets/socios/socio-vende-tu-inmueble.png"]];


function PageSocios() {
  return (
    <>
      <section className="page-hero" data-screen-label="Socios · Hero">
        <div className="blueprint-grid" data-speed="0.05" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Red de socios · Profesionalismo · Transparencia</span></div>
          <h1>
            <span className="line-mask"><span>Nuestros</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">socios.</span></span></span>
          </h1>
          <p className="sub">Trabajamos en equipo para superar tus expectativas. Nuestros socios comerciales cumplen
            con los estándares de profesionalismo, transparencia y calidad. Juntos coordinamos cada etapa.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Súmate a la comunidad")} target="_blank" rel="noopener">Súmate a la comunidad <span className="arrow">→</span></a>
            <a className="btn ghost" href={GRWA_LINK("Quiero dejar una consulta")} target="_blank" rel="noopener">Dejá tu consulta</a>
          </div>
        </div>
      </section>

      {/* SOMOS UNA GRAN FAMILIA */}
      <section className="section" data-screen-label="Una gran familia">
        <div className="wrap">
          <div className="feature reveal">
            <div>
              <div className="idx">/ Somos una gran familia</div>
              <h3>Una red que<br /><span className="yb">suma.</span></h3>
              <p>Hace <span className="hl">más de 10 años</span> trabajamos en el rubro inmobiliario, haciendo realidad
                los proyectos de las personas y asumiendo la responsabilidad que eso significa.</p>
              <p>Para lograrlo construimos una <span className="hl">red de socios comerciales</span> que comparten
                nuestros estándares de profesionalismo, transparencia y trabajo en equipo.</p>
              <p>Nos une la forma de “hacer”: procesos claros, comunicación constante y foco en resultados. Esta
                sinergia acelera los tiempos en cada etapa: inversión, compra, venta, obra, remodelación o flipping.</p>
            </div>
            <div className="feature-media">
              <div className="ph"><img src={SImg("57b3a6bd01d15ea5b76a00cdd7be2cb2-Bbc3zVtt8euBH8DS.jpg", 1100)} alt="Equipo y socios de Grupo Remodelar" /><div className="sizer" /></div>
            </div>
          </div>
        </div>
      </section>

      {/* ¿POR QUÉ ELEGIRNOS? */}
      <section className="section" style={{ background: "var(--gr-ink)" }} data-screen-label="Qué garantizamos">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ ¿Por qué elegirnos?</div>
              <h2>Qué<br />garantizamos<br />como <span className="yb">equipo.</span></h2>
            </div>
            <p className="lead" style={{ fontSize: "21px", color: "rgb(199, 187, 187)", maxWidth: "440px", lineHeight: "1.6", letterSpacing: "0.2px" }}>Detrás de cada proyecto hay personas, expectativas y patrimonio. Un proyecto mejor
              coordinado maximiza la tranquilidad de nuestros clientes — y actuamos en consecuencia.</p>
          </div>
          <div className="points reveal" data-d="1">
            {SOC_GARANTIAS.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>

      {/* SOCIOS COMERCIALES */}
      <section className="section" data-screen-label="Lista de socios">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Con quiénes trabajamos</div>
              <h2>Socios<br />comerciales.</h2>
            </div>
            <p className="lead" style={{ fontSize: "21px", maxWidth: "440px", lineHeight: "1.55", letterSpacing: "0.2px" }}>Una red de profesionales que potencia cada proyecto, de la inversión a la
              comercialización.</p>
          </div>
        </div>
        <div className="logo-banner reveal" data-d="1">
          <div className="logo-track">
            {[0, 1, 2, 3].map((rep) =>
            <div className="logo-run" key={rep} aria-hidden={rep > 0 ? "true" : undefined}>
                {SOC_PARTNERS.map(([t, d, logo]) =>
              <div className="logo-item" key={t + rep}>
                    <img src={logo.indexOf("/") >= 0 ? logo : SImg(logo, 500)} alt={rep > 0 ? "" : t} title={t} />
                  </div>
              )}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CAFÉ CTA */}
      <section className="cta-band" data-screen-label="Agendá un café">
        <div className="hazard thin" style={{ position: "absolute", top: 0, left: 0 }} />
        <div className="wrap reveal">
          <h3 style={{ letterSpacing: "0.5px" }}>¿Querés transformar tu idea en un proyecto concreto, con un equipo que te acompañe de punta a punta? <span className="yb">Agendemos un café.</span></h3>
          <a className="btn solid" href={GRWA_LINK("Agendá un café")} target="_blank" rel="noopener">Agendá un café <span className="arrow">→</span></a>
        </div>
      </section>
    </>);

}

Object.assign(window, { PageSocios });