// Chapter content rendering — bilingual

const { useState, useEffect, useRef } = React;

// Lang helper
const T = (lang, es, en) => lang === "es" ? es : en;

// Chapter section components — one per chapter id
const ChapterContent = {
  // ============ INTRO / HERO ============
  intro: (lang, openVideo) =>
  <div className="hero">
      <div className="hero-eyebrow">{T(lang, "Una guía cinematográfica", "A cinematic guide")} · {T(lang, "Edición 2026", "2026 edition")}</div>
      <h1>
        {T(lang, "El viaje de un", "A builder's")}
        <br />
        <span className="accent">{T(lang, "constructor", "journey")}</span>
        <br />
        {T(lang, "hacia los agentes", "into the agents")}
      </h1>
      <p className="hero-sub">
        {T(lang,
      "Mi proceso real aprendiendo IA y agentes. Las herramientas que usé, los videos que vi, las decisiones que tomé y por qué. No es perfecto. Tiene altos y bajos. Es un viaje.",
      "My real process learning AI and agents. The tools I used, the videos I watched, the decisions I made and why. It isn't perfect. It has highs and lows. It's a journey."
      )}
      </p>
      <div className="hero-meta">
        <span>{T(lang, "16 capítulos", "16 chapters")}</span>
        <span>·</span>
        <span>{T(lang, "5 actos", "5 acts")}</span>
        <span>·</span>
        <span>{T(lang, "1 obsesión", "1 obsession")}</span>
      </div>
      <div className="scroll-cue">{T(lang, "Desplázate para empezar", "Scroll to begin")}</div>
    </div>,


  // ============ 01 FUNDAMENTALS ============
  fundamentals: (lang) =>
  <div className="body">
      <p>{T(lang,
      "Cuando entiendes la diferencia entre un modelo y un harness, entre un prompt y una skill, dejas de copiar y empiezas a construir.",
      "Before any tool, the concepts. Without this, everything else is noise. Once you understand the difference between a model and a harness, between a prompt and a skill, you stop copying and start building."
      )}</p>

      <h3>{T(lang, "Conceptos esenciales", "Essential concepts")}</h3>
      <div className="tiles">
        <div className="tile"><div className="tile-key">{T(lang, "Modelo", "Model")}</div><div className="tile-val">{T(lang, "El motor. El cerebro. Lo que piensa.", "The engine. The brain. What thinks.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Harness", "Harness")}</div><div className="tile-val">{T(lang, "El chasis. El cuerpo que ejecuta acciones.", "The chassis. The body that executes actions.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Agente", "Agent")}</div><div className="tile-val">{T(lang, "Modelo + harness + objetivos + memoria.", "Model + harness + goals + memory.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Prompt", "Prompt")}</div><div className="tile-val">{T(lang, "La instrucción. Aprende a darla bien.", "The instruction. Learn to give it well.")}</div></div>
        <div className="tile"><div className="tile-key">Skill</div><div className="tile-val">{T(lang, "Capacitación para hacer al agente un experto en una habilidad.", "Capacitation for making your model an expert on a certain task.")}</div></div>
        <div className="tile"><div className="tile-key">Hook</div><div className="tile-val">{T(lang, "Acción automática que se dispara ante un evento del flujo.", "Automatic action triggered by a flow event.")}</div></div>
        <div className="tile"><div className="tile-key">MCP</div><div className="tile-val">{T(lang, "Protocolo para conectar herramientas externas al agente.", "Protocol to connect external tools to the agent.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Embedding", "Embedding")}</div><div className="tile-val">{T(lang, "Representación vectorial del significado.", "Vector representation of meaning.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Búsqueda semántica", "Semantic search")}</div><div className="tile-val">{T(lang, "Buscar por significado, no por letras.", "Search by meaning, not by letters.")}</div></div>
        <div className="tile"><div className="tile-key">RAG</div><div className="tile-val">{T(lang, "Generación aumentada por recuperación. Memoria externa.", "Retrieval-Augmented Generation. External memory.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Contexto", "Context")}</div><div className="tile-val">{T(lang, "Lo que el modelo ve. Limitado. Sagrado.", "What the model sees. Limited. Sacred.")}</div></div>
        <div className="tile"><div className="tile-key">SDD</div><div className="tile-val">{T(lang, "Spec-Driven Development. Planeamos, luego ejecutamos.", "Spec-Driven Development. Plan, then execute.")}</div></div>
        <div className="tile"><div className="tile-key">{T(lang, "Tokens", "Tokens")}</div><div className="tile-val">{T(lang, "Las unidades. Lo que pagas. Lo que se gasta.", "The units. What you pay. What gets spent.")}</div></div>
        <div className="tile"><div className="tile-key">CLI</div><div className="tile-val">{T(lang, "Línea de comandos o terminal.", "Command line interface or terminal.")}</div></div>
      </div>

      <p className="pullquote">{T(lang,
      "Antes programábamos para no documentar. Ahora documentamos para no programar.",
      "We used to code to avoid documenting. Now we document to avoid coding."
      )}</p>
    </div>,


  // ============ 02 HARNESS ============
  harness: (lang, openVideo) =>
  <div className="body">
      <p>{T(lang,
      "Escoge una herramienta agéntica y aprende a usarla a fondo. Cambiar de herramienta cada semana es una receta para no aprender nada. Estas son las que probé y mi opinión actual:",
      "Pick one agentic tool and learn it deeply. Switching tools every week is a recipe for learning nothing. Here are the ones I tried and what I currently think:"
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.ClaudeCodeCLI /></div>
        <div>
          <span className="tag">{T(lang, "Premium · CLI", "Premium · CLI")}</span>
          <h4>Claude Code CLI</h4>
          <p>{T(lang,
          "Lo mejor del mercado actual, y también lo más caro. Lo uso solo para tareas muy complejas: levantar arquitecturas desde cero de forma escalable y sostenible.",
          "Best on the market right now, and the priciest. I only use it for very complex tasks: bootstrapping scalable, sustainable architectures from scratch."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://docs.claude.com/en/docs/claude-code/overview" target="_blank" rel="noopener">claude code →</a></div>
      </div>

      <div className="tool-card">
        <div className="glyph"><Glyph.Hermes /></div>
        <div>
          <span className="tag">{T(lang, "El que más uso · Gratis", "Most used · Free")}</span>
          <h4>Hermes Agent</h4>
          <p>{T(lang,
          "100% gratis (solo pagas el modelo). Aprende por su cuenta. Se conecta a WhatsApp, Telegram, Slack, Gmail, Discord, etc. Se despliega en una VPS por ~10 USD/mes y tienes un agente 24/7.",
          "100% free (you only pay for the model). Learns on its own. Connects to WhatsApp, Telegram, Slack, Gmail, Discord, etc. Deploys on a ~$10/mo VPS for a 24/7 agent."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://hermes-agent.nousresearch.com/" target="_blank" rel="noopener">hermes-agent →</a></div>
      </div>

      <div className="tool-card">
        <div className="glyph"><Glyph.OpenCode /></div>
        <div>
          <span className="tag">{T(lang, "Mejor calidad/precio", "Best value")}</span>
          <h4>OpenCode</h4>
          <p>{T(lang,
          "Gratis (solo pagas el modelo). Soporta cientos de modelos con el proveedor que prefieras. Su suscripción cuesta 5 USD el primer mes y 10 USD/mes después, con acceso muy generoso a los mejores modelos chinos. No son frontera, pero cumplen el 80–90% de las tareas sin problemas.",
          "Free (you only pay for the model). Supports hundreds of models with whichever provider you like. Subscription is $5 first month, $10/mo after — generous access to the best Chinese models. Not frontier, but they cover 80–90% of tasks without issue."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://opencode.ai" target="_blank" rel="noopener">opencode.ai →</a></div>
      </div>

      <div className="tool-card">
        <div className="glyph"><Glyph.Codex /></div>
        <div>
          <span className="tag">{T(lang, "Mejor relación calidad/precio · Plus", "Best price/quality · Plus")}</span>
          <h4>OpenAI Codex</h4>
          <p>{T(lang,
          "Una de las mejores relaciones calidad-precio considerando la subida de precios. Por 20 USD del plan ChatGPT Plus tienes esta herramienta más todo lo de OpenAI, con cuota muy generosa. Casi nunca te quedas sin tokens (de momento).",
          "One of the best price/quality ratios given recent price hikes. $20 ChatGPT Plus gets you this tool plus everything else OpenAI offers, with a very generous quota. You almost never run out of tokens (for now)."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://openai.com/codex" target="_blank" rel="noopener">codex →</a></div>
      </div>

      <div className="tool-card">
        <div className="glyph"><Glyph.ClaudeApp /></div>
        <div>
          <span className="tag warn">{T(lang, "GUI · Cómodo, no tan potente", "GUI · Comfortable, not as powerful")}</span>
          <h4>Claude Code (app)</h4>
          <p>{T(lang,
          "Similar al CLI; gestiona conversaciones de forma mucho más cómoda. Útil con muchas conversaciones simultáneas: cambiar entre ellas, buscar, adjuntar archivos. Pero es bastante menos potente que su contraparte de consola.",
          "Similar to the CLI; manages conversations much more comfortably. Useful with many simultaneous chats: switching, searching, attaching files. But significantly less powerful than the CLI counterpart."
          )}</p>
        </div>
        <div className="links"></div>
      </div>

      <div className="callout info">
        <span className="label">{T(lang, "Regla de oro", "Golden rule")}</span>
        {T(lang,
      "Las herramientas de consola (CLI) siempre serán mejores que las de interfaz gráfica (GUI). Cuando puedas, usa CLI. Verás mejores resultados.",
      "CLI tools will always beat GUI tools. When you can, use the CLI. You'll see better results."
      )}
      </div>
    </div>,


  // ============ 03 MODELS ============
  models: (lang, openVideo, planState, setPlan) =>
  <div className="body">
      <p>{T(lang,
      "Cada rol del flujo necesita un modelo. Esto avanza muy rápido — en una semana puede estar obsoleto. Empieza barato y sube cuando duela. Estos son mis tres planes actuales — selecciona uno para verlo:",
      "Each role in your flow needs a model. This moves fast — in a week it may be obsolete. Start cheap and upgrade when it hurts. Here are my three current presets — click one to see it:"
      )}</p>

      <div className="plans">
        <div className={`plan economy ${planState === 'economy' ? 'active' : ''}`} onClick={() => setPlan('economy')}>
          <h4>Economy</h4>
          <div className="price">~$10<span style={{ fontSize: 14, color: "var(--ink-3)" }}>/mo</span></div>
          <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 14 }}>{T(lang, "Todo vía OpenCode Go. Para sesiones largas (ej. de noche).", "All via OpenCode Go. For long sessions (e.g. overnight).")}</p>

          <div className="orchestrator">
            <div className="orch-icon">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9.5 4.5a2.5 2.5 0 0 0-2.5 2.5v.5A2.5 2.5 0 0 0 5 9.5v1A2.5 2.5 0 0 0 6 12.5v.5a2.5 2.5 0 0 0 1 2v.5a2.5 2.5 0 0 0 2.5 2.5H12V4.5H9.5z" />
                <path d="M14.5 4.5a2.5 2.5 0 0 1 2.5 2.5v.5A2.5 2.5 0 0 1 19 9.5v1a2.5 2.5 0 0 1-1 2v.5a2.5 2.5 0 0 1-1 2v.5a2.5 2.5 0 0 1-2.5 2.5H12V4.5h2.5z" />
                <path d="M9 10h2M13 10h2M9 14h2M13 14h2" />
              </svg>
            </div>
            <div className="orch-text" style={{ display: "grid", gridTemplateColumns: "auto 1fr", alignItems: "center", gap: 8, width: "100%" }}>
              <span className="orch-label">{T(lang, "Orquestador", "Orchestrator")}</span>
              <span className="orch-model" style={{ textAlign: "right" }}>kimi-k2.6</span>
            </div>
          </div>

          <div className="roles">
            <div className="role"><span className="role-name">Scout</span><span className="role-model">deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Explore</span><span className="role-model">deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Summarize</span><span className="role-model" style={{ padding: "0px 0px 0px 46px" }}>deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Apply</span><span className="role-model">kimi-k2.6</span></div>
            <div className="role"><span className="role-name">Archive</span><span className="role-model">kimi-k2.6</span></div>
            <div className="role"><span className="role-name">Design</span><span className="role-model">deepseek-v4-pro</span></div>
            <div className="role"><span className="role-name">Spec</span><span className="role-model">deepseek-v4-pro</span></div>
            <div className="role"><span className="role-name">Tasks</span><span className="role-model">deepseek-v4-pro</span></div>
            <div className="role"><span className="role-name">Verify</span><span className="role-model">deepseek-v4-pro</span></div>
            <div className="role"><span className="role-name">Propose</span><span className="role-model">deepseek-v4-pro</span></div>
          </div>
        </div>

        <div className={`plan balanced ${planState === 'balanced' ? 'active' : ''}`} onClick={() => setPlan('balanced')}>
          <h4>Balanced</h4>
          <div className="price">{T(lang, "Mixto", "Mixed")}</div>
          <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 14 }}>{T(lang, "OpenCode Go + Zen. Mejor relación costo/calidad.", "OpenCode Go + Zen. Best cost/quality ratio.")}</p>

          <div className="orchestrator">
            <div className="orch-icon">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9.5 4.5a2.5 2.5 0 0 0-2.5 2.5v.5A2.5 2.5 0 0 0 5 9.5v1A2.5 2.5 0 0 0 6 12.5v.5a2.5 2.5 0 0 0 1 2v.5a2.5 2.5 0 0 0 2.5 2.5H12V4.5H9.5z" />
                <path d="M14.5 4.5a2.5 2.5 0 0 1 2.5 2.5v.5A2.5 2.5 0 0 1 19 9.5v1a2.5 2.5 0 0 1-1 2v.5a2.5 2.5 0 0 1-1 2v.5a2.5 2.5 0 0 1-2.5 2.5H12V4.5h2.5z" />
                <path d="M9 10h2M13 10h2M9 14h2M13 14h2" />
              </svg>
            </div>
            <div className="orch-text" style={{ display: "grid", gridTemplateColumns: "auto 1fr", alignItems: "center", gap: 8, width: "100%" }}>
              <span className="orch-label">{T(lang, "Orquestador", "Orchestrator")}</span>
              <span className="orch-model" style={{ textAlign: "right" }}>kimi-k2.6</span>
            </div>
          </div>

          <div className="roles">
            <div className="role"><span className="role-name">Scout</span><span className="role-model">deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Explore</span><span className="role-model">deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Summarize</span><span className="role-model" style={{ padding: "0px 0px 0px 46px" }}>deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Apply</span><span className="role-model">kimi-k2.6</span></div>
            <div className="role"><span className="role-name">Archive</span><span className="role-model">kimi-k2.6</span></div>
            <div className="role"><span className="role-name">Design</span><span className="role-model">sonnet-4-6</span></div>
            <div className="role"><span className="role-name">Spec</span><span className="role-model">gemini-3.1-pro</span></div>
            <div className="role"><span className="role-name">Tasks</span><span className="role-model">gpt-5.4</span></div>
            <div className="role"><span className="role-name">Verify</span><span className="role-model">gpt-5.4</span></div>
            <div className="role"><span className="role-name">Propose</span><span className="role-model">gemini-3.1-pro</span></div>
          </div>
        </div>

        <div className={`plan quality ${planState === 'quality' ? 'active' : ''}`} onClick={() => setPlan('quality')}>
          <h4>Quality</h4>
          <div className="price">{T(lang, "Máximo", "Maximum")}</div>
          <p style={{ fontSize: 12, color: "var(--ink-2)", lineHeight: 1.5, marginBottom: 14 }}>{T(lang, "Para trabajos críticos donde necesitas razonamiento serio.", "For critical work that needs serious reasoning.")}</p>

          <div className="orchestrator">
            <div className="orch-icon">
              <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M9.5 4.5a2.5 2.5 0 0 0-2.5 2.5v.5A2.5 2.5 0 0 0 5 9.5v1A2.5 2.5 0 0 0 6 12.5v.5a2.5 2.5 0 0 0 1 2v.5a2.5 2.5 0 0 0 2.5 2.5H12V4.5H9.5z" />
                <path d="M14.5 4.5a2.5 2.5 0 0 1 2.5 2.5v.5A2.5 2.5 0 0 1 19 9.5v1a2.5 2.5 0 0 1-1 2v.5a2.5 2.5 0 0 1-1 2v.5a2.5 2.5 0 0 1-2.5 2.5H12V4.5h2.5z" />
                <path d="M9 10h2M13 10h2M9 14h2M13 14h2" />
              </svg>
            </div>
            <div className="orch-text" style={{ display: "grid", gridTemplateColumns: "auto 1fr", alignItems: "center", gap: 8, width: "100%" }}>
              <span className="orch-label">{T(lang, "Orquestador", "Orchestrator")}</span>
              <span className="orch-model" style={{ textAlign: "right" }}>Opus 4.6</span>
            </div>
          </div>

          <div className="roles">
            <div className="role"><span className="role-name">Scout</span><span className="role-model">deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Explore</span><span className="role-model">sonnet-4-6</span></div>
            <div className="role"><span className="role-name">Summarize</span><span className="role-model" style={{ padding: "0px 0px 0px 47px" }}>deepseek-v4-flash</span></div>
            <div className="role"><span className="role-name">Apply</span><span className="role-model">sonnet-4-6</span></div>
            <div className="role"><span className="role-name">Archive</span><span className="role-model">kimi-k2.6</span></div>
            <div className="role"><span className="role-name">Design</span><span className="role-model">opus-4-6</span></div>
            <div className="role"><span className="role-name">Spec</span><span className="role-model">gemini-3.1-pro</span></div>
            <div className="role"><span className="role-name">Tasks</span><span className="role-model">gpt-5.4</span></div>
            <div className="role"><span className="role-name">Verify</span><span className="role-model">gpt-5.4</span></div>
            <div className="role"><span className="role-name">Propose</span><span className="role-model">sonnet-4-6</span></div>
          </div>
        </div>
      </div>

      <h3>{T(lang, "El atajo que casi nadie cuenta", "The shortcut almost nobody talks about")}</h3>
      <p>{T(lang, "Si no quieres complicarte, crea una cuenta de OpenRouter, carga 10 USD y tendrás 1.000 llamadas gratis al día a la API. Muchos modelos son gratuitos y ni te tocan ese saldo. Los de pago consumen, pero puedes poner límites por API key. La gracia: una sola integración para todos los modelos.", "If you don't want hassle: open an OpenRouter account, load $10, and you get 1,000 free API calls per day. Many models are free and don't touch that balance. Paid models consume, but you can set limits per API key. The win: one integration, all models."
      )}</p>
      <p>{T(lang,
      "Yo lo uso mucho en producción para apps que llaman IA en el servidor. Funciona de maravilla con OpenCode (compatibilidad nativa). En Claude Code y otras se puede, pero no es oficial — toca tocar cosas a mano. No lo recomiendo.",
      "I use it heavily in production for apps that call AI server-side. Works beautifully with OpenCode (native compatibility). In Claude Code and others it's possible, but unofficial — you'll fiddle with stuff manually. Not recommended."
      )}</p>

      <button className="video-card" onClick={() => openVideo("7OUHQOkVBAo", "OpenRouter — el video que me hizo cambiar")}>
        <div className="thumb" data-yt="7OUHQOkVBAo" style={{ "--yt-thumb": "url(https://i.ytimg.com/vi/7OUHQOkVBAo/mqdefault.jpg)" }}></div>
        <div className="meta">
          <div className="label">▶ {T(lang, "Video referente", "Reference video")}</div>
          <div className="ttl">{T(lang, "OpenRouter: 1.000 llamadas gratis al día", "OpenRouter: 1,000 free calls per day")}</div>
        </div>
        <div className="arrow">→</div>
      </button>
    </div>,


  // ============ 04 AWAKENING ============
  awakening: (lang, openVideo) =>
  <div className="body">
      <p className="pullquote">{T(lang,
      "Este video me cambió la forma de pensar sobre la IA y el uso de agentes.",
      "This video changed how I think about AI and the use of agents."
      )}</p>

      <p>{T(lang,
      "Me hizo entender cómo funciona realmente el SDD, cómo incorporar memoria persistente en un agente, cómo usar las skills de la manera correcta, y muchas cosas más. Si tienes que ver uno solo, que sea este.",
      "It made me understand how SDD really works, how to add persistent memory to an agent, how to use skills correctly, and many other things. If you watch only one, watch this."
      )}</p>

      <button className="video-card" onClick={() => openVideo("UoS_LP-PCG8", "El video que cambió todo")}>
        <div className="thumb" data-yt="UoS_LP-PCG8" style={{ "--yt-thumb": "url(https://i.ytimg.com/vi/UoS_LP-PCG8/mqdefault.jpg)" }}></div>
        <div className="meta">
          <div className="label">▶ {T(lang, "Imprescindible", "Must watch")}</div>
          <div className="ttl">{T(lang, "Cómo construir agentes con memoria, skills y SDD", "How to build agents with memory, skills, and SDD")}</div>
        </div>
        <div className="arrow">→</div>
      </button>

      <h3>{T(lang, "A partir de aquí…", "From here on…")}</h3>
      <p>{T(lang,
      "Tienes que construir tu propio camino. Yo te muestro el mío como referencia, pero siempre tienes que aprender a identificar tus propias necesidades y trazar tu propia ruta.",
      "You have to build your own path. I show you mine as reference, but you have to learn to identify your own needs and chart your own route."
      )}</p>
      <p>{T(lang,
      "El mío es y ha sido crear herramientas que automaticen mis flujos: fáciles de instalar, replicables en cualquier entorno en minutos, que capaciten a la IA para seguir un flujo esperado con patrones medibles y expectativas claras.",
      "Mine is and has been creating tools that automate my workflows: easy to install, replicable in any environment in minutes, that train AI to follow an expected flow with measurable patterns and clear expectations."
      )}</p>
      <p>{T(lang,
      "¿Por qué? Porque noté que tenía que repetirle lo mismo a los agentes una y otra vez: 'recuerda esto', 'ejecuta los subagentes en paralelo', 'no ejecutes tareas si eres orquestador, delega'… Las mismas prácticas, una y otra vez, porque la ventana de contexto se limpiaba y olvidaba todo.",
      "Why? Because I noticed I had to repeat the same things to agents over and over: 'remember this', 'run subagents in parallel', 'don't execute tasks as orchestrator, delegate'… The same practices, again and again, because the context window cleared and they forgot everything."
      )}</p>
      <p><strong>{T(lang,
        "Cuando empiezas a notar esos patrones repetidos, ahí empiezas a abstraer y a crear herramientas. No a copiar el prompt de internet ni a descargar lo que dijo fulanito porque a él le funciona.",
        "When you start noticing those repeated patterns, that's when you start abstracting and creating tools. Not copying internet prompts or downloading what someone said worked for them."
        )}</strong></p>
    </div>,


  // ============ 05 FIRST TOOLS ============
  "first-tools": (lang) =>
  <div className="body">
      <div className="tool-card">
        <div className="glyph"><Glyph.GentleAI /></div>
        <div>
          <span className="tag">{T(lang, "Punto de partida", "Starting point")}</span>
          <h4>gentle-ai</h4>
          <p>{T(lang,
          "Mi primera base. Trae SDD, algunos hooks y preceptos, y lo más importante: memoria persistente. Un lugar donde el agente almacena y consulta cosas que recuerda incluso entre conversaciones. Eso cambia el juego.",
          "My first base. Ships with SDD, hooks, precepts, and most importantly: persistent memory. A place where the agent stores and consults things it remembers even across conversations. That changes the game."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://github.com/Gentleman-Programming/gentle-ai" target="_blank" rel="noopener">github →</a></div>
      </div>

      <p>{T(lang,
      "Pero pronto sentí que se me quedaba corto. No quería un agente que solo desarrollara bien — quería uno que escogiera autónomamente qué herramientas usar y cómo, que aprendiera de lo que hace, que me diera y recibiera feedback, que reevaluara su plan si llegaba una nueva orden mientras trabajaba, que mantuviera continuidad aunque la conversación se compactara o empezara una nueva.",
      "But soon it felt short. I didn't want an agent that only built well — I wanted one that autonomously chose which tools to use and how, that learned from its work, that gave and received feedback, that re-evaluated its plan when a new instruction arrived mid-work, that kept continuity even when the conversation compacted or a new one started."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.AutoSDD /></div>
        <div>
          <span className="tag">{T(lang, "Mi plugin", "My plugin")}</span>
          <h4>autoSDD</h4>
          <p>{T(lang,
          "Mi primer intento de construir algo encima de gentle-ai que se adaptara más a mi flujo. Funcionó bien por un tiempo.",
          "My first attempt to build something on top of gentle-ai that fit my flow better. Worked well for a while."
          )}</p>
        </div>
        <div className="links">
          <a className="lnk" href="https://github.com/thestark77/autoSDD" target="_blank" rel="noopener">github →</a>
        </div>
      </div>

      <div className="callout warn">
        <span className="label">{T(lang, "Advertencia", "Warning")}</span>
        {T(lang,
      "autoSDD tiene errores que a veces generan alto consumo de tokens. Úsalo con cuidado.",
      "autoSDD has bugs that occasionally cause high token consumption. Use with caution."
      )}
      </div>
    </div>,


  // ============ 06 ENGRAM TWIST ============
  "engram-twist": (lang) =>
  <div className="body" style={{ margin: "12px 0px 0px" }}>
      <p className="pullquote">{T(lang,
      "Si guardaba 'me gustan las manzanas' y luego buscaba '¿Qué frutas me gustan?'… nunca lo encontraba porque fruta ≠ manzana.",
      "If I stored 'I like apples' and later searched 'What fruits do I like?'… it never showed up, because fruit ≠ apple."
      )}</p>

      <p>{T(lang,
      "Engram, la base SQLite local que viene con gentle-ai, tenía un problema serio: la búsqueda era por coincidencia exacta. Si guardaba 'interfaz' y consultaba 'interface' o 'visual'… cero resultados.",
      "Engram, the local SQLite base that ships with gentle-ai, had a serious problem: search was by exact match. If I stored 'interfaz' and queried 'interface' or 'visual'… zero results."
      )}</p>
      <p>{T(lang,
      "Empecé a buscar no por coincidencias de letras, sino por significado. Si yo busco 'fruta', quiero que también me traiga 'piña', 'manzana', 'mango' — porque entiende que semánticamente son similares aunque la estructura textual sea totalmente distinta.",
      "I started searching not by letter matches, but by meaning. If I search 'fruit', I want it to also return 'pineapple', 'apple', 'mango' — because it understands they're semantically similar even though the text is completely different."
      )}</p>

      <h3>{T(lang, "La solución: embeddings", "The fix: embeddings")}</h3>

      <div className="tool-card">
        <div className="glyph"><Glyph.Embedding /></div>
        <div>
          <span className="tag">{T(lang, "Capacidad nueva", "New capability")}</span>
          <h4>{T(lang, "Búsqueda semántica en autoSDD", "Semantic search in autoSDD")}</h4>
          <p>{T(lang,
          "Estudié embeddings y los integré a autoSDD. Vía OpenRouter con un modelo de embeddings barato y eficiente — o, alternativamente, con un modelo local que descarga una sola vez y funciona totalmente gratis.",
          "I studied embeddings and integrated them into autoSDD. Via OpenRouter with a cheap, efficient embeddings model — or, alternatively, with a local model that downloads once and runs completely free."
          )}</p>
        </div>
        <div className="links"></div>
      </div>
    </div>,


  // ============ 07 CONTEXT INDEX ============
  "context-index": (lang) =>
  <div className="body">
      <p>{T(lang,
      "Después descubrí que la IA mejora muchísimo cuando le das archivos en formato fácil de leer (Markdown) con todos los datos pertinentes a las tareas: guidelines de arquitectura, convenciones de código, lógica de negocio, paleta de colores, código de marca, contexto del usuario.",
      "Then I discovered AI improves enormously when you give it files in an easy-to-read format (Markdown) with all relevant data for tasks: architecture guidelines, code conventions, business logic, color palette, brand code, user context."
      )}</p>

      <p>{T(lang,
      "Pero también me di cuenta: todo eso es demasiado contexto. Satura constantemente al orquestador y empeora los resultados.",
      "But I also realized: that's too much context. It constantly saturates the orchestrator and degrades results."
      )}</p>

      <p className="pullquote">{T(lang,
      "No necesitaba una enciclopedia. Necesitaba un índice.",
      "I didn't need an encyclopedia. I needed an index."
      )}</p>

      <h3>{T(lang, "Entra el archivo índice", "Enter the index file")}</h3>
      <div className="tool-card">
        <div className="glyph"><Glyph.Document /></div>
        <div>
          <span className="tag">CLAUDE.md · SOUL.md</span>
          <h4>{T(lang, "El índice del libro", "The book's index")}</h4>
          <p>{T(lang,
          "En Claude Code es CLAUDE.md, en Hermes es SOUL.md. Se lee automáticamente con cada mensaje. Es el sitio perfecto para un mini tutorial de cómo debe comportarse el modelo: personalidad, tono, concisión.",
          "In Claude Code it's CLAUDE.md, in Hermes it's SOUL.md. Auto-read with every message. The perfect spot for a mini tutorial on how the model should behave: personality, tone, conciseness."
          )}</p>
          <p>{T(lang,
          "El resto del archivo es un índice. Como un libro que te dice a qué página ir según la instrucción. ¿Vas a tocar frontend? Consulta los guidelines del frontend, la imagen de marca, los colores, las skills aplicables, etc.",
          "The rest of the file is an index. Like a book that tells you which page to go to based on the instruction. Touching frontend? Consult frontend guidelines, brand image, colors, applicable skills, etc."
          )}</p>
        </div>
        <div className="links"></div>
      </div>

      <p className="pullquote">{T(lang,
      "Menos es más. Si pones mucho contexto, el agente toma peores decisiones; su máximo rendimiento se alcanza en torno al 20%.",
      "Less is more. Too much context makes the agent take worse decisions; peak performance sits around 20%."
      )}</p>
    </div>,


  // ============ 08 PROMPT VERSIONING ============
  "prompt-versioning": (lang) =>
  <div className="body">
      <p>{T(lang,
      "El SDD me enseñó a construir prompts robustos y completos para aumentar las probabilidades de un buen resultado en menos prompts. El problema: empecé a llenarme de prompts de 15+ páginas. En Drive, en notas, en archivos del editor… y en algún punto:",
      "SDD taught me to build robust, complete prompts to maximize the odds of a good result in fewer prompts. The problem: I started accumulating 15+ page prompts. On Drive, in notes, in editor files… and at some point:"
      )}</p>

      <p className="pullquote">{T(lang,
      "Esto tiene que parar. No estoy teniendo control. No sé qué prompts ejecuté ni qué resultado dieron. Avanzo a ciegas.",
      "This has to stop. I have no control. I don't know which prompts I ran or what results they gave. I'm flying blind."
      )}</p>

      <h3>{T(lang, "Versionamiento de prompts", "Prompt versioning")}</h3>
      <p>{T(lang,
      "Cada vez que pides una instrucción que requiere cambios, se crea automáticamente una versión que almacena: el prompt original del usuario; el prompt refinado por una skill de prompt engineering (con archivos a revisar, skills a usar, herramientas y método); capturas de pantalla; al cierre, un changelog de cambios reales en backend, frontend y descubrimientos; y un feedback final del agente sobre tu prompt original — qué pudo ser más claro.",
      "Every time you give an instruction that needs changes, a version is auto-created storing: the original user prompt; the refined prompt built by a prompt-engineering skill (files to review, skills to use, tools and method); screenshots; on completion, a changelog of real backend/frontend/discovery changes; and final agent feedback on your original prompt — what could have been clearer."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.StarkKit /></div>
        <div>
          <span className="tag">{T(lang, "Mi flujo completo", "My full workflow")}</span>
          <h4>Stark Kit</h4>
          <p>{T(lang,
          "Mi intento serio de automatizar mi propio flujo en Claude Code. Verificable en TODAS las fases — desde el prompt hasta el despliegue y pruebas en producción. Documentado, no solo con skills sino con archivos de contexto del usuario, contexto empresarial, guías de estilo, arquitectura. Más pragmático, más orientado a la vida real que al software puro. Usa autoSDD como base y extiende sus capacidades.",
          "My serious attempt to automate my own flow in Claude Code. Verifiable across ALL phases — prompt to deploy to production tests. Documented, not just with skills but with user-context files, enterprise-context files, style guides, architecture. More pragmatic, more real-life than pure-software. Uses autoSDD as a base and extends its capabilities."
          )}</p>
        </div>
        <div className="links">
          <a className="lnk" href="https://github.com/thestark77/stark-kit" target="_blank" rel="noopener">github →</a>
        </div>
      </div>
    </div>,


  // ============ 09 ENTERPRISE ============
  enterprise: (lang) =>
  <div className="body">
      <p>{T(lang,
      "Llegó el momento de aplicar todo esto en la empresa. Decidí construir una skill que automatizara la creación de tests E2E: capaz de consultar nuestro repo de logs, analizar código, preguntarme proactivamente, revisar la lógica de negocio y entender el contexto de cada endpoint. Y no solo construir el test, sino probarlo y documentar el endpoint — proyecto mantenible y autodocumentado.",
      "Time to bring all this into the company. I built a skill that automated E2E test creation: capable of querying our logs repo, analyzing code, proactively asking me questions, reviewing business logic, and understanding each endpoint's context. And not only building the test, but running it and documenting the endpoint — maintainable, self-documenting project."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.E2EForge /></div>
        <div>
          <span className="tag">Axiom · Tests · Logs</span>
          <h4>e2e-forge</h4>
          <p>{T(lang,
          "Conexión directa con Axiom (nuestra plataforma de logs) para recolectar tipos de respuesta y errores por endpoint y construir pruebas consistentes. También puedes pedirle que consulte logs específicos: plantea queries, las ejecuta, te devuelve resultados, cruza información entre múltiples queries para trackear errores.",
          "Direct connection to Axiom (our logs platform) to collect response types and errors per endpoint and build consistent tests. You can also ask it to query specific logs: it crafts queries, runs them, returns results, and joins data across multiple queries to track errors."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://github.com/thestark77/e2e-forge" target="_blank" rel="noopener">github →</a></div>
      </div>

      <p>{T(lang,
      "En este punto tenía una metodología genérica (Stark Kit) y una skill específica para la empresa (e2e-forge). ¿Y si los mezclo?",
      "At that point I had a generic methodology (Stark Kit) and a company-specific skill (e2e-forge). What if I merged them?"
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.BeCodeKit /></div>
        <div>
          <span className="tag warn">{T(lang, "Empresarial · Cuidado", "Enterprise · Caution")}</span>
          <h4>be-code-kit</h4>
          <p>{T(lang,
          "Inyecta el contexto de la empresa (guidelines y lógica de negocio) y además instala automáticamente conexión con Linear (gestión de requerimientos) y e2e-forge (tests + logs).",
          "Injects company context (guidelines, business logic) and auto-installs connections to Linear (requirements management) and e2e-forge (tests + logs)."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://github.com/IT-Bemovil/be-code-kit" target="_blank" rel="noopener">github →</a></div>
      </div>

      <div className="callout">
        <span className="label">{T(lang, "Advertencia", "Heads up")}</span>
        {T(lang,
      "be-code-kit tiene errores. Puede consumir muchos tokens. Úsalo con cabeza.",
      "be-code-kit has bugs. Can consume many tokens. Use with care."
      )}
      </div>
    </div>,


  // ============ 10 SOVEREIGNTY ============
  sovereignty: (lang, openVideo) =>
  <div className="body">
      <p>{T(lang,
      "Después de usar Anydesk, sesiones remotas, y mil truquillos para hablarle a mi agente desde el teléfono… entendí que necesitaba algo sostenible. Que no dependiera de mi computador.",
      "After using Anydesk, remote sessions, and a thousand hacks to talk to my agent from my phone… I realized I needed something sustainable. Independent of my computer."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.OpenClaw /></div>
        <div>
          <span className="tag">Gateway · Multi-canal</span>
          <h4>OpenClaw</h4>
          <p>{T(lang,
          "Una puerta de comunicación transversal: recopila y conecta servicios — mensajería, correo, almacenamiento, suites ofimáticas, reproductores de música — todos hablando con un mismo agente que puede interactuar con cualquiera de ellas.",
          "A cross-cutting communication gateway: collects and connects services — messaging, email, storage, office suites, music players — all talking to one shared agent that can interact with any of them."
          )}</p>
          <p>{T(lang,
          "Le envías un correo, saca contexto de ahí, lo combina con algo que mandaste por WhatsApp, con algo de tu Slack, e infiere o construye algo a partir de todo eso. Realmente entiendes que no estamos lejos de Tony Stark hablándole a Jarvis.",
          "You send it an email — it pulls context, combines it with something from WhatsApp, with something from Slack, and infers or builds from all of it. You really understand we're not far from Tony Stark talking to Jarvis."
          )}</p>
        </div>
        <div className="links"></div>
      </div>

      <button className="video-card" onClick={() => openVideo("EF5d0zGxYiY", "OpenClaw — Gateway Multi-canal")}>
        <div className="thumb" data-yt="EF5d0zGxYiY" style={{ "--yt-thumb": "url(https://i.ytimg.com/vi/EF5d0zGxYiY/mqdefault.jpg)" }}></div>
        <div className="meta">
          <div className="label">▶ {T(lang, "OpenClaw en acción", "OpenClaw in action")}</div>
          <div className="ttl">{T(lang, "Cómo funciona el gateway transversal", "How the cross-cutting gateway works")}</div>
        </div>
        <div className="arrow">→</div>
      </button>

      <div className="callout">
        <span className="label">{T(lang, "Lo malo", "Downside")}</span>
        {T(lang,
      "Requiere alto conocimiento técnico. VPS, reglas de seguridad, cuentas independientes para el agente, roles, permisos, conexión manual de cada herramienta, instalación de plugins y skills. Muy personalizable, muy bueno — pero configuración 100% manual.",
      "Requires significant technical know-how. VPS, security rules, separate agent accounts, roles, permissions, manual tool connections, plugin and skill install. Very customizable, very good — but 100% manual setup."
      )}
      </div>

      <h3>{T(lang, "El cambio: dejar atrás lo propio", "The shift: letting go of your own work")}</h3>
      <p>{T(lang,
      "Entendí que alguien más, en otra parte del mundo, ya había recorrido ese camino. Crear cosas propias está bien — nos enseña — pero a veces es mejor construir sobre cimientos ajenos para avanzar más rápido. Decidí abandonar el trabajo hecho, quedándome solo con el conocimiento, y empezar desde cero con una herramienta de frontera con filosofía similar a la mía.",
      "I understood someone else, somewhere in the world, had already walked that path. Building your own is fine — it teaches — but sometimes it's better to build on someone else's foundations to move faster. I decided to abandon my work, keeping only the knowledge, and start from scratch with a frontier tool whose philosophy was similar to mine."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.Hermes /></div>
        <div>
          <span className="tag">{T(lang, "Mi base actual", "My current base")}</span>
          <h4>Hermes</h4>
          <p>{T(lang,
          "Un agente que crece contigo. Cada cierto número de iteraciones analiza su propio trabajo y construye skills para mejorar. Tiene su sistema de almacenamiento. Conexiones multiplataforma listas: WhatsApp, Telegram, Discord, correo. Y, a diferencia de OpenClaw, es muchísimo más fácil de configurar tanto en local como en VPS.",
          "An agent that grows with you. Every so many iterations it analyzes its own work and builds skills to improve. Has its own storage system. Cross-platform connections out of the box: WhatsApp, Telegram, Discord, email. And, unlike OpenClaw, vastly easier to configure both locally and on a VPS."
          )}</p>
        </div>
        <div className="links">
          <a className="lnk" href="https://hermes-agent.nousresearch.com/" target="_blank" rel="noopener">hermes-agent →</a>
        </div>
      </div>

      <div className="tool-card">
        <div className="glyph"><Glyph.Cobalt /></div>
        <div>
          <span className="tag">{T(lang, "Mi plugin para Hermes", "My Hermes plugin")}</span>
          <h4>cobalt-agent</h4>
          <p>{T(lang,
          "Tomé Hermes como base y construí encima — siguiendo su metodología — todo lo que mi flujo necesitaba. Lo que esperaba que fuera autoSDD y luego Stark Kit, ahora es Cobalt: agnóstico al proyecto y a las tecnologías. Sirve para personales, para trabajo, para lo que sea. Solo instalas Hermes y Cobalt le inyecta encima todas las herramientas de mi flujo.",
          "I took Hermes as base and built on top — following its methodology — everything my workflow needed. What I'd hoped autoSDD and then Stark Kit would become, is now Cobalt: project- and tech-agnostic. Works for personal, work, anything. Install Hermes, then Cobalt injects all my workflow tools on top."
          )}</p>
        </div>
        <div className="links">
          <a className="lnk" href="https://github.com/thestark77/cobalt-agent" target="_blank" rel="noopener">github →</a>
        </div>
      </div>

      <button className="video-card" onClick={() => openVideo("hlKXj1gruZI", "Hermes deep-dive tutorial")}>
        <div className="thumb" data-yt="hlKXj1gruZI" style={{ "--yt-thumb": "url(https://i.ytimg.com/vi/hlKXj1gruZI/mqdefault.jpg)" }}></div>
        <div className="meta">
          <div className="label">▶ {T(lang, "Tutorial a fondo", "Deep dive")}</div>
          <div className="ttl">{T(lang, "Hermes — tutorial completo", "Hermes — full tutorial")}</div>
        </div>
        <div className="arrow">→</div>
      </button>

      <div className="callout info">
        <span className="label">VPS</span>
        {T(lang,
      "Si vas a desplegar en VPS — la mejor calidad/precio es Contabo. Interfaz fea, página regular, pero precios imbatibles. Si prefieres mejor experiencia, Hostinger — pero pagas más por menos.",
      "If you're deploying on VPS — best price/quality is Contabo. Ugly UI, mediocre site, unbeatable pricing. If you want a better experience, Hostinger — but you pay more for less."
      )}
      </div>
    </div>,


  // ============ 11 BUBBLE TWIST ============
  "bubble-twist": (lang, openVideo) =>
  <div className="body">
      <p>{T(lang,
      "Llevo un tiempo trabajando así. Pero te das cuenta de algo: la IA está cara, y sigue subiendo.",
      "I've been working this way for a while. But you start to notice: AI is expensive, and getting more so."
      )}</p>

      <p className="pullquote">{T(lang,
      "Te venden un carro al que solo puedes echarle gasolina en sus estaciones. Y, qué casualidad, esas estaciones tienen los precios más altos.",
      "They sell you a car you can only refuel at their stations. And — what a coincidence — those stations have the highest prices."
      )}</p>

      <p>{T(lang,
      "El ecosistema que construyen Anthropic, OpenAI, Google es eso. La burbuja de IA está empezando a explotar. Las inversiones se agotan y vuelve la necesidad de generar dinero. Los recortes son reales. La billetera lo siente. Microsoft, OpenAI, Anthropic, Google, Cursor — ninguno ha titubeado al subir precios. Al punto de quitar el plan más usado sin previo aviso. Y sí, eso ya pasó.",
      "That ecosystem from Anthropic, OpenAI, Google is exactly that. The AI bubble is starting to pop. Investments are drying up and the need to make money returns. The cuts are real. Your wallet feels it. Microsoft, OpenAI, Anthropic, Google, Cursor — none have hesitated to raise prices. To the point of removing the most-used plan with no warning. Yes, that already happened."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.Bubble /></div>
        <div>
          <span className="tag danger">{T(lang, "Plot Twist", "Plot Twist")}</span>
          <h4>{T(lang, "¿Y si yo fuera el dueño del carro?", "What if I owned the car?")}</h4>
          <p>{T(lang,
          "¿Y si pagara solo por el combustible donde yo quiera? Vi este video y mi billetera sonrió. El video usa OpenRouter; yo prefiero OpenCode (más barato). Pero ambos vienen integrados de fábrica en Hermes — la configuración es trivial.",
          "What if I only paid for fuel wherever I wanted? I saw this video and my wallet smiled. The video uses OpenRouter; I prefer OpenCode (cheaper). Both ship integrated in Hermes — setup is trivial."
          )}</p>
        </div>
        <div className="links"></div>
      </div>

      <button className="video-card" onClick={() => openVideo("sse5YmoY7Do", "Soberanía del modelo")}>
        <div className="thumb" data-yt="sse5YmoY7Do" style={{ "--yt-thumb": "url(https://i.ytimg.com/vi/sse5YmoY7Do/mqdefault.jpg)" }}></div>
        <div className="meta">
          <div className="label">▶ {T(lang, "Video clave", "Key video")}</div>
          <div className="ttl">{T(lang, "Conecta tus modelos baratos a tu agente", "Connect your cheap models to your agent")}</div>
        </div>
        <div className="arrow">→</div>
      </button>
    </div>,


  // ============ 12 DESIGN TWIST ============
  "design-twist": (lang, openVideo) =>
  <div className="body">
      <p>{T(lang,
      "Un día quería compartir todo esto con mi empresa. Me ofrecieron dar una charla abierta y, en el proceso, descubrí una herramienta que también lo cambió todo: Claude Design.",
      "One day I wanted to share all this with my company. They offered me an open talk and, in the process, I discovered a tool that also changed everything: Claude Design."
      )}</p>

      <p>{T(lang,
      "Capaz de automatizar presentaciones, animaciones vectoriales, mini-apps, juegos de bolsillo, demos interactivos en tiempo real con parámetros configurables, diseños profesionales. Hice mi presentación con esto. Mucha gente me la pidió. Esa misma noche, viendo un toque en vivo en un bar con mi perrita y una de mis mejores amigas, le ayudé a crear en 10 minutos una presentación animada para su universidad. Desde mi teléfono.",
      "Capable of automating presentations, vector animations, mini-apps, pocket games, real-time interactive demos with configurable parameters, professional designs. I built my talk with it. Many asked for it. That same night, watching a live show at a bar with my dog and one of my best friends, I helped her create — in 10 minutes — an animated presentation for her university. From my phone."
      )}</p>

      <a className="video-card" href="https://drive.google.com/drive/folders/1LBm02q45IQDktoFTABQh_fBZGZte5pxQ?usp=sharing" target="_blank" rel="noopener">
        <div className="thumb" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--cyan)", letterSpacing: ".15em" }}>DRIVE</span>
        </div>
        <div className="meta">
          <div className="label">▣ {T(lang, "Las presentaciones", "The presentations")}</div>
          <div className="ttl">{T(lang, "Galería de ejemplos en Google Drive", "Sample gallery on Google Drive")}</div>
        </div>
        <div className="arrow">→</div>
      </a>

      <p className="pullquote">{T(lang,
      "Pero entonces miré el consumo de Claude Design… y casi me desmayo.",
      "Then I checked Claude Design's usage… and almost fainted."
      )}</p>

      <p>{T(lang,
      "Se cobra aparte. Una presentación quema todo tu uso del día — a menos que estés dispuesto a dejar medio sueldo en un plan muy caro. Empecé a buscar alternativas y encontré una skill que replica casi por completo el funcionamiento de Claude Design. Open source, totalmente gratis (solo el costo del modelo, como siempre). Para todo lo demás: idéntico, pero a coste cero.",
      "It's billed separately. One presentation burns your whole daily quota — unless you drop half a paycheck on a very expensive plan. I searched for alternatives and found a skill that replicates Claude Design almost completely. Open source, totally free (only the model's cost, as always). For everything else: identical, at zero cost."
      )}</p>

      <button className="video-card" onClick={() => openVideo("Nmk1wxoi6ys", "Skill open source Claude Design")}>
        <div className="thumb" data-yt="Nmk1wxoi6ys" style={{ "--yt-thumb": "url(https://i.ytimg.com/vi/Nmk1wxoi6ys/mqdefault.jpg)" }}></div>
        <div className="meta">
          <div className="label">▶ {T(lang, "La alternativa gratis", "The free alternative")}</div>
          <div className="ttl">{T(lang, "Skill open source que emula Claude Design", "Open source skill that emulates Claude Design")}</div>
        </div>
        <div className="arrow">→</div>
      </button>
    </div>,


  // ============ 13 COMMUNICATION ============
  communication: (lang) =>
  <div className="body">
      <p>{T(lang,
      "Todas las herramientas no sirven de nada si no aprendes a comunicar. Y no me refiero solo a la IA — somos seres sociales. Si queremos aumentar nuestro impacto en el mundo, tenemos que aprender a relacionarnos en el lenguaje en el que cada ser o cada máquina nos entiende mejor.",
      "All these tools are useless if you don't learn to communicate. And I don't only mean with AI — we're social beings. To increase our impact, we must learn to relate to others in the language each being or each machine understands best."
      )}</p>

      <h3>{T(lang, "Los tres pilares", "The three pillars")}</h3>

      <div className="pillars">
        <div className="pillar">
          <div className="num">1</div>
          <h4>{T(lang, "Descubrimiento", "Discovery")}</h4>
          <p>{T(lang,
          "Pregunta antes de actuar. El error más caro es construir algo incorrecto rápido. Pídele al agente que explore el estado actual, qué limitaciones existen, qué podría salir mal. Una suposición errónea cuesta tiempo y dinero.",
          "Ask before acting. The most expensive mistake is building something wrong, fast. Ask the agent to explore current state, what constraints exist, what could go wrong. A wrong assumption costs time and money."
          )}</p>
        </div>
        <div className="pillar">
          <div className="num">2</div>
          <h4>{T(lang, "Planificación", "Planning")}</h4>
          <p>{T(lang,
          "Decide con criterios, no por instinto. Define 'terminado' antes de empezar. Divide objetivos ambiguos en fases con entregables claros. Cuestiona el plan: ventajas, desventajas, qué descartó. Si el agente dice 'simplemente…' — detente. El 'simplemente' oculta complejidad.",
          "Decide with criteria, not instinct. Define 'done' before starting. Split ambiguous goals into phases with clear deliverables. Challenge the plan: pros, cons, what was rejected. If the agent says 'just…' — stop. The 'just' hides complexity."
          )}</p>
        </div>
        <div className="pillar">
          <div className="num">3</div>
          <h4>{T(lang, "Versionamiento", "Versioning")}</h4>
          <p>{T(lang,
          "Mide el progreso, no lo des por sentado. Un objetivo por versión, documentado en archivo — no solo en tu cabeza. Lista de pruebas con criterios de aprobación y % cobertura. Resultados medibles: tokens, duración, precisión. Si no puedes medirlo, no puedes mejorarlo.",
          "Measure progress, don't assume it. One goal per version, documented in a file — not just in your head. Test checklist with pass criteria and coverage %. Measurable outputs: tokens, duration, accuracy. If you can't measure it, you can't improve it."
          )}</p>
        </div>
      </div>

      <h3>{T(lang, "Reglas de interacción", "Interaction rules")}</h3>

      <ul>
        <li><strong>{T(lang, "Nunca confíes, siempre verifica.", "Never trust, always verify.")}</strong> {T(lang, "El agente te dirá que funciona. Haz que lo demuestre.", "The agent will say it works. Make it prove it.")}</li>
        <li><strong>{T(lang, "Provee contexto, no instrucciones.", "Provide context, not instructions.")}</strong></li>
        <li><strong>{T(lang, "Corrige pronto, no con frecuencia.", "Correct early, not often.")}</strong> {T(lang, "Una corrección clara al principio vale más que diez parches después.", "One clear correction up front beats ten patches later.")}</li>
        <li><strong>{T(lang, "Tu trabajo es pensar. El del agente, ejecutar.", "Your job is to think. The agent's job is to execute.")}</strong></li>
      </ul>

      <h3>{T(lang, "Prompt: ambiguo vs claro", "Prompt: ambiguous vs clear")}</h3>

      <div className="prompt-compare">
        <div className="prompt-box bad">
          <span className="verdict">✖ {T(lang, "Alta probabilidad de fracaso", "High probability of failure")}</span>
          "Corregir el error de inicio de sesión"
        </div>
        <div className="prompt-box good">
          <span className="verdict">✔ {T(lang, "Alta probabilidad de éxito", "High probability of success")}</span>
          {T(lang,
        "Los usuarios reportan un error 401 en /api/auth tras refrescar el token. Ocurrió después del commit 98c76b0, donde modificamos el middleware de autenticación. Te adjunto los logs de producción. Identifica el error y propón una solución eficiente. Ese middleware se aplica en otros endpoints — antes de modificarlo, entiende sus flujos y asegúrate de no romper ninguno. El backend corre en localhost:8200; envía peticiones de prueba para verificar la solución.",
        "Users report a 401 error on /api/auth after token refresh. It started after commit 98c76b0, where we modified the auth middleware. Production logs attached. Identify the bug and propose an efficient fix. That middleware is used in other endpoints — before modifying it, understand its flows and make sure none break. Backend runs on localhost:8200; send test requests to verify the fix."
        )}
        </div>
      </div>

      <p className="pullquote">{T(lang,
      "No estás construyendo software. Estás modelando el mundo a tu alrededor. Si no lo entiendes, no puedes dar una solución eficiente.",
      "You're not building software. You're modeling the world around you. If you don't understand it, you can't give an efficient solution."
      )}</p>

      <h3>{T(lang, "Referencias", "References")}</h3>
      <ul>
        <li><a className="lnk" href="https://github.com/wshobson/agents/blob/main/plugins/llm-application-dev/skills/prompt-engineering-patterns/SKILL.md" target="_blank" rel="noopener">{T(lang, "La mejor skill de prompt engineering", "The best prompt engineering skill")}</a></li>
        <li><a className="lnk" href="https://platzi.com/blog/ai-prompt-engineer-crea/" target="_blank" rel="noopener">{T(lang, "¿Cómo hacer prompts como un experto?", "How to prompt like an expert?")}</a></li>
      </ul>
    </div>,


  // ============ 14 VOICE ============
  voice: (lang, openVideo, ph, copyPrompt, copied) =>
  <div className="body">
      <p>{T(lang,
      "Si quieres avanzar más rápido, vas a tener que escribir prompts como un experto. Y rápido. Por la salud de tus manos, tu paciencia y tu tiempo: usa una herramienta de voz a texto. Habla a la IA siguiendo el ejemplo de Tony Stark.",
      "If you want to move fast, you'll need to write prompts like an expert. Fast. For the sake of your hands, patience, and time: use a speech-to-text tool. Talk to AI like Tony Stark."
      )}</p>

      <p>{T(lang,
      "Tras probar muchas, entendí que no necesitaba solo un motor de voz a texto, sino una capa intermedia que refinara mis prompts: limpiar muletillas, ortografía y puntuación, recordar vocabulario propio para no malinterpretar palabras, y — lo más importante — recibir instrucciones en medio del dictado. Que mientras hablo, pueda decirle 'corrige esto', 'organízalo en tabla', 'cambia el tono', 'resume lo dicho'.",
      "After trying many, I realized I didn't need just a speech-to-text engine but an intermediate layer to refine my prompts: clean fillers, spelling, punctuation, remember my own vocabulary, and — most importantly — accept instructions mid-dictation. While speaking, I can say 'fix this', 'turn this into a table', 'change the tone', 'summarize'."
      )}</p>

      <div className="tool-card">
        <div className="glyph"><Glyph.SuperWhisper /></div>
        <div>
          <span className="tag">{T(lang, "Mi herramienta", "My tool")}</span>
          <h4>Superwhisper</h4>
          <p>{T(lang,
          "Selecciona modelo (yo uso GPT 5.2), define un prompt maestro que se ejecuta cada vez que grabas para procesar el resultado, configura push-to-talk y crea vocabulario propio para palabras poco comunes.",
          "Pick a model (I use GPT 5.2), define a master prompt run on every recording to refine the output, set push-to-talk, and create custom vocabulary for uncommon words."
          )}</p>
        </div>
        <div className="links"><a className="lnk" href="https://superwhisper.com/#pricing" target="_blank" rel="noopener">superwhisper →</a></div>
      </div>

      <div className="prompt-block">
        <div className="head">
          <h5>{T(lang, "Mi prompt maestro (preset blank/custom)", "My master prompt (blank/custom preset)")}</h5>
          <button className="btn" onClick={copyPrompt}>
            {copied ? "✓ " + T(lang, "Copiado", "Copied") : T(lang, "Copiar prompt", "Copy prompt")}
          </button>
        </div>
        <div className="preview">
          {T(lang,
        "Reglas inmutables: no resumir · no agregar información · no reinterpretar · no traducir · mantener orden y estructura · solo formato simple · eliminar muletillas y ruidos · corregir interpretaciones evidentes · jamás incluir explicaciones, solo el texto final…",
        "Immutable rules: don't summarize · don't add info · don't reinterpret · don't translate · keep order and structure · only simple formatting · remove fillers and noise · correct obvious misinterpretations · never include explanations, only the final text…"
        )}
          <br />
          <span style={{ color: "var(--ink-3)" }}>
            {T(lang,
          "[ Click 'Copiar prompt' para llevarte la versión completa al portapapeles ]",
          "[ Click 'Copy prompt' to take the full version to your clipboard ]"
          )}
          </span>
        </div>
      </div>

      <p>{T(lang,
      "Siéntete libre de modificarlo y adaptarlo a tu estilo.",
      "Feel free to tweak and adapt it to your style."
      )}</p>
    </div>,


  // ============ 15 EPILOGUE ============
  epilogue: (lang) =>
  <div className="body">
      <p className="pullquote">{T(lang,
      "No te dejes cautivar demasiado por la adrenalina de tener acceso a tecnología nunca vista. Por experiencia: a veces termina haciéndote trabajar más, paradójicamente.",
      "Don't get too captivated by the adrenaline of having access to never-before-seen tech. From experience: sometimes it makes you work more, paradoxically."
      )}</p>

      <p>{T(lang,
      "No olvides tomar descansos. Seguir siendo persona — al final del día es lo más importante. Sal, haz deporte, comparte con quienes amas, medita, haz lo que te gusta. Y cuando vuelvas — crea. Crea mucho. Haz la diferencia en tu mundo.",
      "Don't forget to rest. Stay human — at the end of the day, that's what matters most. Go out, exercise, spend time with those you love, meditate, do what you enjoy. And when you come back — create. Create a lot. Make a difference in your world."
      )}</p>

      <p>{T(lang,
      "La invitación es a empezar. A usar, fallar, aprender. A empujar los límites de lo que somos capaces de hacer. A crear herramientas que impacten nuestra vida y nuestro entorno. A modelar el mundo a nuestro alrededor para que sea un mejor lugar para nosotros y para las personas que amamos.",
      "The invitation is to start. To use, to fail, to learn. To push the limits of what we're capable of. To create tools that impact our life and our environment. To shape the world around us into a better place for us and the people we love."
      )}</p>

      <p className="pullquote">{T(lang,
      "El viaje no es perfecto. Tiene altos y bajos, errores, fallos, muchos tokens desperdiciados. Pero al final del día es una aventura. Permítete fallar, pero nunca dejes de avanzar. Y recuerda: avanzar no es solo hacer — también es saber cuándo descansar.",
      "The journey isn't perfect. It has highs and lows, mistakes, failures, a lot of wasted tokens. But at the end of the day, it's an adventure. Allow yourself to fail, but never stop moving. And remember: moving forward isn't only doing — it's also knowing when to rest."
      )}</p>

      <h3>{T(lang, "Continúa el viaje", "Continue the journey")}</h3>
      <div className="cta-grid">
        <a className="cta-card" href="https://github.com/thestark77/cobalt-agent" target="_blank" rel="noopener">
          <span className="label">github · {T(lang, "actual", "current")}</span>
          <span className="name">cobalt-agent</span>
          <span className="desc">{T(lang, "Mi flujo sobre Hermes", "My workflow on top of Hermes")}</span>
          <span className="arrow">→</span>
        </a>
        <a className="cta-card" href="https://github.com/thestark77/stark-kit" target="_blank" rel="noopener">
          <span className="label">github</span>
          <span className="name">stark-kit</span>
          <span className="desc">{T(lang, "Versionamiento de prompts y SDD", "Prompt versioning and SDD")}</span>
          <span className="arrow">→</span>
        </a>
        <a className="cta-card" href="https://github.com/thestark77/e2e-forge" target="_blank" rel="noopener">
          <span className="label">github</span>
          <span className="name">e2e-forge</span>
          <span className="desc">{T(lang, "Tests E2E + Axiom logs", "E2E tests + Axiom logs")}</span>
          <span className="arrow">→</span>
        </a>
        <a className="cta-card" href="https://github.com/thestark77/autoSDD" target="_blank" rel="noopener">
          <span className="label">github</span>
          <span className="name">autoSDD</span>
          <span className="desc">{T(lang, "Mi primer fork de gentle-ai", "My first gentle-ai fork")}</span>
          <span className="arrow">→</span>
        </a>
        <a className="cta-card" href="https://github.com/IT-Bemovil/be-code-kit" target="_blank" rel="noopener">
          <span className="label">github · empresa</span>
          <span className="name">be-code-kit</span>
          <span className="desc">{T(lang, "Empresa + Linear + e2e-forge", "Company + Linear + e2e-forge")}</span>
          <span className="arrow">→</span>
        </a>
        <a className="cta-card" href="https://hermes-agent.nousresearch.com/" target="_blank" rel="noopener">
          <span className="label">{T(lang, "base", "base")}</span>
          <span className="name">Hermes Agent</span>
          <span className="desc">{T(lang, "El agente que crece contigo", "The agent that grows with you")}</span>
          <span className="arrow">→</span>
        </a>
      </div>

      <p style={{ textAlign: "center", marginTop: 48, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".25em", color: "var(--ink-3)", textTransform: "uppercase" }}>
        — {T(lang, "mi viaje continúa", "my journey continues")} · {T(lang, "el tuyo también", "yours too")} —
      </p>
    </div>

};

window.ChapterContent = ChapterContent;
window.T = T;