// Blog list + Mina Santa Cruz article
function Blog({ lang }) {
  const es = lang === "es";
  const posts = [
    { id: "mina-santa-cruz", date: "May 2026", future: false,
      title_es: "Cómo terminé haciendo workshops en una mina de oro en el medio de la Patagonia",
      title_en: "How I ended up running workshops in a gold mine in the middle of Patagonia",
      label: "Blog · Proceso · Freelance",
      preview: "Santa Cruz · Goldcorp" },
    { id: "tarjeta-debito", date: es ? "Próximo" : "Soon", future: true,
      title_es: "La tarjeta de débito",
      title_en: "The debit card" },
    { id: "julio-le-parc", date: es ? "Próximo" : "Soon", future: true,
      title_es: "Julio Le Parc",
      title_en: "Julio Le Parc" },
    { id: "fancy-monas-deep", date: es ? "Próximo" : "Soon", future: true,
      title_es: "Fancy Monas en profundidad",
      title_en: "Fancy Monas in depth" },
    { id: "tibetpass-deep", date: es ? "Próximo" : "Soon", future: true,
      title_es: "Tibetpass en profundidad",
      title_en: "Tibetpass in depth" }
  ];

  return (
    <div className="page" data-screen-label="Blog">
      <div className="container">
        <Link to="home" className="back-link">← {es ? "Volver" : "Back"}</Link>

        <header style={{ padding: "32px 0 80px" }}>
          <div className="label" style={{ marginBottom: 24 }}>Blog</div>
          <h1 className="h-xl">{es ? "Cosas que escribo cuando termino un proyecto." : "Things I write when I finish a project."}</h1>
        </header>

        <div className="blog-list">
          {posts.map(p => p.future ? (
            <div key={p.id} className="blog-row future">
              <div className="date">{p.date}</div>
              <div className="title">{es ? p.title_es : p.title_en}</div>
              <div className="arrow">↗</div>
            </div>
          ) : (
            <Link key={p.id} to="blog" sub={p.id} className="blog-row" data-cursor-preview={p.preview || (es ? p.title_es : p.title_en)}>
              <div className="date">{p.date}</div>
              <div className="title">{es ? p.title_es : p.title_en}</div>
              <div className="arrow">↗</div>
            </Link>
          ))}
        </div>
      </div>
      <CTA lang={lang} />
    </div>
  );
}

function BlogPost({ lang, sub }) {
  const es = lang === "es";
  if (sub !== "mina-santa-cruz") {
    // Fallback for not-yet-written posts
    return (
      <div className="page" data-screen-label={`Blog / ${sub}`}>
        <div className="container">
          <Link to="blog" className="back-link">← Blog</Link>
          <header className="article-header">
            <div className="label" style={{ marginBottom: 24 }}>Blog</div>
            <h1 className="h-lg">{es ? "Próximamente." : "Coming soon."}</h1>
            <p className="lede muted" style={{ marginTop: 24 }}>
              {es ? "Este artículo todavía no está escrito. Volvé en unas semanas." : "This article isn't written yet. Check back in a few weeks."}
            </p>
          </header>
        </div>
        <CTA lang={lang} />
      </div>
    );
  }

  const steps = [
    { n: "01",
      t_es: "Introducción", t_en: "Introduction",
      d_es: "Presentación de los objetivos del proyecto H2Zero, la línea base de consumo de agua, los KPIs y el sistema de seguimiento y monitoreo. Para que todos entendieran el contexto antes de opinar sobre él.",
      d_en: "Presentation of the H2Zero project goals, the baseline water consumption, the KPIs and the tracking and monitoring system. So everyone understood the context before weighing in on it." },
    { n: "02",
      t_es: "Ejercicios de creatividad", t_en: "Creativity exercises",
      d_es: "Dinámicas de calentamiento para romper la inercia y sacar a la gente del modo \u201creunión de trabajo\u201d. El objetivo era activar otro tipo de pensamiento antes de entrar en el problema.",
      d_en: "Warm-up dynamics to break the inertia and pull people out of \u201cwork meeting\u201d mode. The goal was to activate a different kind of thinking before getting into the problem." },
    { n: "03",
      t_es: "Mindmapping y brainstorming", t_en: "Mindmapping and brainstorming",
      d_es: "Exploración libre de ideas sin filtro ni jerarquía. Todo valía. Todo se anotaba. El juicio vendría después.",
      d_en: "Free exploration of ideas with no filter or hierarchy. Everything counted. Everything was written down. Judgment would come later." },
    { n: "04",
      t_es: "Ejercicio problema / solución", t_en: "Problem / solution exercise",
      d_es: "Con las ideas sobre la mesa, los participantes trabajaban en identificar problemas concretos de su área y proponer soluciones específicas. De lo abstracto a lo accionable.",
      d_en: "With the ideas on the table, participants worked on identifying concrete problems in their area and proposing specific solutions. From the abstract to the actionable." }
  ];

  const stats = [
    { v: "5", l_es: "Talleres por área", l_en: "Workshops per area" },
    { v: "47", l_es: "Participantes", l_en: "Participants" },
    { v: "+60", l_es: "Ideas generadas", l_en: "Ideas generated" }
  ];

  return (
    <div className="page" data-screen-label="Blog / Mina Santa Cruz">
      <div className="container">
        <Link to="blog" className="back-link">← Blog</Link>

        <header className="article-header">
          <div className="label" style={{ marginBottom: 24 }}>{es ? "Blog · Proceso · Freelance" : "Blog · Process · Freelance"}</div>
          <h1 className="h-lg" style={{ marginBottom: 32 }}>
            {es
              ? "Cómo terminé haciendo workshops en una mina de oro en el medio de la Patagonia"
              : "How I ended up running workshops in a gold mine in the middle of Patagonia"}
          </h1>
          <p className="lede muted" style={{ maxWidth: "60ch" }}>
            {es
              ? "Un geólogo me llamó para pedirme un logo. Terminé viajando 2.000 kilómetros, rindiendo un examen sobre manejo de uranio enriquecido y facilitando dinámicas de co-creación con operarios que trabajaban a 70 metros de profundidad."
              : "A geologist called me to ask for a logo. I ended up traveling 2,000 kilometers, sitting an exam on enriched-uranium handling and facilitating co-creation dynamics with operators who worked 70 meters underground."}
          </p>
          <div className="case-meta-row" style={{ marginTop: 40 }}>
            <div className="item"><span className="k">{es ? "Empresa" : "Company"}</span><span className="v">Goldcorp</span></div>
            <div className="item"><span className="k">{es ? "Proyecto" : "Project"}</span><span className="v">H2Zero</span></div>
            <div className="item"><span className="k">{es ? "Ubicación" : "Location"}</span><span className="v">Santa Cruz, AR</span></div>
            <div className="item"><span className="k">{es ? "Modalidad" : "Mode"}</span><span className="v">Freelance</span></div>
          </div>
        </header>

        <Placeholder tag={es ? "Santa Cruz · Patagonia" : "Santa Cruz · Patagonia"} id="ART-01" className="ph-hero" />

        <div className="article-layout">
        <article className="article-body">
          <h2>{es ? "El llamado" : "The call"}</h2>

          <p>{es
            ? "Todo empezó con una llamada de un geólogo, conocido de un amigo. \u201cHola Nacho, necesito un logo para un proyecto de ahorro de energía en una minera.\u201d Mi primera respuesta fue automática: dale, lo hago. Pero algo me hizo frenar. Le pedí que me contara un poco más."
            : "It all started with a call from a geologist, a friend of a friend. \u201cHi Nacho, I need a logo for an energy-saving project at a mining company.\u201d My first answer was automatic: sure, I'll do it. But something made me stop. I asked him to tell me a bit more."}</p>

          <p>{es
            ? "Lo que siguió a esa pregunta cambió completamente el alcance del proyecto. BW, la consultora de hidrogeología y medioambiente que me estaba contratando, no solo necesitaba una identidad visual. Estaban buscando ideas que le permitieran a Goldcorp, una de las mineras más grandes de la región, ahorrar agua y energía. Y querían que esas ideas, con el tiempo, se convirtieran en cultura de la compañía."
            : "What followed that question completely changed the scope of the project. BW, the hydrogeology and environmental consultancy that was hiring me, didn't just need a visual identity. They were looking for ideas that would let Goldcorp, one of the largest mining companies in the region, save water and energy. And they wanted those ideas, over time, to become part of the company's culture."}</p>

          <p>{es
            ? "Ahí vi la oportunidad. Un logo solo no iba a lograr eso. Lo que necesitaban era un proceso. Y yo tenía una forma de encararlo."
            : "That's where I saw the opportunity. A logo alone wasn't going to achieve that. What they needed was a process. And I had a way to approach it."}</p>

          <h2>{es ? "La propuesta" : "The proposal"}</h2>

          <p>{es
            ? "Convencerlos de ampliar el alcance no fue inmediato, pero tampoco fue tan difícil. Cuando entendieron que la identidad visual sin un proceso de apropiación interno iba a quedar en un afiche en la pared, la idea de los workshops empezó a tener sentido."
            : "Convincing them to expand the scope wasn't immediate, but it wasn't that hard either. Once they understood that a visual identity without an internal process of ownership would end up as a poster on a wall, the idea of the workshops started to make sense."}</p>

          <p>{es
            ? "Llamé a Jess, una colega y amiga que admiro mucho. Era la primera vez que íbamos a trabajar juntos de esta manera, y ninguno de los dos sabía exactamente cómo cobrar algo así. Nos sentamos, estimamos, dudamos, ajustamos. Finalmente presentamos la propuesta: cinco workshops de co-creación presenciales, uno por cada área de la mina, facilitados por los dos. El objetivo era que los propios trabajadores generaran las ideas de ahorro, las priorizaran y las hicieran suyas."
            : "I called Jess, a colleague and friend I admire a lot. It was the first time we were going to work together this way, and neither of us knew exactly how to price something like this. We sat down, estimated, hesitated, adjusted. Finally we presented the proposal: five in-person co-creation workshops, one for each area of the mine, facilitated by the two of us. The goal was for the workers themselves to generate the saving ideas, prioritize them and make them their own."}</p>

          <p>{es ? "Aceptaron." : "They accepted."}</p>

          <h2>{es ? "Llegar ahí" : "Getting there"}</h2>

          <p>{es
            ? "La mina de Goldcorp quedaba en el medio de la provincia de Santa Cruz. Cuando digo el medio, digo el medio de verdad: estepa patagónica pura, sin vegetación, todo color beige, viento constante e implacable. Un lugar inhóspito en el sentido más literal."
            : "Goldcorp's mine was in the middle of the province of Santa Cruz. When I say the middle, I mean really the middle: pure Patagonian steppe, no vegetation, everything beige, constant and relentless wind. An inhospitable place in the most literal sense."}</p>

          <p>{es
            ? "Para llegar volamos de Buenos Aires a Río Gallegos y después siete horas de colectivo. Siete horas mirando por la ventana un paisaje que no cambia, que es exactamente igual al principio que al final, y que de alguna manera tiene una belleza rara, casi marciana."
            : "To get there we flew from Buenos Aires to Río Gallegos and then seven hours by bus. Seven hours staring out the window at a landscape that doesn't change, that's exactly the same at the start as at the end, and that somehow has a strange, almost Martian beauty."}</p>

          <p>{es
            ? "La base de operaciones era un campamento armado con containers. Containers para dormir, containers que funcionaban como oficinas, containers para todo. El único edificio \u201creal\u201d era el comedor y sala de recreaciones, que era también el lugar donde se juntaba toda la gente al final del día. Ese espacio después se convirtió en nuestro salón de workshops."
            : "The base of operations was a camp built out of containers. Containers to sleep in, containers that worked as offices, containers for everything. The only \u201creal\u201d building was the dining and recreation hall, which was also where everyone gathered at the end of the day. That space later became our workshop room."}</p>

          <p>{es
            ? "Ah, y antes de que me dejaran entrar tuve que hacer una capacitación sobre manejo de uranio enriquecido y rendir un examen. Lo aprobé. No voy a decir que entendí todo, pero lo aprobé."
            : "Oh, and before they let me in I had to take a training course on enriched-uranium handling and sit an exam. I passed it. I won't say I understood everything, but I passed."}</p>

          <h2>{es ? "La resistencia" : "The resistance"}</h2>

          <p>{es
            ? "El primer día fue el más difícil. Los operarios de las áreas más duras de la mina —los que extraen y procesan el oro y la plata— llegaron al workshop con una pregunta muy clara escrita en la cara: ¿qué hacemos acá? ¿quiénes son estos tipos? ¿para qué estamos perdiendo el tiempo con esto?"
            : "The first day was the hardest. The operators from the toughest areas of the mine —the ones who extract and process the gold and silver— arrived at the workshop with a very clear question written on their faces: what are we doing here? who are these guys? why are we wasting time on this?"}</p>

          <p>{es
            ? "No era hostilidad, exactamente. Era escepticismo. Eran personas acostumbradas a trabajar con maquinaria pesada a 70 metros de profundidad, con protocolos claros, con jerarquías definidas. Y de repente dos desconocidos de Buenos Aires les estaban pidiendo que agarraran un papel y un lápiz y dibujaran ideas."
            : "It wasn't hostility, exactly. It was skepticism. These were people used to working with heavy machinery 70 meters underground, with clear protocols, with defined hierarchies. And suddenly two strangers from Buenos Aires were asking them to pick up paper and a pencil and draw ideas."}</p>

          <blockquote>
            {es
              ? "Ponerle un papel y un lápiz en la mano a alguien que opera maquinaria pesada a 70 metros de profundidad y pedirle que dibuje es, en el mejor de los casos, una apuesta. En el peor, una provocación."
              : "Putting a pencil and paper in the hand of someone who operates heavy machinery 70 meters underground and asking them to draw is, at best, a gamble. At worst, a provocation."}
          </blockquote>

          <p>{es
            ? "La clave fue no forzar nada. Las dinámicas que habíamos diseñado con Jess eran abiertas, sin juicio, sin respuestas correctas o incorrectas. No había jerarquías adentro de la sala. El operario y el ingeniero estaban en el mismo lugar, con el mismo papel, con el mismo lápiz. Eso tardó un rato en asentarse, pero cuando lo hizo, algo cambió. Empezaron a hablar. Empezaron a proponer. Hubo ideas brillantes que vinieron de personas que jamás habían sido convocadas a opinar sobre nada que no fuera su área de trabajo inmediata."
            : "The key was not to force anything. The dynamics we had designed with Jess were open, judgment-free, with no right or wrong answers. There were no hierarchies inside the room. The operator and the engineer were in the same place, with the same paper, with the same pencil. It took a while to settle, but when it did, something shifted. They started to talk. They started to propose. There were brilliant ideas that came from people who had never been asked to weigh in on anything beyond their immediate area of work."}</p>

          <h2>{es ? "Cómo estaban diseñados los workshops" : "How the workshops were designed"}</h2>

          <p>{es
            ? "Cada taller fue diseñado específicamente para el área que lo recibía: medio ambiente, superficie, campamento, exploraciones y planta de procesos. No era el mismo workshop repetido cinco veces, sino cinco versiones calibradas para el lenguaje, los problemas y la cultura de cada grupo."
            : "Each workshop was designed specifically for the area it served: environment, surface, camp, exploration and the processing plant. It wasn't the same workshop repeated five times, but five versions calibrated to the language, problems and culture of each group."}</p>

          <p>{es
            ? "La metodología que usamos fue design thinking aplicado a contexto industrial, con el foco puesto en hacer que los propios usuarios sean parte del diagnóstico y de las soluciones. La estructura de cada sesión seguía este orden:"
            : "The methodology we used was design thinking applied to an industrial context, with the focus on making the users themselves part of the diagnosis and the solutions. The structure of each session followed this order:"}</p>

          <div style={{ display: "flex", flexDirection: "column", gap: 28, margin: "36px 0 8px" }}>
            {steps.map((s) => (
              <div key={s.n} style={{ display: "grid", gridTemplateColumns: "34px 1fr", gap: 16, alignItems: "baseline" }}>
                <span className="mono" style={{ fontSize: 13, color: "var(--muted)" }}>{s.n}</span>
                <div>
                  <div style={{ color: "var(--fg)", fontWeight: 600, fontSize: 18, marginBottom: 6, letterSpacing: "-0.01em" }}>{es ? s.t_es : s.t_en}</div>
                  <div style={{ fontSize: 16, color: "var(--fg-soft)", lineHeight: 1.55 }}>{es ? s.d_es : s.d_en}</div>
                </div>
              </div>
            ))}
          </div>

          <p>{es
            ? "Una vez terminados los cinco talleres, tomamos la totalidad de las ideas generadas y las cruzamos con dos variables: complejidad de implementación y costo de inversión. Ese cruce definió las prioridades que después fueron a la presentación del comité directivo."
            : "Once the five workshops were finished, we took all the ideas generated and cross-referenced them against two variables: implementation complexity and investment cost. That cross-referencing defined the priorities that later went to the steering-committee presentation."}</p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, margin: "40px 0", padding: "28px 0", borderTop: "0.5px solid var(--line)", borderBottom: "0.5px solid var(--line)" }}>
            {stats.map((st) => (
              <div key={st.v}>
                <div style={{ fontSize: 40, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--fg)", lineHeight: 1 }}>{st.v}</div>
                <div className="mono upper" style={{ fontSize: 11, color: "var(--muted)", marginTop: 10, letterSpacing: ".08em" }}>{es ? st.l_es : st.l_en}</div>
              </div>
            ))}
          </div>

          <h2>{es ? "Lo que entregamos" : "What we delivered"}</h2>

          <p>{es
            ? "Al final del camino entregamos un informe con las ideas generadas, el análisis de su potencial impacto y la priorización surgida del propio proceso. Todo acompañado de la identidad visual del programa H2Zero, que habíamos desarrollado en paralelo para darle una cara a la iniciativa."
            : "At the end of the road we delivered a report with the ideas generated, the analysis of their potential impact and the prioritization that emerged from the process itself. All accompanied by the visual identity of the H2Zero program, which we had developed in parallel to give the initiative a face."}</p>

          <p>{es
            ? "En un segundo viaje volvimos a instalar las piezas en toda la mina. Señalética, comunicación interna, los materiales que iban a darle continuidad al programa en el tiempo. También preparé la presentación para el comité directivo, ese momento donde todo lo que había pasado en esas salas tenía que ser traducido al lenguaje de las decisiones corporativas."
            : "On a second trip we went back to install the pieces across the whole mine. Signage, internal communication, the materials that would give the program continuity over time. I also prepared the presentation for the steering committee, that moment where everything that had happened in those rooms had to be translated into the language of corporate decisions."}</p>

          <h2>{es ? "El final" : "The end"}</h2>

          <p>{es
            ? "La identidad visual nunca se usó. La decisión llegó desde algún alto mando de la filial principal, sin contexto, sin conversación, sin la oportunidad de explicar el por qué del rediseño. Había que usar el logo viejo. Punto. Poco después la empresa se vendió a otra corporación y el programa H2Zero pasó a un quinto plano."
            : "The visual identity was never used. The decision came from some senior executive at the main subsidiary, with no context, no conversation, no chance to explain the why of the redesign. We had to use the old logo. Period. Shortly after, the company was sold to another corporation and the H2Zero program fell to the background."}</p>

          <p>{es
            ? "Fue frustrante. No voy a decir que no. Hay algo muy particular en ver trabajo tuyo descartado por una decisión que se tomó en una sala a la que nunca te invitaron."
            : "It was frustrating. I won't pretend otherwise. There's something very particular about seeing your work discarded by a decision made in a room you were never invited to."}</p>

          <p>{es
            ? "Pero nadie me quita los dos viajes, los cinco talleres, los 47 participantes, las más de 60 ideas generadas por personas que nunca habían sido convocadas a pensar en voz alta sobre su propio trabajo. Tampoco me quita haber trabajado con Jess por primera vez, haber construido algo desde cero sin saber exactamente cómo hacerlo. Eso quedó. El logo, en este caso, era lo de menos."
            : "But no one can take away the two trips, the five workshops, the 47 participants, the more than 60 ideas generated by people who had never been asked to think out loud about their own work. Nor can anyone take away having worked with Jess for the first time, having built something from scratch without knowing exactly how to do it. That stayed. The logo, in this case, was the least of it."}</p>

          <p className="mono upper" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".08em", marginTop: 64 }}>
            {es
              ? "Workshops · Co-creación · Design thinking · Branding · Freelance · Patagonia"
              : "Workshops · Co-creation · Design thinking · Branding · Freelance · Patagonia"}
          </p>
        </article>

        <aside className="article-rail">
          {["ART-02", "ART-03", "ART-04", "ART-05", "ART-06", "ART-07"].map((id, i) => (
            <Placeholder
              key={id}
              id={id}
              tag={es ? `Imagen ${i + 1}` : `Image ${i + 1}`} />
          ))}
        </aside>
        </div>
      </div>
      <CTA lang={lang} />
    </div>
  );
}

Object.assign(window, { Blog, BlogPost });
