/* Sam's article — How to Hang Something Heavy Without Asking Anyone for Help
 * Renders into #render-target. Source content: scripts/insert-sam-post.ts.
 * Format: Sam editorial (patchhole.jsx) — Hero, Lede, WhatYouNeed, Steps, HotTakes, Redo, Comments, Signoff.
 */

const { useState } = React;

const SamSays = ({ children }) => (
  <div className="sa-step-says">
    <span className="who">— Sam</span>
    <p>{children}</p>
  </div>
);

/* ============ CRUMBS ============ */
const Crumbs = () => (
  <nav className="sa-crumbs" aria-label="Breadcrumb">
    <div className="l">
      <a href="/">Inicio</a>
      <span>/</span>
      <a href="/es/contributors/sam/">Sam</a>
      <span>/</span>
      <span>Cómo</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>Colgar algo pesado</span>
    </div>
    <div className="r">
      <span>Edición 04 · Primavera '26</span>
      <span className="by">escrito por Sam ✦</span>
    </div>
  </nav>
);

/* ============ HERO ============ */
const Hero = () => (
  <section className="sa-hero">
    <div
      className="img"
      style={{
        backgroundImage:
          "url('https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=2000&q=80')",
      }}
    />
    <div className="sa-hero-wrap">
      <div>
        <div className="sa-hero-kicker">
          <span>Cómo</span>
          <span className="dot">●</span>
          <span>No. 02</span>
          <span className="dot">●</span>
          <span className="sig">escrito por Sam</span>
        </div>
        <h1>
          Cómo colgar <em>algo pesado</em> sin pedirle ayuda a nadie
        </h1>
        <p className="standfirst">
          La pared no va a ganar. Detector de vigas, el anclaje correcto, un nivel, un agujero piloto pre-perforado, y la disciplina de dar un paso atrás antes de decidir que está chueco. Seis pasos, 45 minutos, sin segunda persona requerida.
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>Tiempo</span>
          <span className="v">~45 min <span style={{opacity:0.5}}>+ resanar, si</span></span>
        </div>
        <div className="row">
          <span>Costo</span>
          <span className="v">$8–$15</span>
        </div>
        <div className="row">
          <span>Dificultad</span>
          <span className="v">Tercamente factible</span>
        </div>
        <div className="row">
          <span>Nivel de tiradero</span>
          <span className="v warn">●○○ Polvo</span>
        </div>
        <div className="row">
          <span>Actualizado</span>
          <span className="v">Primavera '26</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble">
      sin segunda persona. <u>te lo prometo</u>.
      <svg viewBox="0 0 60 30" fill="none">
        <path d="M2 22 C 12 8, 28 4, 56 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        <path d="M48 6 L 56 12 L 50 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </div>
  </section>
);

/* ============ LEDE ============ */
const Lede = () => (
  <section className="sa-lede">
    <div className="sa-lede-wrap">
      <aside className="sa-lede-side">
        <div className="marker">En esta</div>
        <ul>
          <li>El espejo lleva semanas moviéndose</li>
          <li>Lo que de verdad necesitas</li>
          <li>Los 6 pasos</li>
          <li>Opiniones fuertes</li>
          <li>Lo que haría diferente</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          Llevas tres semanas moviendo ese espejo de cuarto en cuarto porque no puedes decidir dónde va. Ya decidiste. <em>Va ahí.</em> En esa pared. Hoy.
        </p>

        <p>
          Y no le vas a pedir a nadie que te ayude. No necesitas una segunda persona. Necesitas un detector de vigas, el anclaje correcto, un nivel, y la disciplina de <strong>dar un paso atrás antes de decidir que está chueco.</strong> El proyecto entero lleva cuarenta y cinco minutos si lo haces bien y dos horas si tienes que resanar un agujero — y lo vamos a hacer bien.
        </p>

        <div className="sa-pullquote">
          <p>
            La tablaroca sola no aguanta un tornillo bajo carga real. La pared es yeso y papel. Las vigas son madera. Encuentra la madera, o usa un anclaje de verdad.
          </p>
        </div>

        <p>
          Esa frase es el artículo entero. El resto es solo cómo encontrar la madera, qué cuenta como anclaje de verdad, y por qué deberías comprar un nivel de cuatro dólares en lugar de confiar en tus ojos.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Nota de Sam</span>
        <h4>Antes de taladrar en cualquier lado</h4>
        <p>
          Si tu casa fue construida antes de 1980, la pared puede ser de yeso y listón, no de tablaroca. <em>Anclajes diferentes.</em> Reglas diferentes. Si al tocar suena thud-mate-thud-mate todo el camino, eso es yeso — para y busca anclajes para yeso.
        </p>
      </aside>
    </div>
  </section>
);

/* ============ WHAT YOU NEED ============ */
const WhatYouNeed = () => (
  <section className="sa-need">
    <div className="sa-need-wrap">
      <div>
        <div className="sa-need-head">§ 01 / Herramientas</div>
        <h2>
          Lo que <em>de verdad</em> necesitas
        </h2>
        <p className="body">
          Presupuesto total: <strong>$8–$15</strong> en materiales. La mayoría del costo es el nivel — y el nivel es la cosa que vas a usar en cada proyecto por el resto de tu vida. <strong>Compra el nivel de cuatro dólares.</strong>
        </p>

        <div className="sa-need-dont">
          <span className="lab">No te molestes con</span>
          <ul>
            <li>
              Los anclajes de plástico que vinieron en la caja
              <span className="why">Decorativos en el mejor de los casos. Los tornillos de mariposa son la jugada.</span>
            </li>
            <li>
              Calcular el nivel a ojo
              <span className="why">Te vas a dar cuenta. Todos los días. Por años.</span>
            </li>
            <li>
              Clavar un clavo y rezar
              <span className="why">Para un marco de menos de un kilo, está bien. Para algo pesado, no.</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            Detector de vigas (o tu nudillo)
            <span className="why">$8–15 el más barato. O usa la prueba del nudillo gratis.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Taladro (inalámbrico, cualquier tamaño)
            <span className="why">Pide prestado si no tienes uno. No compres uno de $300 para colgar un espejo.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Nivel de burbuja (24" o más largo)
            <span className="why">$4 en cualquier ferretería. Los mejores cuatro dólares que vas a gastar en este proyecto.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Tornillos de mariposa O anclajes roscados de tablaroca
            <span className="why">Con capacidad para el doble del peso que estás colgando. Lee la etiqueta.</span>
          </span>
          <span className="qty">×2–4</span>
        </li>
        <li>
          <span className="item">
            Un buen tornillo, longitud que combine con tu anclaje
            <span className="why">Suele venir en el paquete del anclaje.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Lápiz
            <span className="why">Para marcar vigas y el lugar. Sharpie no. Lápiz.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Café
            <span className="why">No negociable.</span>
          </span>
          <span className="qty">×1 taza</span>
        </li>
      </ul>
    </div>
  </section>
);

/* ============ STEPS ============ */
const STEPS = [
  {
    n: "01",
    phase: "Buscar · 5 min",
    title: "Encuentra la viga primero. Siempre.",
    flip: false,
    body: (
      <>
        <p>
          Toca a lo largo de la pared con el nudillo hasta que el sonido cambie de <em>hueco</em> a <em>sólido</em>. Esa es la viga. Esa es tu mejor amiga ahora mismo. Un detector de vigas también funciona — pero honestamente tu nudillo es gratis y ya viene contigo.
        </p>
        <p>
          Las vigas suelen estar a <strong>dieciséis pulgadas de centro a centro.</strong> Una vez que encuentras una, normalmente puedes encontrar la siguiente sin revisar. Marca cada una con lápiz para no perderlas cuando empieces a taladrar.
        </p>
      </>
    ),
    tip: { lab: "Nudillo vs detector de vigas", text: "La prueba del nudillo es más rápida y gratis, pero los detectores son más confiables en paredes de yeso y paredes con aislamiento. Si esto es nuevo para ti, compra el detector de $10. Se paga solo la primera vez que te ahorra un agujero." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 01 · La viga",
      cap: "madera, detrás del yeso.",
    },
    says: "Marca cada viga que encuentres, no solo la que estás usando. Las vas a necesitar la próxima vez.",
  },
  {
    n: "02",
    phase: "Anclar · 5 min",
    title: "Si no hay viga donde la necesitas, usa el anclaje correcto.",
    flip: true,
    body: (
      <>
        <p>
          No todos los anclajes de pared son iguales. Los plasticitos que vienen en la caja con la cosa que compraste suelen ser <em>basura</em>. Consigue un tornillo de mariposa o un anclaje roscado de tablaroca con capacidad para más peso del que estés colgando.
        </p>
        <p>
          <strong>Duplícalo.</strong> No confíes en nada. La etiqueta del anclaje te dice la carga nominal — léela antes de comprar. Un espejo pesado pesa más de lo que crees. Un espejo más un niño jalándolo pesa todavía más.
        </p>
      </>
    ),
    warn: { lab: "Aviso", text: "Si vas a colgar un perchero que va a aguantar abrigos de verdad, ve a una viga. Sin anclaje. Los percheros fallan dramáticamente — agarran más peso del que esperas, y el modo de falla es el gancho arrancando un pedazo de pared." },
    fig: {
      img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1200&q=80",
      tag: "Fig 02 · El anclaje",
      cap: "metálico, roscado, calificado.",
    },
  },
  {
    n: "03",
    phase: "Nivelar · 1 min",
    title: "Usa un nivel.",
    flip: false,
    body: (
      <>
        <p>
          Sé que crees que puedes calcularlo a ojo. <em>No puedes.</em> Nadie puede. <strong>Usa el nivel.</strong> Date los cuarenta segundos extra. Vas a mirar esa cosa todos los días y vas a saber si está medio grado torcida.
        </p>
        <p>
          El nivel cuesta cuatro dólares en cualquier ferretería. Son los mejores cuatro dólares que puedes gastar en este proyecto. Si todavía no tienes uno, compra uno antes de hacer cualquier cosa de este artículo.
        </p>
      </>
    ),
    tip: { lab: "Apps de nivel en el teléfono", text: "Funcionan, pero son más lentas que un nivel de burbuja de verdad y requieren que sostengas el teléfono firme. El nivel de burbuja es más rápido, más preciso, y no necesita batería. Compra el nivel de burbuja." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 03 · El nivel",
      cap: "el seguro más barato que vas a comprar.",
    },
    says: "Pon el nivel encima del marco del espejo, no en la pared. El espejo es lo que la gente va a ver. La pared es lo que no.",
  },
  {
    n: "04",
    phase: "Taladrar · 2 min",
    title: "Pre-perfora el agujero piloto.",
    flip: true,
    body: (
      <>
        <p>
          No fuerces el tornillo directo en la tablaroca. Pre-perfora un agujero piloto un poco más chico que tu tornillo. <em>Entra más limpio. Aguanta mejor. La pared lo respeta más.</em>
        </p>
        <p>
          Si estás usando un anclaje, la caja del anclaje te dice qué broca usar — sigue exactamente. Si vas a una viga, un agujero piloto de 1/16 de pulgada es suficiente.
        </p>
      </>
    ),
    warn: { lab: "Si pegas con algo duro", text: "Para. De inmediato. Eso es o un tubo o un cable y ninguno de los dos es tu amigo hoy. Sácalo, muévete cuatro pulgadas, intenta de nuevo. La pared tiene cosas adentro y las cosas adentro son más importantes que el espejo." },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "Fig 04 · El piloto",
      cap: "chico, deliberado, a propósito.",
    },
  },
  {
    n: "05",
    phase: "Colgar · 5 min",
    title: "Cuélgalo. Da un paso atrás. No lo toques.",
    flip: false,
    body: (
      <>
        <p>
          Cuelga la cosa. Da un paso atrás. <em>Míralo durante diez segundos antes de decidir que está chueco.</em>
        </p>
        <p>
          Probablemente no está chueco. Solo no estás acostumbrado a verlo ahí todavía. Si todavía te molesta después de diez segundos y un nivel confirma una inclinación, entonces ajusta. <strong>Si ajustaste porque "se sentía" mal y el nivel dice que está bien, lo pusiste de verdad chueco.</strong> Confía en el nivel sobre tus ojos.
        </p>
      </>
    ),
    tip: { lab: "Toma una foto", text: "Desde el otro lado del cuarto, con flash. La cámara va a ver lo que tus ojos no — inclinaciones leves, ilusiones de paralaje, polvo. Ajusta basándote en la foto, no en la vista en persona. La foto es lo que la gente va a ver cuando entre." },
    fig: {
      img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80",
      tag: "Fig 05 · El colgado",
      cap: "regla de los diez segundos. siempre.",
    },
    says: "Si ajustas tres veces, para. Aléjate. Hazte un café. Vuelve en cinco minutos. Tus ojos se recalibran.",
  },
  {
    n: "06",
    phase: "Listo",
    title: "El momento de la victoria.",
    flip: true,
    body: (
      <>
        <p>
          Está arriba. Está nivelado. No se cayó nada. <em>No le pediste ayuda a nadie y no la necesitaste.</em>
        </p>
        <p>
          <strong>Eso es todo.</strong> Toma una foto. Mándasela a quien dudó de ti. Sigue con tu vida. Hay algo específicamente satisfactorio en colgar algo pesado sola — más grande que el proyecto, más chico que una experiencia religiosa. Quédate con eso un segundo.
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80",
      tag: "Fig 06 · La victoria",
      cap: "la pared no ganó.",
    },
    says: "Si es un espejo, lo primero que ves en él es tu cara después de colgar un espejo sola. Es una buena cara.",
  },
];

const Step = ({ data }) => (
  <article className={`sa-step ${data.flip ? "flip" : ""}`}>
    <div className="sa-step-text">
      <div className="sa-step-meta">
        <span className="sa-step-num">{data.n}</span>
        <span className="sa-step-phase">{data.phase}</span>
      </div>
      <h3>{data.title}</h3>
      <div className="sa-step-body">{data.body}</div>
      {data.tip && (
        <div className="sa-step-tip">
          <span className="lab">{data.tip.lab}</span>
          <p>{data.tip.text}</p>
        </div>
      )}
      {data.warn && (
        <div className="sa-step-warn">
          <span className="lab">{data.warn.lab}</span>
          <p>{data.warn.text}</p>
        </div>
      )}
    </div>
    <figure className="sa-step-fig">
      <div className="frame">
        <span className="tag">{data.fig.tag}</span>
        <img src={data.fig.img} alt="" loading="lazy" />
      </div>
      <figcaption>{data.fig.cap}</figcaption>
      {data.says && <SamSays>{data.says}</SamSays>}
    </figure>
  </article>
);

const Steps = () => (
  <section className="sa-steps">
    <div className="sa-steps-wrap">
      <header className="sa-steps-head">
        <h2>
          Los <em>seis</em> pasos
        </h2>
        <span className="count">06 PASOS · ≈45 MIN ACTIVOS</span>
      </header>
      {STEPS.map((s) => (
        <Step key={s.n} data={s} />
      ))}
    </div>
  </section>
);

/* ============ HOT TAKES ============ */
const HotTakes = () => (
  <section className="sa-hottakes">
    <div className="sa-hottakes-wrap">
      <header className="sa-hottakes-head">
        <span className="lab">Las opiniones fuertes de Sam</span>
        <h2>
          Cosas de las que estoy <em>cansada</em> de ver
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>Confiar en el anclaje de plástico de la caja</h3>
          <p>
            Vinieron gratis con la cosa que compraste. Son gratis por una razón. Los tornillos de mariposa cuestan dos dólares. El espejo cuesta más de dos dólares. Matemáticas.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>Colgar sin encontrar la viga primero</h3>
          <p>
            Aunque acabes usando un anclaje, saber dónde están las vigas te dice dónde <em>no</em> están las vigas. Taladrar en un tubo porque te saltaste la revisión de vigas es un error de mil dólares.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>"Le pongo un clavo y ya"</h3>
          <p>
            Para una postal, está bien. Para algo que se rompe si se cae, no. Los clavos se salen rectos bajo carga. Los tornillos enroscan. Enroscar es el punto entero.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>Pedirle a alguien que "sostenga esto un segundo"</h3>
          <p>
            No pueden leer un nivel desde tu ángulo. Se cansan en ocho segundos. Quieren estar haciendo literalmente cualquier otra cosa. <em>Cuélgalo tú.</em> De eso se trata este artículo.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ WHAT I'D DO DIFFERENTLY ============ */
const Redo = () => (
  <section className="sa-redo">
    <div className="sa-redo-wrap">
      <aside className="sa-redo-side">
        lo que haría
        <br />
        <em style={{ color: "#D97A4F" }}>diferente</em>
        <svg viewBox="0 0 80 60" fill="none">
          <path d="M5 12 C 25 6, 55 14, 70 38" stroke="#91A86C" strokeWidth="2" strokeLinecap="round" />
          <path d="M64 30 L 70 38 L 60 42" stroke="#91A86C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </aside>
      <div>
        <h2>
          Lo que haría <em>diferente</em> la próxima vez
        </h2>
        <p>
          La primera cosa pesada que colgué sola, usé los anclajes de plástico que vinieron en la caja. En un mes el espejo estaba inclinado. En dos meses estaba en el piso. <strong>Los anclajes de plástico de la caja son decorativos.</strong> No cargan peso. Usa un anclaje de verdad.
        </p>
        <p>
          Lo que le diría a la <strong>Sam de antes</strong>: compra un nivel más largo del que crees que necesitas. El nivel de 24 pulgadas es el mínimo. El de 48 es mejor. Lo vas a usar en cada estante, cada pared de galería, cada cortinero por el resto de tu vida. Mientras más largo el nivel, más preciso el resultado.
        </p>
        <p>
          Y pondría el paso de la foto antes del paso de ajustar. Una vez que has ajustado a mano dos veces, tus ojos te mienten. La foto no miente. <em>Confía en la foto.</em>
        </p>
      </div>
    </div>
  </section>
);

/* ============ COMMENTS ============ */
const Comments = () => (
  <section className="sa-comments">
    <div className="sa-comments-wrap">
      <header className="sa-comments-head">
        <h2>
          De los <em>lectores</em>
        </h2>
        <span className="meta">19 CARTAS · ESPEJOS, SOBRE TODO</span>
      </header>

      <div className="sa-comment">
        <div className="who">
          <span className="n">James T.</span>
          <span>Brooklyn, NY</span>
          <span className="when">hace 1 semana</span>
        </div>
        <div className="body">
          <p>
            Tengo 47 años y nunca he tenido un taladro. Tu ensayo de "compra el más barato y ya" me convenció de intentarlo, y colgué unos estantes en el cuarto de mi hija. Ahora cree que soy un mago.
          </p>
          <div className="sa-reply">
            <span className="lab">Sam respondió</span>
            <p>
              James, SÍ eres un mago. No le digas el truco.
              <span className="sig">— S</span>
            </p>
          </div>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Priya K.</span>
          <span>Toronto, ON</span>
          <span className="when">hace 2 semanas</span>
        </div>
        <div className="body">
          <p>
            Pregunta — seguí esta guía pero mis paredes son de yeso y listón, no de tablaroca. ¿Anclajes diferentes? ¿O el método entero está mal?
          </p>
          <div className="sa-reply">
            <span className="lab">Sam respondió</span>
            <p>
              el yeso lleva su propia guía — sale el mes que viene. Espérate, haces bien en ser cuidadosa. Los anclajes de yeso son otra cosa.
              <span className="sig">— S</span>
            </p>
          </div>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Reggie B.</span>
          <span>Atlanta, GA</span>
          <span className="when">hace 3 semanas</span>
        </div>
        <div className="body">
          <p>
            Colgué un espejo de 18 kilos sobre la mesita de la entrada solo. Tornillos de mariposa, dos, en la tablaroca arriba del marco de la puerta. Sólido. Mi esposa llegó a la casa y asumió que me habían ayudado. No me ayudaron.
          </p>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Sara M.</span>
          <span>Seattle, WA</span>
          <span className="when">hace 1 mes</span>
        </div>
        <div className="body">
          <p>
            Taladré un cable en mi primer intento. Saltó el breaker, sin fuego, sin lesión, pero tuve que llamar a un electricista por $180 para arreglar el interior de la pared. Lección: la regla "si pegas con algo duro, para" no es una sugerencia.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ SIGNOFF ============ */
const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          Eso es todo. <em>Cuelga la cosa.</em>
        </h2>
        <p>
          Si terminaste — o te quedaste atascado a la mitad sosteniendo un taladro y dudando — manda una foto. Leo todo lo que llega. Fotos de triunfo preferidas. Fotos de fracaso también bienvenidas.
        </p>
        <div className="sig">— Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            Mandar una foto →
          </a>
          <a href="/es/contributors/sam/" className="btn ghost">
            Más de Sam
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">Lee a continuación</span>
        <a href="/es/contributors/sam/how-to-refinish-a-thrifted-chair/">
          <span>Restaurar una silla de segunda mano</span>
          <span className="m">3 HRS</span>
        </a>
        <a href="/en/install/living-room/">
          <span>Instalar × Sala — montajes y colgados</span>
          <span className="m">HUB</span>
        </a>
        <a href="/en/install/bedroom/">
          <span>Instalar × Recámara — estantes, marcos, lámparas</span>
          <span className="m">HUB</span>
        </a>
        <a href="/es/contributors/sam/">
          <span>Todas las guías de Sam</span>
          <span className="m">PERFIL</span>
        </a>
      </div>
    </div>
  </section>
);

/* ============ ROOT ============ */
const Article = () => (
  <div className="sa">
    <Crumbs />
    <Hero />
    <Lede />
    <WhatYouNeed />
    <Steps />
    <HotTakes />
    <Redo />
    <Comments />
    <Signoff />
  </div>
);

ReactDOM.createRoot(document.getElementById("render-target")).render(<Article />);