// BAG section: main + Marketplace, Fancy Monas, Tibetpass
function BAGMain({ lang }) {
  const es = lang === "es";
  return (
    <div className="page" data-screen-label="BAG">
      <div className="container">
        <Link to="home" className="back-link">← {es ? "Volver" : "Back"}</Link>

        <header className="case-header">
          <div className="label" style={{ marginBottom: 24 }}>{es ? "Startup · Producto · Dirección de arte · Tecnología" : "Startup · Product · Art direction · Technology"}</div>
          <h1 className="h-display" style={{ fontSize: "clamp(72px, 14vw, 220px)" }}>BAG</h1>
          <p className="lede muted" style={{ marginTop: 40 }}>
            {es ?
            "De un mensaje de WhatsApp en pandemia a fundar una startup de arte y blockchain con tres productos propios y un equipo internacional." :
            "From a WhatsApp message in lockdown to founding an art-and-blockchain startup with three proprietary products and an international team."}
          </p>
          <div className="case-meta-row">
            <div className="item"><span className="k">{es ? "Rol" : "Role"}</span><span className="v">Founder · Product Design</span></div>
            <div className="item"><span className="k">{es ? "Duración" : "Duration"}</span><span className="v">{es ? "2020 — 2026" : "2020 — 2026"}</span></div>
            <div className="item"><span className="k">{es ? "Productos" : "Products"}</span><span className="v">3</span></div>
            <div className="item"><span className="k">{es ? "Equipo" : "Team"}</span><span className="v">{es ? "Internacional" : "International"}</span></div>
          </div>
        </header>

        <Placeholder tag={es ? "BAG — Equipo · 2020" : "BAG — Team · 2020"} id="BAG-HERO" className="ph-hero" />

        <Reveal className="prose-section">
          <h3>{es ? "Origen" : "Origin"}</h3>
          <div className="body-text">
            <h4>{es ? "Un grupo de WhatsApp en pandemia" : "A WhatsApp group in lockdown"}</h4>
            <p>{es ?
              "Todo empezó en 2020, encerrados en casa. En un grupo de WhatsApp con amigos del colegio alguien tiró la palabra Bitcoin. Prendió. Empezamos a meternos en ese mundo como entusiastas, sin agenda, sin plan. Pero en ese grupo había una energía que pedía más. Se formó un subgrupo con una idea todavía difusa: usar blockchain para tokenizar obras de arte. Garantizar su originalidad. Conocer su trazabilidad. Convertirla en un asset digital con valor real." :
              "It started in 2020, locked inside. In a WhatsApp group with school friends someone dropped the word Bitcoin. It caught on. We got into that world as enthusiasts, no agenda, no plan. But that group had an energy that asked for more. A subgroup formed around a still-blurry idea: using blockchain to tokenize artworks. Guarantee originality. Trace provenance. Turn it into a digital asset with real value."}</p>
            <p>{es ?
              "El equipo éramos tres: uno del mundo de la ingeniería y las finanzas, otro con mucha trayectoria y conocimiento profundo en la industria del arte contemporáneo, y yo del diseño. El desafío iba a ser doble: movernos en una industria completamente nueva donde las reglas se escribían en tiempo real, y aprender a trabajar con amigos, que tiene sus propias complejidades y su propia fricción." :
              "We were a team of three: one from engineering and finance, another with deep experience and knowledge of the contemporary art industry, and me from design. The challenge was twofold: moving through a brand-new industry where the rules were being written in real time, and learning to work with friends, which carries its own complexities and its own friction."}</p>
            <p>{es ?
              "Mi primer movimiento fue el que siempre hago cuando algo me parece demasiado abstracto: empecé a documentar. Investigué qué era un token, qué era una blockchain, qué era un NFT. Armé presentaciones, desarrollé el storytelling, hice moodboards, analicé referentes y competencia. En paralelo trabajé el naming, el logo y la primera estética que iba a aparecer en los decks. Cada uno desde su área aportaba lo suyo, y yo transformaba todo eso en algo que se pudiera mostrar, discutir y mejorar. En muchos momentos esa capacidad de materializar ideas fue también lo único que me mantuvo orientado cuando todo lo demás se sentía caótico." :
              "My first move was the one I always make when something feels too abstract: I started documenting. I researched what a token was, what a blockchain was, what an NFT was. I built presentations, developed the storytelling, made moodboards, analyzed references and competitors. In parallel I worked on naming, logo and the first aesthetic that would show up in the decks. Each of us contributed from our own area, and I turned all of it into something you could show, discuss and improve. In many moments that ability to materialize ideas was also the only thing that kept me oriented when everything else felt chaotic."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>Founder · Designer</h3>
          <div className="body-text">
            <h4>{es ? "Diseñar y fundar a la vez" : "Designing and founding at the same time"}</h4>
            <p>{es ?
              "Ser founder-designer en una startup es un ejercicio constante de saber cuándo diseñar y cuándo tomar decisiones de negocio. A veces esos dos roles se alimentan entre sí. Otras veces se contradicen, y la fricción es real." :
              "Being a founder-designer in a startup is a constant exercise of knowing when to design and when to take business decisions. Sometimes those two roles feed each other. Other times they contradict, and the friction is real."}</p>
            <p>{es ?
              "En distintos momentos fui diseñador de producto, director de arte, interlocutor con el equipo de developers, parte del equipo legal armando instrumentos para inversores, área de recursos humanos haciendo entrevistas y onboarding, y el tipo que tenía que entender lo suficiente de smart contracts y protocolos blockchain como para tomar decisiones de implementación desde la mirada del negocio. Hubo períodos en que esa acumulación de roles era estimulante. Y hubo períodos en que era paralizante. Ambas cosas son ciertas." :
              "At different moments I was product designer, art director, dev-team liaison, part of the legal team putting investor instruments together, HR doing interviews and onboarding, and the guy who had to understand enough about smart contracts and blockchain protocols to make implementation decisions from a business lens. There were periods when that accumulation of roles was stimulating. And there were periods when it was paralyzing. Both are true."}</p>
            <p>{es ?
              "No fui técnico en ninguno de esos campos. Pero aprendí a los golpes a hacer las preguntas correctas y a insistir para que las cosas pasen." :
              "I wasn't an expert in any of those fields. But I learned the hard way to ask the right questions and to insist until things happened."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Reconversión" : "Reconversion"}</h3>
          <div className="body-text">
            <h4>{es ? "Cuando el boom cayó" : "When the boom collapsed"}</h4>
            <p>{es ?
              "El boom de los NFTs cayó estrepitosamente. No fue una sorpresa gradual sino un golpe bastante brusco. Había que reinventarse, y esa palabra que suena tan ágil en retrospectiva fue en el momento un período de mucha resistencia, de discusiones internas, de preguntarse si tenía sentido seguir." :
              "The NFT boom collapsed loudly. It wasn't a gradual surprise but a pretty abrupt hit. We had to reinvent ourselves, and that word that sounds so nimble in retrospect was, at the time, a period of a lot of resistance, internal discussions, asking ourselves whether it still made sense to keep going."}</p>
            <p>{es ?
              "Nos reconvertimos en una productora de arte y tecnología: proyectos artísticos que usan la tecnología como herramienta y abren nuevas posibilidades de expresión. En esa nueva etapa mi rol mutó hacia algo más parecido al de un productor: alguien que no solo diseña sino que investiga, gestiona, busca proveedores, supervisa procesos de diseño y fabricación, hace seguimiento, controla calidad y se asegura de que las ideas lleguen a existir en el mundo real con la integridad que tenían en papel. Algunos de los proyectos en los que participé fueron el diseño y desarrollo de pantallas para obras digitales de Julio Le Parc, la creación de un software de arte generativo para el mismo artista, y el diseño y producción de nuevos soportes físicos para Fancy Monas." :
              "We reconverted into an art-and-technology production company: art projects that use technology as a tool and open new possibilities of expression. In that new stage my role mutated into something closer to a producer: someone who not only designs but researches, manages, sources suppliers, supervises design and manufacturing processes, follows up, controls quality and makes sure ideas reach the real world with the integrity they had on paper. Some of the projects I worked on were the design and development of screens for Julio Le Parc's digital works, the creation of generative-art software for the same artist, and the design and production of new physical supports for Fancy Monas."}</p>
            <p>{es ?
              "Seis años después de aquel primer mensaje de WhatsApp, lo que más me queda no es la lista de cosas que construimos sino la conciencia de lo que implica sostener algo en el tiempo cuando no hay certeza de nada. Aprendí a construir en un territorio sin mapa, a tomar decisiones con información incompleta, a saber cuándo el diseño es la herramienta correcta y cuándo no lo es. Y también aprendí que hay momentos en que no podés, y que eso no invalida todo lo demás." :
              "Six years after that first WhatsApp message, what stays with me most isn't the list of things we built but the awareness of what it takes to sustain something over time when there is no certainty about anything. I learned to build in territory without a map, to take decisions with incomplete information, to know when design is the right tool and when it isn't. And I also learned that there are moments when you can't, and that doesn't invalidate everything else."}</p>
          </div>
        </Reveal>

        <section style={{ padding: "clamp(48px, 9vw, 96px) 0 40px" }}>
          <h3 className="label" style={{ marginBottom: 24 }}>{es ? "Productos" : "Products"}</h3>
          <div className="product-list">
            {[
            { num: "01", name: "Marketplace", route: "marketplace",
              desc_es: "Primer marketplace de arte latinoamericano tokenizado.",
              desc_en: "First tokenized Latin American art marketplace.",
              hint: "Marketplace / MVP" },
            { num: "02", name: "Fancy Monas", route: "fancy-monas",
              desc_es: "1942 obras generativas co-creadas con Edgardo Giménez.",
              desc_en: "1942 generative pieces co-created with Edgardo Giménez.",
              hint: "Fancy Monas / 1942" },
            { num: "03", name: "Tibetpass", route: "tibetpass",
              desc_es: "Ticketera blockchain para eventos. El 'Shopify de los tickets'.",
              desc_en: "Blockchain ticketing for events. The 'Shopify for tickets'.",
              hint: "Tibetpass / tickets" }].
            map((p) =>
            <Link key={p.num} to="bag" sub={p.route} className="product-row" data-cursor-preview={p.hint}>
                <span className="num">{p.num}</span>
                <span className="name">{p.name}</span>
                <span className="desc">{es ? p.desc_es : p.desc_en}</span>
                <span className="arrow">↗</span>
              </Link>
            )}
          </div>
        </section>
      </div>

      <CTA lang={lang} />
    </div>);

}

function Marketplace({ lang }) {
  const es = lang === "es";
  return (
    <div className="page" data-screen-label="BAG / Marketplace">
      <div className="container">
        <Link to="bag" className="back-link">← BAG</Link>
        <header className="case-header">
          <div className="label" style={{ marginBottom: 24 }}>BAG · 01 · Marketplace</div>
          <h1 className="h-xl">{es ? "El primer marketplace de arte latinoamericano tokenizado" : "The first tokenized Latin American art marketplace"}</h1>
          <p className="lede muted" style={{ marginTop: 32 }}>
            {es ?
            "Mi primer producto digital como founder y diseñador al mismo tiempo. Aprendí que esos dos roles se alimentan y se contradicen, a veces en el mismo día." :
            "My first digital product as founder and designer at the same time. I learned that those two roles feed and contradict each other, sometimes on the same day."}
          </p>
          <div className="case-meta-row">
            <div className="item"><span className="k">{es ? "Año" : "Year"}</span><span className="v">2021–2023</span></div>
            <div className="item"><span className="k">{es ? "Rol" : "Role"}</span><span className="v">{es ? "Dirección de arte · Producto" : "Art direction · Product"}</span></div>
            <div className="item"><span className="k">{es ? "Artistas" : "Artists"}</span><span className="v">+400</span></div>
            <div className="item"><span className="k">URL</span><span className="v">artbag.io</span></div>
          </div>
        </header>

        <Placeholder tag="Marketplace · Home" id="MKT-01" className="ph-hero" />

        <Reveal className="prose-section">
          <h3>{es ? "Proceso" : "Process"}</h3>
          <div className="body-text">
            <p>{es ?
              "Con el primer financiamiento convoqué a una diseñadora experta en producto. Entre los dos diseñamos el MVP: ideamos, prototipamos, validamos, iteramos. Yo me ocupaba del concepto, la dirección de arte y las decisiones de priorización. Ella traducía eso a pantallas. Juntos éramos los interlocutores con el equipo de developers." :
              "With the first funding I brought in a senior product designer. The two of us designed the MVP: ideation, prototyping, validation, iteration. I handled concept, art direction and prioritization decisions. She translated that into screens. Together we were the interlocutors with the development team."}</p>
            <p>{es ?
              "Ahí me metí de lleno en el mundo del producto digital. Aprendí Figma desde cero: flows, wireframes, accesibilidad, prototipado, componentes, autolayout, pixel perfect, entre otras cosas. No como ejercicio académico sino porque el proyecto lo exigía y no había tiempo para otra cosa. Eso también tiene un costo: aprender algo mientras lo usás en producción significa cometer errores que ves en tiempo real, delante de tu equipo y tus socios." :
              "That's where I went deep into the digital product world. I learned Figma from scratch: flows, wireframes, accessibility, prototyping, components, autolayout, pixel perfect, among other things. Not as an academic exercise but because the project demanded it and there was no time for anything else. That has a cost too: learning something while using it in production means making mistakes you see in real time, in front of your team and partners."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Crecimiento" : "Growth"}</h3>
          <div className="body-text">
            <p>{es ?
              "Lanzamos a finales de 2022. Crecimos, incorporamos equipo, rediseñamos la imagen con un estudio externo bajo mi dirección de arte. Llegamos a tener cerca de 400 artistas de distintos países de Latinoamérica. Pero el mercado de NFTs era volátil, el hype empezaba a cuestionarse, y sostener el impulso inicial se fue haciendo cada vez más difícil." :
              "We launched in late 2022. We grew, hired team, redesigned the brand with an external studio under my art direction. We reached close to 400 artists from different Latin American countries. But the NFT market was volatile, the hype was starting to be questioned, and sustaining the initial momentum became increasingly difficult."}</p>
          </div>
        </Reveal>

        <Reveal as="div" className="grid-2" style={{ padding: "48px 0 96px" }}>
          <Placeholder tag="Marketplace · Detail" id="MKT-02" className="ph-tall" />
          <Placeholder tag="Marketplace · Checkout" id="MKT-03" className="ph-tall" />
          <Placeholder tag="Marketplace · 04" id="MKT-04" className="ph-tall" />
          <Placeholder tag="Marketplace · 05" id="MKT-05" className="ph-tall" />
          <Placeholder tag="Marketplace · 06" id="MKT-06" className="ph-tall" />
          <Placeholder tag="Marketplace · 07" id="MKT-07" className="ph-tall" />
        </Reveal>
      </div>
      <CTA lang={lang} />
    </div>);

}

function FancyMonas({ lang }) {
  const es = lang === "es";
  return (
    <div className="page" data-screen-label="BAG / Fancy Monas">
      <div className="container">
        <Link to="bag" className="back-link">← BAG</Link>
        <header className="case-header">
          <div className="label" style={{ marginBottom: 24 }}>BAG · 02 · Fancy Monas</div>
          <h1 className="h-xl">{es ? "1942 obras generativas con Edgardo Giménez" : "1942 generative pieces with Edgardo Giménez"}</h1>
          <p className="lede muted" style={{ marginTop: 32 }}>
            {es ?
            "Llevar a uno de los artistas más vanguardistas de Argentina al territorio más nuevo del arte digital." :
            "Bringing one of Argentina's most avant-garde artists to the newest territory of digital art."}
          </p>
          <div className="case-meta-row">
            <div className="item"><span className="k">{es ? "Año" : "Year"}</span><span className="v">2022</span></div>
            <div className="item"><span className="k">{es ? "Obras" : "Pieces"}</span><span className="v">1942</span></div>
            <div className="item"><span className="k">{es ? "Artista" : "Artist"}</span><span className="v">Edgardo Giménez</span></div>
            <div className="item"><span className="k">URL</span><span className="v">fancymonas.io</span></div>
          </div>
        </header>

        <Placeholder tag="Fancy Monas · Series" id="FM-01" className="ph-hero" />

        <Reveal className="prose-section">
          <h3>{es ? "Co-creación" : "Co-creation"}</h3>
          <div className="body-text">
            <p>{es ?
              "La idea fue de mi socio, el que tiene el know-how y las relaciones en el mundo del arte contemporáneo. Y fue una idea compleja desde el principio: en pleno hype de los NFTs, con la industria del arte tradicional abiertamente enemistada con la tecnología, convencer a un artista de 80 años para hacer su primer proyecto digital tokenizado no era exactamente una venta fácil. Que lo haya aceptado tiene que ver directamente con la confianza que ese vínculo previo ya tenía construida." :
              "The idea came from my partner, the one with the know-how and the relationships in the contemporary art world. And it was a complex idea from the start: at the peak of NFT hype, with the traditional art industry openly hostile to the technology, convincing an 80-year-old artist to do his first tokenized digital project was not exactly an easy sell. That he accepted has everything to do with the trust that prior relationship had already built."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Algoritmo" : "Algorithm"}</h3>
          <div className="body-text">
            <p>{es ?
              "El elegido fue Edgardo Giménez, figura histórica del arte argentino. Tras más de un año de investigación de todo su acervo de obras, desarrollamos una serie de 1942 piezas de generación algorítmica. Fue un trabajo conjunto liderado por el área de Arte, el propio Edgardo, un desarrollador y yo: definir qué elementos de su obra podían combinarse, cómo, con qué pesos, qué resultados eran aceptables y cuáles no. Un proceso de traducción entre mundos que no hablaban el mismo idioma, donde mi rol fue ser el puente entre la visión artística y la lógica del código." :
              "The chosen artist was Edgardo Giménez, a historic figure of Argentine art. After more than a year of researching his entire body of work, we developed a series of 1942 algorithmically generated pieces. It was joint work led by the Art area, Edgardo himself, a developer and me: defining which elements of his work could be combined, how, with what weights, which results were acceptable and which were not. A process of translation between worlds that didn't speak the same language, where my role was to bridge the artistic vision and the logic of code."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Lanzamiento" : "Launch"}</h3>
          <div className="body-text">
            <p>{es ?
              "Para el lanzamiento diseñamos fancymonas.io con mi equipo de diseño. Mi rol: dirección de arte y estrategia, con la inevitable cucharada en las decisiones de diseño que nunca pude evitar del todo." :
              "For the launch we designed fancymonas.io with my design team. My role: art direction and strategy, with the inevitable hands-on involvement in design decisions that I could never quite avoid."}</p>
          </div>
        </Reveal>

        <Reveal as="div" className="grid-2" style={{ padding: "48px 0 96px" }}>
          <Placeholder tag="Mona · 001" id="FM-02" className="ph-tall" />
          <Placeholder tag="Mona · 048" id="FM-03" className="ph-tall" />
          <Placeholder tag="Mona · 1942" id="FM-04" className="ph-tall" />
          <Placeholder tag="Mona · 05" id="FM-05" className="ph-tall" />
        </Reveal>
      </div>
      <CTA lang={lang} />
    </div>);

}

function Tibetpass({ lang }) {
  const es = lang === "es";
  return (
    <div className="page" data-screen-label="BAG / Tibetpass">
      <div className="container">
        <Link to="bag" className="back-link">← BAG</Link>
        <header className="case-header">
          <div className="label" style={{ marginBottom: 24 }}>BAG · 03 · Tibetpass</div>
          <h1 className="h-xl">{es ? "El Shopify de los tickets" : "The Shopify for tickets"}</h1>
          <p className="lede muted" style={{ marginTop: 32 }}>
            {es ?
            "Ticketera blockchain para eventos. Equipo externo, proceso de diseño UX/UI completo y branding desde cero." :
            "Blockchain ticketing for events. External team, full UX/UI design process and branding from scratch."}
          </p>
          <div className="case-meta-row">
            <div className="item"><span className="k">{es ? "Año" : "Year"}</span><span className="v">2023</span></div>
            <div className="item"><span className="k">{es ? "Rol" : "Role"}</span><span className="v">{es ? "Dirección Creativa" : "Dirección Creativa"}</span></div>
            <div className="item"><span className="k">{es ? "Equipo" : "Team"}</span><span className="v">{es ? "In-house + Externo" : "In-house + Externo"}</span></div>
            <div className="item"><span className="k">URL</span><span className="v">tibetpass.com</span></div>
          </div>
        </header>

        <VideoPlaceholder tag="Tibetpass · Dashboard" id="TP-01" className="ph-hero" defaultVideoId="NNNPai_R-Po" />

        <Reveal className="prose-section">
          <h3>{es ? "Concepto" : "Concept"}</h3>
          <div className="body-text">
            <p>{es ?
              "Mientras surfeábamos la ola del marketplace y Fancy Monas, vimos otra oportunidad: aplicar la tecnología blockchain al mundo de los tickets para eventos. El concepto era ser el Shopify de los tickets: una plataforma que cualquier organizador pudiera usar para emitir, vender y validar entradas con toda la trazabilidad y seguridad que da la blockchain." :
              "While we were surfing the wave of the marketplace and Fancy Monas, we saw another opportunity: applying blockchain technology to the world of event ticketing. The concept was to be the Shopify of tickets: a platform any organizer could use to issue, sell and validate tickets with all the traceability and security blockchain provides."}</p>
          </div>
        </Reveal>

        <Reveal className="prose-section">
          <h3>{es ? "Equipo externo" : "External team"}</h3>
          <div className="body-text">
            <p>{es ?
              "Esta vez contraté un equipo externo, un proveedor especializado en la construcción de productos. Volvimos a empezar de cero: definición del problema, UX, UI, branding, esquema organizacional, procesos, decks para clientes, supervisión del desarrollo. Arrancar un tercer producto mientras los otros dos todavía estaban en construcción fue uno de los momentos de mayor exigencia de toda la etapa en BAG. No siempre tuve la claridad ni la energía que el proyecto necesitaba." :
              "This time I hired an external team, a vendor specialized in building products. We started from zero again: problem definition, UX, UI, branding, org scheme, processes, client decks, dev supervision. Kicking off a third product while the other two were still under construction was one of the most demanding moments of the whole BAG stage. I didn't always have the clarity or the energy the project required."}</p>
            <p>{es ?
              "Lo que sí aprendí en ese proceso fue algo valioso: la importancia de documentar las decisiones no solo para uno mismo sino para el equipo que va llegando. Cuando sos el único que conoce el origen de cada elección, el proyecto es frágil. Tibetpass me obligó a ser mucho más explícito en el por qué de las cosas." :
              "What I did learn in that process was valuable: the importance of documenting decisions not just for yourself but for the team that comes in next. When you're the only one who knows the origin of each choice, the project is fragile. Tibetpass forced me to be much more explicit about the why of things."}</p>
          </div>
        </Reveal>

        <Reveal as="div" className="grid-2" style={{ padding: "48px 0 96px" }}>
          <Placeholder tag="Tibetpass · 01" id="TP-02" className="ph-tall" />
          <Placeholder tag="Tibetpass · 02" id="TP-03" className="ph-tall" />
          <Placeholder tag="Tibetpass · 03" id="TP-04" className="ph-tall" />
          <Placeholder tag="Tibetpass · 04" id="TP-05" className="ph-tall" />
          <Placeholder tag="Tibetpass · 05" id="TP-06" className="ph-tall" />
          <Placeholder tag="Tibetpass · 06" id="TP-07" className="ph-tall" />
          <Placeholder tag="Tibetpass · 07" id="TP-08" className="ph-tall" />
          <Placeholder tag="Tibetpass · 08" id="TP-09" className="ph-tall" />
        </Reveal>
      </div>
      <CTA lang={lang} />
    </div>);

}

Object.assign(window, { BAGMain, Marketplace, FancyMonas, Tibetpass });