/* 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="/">首页</a>
      <span>/</span>
      <a href="/zh/contributors/sam/">Sam</a>
      <span>/</span>
      <span>How-to</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>挂起重物</span>
    </div>
    <div className="r">
      <span>第 04 期 · 2026春</span>
      <span className="by">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">Sam 撰稿</span>
        </div>
        <h1>
          如何独立挂起<em>重物</em>
        </h1>
        <p className="standfirst">
          墙赢不了。龙骨探测仪、合适的膨胀件、一把水平尺、预先打好的引导孔，再加上后退一步再判断它是否歪了的自律。六步，45分钟，不需要第二个人。
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>时间</span>
          <span className="v">~45 分钟 <span style={{opacity:0.5}}>+ 补墙，如有</span></span>
        </div>
        <div className="row">
          <span>花费</span>
          <span className="v">$8–$15</span>
        </div>
        <div className="row">
          <span>难度</span>
          <span className="v">倔强可行</span>
        </div>
        <div className="row">
          <span>脏乱程度</span>
          <span className="v warn">●○○ 灰尘</span>
        </div>
        <div className="row">
          <span>更新于</span>
          <span className="v">2026春</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble">
      不需要第二个人。<u>保证</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">本篇内容</div>
        <ul>
          <li>那面镜子已经被搬来搬去</li>
          <li>你真正需要的</li>
          <li>六个步骤</li>
          <li>Sam的犀利观点</li>
          <li>下次我会怎么改进</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          那面镜子你已经在房间之间挪了三周，因为你定不下来挂哪儿。你定下来了。<em>就那儿。</em>那面墙。今天。
        </p>

        <p>
          而你不会找任何人帮忙。你不需要第二个人。你需要的是龙骨探测仪、合适的膨胀件、一把水平尺，以及<strong>在判断它歪了之前先后退一步的自律。</strong>整个项目做对了45分钟，要补一个洞就两小时——我们要做对。
        </p>

        <div className="sa-pullquote">
          <p>
            石膏板单独承不住任何真正的载荷。墙是石膏加纸。龙骨是木头。找木头，或者用真膨胀件。
          </p>
        </div>

        <p>
          那一句话就是整篇文章。剩下的只是怎么找到木头、什么算真膨胀件、以及为什么你应该买四美元的水平尺而不是相信你的眼睛。
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Sam的笔记</span>
        <h4>钻任何地方之前</h4>
        <p>
          如果你的房子建于1980年之前，墙可能是灰泥板条墙，不是石膏板。<em>不同的膨胀件。</em>不同的规则。如果你敲过去整面墙都是闷-钝-闷-钝，那就是灰泥——停下来查一下灰泥膨胀件。
        </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 / 工具</div>
        <h2>
          你<em>真正</em>需要的
        </h2>
        <p className="body">
          总预算：<strong>$8–$15</strong>的材料。大部分是水平尺的钱——而水平尺是你接下来一辈子每个项目都会用到的东西。<strong>买那把四美元的水平尺。</strong>
        </p>

        <div className="sa-need-dont">
          <span className="lab">不用费心</span>
          <ul>
            <li>
              盒子里附送的塑料膨胀件
              <span className="why">最多算装饰品。弹簧螺栓才是答案。</span>
            </li>
            <li>
              凭眼测水平
              <span className="why">你会知道。每天。年复一年。</span>
            </li>
            <li>
              钉根钉子赌一把
              <span className="why">两磅以内的画框可以。重的东西不行。</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            龙骨探测仪（或你的指关节）
            <span className="why">最便宜的$8–15。或者用指关节免费测。</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            电钻（无线，任何尺寸）
            <span className="why">没有就借。别为挂面镜子买300美元的。</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            气泡水平尺（24英寸或更长）
            <span className="why">任何五金店4美元。这个项目上最值的四块钱。</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            弹簧螺栓 或 螺纹石膏板膨胀件
            <span className="why">承载力是负重的两倍。读标签。</span>
          </span>
          <span className="qty">×2–4</span>
        </li>
        <li>
          <span className="item">
            一颗好螺丝，长度匹配膨胀件
            <span className="why">通常会跟膨胀件一起包装。</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            铅笔
            <span className="why">用来标龙骨和位置。不要记号笔。铅笔。</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            咖啡
            <span className="why">不可商量。</span>
          </span>
          <span className="qty">×1杯</span>
        </li>
      </ul>
    </div>
  </section>
);

/* ============ STEPS ============ */
const STEPS = [
  {
    n: "01",
    phase: "找 · 5 分钟",
    title: "先找龙骨。永远先找龙骨。",
    flip: false,
    body: (
      <>
        <p>
          用指关节沿墙敲，直到声音从<em>空响</em>变成<em>实响</em>。那就是龙骨。那就是你现在最好的朋友。龙骨探测仪也行——但说实话指关节免费而且已经长在你身上了。
        </p>
        <p>
          龙骨通常以中心间距<strong>16英寸</strong>排列。找到一根，下一根通常不查也能找到。每根都用铅笔做记号，免得你开始钻孔时搞丢位置。
        </p>
      </>
    ),
    tip: { lab: "指关节 vs 龙骨探测仪", text: "指关节测试更快也免费，但龙骨探测仪在灰泥墙和带保温层的墙里更可靠。如果你是新手，买那把10美元的龙骨探测仪。第一次帮你避开一个洞它就回本了。" },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "图 01 · 龙骨",
      cap: "石膏板后面的木头。",
    },
    says: "找到的每根龙骨都做记号，不是只标你要用的那根。下次你还会用到。",
  },
  {
    n: "02",
    phase: "膨胀件 · 5 分钟",
    title: "如果你需要的位置没有龙骨，用合适的膨胀件。",
    flip: true,
    body: (
      <>
        <p>
          不是所有膨胀件都一样。买东西时盒子里附送的塑料小件通常是<em>垃圾</em>。买弹簧螺栓或螺纹石膏板膨胀件，承载力高于你要挂的东西。
        </p>
        <p>
          <strong>翻倍。</strong>什么都别信。膨胀件标签上写着额定载荷——买之前读一下。一面重镜比你想象的重。一面重镜加上一个吊在它上面的孩子更重。
        </p>
      </>
    ),
    warn: { lab: "注意", text: "如果你要挂的衣帽钩会承担真衣服的重量，必须打进龙骨。不要膨胀件。衣帽钩失效是戏剧性的——它承受的重量永远超出你预期，失效模式是钩子把一块墙拽下来。" },
    fig: {
      img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1200&q=80",
      tag: "图 02 · 膨胀件",
      cap: "金属，螺纹，有评级。",
    },
  },
  {
    n: "03",
    phase: "调平 · 1 分钟",
    title: "用水平尺。",
    flip: false,
    body: (
      <>
        <p>
          我知道你以为你能目测。<em>你不能。</em>没人能。<strong>用水平尺。</strong>多花四十秒。你会每天都盯着那东西看，差半度你都会知道。
        </p>
        <p>
          水平尺在任何五金店都是四美元。这是这个项目上你能花的最划算的四美元。如果你还没有，做这篇文章里任何事之前先买一把。
        </p>
      </>
    ),
    tip: { lab: "手机水平仪APP", text: "能用，但比真气泡水平尺慢，而且要你稳住手机。气泡水平尺更快、更准，不需要充电。买气泡水平尺。" },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "图 03 · 水平尺",
      cap: "你能买到最便宜的保险。",
    },
    says: "把水平尺架在镜框顶上，不是墙上。镜子是人会看到的部分。墙不是。",
  },
  {
    n: "04",
    phase: "钻 · 2 分钟",
    title: "先打引导孔。",
    flip: true,
    body: (
      <>
        <p>
          别硬把螺丝直接拧进石膏板。先打一个比螺丝略小的引导孔。<em>进去更干净。咬合更牢。墙也更尊重它。</em>
        </p>
        <p>
          如果你用膨胀件，膨胀件盒子告诉你用哪个钻头——严格按它来。如果你打进龙骨，1/16英寸的引导孔够了。
        </p>
      </>
    ),
    warn: { lab: "如果碰到硬东西", text: "停。立刻。那不是水管就是电线，今天它们都不是你的朋友。拔出来，往边上挪四英寸再试。墙里有东西，墙里那些东西比这面镜子重要。" },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "图 04 · 引导孔",
      cap: "小，刻意，有意为之。",
    },
  },
  {
    n: "05",
    phase: "挂 · 5 分钟",
    title: "挂上去。后退。别碰它。",
    flip: false,
    body: (
      <>
        <p>
          把东西挂上去。后退。<em>盯它看十秒再判断它歪了。</em>
        </p>
        <p>
          它大概率没歪。你只是还没习惯它在那儿。如果十秒后还是不舒服，并且水平尺确认确实倾斜了，那再调。<strong>如果你因为"感觉"不对就调了，而水平尺说没问题，你已经把它弄歪了。</strong>相信水平尺，别相信你的眼睛。
        </p>
      </>
    ),
    tip: { lab: "拍一张照片", text: "从屋子另一端拍，开闪光灯。相机会看到你眼睛看不到的——细微倾斜、视差错觉、灰尘。根据照片调，不是根据现场看。照片就是别人进门时会看到的样子。" },
    fig: {
      img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80",
      tag: "图 05 · 挂",
      cap: "十秒规则。永远。",
    },
    says: "如果你调了三次，停。走开。煮咖啡。五分钟后再回来。你的眼睛会重新校准。",
  },
  {
    n: "06",
    phase: "完成",
    title: "胜利时刻。",
    flip: true,
    body: (
      <>
        <p>
          挂上了。是平的。没东西掉下来。<em>你没找任何人帮忙也不需要。</em>
        </p>
        <p>
          <strong>就这样。</strong>拍张照。发给那个怀疑你的人。继续过你的生活。独自挂起一件重物有一种特别的满足感——比项目本身大，比宗教体验小。坐下来感受一秒。
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80",
      tag: "图 06 · 胜利",
      cap: "墙没赢。",
    },
    says: "如果是镜子，你独自挂完镜子后看到的第一张脸就是你自己的。那是一张很好的脸。",
  },
];

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>
          <em>六</em>个步骤
        </h2>
        <span className="count">06 步 · 约 45 分钟实操</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">Sam的犀利观点</span>
        <h2>
          我看<em>烦了</em>的事
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>相信盒子里那个塑料膨胀件</h3>
          <p>
            它们随你买的东西免费送。免费是有原因的。弹簧螺栓两美元。镜子超过两美元。算一下。
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>不先找龙骨就挂</h3>
          <p>
            就算你最后用膨胀件，知道龙骨在哪也告诉你<em>不是</em>龙骨的地方在哪。因为跳过龙骨检查而钻进水管，是上千美元的错误。
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>"我用根钉子就行"</h3>
          <p>
            一张明信片，可以。任何掉下来会坏的东西，不行。钉子在受力下会直接拔出来。螺丝是螺纹咬合。咬合就是关键。
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>找人"帮我扶一下"</h3>
          <p>
            他们从他们的角度读不出水平尺。他们八秒就累了。他们更想做世界上任何其他事。<em>自己挂。</em>这篇文章就是讲这个的。
          </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">
        下次我会
        <br />
        <em style={{ color: "#D97A4F" }}>怎么改进</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>
          下次我会怎么<em>改进</em>
        </h2>
        <p>
          我第一次独自挂重物时，用了盒子里附送的塑料膨胀件。一个月之内镜子就开始倾斜。两个月之内它躺在地上了。<strong>盒子里附送的塑料膨胀件是装饰品。</strong>它们不承重。用真膨胀件。
        </p>
        <p>
          我会告诉<strong>过去的自己</strong>：买一把比你以为需要的更长的水平尺。24英寸是底线。48英寸更好。接下来一辈子的搁板、画廊墙、窗帘杆你都会用到。水平尺越长，读数越准。
        </p>
        <p>
          还有，把拍照那一步放在调整那一步前面。一旦你手动调过两次，你的眼睛就会骗你。照片不会骗。<em>相信照片。</em>
        </p>
      </div>
    </div>
  </section>
);

/* ============ COMMENTS ============ */
const Comments = () => (
  <section className="sa-comments">
    <div className="sa-comments-wrap">
      <header className="sa-comments-head">
        <h2>
          来自<em>读者</em>
        </h2>
        <span className="meta">19 封信 · 大多数是镜子</span>
      </header>

      <div className="sa-comment">
        <div className="who">
          <span className="n">James T.</span>
          <span>Brooklyn, NY</span>
          <span className="when">1 周前</span>
        </div>
        <div className="body">
          <p>
            我47岁了，从来没拥有过一把电钻。你那篇"就买最便宜的"的文章说服我试了一下，我给女儿房间装了几个搁板。她现在觉得我是个魔法师。
          </p>
          <div className="sa-reply">
            <span className="lab">Sam 回复</span>
            <p>
              James 你就是个魔法师。别告诉她诀窍。
              <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 周前</span>
        </div>
        <div className="body">
          <p>
            问题——我跟着这篇做了，但我家的墙是灰泥板条墙，不是石膏板。要换不同的膨胀件吗？还是整个方法都不对？
          </p>
          <div className="sa-reply">
            <span className="lab">Sam 回复</span>
            <p>
              灰泥墙要单独写一篇——下个月发。先别动手，你警觉得对。灰泥膨胀件是另一个物种。
              <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 周前</span>
        </div>
        <div className="body">
          <p>
            独自在玄关边几上方挂了一面40磅的镜子。两颗弹簧螺栓，打进门框上方的石膏板。稳得很。老婆回家以为我找了人帮忙。我没有。
          </p>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Sara M.</span>
          <span>Seattle, WA</span>
          <span className="when">1 个月前</span>
        </div>
        <div className="body">
          <p>
            第一次尝试就钻到了一根电线。跳闸了，没起火也没受伤，但我得叫电工花180美元修墙里面的东西。教训：那条"碰到硬东西就停"的规则不是建议。
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ SIGNOFF ============ */
const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          就这样。<em>把它挂上。</em>
        </h2>
        <p>
          如果你完成了——或者你卡在中间，举着电钻在自我怀疑——发张照片来。寄进来的我都读。胜利照优先。失败照也欢迎。
        </p>
        <div className="sig">— Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            寄一张照片 →
          </a>
          <a href="/zh/contributors/sam/" className="btn ghost">
            更多Sam的内容
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">接着读</span>
        <a href="/zh/contributors/sam/how-to-refinish-a-thrifted-chair/">
          <span>翻新二手椅子</span>
          <span className="m">3 小时</span>
        </a>
        <a href="/en/install/living-room/">
          <span>安装 × 客厅 — 安装与悬挂</span>
          <span className="m">中心页</span>
        </a>
        <a href="/en/install/bedroom/">
          <span>安装 × 卧室 — 搁板、画框、灯具</span>
          <span className="m">中心页</span>
        </a>
        <a href="/zh/contributors/sam/">
          <span>Sam的全部指南</span>
          <span className="m">主页</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 />);