/* 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="/">Início</a>
      <span>/</span>
      <a href="/pt/contributors/sam/">Sam</a>
      <span>/</span>
      <span>How-to</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>Pendurar algo pesado</span>
    </div>
    <div className="r">
      <span>Edição 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>How-to</span>
          <span className="dot">●</span>
          <span>No. 02</span>
          <span className="dot">●</span>
          <span className="sig">escrito por Sam</span>
        </div>
        <h1>
          Como pendurar <em>algo pesado</em> sem pedir ajuda
        </h1>
        <p className="standfirst">
          A parede não vai ganhar. Localizador de montantes, a bucha certa, um nível, um furo-guia pré-feito, e a disciplina de dar dois passos atrás antes de decidir que está torto. Seis passos, 45 minutos, sem precisar de uma segunda pessoa.
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>Tempo</span>
          <span className="v">~45 min <span style={{opacity:0.5}}>+ tapar buraco, se</span></span>
        </div>
        <div className="row">
          <span>Custo</span>
          <span className="v">$8–$15</span>
        </div>
        <div className="row">
          <span>Habilidade</span>
          <span className="v">Teimosamente fazível</span>
        </div>
        <div className="row">
          <span>Sujeira</span>
          <span className="v warn">●○○ Poeira</span>
        </div>
        <div className="row">
          <span>Atualizado</span>
          <span className="v">Primavera '26</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble">
      sem segunda pessoa. <u>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">Neste guia</div>
        <ul>
          <li>O espelho está se mudando</li>
          <li>O que você realmente precisa</li>
          <li>Os 6 passos</li>
          <li>Opiniões fortes</li>
          <li>O que eu faria diferente</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          Você está movendo aquele espelho de cômodo em cômodo há três semanas porque não consegue decidir onde ele vai. Você decidiu. <em>Vai ali.</em> Naquela parede. Hoje.
        </p>

        <p>
          E você não vai pedir ajuda pra ninguém. Você não precisa de uma segunda pessoa. Você precisa de um localizador de montantes, a bucha certa, um nível, e a disciplina de <strong>dar dois passos atrás antes de decidir que está torto.</strong> O projeto inteiro leva quarenta e cinco minutos se você fizer direito e duas horas se tiver que tapar um buraco — e a gente vai fazer direito.
        </p>

        <div className="sa-pullquote">
          <p>
            Drywall sozinho não segura parafuso sob carga real. A parede é gesso e papel. Os montantes são madeira. Ache a madeira, ou use uma bucha de verdade.
          </p>
        </div>

        <p>
          Essa frase é o artigo inteiro. O resto é só como achar a madeira, o que conta como bucha de verdade, e por que você deveria comprar um nível de quatro dólares em vez de confiar nos seus olhos.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Nota do Sam</span>
        <h4>Antes de furar qualquer lugar</h4>
        <p>
          Se sua casa foi construída antes de 1980, a parede pode ser de gesso e ripa, não drywall. <em>Buchas diferentes.</em> Regras diferentes. Se bater soa abafado-pancada-abafado-pancada por toda a parede, é gesso — pare e pesquise buchas de gesso.
        </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 / Ferramentas</div>
        <h2>
          O que você <em>realmente</em> precisa
        </h2>
        <p className="body">
          Orçamento total: <strong>$8–$15</strong> em materiais. A maior parte do custo é o nível — e o nível é a coisa que você vai usar em todo projeto pelo resto da sua vida. <strong>Compre o nível de quatro dólares.</strong>
        </p>

        <div className="sa-need-dont">
          <span className="lab">Não perca tempo com</span>
          <ul>
            <li>
              As buchas plásticas que vieram na caixa
              <span className="why">Decorativas no máximo. Parafusos toggle são a jogada.</span>
            </li>
            <li>
              Calcular o nível no olho
              <span className="why">Você vai saber. Todo dia. Por anos.</span>
            </li>
            <li>
              Bater um prego e torcer
              <span className="why">Pra moldura abaixo de um quilo, ok. Pra qualquer coisa pesada, não.</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            Localizador de montantes (ou seu nó dos dedos)
            <span className="why">$8–15 pelo mais barato. Ou use o teste do nó dos dedos de graça.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Furadeira (sem fio, qualquer tamanho)
            <span className="why">Pegue emprestado se não tem. Não compre uma de $300 pra pendurar um espelho.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Nível de bolha (24" ou maior)
            <span className="why">$4 em qualquer loja de ferragens. Os melhores quatro dólares que você gasta nesse projeto.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Parafusos toggle OU buchas rosqueadas de drywall
            <span className="why">Carga pro dobro do peso que está pendurando. Leia o rótulo.</span>
          </span>
          <span className="qty">×2–4</span>
        </li>
        <li>
          <span className="item">
            Um parafuso bom, comprimento compatível com a bucha
            <span className="why">Geralmente vem no pacote da bucha.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Lápis
            <span className="why">Pra marcar montantes e o ponto. Não Sharpie. Lápis.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Café
            <span className="why">Não-negociável.</span>
          </span>
          <span className="qty">×1 caneca</span>
        </li>
      </ul>
    </div>
  </section>
);

/* ============ STEPS ============ */
const STEPS = [
  {
    n: "01",
    phase: "Achar · 5 min",
    title: "Ache o montante primeiro. Sempre.",
    flip: false,
    body: (
      <>
        <p>
          Bata na parede com o nó dos dedos até o som mudar de <em>oco</em> pra <em>sólido</em>. Esse é o montante. Esse é seu melhor amigo agora. Um localizador de montantes também funciona — mas honestamente, seu nó dos dedos é grátis e já está preso em você.
        </p>
        <p>
          Montantes geralmente ficam <strong>dezesseis polegadas de distância de centro a centro.</strong> Quando achar um, normalmente dá pra achar o próximo sem checar. Marque cada um com lápis pra não perder o controle quando começar a furar.
        </p>
      </>
    ),
    tip: { lab: "Nó dos dedos vs localizador", text: "O teste do nó dos dedos é mais rápido e grátis, mas localizadores são mais confiáveis em paredes de gesso e com isolamento. Se você é novo nisso, compra o localizador de $10. Ele se paga na primeira vez que te salva de um buraco." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 01 · O montante",
      cap: "madeira, atrás do gesso.",
    },
    says: "Marca todos os montantes que achar, não só o que está usando. Vai precisar deles na próxima.",
  },
  {
    n: "02",
    phase: "Bucha · 5 min",
    title: "Se não tem montante onde você precisa, use a bucha certa.",
    flip: true,
    body: (
      <>
        <p>
          Nem todas as buchas de parede são iguais. As pequenas plásticas que vêm na caixa com a coisa que você comprou geralmente são <em>lixo</em>. Pegue um parafuso toggle ou uma bucha rosqueada de drywall com carga maior do que o peso do que você está pendurando.
        </p>
        <p>
          <strong>Dobre.</strong> Não confie em nada. O rótulo da bucha te diz a carga nominal — leia antes de comprar. Um espelho pesado pesa mais do que você imagina. Um espelho mais uma criança puxando pesa ainda mais.
        </p>
      </>
    ),
    warn: { lab: "Atenção", text: "Se está pendurando um cabide de casacos que vai segurar casacos de verdade, vai num montante. Sem bucha. Cabides de casacos falham dramaticamente — pegam mais peso do que você espera, e a falha é o cabide arrancando um pedaço da parede." },
    fig: {
      img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1200&q=80",
      tag: "Fig 02 · A bucha",
      cap: "metal, rosqueada, com carga.",
    },
  },
  {
    n: "03",
    phase: "Nivelar · 1 min",
    title: "Use um nível.",
    flip: false,
    body: (
      <>
        <p>
          Eu sei que você acha que consegue calcular no olho. <em>Você não consegue.</em> Ninguém consegue. <strong>Use o nível.</strong> Gaste os quarenta segundos a mais. Você vai olhar pra essa coisa todo dia e vai saber se está meio grau fora.
        </p>
        <p>
          O nível custa quatro dólares em qualquer loja de ferragens. É os melhores quatro dólares que você pode gastar nesse projeto. Se você não tem um ainda, compra antes de fazer qualquer outra coisa desse artigo.
        </p>
      </>
    ),
    tip: { lab: "Apps de nível no celular", text: "Funcionam, mas são mais lentos que um nível de bolha de verdade e exigem que você segure o celular firme. O nível de bolha é mais rápido, mais preciso e não precisa de carga. Pega o nível de bolha." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 03 · O nível",
      cap: "o seguro mais barato que você compra.",
    },
    says: "Apoia o nível em cima da moldura do espelho, não na parede. O espelho é o que as pessoas vão ver. A parede é o que as pessoas não vão ver.",
  },
  {
    n: "04",
    phase: "Furar · 2 min",
    title: "Faça o furo-guia.",
    flip: true,
    body: (
      <>
        <p>
          Não force o parafuso direto no drywall. Faça um furo-guia ligeiramente menor que o parafuso. <em>Entra mais limpo. Segura melhor. A parede respeita mais.</em>
        </p>
        <p>
          Se está usando uma bucha, a caixa da bucha te diz qual broca usar — siga exatamente. Se está indo num montante, um furo-guia de 1/16-inch é mais que suficiente.
        </p>
      </>
    ),
    warn: { lab: "Se você bater em algo duro", text: "Pare. Imediatamente. Isso é cano ou fio e nenhum dos dois é seu amigo hoje. Tira, move quatro polegadas pro lado, tenta de novo. A parede tem coisa dentro e a coisa dentro é mais importante que o espelho." },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "Fig 04 · O guia",
      cap: "pequeno, deliberado, de propósito.",
    },
  },
  {
    n: "05",
    phase: "Pendurar · 5 min",
    title: "Pendure. Dá dois passos atrás. Não toca.",
    flip: false,
    body: (
      <>
        <p>
          Pendure a coisa. Dá dois passos atrás. <em>Olha pra ele por dez segundos antes de decidir que está torto.</em>
        </p>
        <p>
          Provavelmente não está torto. Você só não está acostumado a ele estar ali ainda. Se ainda está te incomodando depois de dez segundos e o nível confirma uma inclinação, aí ajusta. <strong>Se você ajustou porque "sentiu" que estava errado e o nível diz que está certo, você é que tornou torto de verdade.</strong> Confie no nível mais que nos seus olhos.
        </p>
      </>
    ),
    tip: { lab: "Tira foto", text: "Do outro lado da sala, com flash. A câmera vê o que seus olhos não veem — inclinações sutis, ilusões de paralaxe, poeira. Ajusta com base na foto, não na vista pessoal. A foto é o que as pessoas vão ver quando entrarem." },
    fig: {
      img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80",
      tag: "Fig 05 · O pendurar",
      cap: "regra dos dez segundos. sempre.",
    },
    says: "Se você ajustar três vezes, para. Sai. Faz café. Volta em cinco minutos. Seus olhos recalibram.",
  },
  {
    n: "06",
    phase: "Pronto",
    title: "O momento da vitória.",
    flip: true,
    body: (
      <>
        <p>
          Está pendurado. Está nivelado. Nada caiu. <em>Você não pediu ajuda pra ninguém e não precisou.</em>
        </p>
        <p>
          <strong>É isso.</strong> Tira foto. Manda pra quem duvidou de você. Segue a vida. Tem uma satisfação específica em pendurar uma coisa pesada sozinho — maior que o projeto, menor que uma experiência religiosa. Curte o momento por um segundo.
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80",
      tag: "Fig 06 · A vitória",
      cap: "a parede não ganhou.",
    },
    says: "Se for um espelho, a primeira coisa que você vê é seu rosto depois de pendurar um espelho sozinho. Esse é um bom rosto.",
  },
];

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>
          Os <em>seis</em> passos
        </h2>
        <span className="count">06 PASSOS · ≈45 MIN ATIVOS</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">Opiniões fortes da Sam</span>
        <h2>
          Coisas que estou <em>cansada</em> de ver
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>Confiar na bucha plástica da caixa</h3>
          <p>
            Vieram de graça com a coisa que você comprou. Estão de graça por um motivo. Parafusos toggle custam dois dólares. O espelho custa mais que dois dólares. Matemática.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>Pendurar sem achar o montante primeiro</h3>
          <p>
            Mesmo que você acabe usando uma bucha, saber onde os montantes estão te diz onde os <em>não</em>-montantes estão. Furar um cano porque pulou a checagem do montante é um erro de mil dólares.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>"Vou usar um prego"</h3>
          <p>
            Pra um cartão postal, ok. Pra qualquer coisa que quebra se cair, não. Pregos saem direto sob carga. Parafusos rosqueiam. A rosca é o ponto inteiro.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>Pedir pra alguém "segurar isso um segundinho"</h3>
          <p>
            Eles não conseguem ler o nível do seu ângulo. Cansam em oito segundos. Querem estar fazendo literalmente qualquer outra coisa. <em>Pendura sozinho.</em> É sobre isso que esse artigo fala.
          </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">
        o que eu faria
        <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>
          O que eu faria <em>diferente</em> da próxima vez
        </h2>
        <p>
          A primeira coisa pesada que pendurei sozinha, usei as buchas plásticas que vieram na caixa. Em um mês o espelho estava inclinando. Em dois meses estava no chão. <strong>As buchas plásticas que vieram na caixa são decorativas.</strong> Não são estruturais. Use uma bucha de verdade.
        </p>
        <p>
          O que eu diria pra <strong>mim do passado</strong>: compre um nível mais longo do que você acha que precisa. O de 24 polegadas é o mínimo. O de 48 é melhor. Você vai usar em toda prateleira, toda parede de quadros, todo varão de cortina pelo resto da vida. Quanto mais longo o nível, mais precisa a leitura.
        </p>
        <p>
          E eu colocaria o passo da foto antes do passo do ajuste. Depois de ajustar manualmente duas vezes, seus olhos mentem pra você. A foto não mente. <em>Confia na foto.</em>
        </p>
      </div>
    </div>
  </section>
);

/* ============ COMMENTS ============ */
const Comments = () => (
  <section className="sa-comments">
    <div className="sa-comments-wrap">
      <header className="sa-comments-head">
        <h2>
          Dos <em>leitores</em>
        </h2>
        <span className="meta">19 CARTAS · ESPELHOS, EM SUA MAIORIA</span>
      </header>

      <div className="sa-comment">
        <div className="who">
          <span className="n">James T.</span>
          <span>Brooklyn, NY</span>
          <span className="when">1 semana atrás</span>
        </div>
        <div className="body">
          <p>
            Tenho 47 anos e nunca tive uma furadeira. Seu texto do "compre a mais barata" me convenceu a tentar, e eu pendurei prateleiras no quarto da minha filha. Agora ela acha que eu sou um mago.
          </p>
          <div className="sa-reply">
            <span className="lab">Sam respondeu</span>
            <p>
              James, você É um mago. Não conta o truque pra ela.
              <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">2 semanas atrás</span>
        </div>
        <div className="body">
          <p>
            Pergunta — segui esse guia mas minhas paredes são de gesso e ripa, não drywall. Buchas diferentes? Ou a abordagem inteira está errada?
          </p>
          <div className="sa-reply">
            <span className="lab">Sam respondeu</span>
            <p>
              gesso ganha o próprio guia — sai mês que vem. Espera, você está certa em ter cautela. Buchas de gesso são um bicho diferente.
              <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">3 semanas atrás</span>
        </div>
        <div className="body">
          <p>
            Pendurei um espelho de 18kg sobre o aparador da entrada sozinho. Parafusos toggle, dois deles, no drywall acima do batente da porta. Firme. Minha esposa chegou em casa e achou que tinha conseguido ajuda. Não tinha.
          </p>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Sara M.</span>
          <span>Seattle, WA</span>
          <span className="when">1 mês atrás</span>
        </div>
        <div className="body">
          <p>
            Furei um fio na primeira tentativa. O disjuntor caiu, sem fogo, sem ferimentos, mas tive que chamar um eletricista por $180 pra consertar dentro da parede. Lição: a regra "se bater em algo duro, para" não é sugestão.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ SIGNOFF ============ */
const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          É isso. <em>Pendura a coisa.</em>
        </h2>
        <p>
          Se você terminou — ou empacou no meio segurando uma furadeira e duvidando de si — manda foto. Eu leio tudo que chega. Fotos de triunfo são preferidas. Fotos de fracasso também são bem-vindas.
        </p>
        <div className="sig">— Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            Mandar uma foto →
          </a>
          <a href="/pt/contributors/sam/" className="btn ghost">
            Mais da Sam
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">Leia em seguida</span>
        <a href="/pt/contributors/sam/how-to-refinish-a-thrifted-chair/">
          <span>Restaurar uma cadeira de brechó</span>
          <span className="m">3 HRS</span>
        </a>
        <a href="/en/install/living-room/">
          <span>Instalar × Sala — fixações e suportes</span>
          <span className="m">HUB</span>
        </a>
        <a href="/en/install/bedroom/">
          <span>Instalar × Quarto — prateleiras, molduras, luzes</span>
          <span className="m">HUB</span>
        </a>
        <a href="/pt/contributors/sam/">
          <span>Todos os guias da 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 />);