// page-blog.jsx — "Blog inmobiliario".  Exports PageBlog → window
const GRWA_LINK = (m) => "https://wa.me/5491150522993?text=" + encodeURIComponent("Hola, ¿cómo estás? " + m + ".");
const WA_BLOG = "https://wa.me/5491150522993?text=" +
  encodeURIComponent("Hola Grupo Remodelar 👷 quiero recibir novedades del mercado inmobiliario.");
const BImg = (f, w = 760) => `https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=${w},fit=crop/Jcf6EuSlCZ7Z3w5j/${f}`;

const BLOG_POSTS = [
  ["Mercado", "CABA vs. GBA: el nuevo mapa de precios", "Por primera vez el norte del GBA supera a barrios premium de CABA. Precios, volumen, crédito y dónde están hoy las oportunidades.", "Blog - CABA vs GBA.html", "assets/blog-caba-gba.png"],
  ["Obra & inversión", "El Efecto Reforma: cuánto suma remodelar", "Una propiedad ‘a refaccionar’ pierde 10–20% en tasación. Cuánto recuperás remodelando antes de vender.", "Blog - Efecto Reforma.html", "assets/blog-reforma.png"],
  ["Inversión", "Dónde está la mayor rentabilidad en 2026", "5,83% en CABA (máximo desde 2012), barrios que rinden 10% y el despertar del GBA. Por qué los monoambientes son el producto estrella.", "Blog - Rentabilidad 2026.html", "assets/blog-rentabilidad.png"],
  ["Tasación", "Más allá del m²: tasar con ojo experto", "Por qué una tasación profesional combina dinámica de mercado y análisis constructivo — y no un simple promedio del barrio.", "Blog - Tasacion profesional.html", "assets/blog-tasacion.png"],
  ["Inversión", "Cómo ganar en dólares en el rubro inmobiliario", "Fix & Flip, portafolio de rentas, desarrollo, activos con potencial oculto y retail: los 5 pilares para ganar hoy.", "Blog - Estrategias de inversion.html", "assets/blog-estrategias.png"],
  ["Obra & venta", "Remodelar para vender: deterioro en rentabilidad", "El mercado castiga el mal estado hasta -20% y premia lo ‘a nuevo’ +20%. Cómo capturar esa brecha al vender.", "Blog - Remodelar para vender.html", "assets/blog-remodelar-vender.png"],
];

function PageBlog() {
  return (
    <>
      <section className="page-hero" data-screen-label="Blog · Hero">
        <div className="blueprint-grid" data-speed="0.05" />
        <div className="wrap">
          <div className="hero-eyebrow"><span className="dot pulse" /><span className="eyebrow">Mercado inmobiliario · CABA y GBA · 2026</span></div>
          <h1>
            <span className="line-mask"><span>Blog</span></span>
            <span className="line-mask" data-d="1"><span><span className="ya">inmobiliario.</span></span></span>
          </h1>
          <p className="sub">Novedades y actualidades del mercado inmobiliario en CABA y GBA. Los negocios más rentables
            del rubro, mitos y verdades de cómo ganar, y las mejores maneras de invertir en propiedades.</p>
          <div className="hero-actions">
            <a className="btn solid" href={GRWA_LINK("Quiero recibir novedades del mercado inmobiliario")} target="_blank" rel="noopener">Quiero novedades <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      {/* POSTS */}
      <section className="section" data-screen-label="Notas">
        <div className="wrap">
          <div className="section-head reveal">
            <div>
              <div className="idx">/ Notas</div>
              <h2>Del<br />mercado.</h2>
            </div>
            <p className="lead">Análisis del mercado inmobiliario de CABA y GBA: precios, inversión, tasación y puesta
              en valor. Seis notas para decidir con datos.</p>
          </div>
          <div className="posts reveal" data-d="1">
            {BLOG_POSTS.map(([cat, t, d, href, img]) => {
              const inner = (
                <>
                  <div className="ph">{img ? <img src={img.indexOf("/") >= 0 ? img : BImg(img)} alt={t} /> : <span className="ph-tag">[ PORTADA<br />DE LA NOTA ]</span>}</div>
                  <div className="body">
                    <span className="cat">{cat}</span>
                    <h3>{t}</h3>
                    <p>{d}</p>
                    <span className={href ? "more" : "soon"}>{href ? "Leer nota →" : "Próximamente"}</span>
                  </div>
                </>
              );
              return href
                ? <a className="post" key={t} href={href} data-hot>{inner}</a>
                : <article className="post" key={t}>{inner}</article>;
            })}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { PageBlog });