/* 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="/hi/contributors/sam/">Sam</a>
      <span>/</span>
      <span>How-to</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>भारी चीज़ टांगें</span>
    </div>
    <div className="r">
      <span>Issue 04 · Spring '26</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">
          दीवार नहीं जीतेगी। Stud finder, सही anchor, एक level, pre-drilled pilot hole, और तय करने से पहले कि टेढ़ा है पीछे हटने का अनुशासन। छह स्टेप्स, 45 मिनट, दूसरे व्यक्ति की कोई ज़रूरत नहीं।
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>समय</span>
          <span className="v">~45 मिनट <span style={{opacity:0.5}}>+ patching, अगर हो</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">Spring '26</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>Mirror घूमता रहा है</li>
          <li>तुम्हें असल में क्या चाहिए</li>
          <li>6 स्टेप्स</li>
          <li>हॉट टेक्स</li>
          <li>अगली बार मैं क्या अलग करूंगी</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          तुम पिछले तीन हफ़्तों से उस mirror को कमरे-दर-कमरे घुमा रहे हो क्योंकि तय नहीं कर पा रहे कि कहाँ रखा जाए। तुमने तय कर लिया। <em>वो वहाँ जाएगा।</em> उस दीवार पर। आज।
        </p>

        <p>
          और तुम किसी से मदद नहीं माँग रहे। तुम्हें दूसरे व्यक्ति की ज़रूरत नहीं। तुम्हें चाहिए एक stud finder, सही anchor, एक level, और <strong>तय करने से पहले कि टेढ़ा है पीछे हटने का अनुशासन।</strong> पूरा प्रोजेक्ट अगर ठीक से किया तो पैंतालीस मिनट लेता है और अगर छेद पैच करना पड़े तो दो घंटे — और हम ठीक से करने जा रहे हैं।
        </p>

        <div className="sa-pullquote">
          <p>
            अकेला drywall किसी भी असली load के नीचे screw नहीं संभालेगा। दीवार gypsum और कागज़ है। Studs लकड़ी हैं। लकड़ी ढूंढो, या असली anchor इस्तेमाल करो।
          </p>
        </div>

        <p>
          वो वाक्य पूरा article है। बाकी बस ये है कि लकड़ी कैसे ढूंढो, असली anchor क्या होता है, और तुम्हें अपनी आँखों पर भरोसा करने के बजाय चार-डॉलर का level क्यों ख़रीदना चाहिए।
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Sam का नोट</span>
        <h4>कहीं भी drill करने से पहले</h4>
        <p>
          अगर तुम्हारा घर 1980 से पहले बना है, तो दीवार plaster और lath हो सकती है, drywall नहीं। <em>अलग anchors।</em> अलग नियम। अगर knocking आर-पार dull-thud-dull-thud लगती है, वो plaster है — रुको और plaster anchors देखो।
        </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> सामान में। ज़्यादातर लागत level है — और level वो चीज़ है जो तुम बाकी ज़िंदगी हर प्रोजेक्ट पर इस्तेमाल करोगे। <strong>चार-डॉलर का level ख़रीदो।</strong>
        </p>

        <div className="sa-need-dont">
          <span className="lab">इन पर ध्यान मत दो</span>
          <ul>
            <li>
              डिब्बे में आए plastic anchors
              <span className="why">ज़्यादा से ज़्यादा सजावटी। Toggle bolts ही क़दम है।</span>
            </li>
            <li>
              Level को अंदाज़ से देखना
              <span className="why">तुम्हें पता चलेगा। हर दिन। सालों तक।</span>
            </li>
            <li>
              कील ठोकना और उम्मीद करना
              <span className="why">दो पाउंड से कम के frame के लिए, ठीक है। भारी कुछ के लिए, नहीं।</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            Stud finder (या तुम्हारी उँगली का जोड़)
            <span className="why">सबसे सस्ता $8–15। या मुफ़्त में knuckle test इस्तेमाल करो।</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Drill (cordless, कोई भी size)
            <span className="why">अगर तुम्हारे पास नहीं है तो उधार लो। Mirror टांगने के लिए $300 का मत ख़रीदो।</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Bubble level (24" या ज़्यादा लंबा)
            <span className="why">किसी भी hardware store में $4। इस प्रोजेक्ट पर ख़र्च किए जाने वाले सबसे अच्छे चार डॉलर।</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Toggle bolts या threaded drywall anchors
            <span className="why">तुम जो टांग रहे हो उसके दुगुने वज़न के लिए rated। लेबल पढ़ो।</span>
          </span>
          <span className="qty">×2–4</span>
        </li>
        <li>
          <span className="item">
            एक अच्छा screw, anchor से लंबाई match
            <span className="why">आमतौर पर anchor packet के साथ आता है।</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            पेंसिल
            <span className="why">Studs और जगह के निशान के लिए। Sharpie नहीं। पेंसिल।</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            कॉफ़ी
            <span className="why">गैर-समझौते वाला।</span>
          </span>
          <span className="qty">×1 mug</span>
        </li>
      </ul>
    </div>
  </section>
);

/* ============ STEPS ============ */
const STEPS = [
  {
    n: "01",
    phase: "ढूंढो · 5 मिनट",
    title: "पहले stud ढूंढो। हमेशा।",
    flip: false,
    body: (
      <>
        <p>
          उँगली के जोड़ से दीवार पर knock करो जब तक आवाज़ <em>खोखली</em> से <em>ठोस</em> न बदल जाए। वो stud है। वो अभी तुम्हारा सबसे अच्छा दोस्त है। Stud finder भी काम करता है — लेकिन ईमानदारी से तुम्हारी उँगली का जोड़ मुफ़्त है और पहले से तुम्हारे साथ है।
        </p>
        <p>
          Studs आमतौर पर <strong>सोलह इंच की दूरी पर on center</strong> होते हैं। एक बार एक मिल जाए, तुम बिना देखे अगला ढूंढ सकते हो। हर एक को पेंसिल में निशान लगाओ ताकि drilling शुरू करते वक़्त track न खोए।
        </p>
      </>
    ),
    tip: { lab: "Knuckle बनाम stud finder", text: "Knuckle test तेज़ और मुफ़्त है, लेकिन stud finders plaster दीवारों और insulation वाली दीवारों में ज़्यादा भरोसेमंद हैं। अगर तुम नए हो, $10 का stud finder ख़रीदो। पहली बार जब वो तुम्हें छेद से बचाता है तभी क़ीमत वसूल हो जाती है।" },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 01 · stud",
      cap: "लकड़ी, gypsum के पीछे।",
    },
    says: "हर stud पर निशान लगाओ जो मिले, सिर्फ़ वो नहीं जो तुम इस्तेमाल कर रहे। अगली बार ज़रूरत पड़ेगी।",
  },
  {
    n: "02",
    phase: "Anchor · 5 मिनट",
    title: "अगर जहाँ तुम्हें चाहिए वहाँ stud नहीं है, सही anchor इस्तेमाल करो।",
    flip: true,
    body: (
      <>
        <p>
          सभी wall anchors एक जैसे नहीं हैं। डिब्बे में जो छोटे plastic वाले आते हैं वो आमतौर पर <em>कचरा</em> हैं। एक toggle bolt या threaded drywall anchor लो जो तुम जो टांग रहे हो उससे ज़्यादा वज़न के लिए rated हो।
        </p>
        <p>
          <strong>दुगुना करो।</strong> कुछ पर भरोसा मत करो। Anchor पर लेबल तुम्हें rated load बताता है — ख़रीदने से पहले पढ़ो। एक भारी mirror तुम्हारी सोच से ज़्यादा वज़नी होता है। उस पर एक बच्चा खींच रहा हो तो और भी ज़्यादा।
        </p>
      </>
    ),
    warn: { lab: "ध्यान दें", text: "अगर तुम coat hook टांग रहे हो जो असली कोट लेगा, stud में जाओ। कोई anchor नहीं। Coat hooks नाटकीय रूप से fail होते हैं — उन पर तुम्हारी अपेक्षा से ज़्यादा वज़न आता है, और failure mode है hook का दीवार का चंक खींच कर निकाल लेना।" },
    fig: {
      img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1200&q=80",
      tag: "Fig 02 · anchor",
      cap: "धातु, threaded, rated।",
    },
  },
  {
    n: "03",
    phase: "Level · 1 मिनट",
    title: "level इस्तेमाल करो।",
    flip: false,
    body: (
      <>
        <p>
          मैं जानती हूँ तुम सोचते हो कि अंदाज़ से कर लोगे। <em>नहीं कर सकते।</em> कोई नहीं कर सकता। <strong>level इस्तेमाल करो।</strong> अतिरिक्त चालीस सेकंड दो। तुम उस चीज़ को रोज़ देखोगे और तुम्हें पता चलेगा अगर वो आधा-डिग्री टेढ़ी है।
        </p>
        <p>
          Level किसी भी hardware store में चार डॉलर का है। ये इस प्रोजेक्ट पर ख़र्च किए जाने वाले सबसे अच्छे चार डॉलर हैं। अगर तुम्हारे पास अभी नहीं है, तो इस article में कुछ भी करने से पहले एक ख़रीदो।
        </p>
      </>
    ),
    tip: { lab: "फ़ोन के level apps", text: "वो काम करते हैं, लेकिन असली bubble level से धीमे हैं और तुम्हें फ़ोन स्थिर पकड़ना पड़ता है। Bubble level तेज़, ज़्यादा सटीक है, और चार्ज नहीं चाहिए। Bubble level लो।" },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 03 · level",
      cap: "सबसे सस्ता बीमा जो तुम कभी ख़रीदोगे।",
    },
    says: "Level को mirror frame के ऊपर रखो, दीवार पर नहीं। Mirror वो है जो लोग देखेंगे। दीवार वो है जो लोग नहीं देखेंगे।",
  },
  {
    n: "04",
    phase: "Drill · 2 मिनट",
    title: "pilot hole pre-drill करो।",
    flip: true,
    body: (
      <>
        <p>
          Drywall में सीधे screw मत ठोको। अपने screw से थोड़ा छोटा pilot hole pre-drill करो। <em>ये साफ़ जाता है। बेहतर पकड़ता है। दीवार उसका ज़्यादा सम्मान करती है।</em>
        </p>
        <p>
          अगर anchor इस्तेमाल कर रहे हो, anchor का डिब्बा बताता है कौन सी drill bit इस्तेमाल करनी है — बिल्कुल मैच करो। अगर stud में जा रहे हो, तो 1/16-इंच का pilot hole काफ़ी है।
        </p>
      </>
    ),
    warn: { lab: "अगर कुछ कठोर लगे", text: "रुको। तुरंत। वो या तो pipe है या wire और इनमें से कोई भी आज तुम्हारा दोस्त नहीं है। बाहर निकालो, चार इंच साइड में जाओ, फिर कोशिश करो। दीवार के अंदर सामान है और वो mirror से ज़्यादा ज़रूरी है।" },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "Fig 04 · pilot",
      cap: "छोटा, सोच-समझ कर, जान-बूझकर।",
    },
  },
  {
    n: "05",
    phase: "टांगो · 5 मिनट",
    title: "टांगो। पीछे हटो। मत छुओ।",
    flip: false,
    body: (
      <>
        <p>
          चीज़ टांगो। पीछे हटो। <em>तय करने से पहले कि टेढ़ी है, दस सेकंड देखो।</em>
        </p>
        <p>
          शायद टेढ़ी नहीं है। तुम्हें बस वहाँ रहने की आदत नहीं हुई है। अगर दस सेकंड बाद भी परेशानी हो रही है और level tilt confirm करता है, तो adjust करो। <strong>अगर तुमने adjust किया क्योंकि "लग" रहा था और level कहता है ठीक है, तो तुमने उसे असल में टेढ़ा कर दिया।</strong> अपनी आँखों के बजाय level पर भरोसा करो।
        </p>
      </>
    ),
    tip: { lab: "फ़ोटो लो", text: "कमरे के पार से, flash on करके। Camera वो देखेगा जो तुम्हारी आँखें नहीं देख सकतीं — हल्के झुकाव, parallax भ्रम, धूल। Photo के आधार पर adjust करो, in-person view के नहीं। Photo वो है जो लोग कमरे में आते वक़्त देखेंगे।" },
    fig: {
      img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80",
      tag: "Fig 05 · टांगना",
      cap: "दस-सेकंड का नियम। हमेशा।",
    },
    says: "अगर तीन बार adjust करते हो, रुको। हट जाओ। कॉफ़ी बनाओ। पाँच मिनट में वापस आओ। तुम्हारी आँखें recalibrate हो जाएंगी।",
  },
  {
    n: "06",
    phase: "हो गया",
    title: "जीत का पल।",
    flip: true,
    body: (
      <>
        <p>
          टंगा है। Level है। कुछ नहीं गिरा। <em>तुमने किसी से मदद नहीं माँगी और ज़रूरत भी नहीं पड़ी।</em>
        </p>
        <p>
          <strong>बस इतना ही।</strong> फ़ोटो लो। जिसने भी शक किया था उसे भेजो। ज़िंदगी में आगे बढ़ो। अकेले एक भारी चीज़ टांगने में कुछ ख़ास तरह से संतुष्टि वाली बात है — प्रोजेक्ट से बड़ी, धार्मिक अनुभव से छोटी। एक पल उसके साथ बैठो।
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80",
      tag: "Fig 06 · जीत",
      cap: "दीवार नहीं जीती।",
    },
    says: "अगर ये mirror है, तो उसमें पहली चीज़ जो तुम देखोगे वो तुम्हारा चेहरा है खुद से mirror टांगने के बाद। वो अच्छा चेहरा है।",
  },
];

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 मिनट ACTIVE</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>डिब्बे के plastic anchor पर भरोसा करना</h3>
          <p>
            वो उस चीज़ के साथ मुफ़्त आए जो तुमने ख़रीदी। मुफ़्त में आने का एक कारण है। Toggle bolts दो डॉलर के हैं। Mirror दो डॉलर से ज़्यादा का है। गणित।
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>पहले stud ढूंढे बिना टांगना</h3>
          <p>
            अगर तुम anchor इस्तेमाल भी करते हो, ये जानना कि studs कहाँ हैं तुम्हें बताता है कि <em>नहीं</em>-studs कहाँ हैं। Stud check छोड़ने पर pipe में drilling करना हज़ार डॉलर की ग़लती है।
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>"मैं बस एक कील इस्तेमाल कर लूंगा"</h3>
          <p>
            पोस्टकार्ड के लिए, ठीक है। ऐसी कुछ भी जो गिरने पर टूट जाए, नहीं। कील load के नीचे सीधे निकल जाती है। Screws thread करते हैं। Threading ही पूरा बिंदु है।
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>किसी से "एक सेकंड पकड़ लो" कहना</h3>
          <p>
            वो तुम्हारे कोण से level नहीं पढ़ सकते। आठ सेकंड में थक जाते हैं। वो शाब्दिक रूप से कुछ और करना चाहते हैं। <em>ख़ुद टांगो।</em> ये article इसी के बारे में है।
          </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>
          पहली भारी चीज़ जो मैंने अकेले टांगी, मैंने डिब्बे में आए plastic anchors इस्तेमाल किए। एक महीने में mirror झुक रहा था। दो महीने में फ़र्श पर था। <strong>डिब्बे में आए plastic anchors सजावटी हैं।</strong> वो load-bearing नहीं हैं। असली anchor इस्तेमाल करो।
        </p>
        <p>
          मैं <strong>पुरानी मुझे</strong> क्या बताती: अपनी सोच से ज़्यादा लंबा level ख़रीदो। 24-इंच level न्यूनतम है। 48-इंच बेहतर है। तुम इसे बाकी ज़िंदगी हर shelf, हर gallery wall, हर curtain rod पर इस्तेमाल करोगे। जितना लंबा level, उतना सटीक read।
        </p>
        <p>
          और मैं फ़ोटो स्टेप को adjust स्टेप के पहले रखती। एक बार तुमने हाथ से दो बार adjust कर लिया, तुम्हारी आँखें झूठ बोलती हैं। फ़ोटो झूठ नहीं बोलती। <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 चिट्ठियाँ · ज़्यादातर MIRRORS</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 साल का हूँ और मेरे पास कभी drill नहीं रहा। तुम्हारे "बस सबसे सस्ता वाला ख़रीद लो" निबंध ने मुझे आज़माने पर मजबूर कर दिया, और मैंने बेटी के कमरे में shelves टांगी। अब वो मुझे जादूगर समझती है।
          </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>
            सवाल — मैंने इस गाइड का पालन किया लेकिन मेरी दीवारें plaster और lath हैं, drywall नहीं। अलग anchors? या पूरा तरीक़ा ही ग़लत है?
          </p>
          <div className="sa-reply">
            <span className="lab">Sam ने जवाब दिया</span>
            <p>
              plaster की अपनी गाइड है — अगले महीने आ रही है। रुक जाओ, सावधान रहना सही है। Plaster anchors एक अलग जानवर हैं।
              <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>
            entryway console के ऊपर 40 पाउंड का mirror अकेले टांगा। Toggle bolts, दो, दरवाज़े के frame के ऊपर drywall में। ठोस। पत्नी घर आई और मान लिया कि मैंने मदद ली होगी। नहीं ली थी।
          </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>
            पहली कोशिश में wire में drill कर दी। Breaker trip हुआ, कोई आग नहीं, कोई चोट नहीं, लेकिन दीवार के अंदर ठीक करवाने के लिए electrician को $180 देने पड़े। सबक़: "अगर कुछ कठोर लगे, रुको" नियम सुझाव नहीं है।
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ SIGNOFF ============ */
const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          बस इतना ही। <em>चीज़ टांग दो।</em>
        </h2>
        <p>
          अगर तुमने ख़त्म कर लिया — या आधे रास्ते में drill पकड़े और दूसरे विचारों में अटके हो — फ़ोटो भेजो। मैं जो भी आता है सब पढ़ती हूँ। जीत की फ़ोटो preferred। Failure की फ़ोटो भी welcome।
        </p>
        <div className="sig">— Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            फ़ोटो भेजें →
          </a>
          <a href="/hi/contributors/sam/" className="btn ghost">
            Sam से और
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">अगला पढ़ें</span>
        <a href="/hi/contributors/sam/how-to-refinish-a-thrifted-chair/">
          <span>थ्रिफ्टेड कुर्सी को रिफिनिश करें</span>
          <span className="m">3 घंटे</span>
        </a>
        <a href="/en/install/living-room/">
          <span>इंस्टॉल × Living Room — mounts और hangs</span>
          <span className="m">HUB</span>
        </a>
        <a href="/en/install/bedroom/">
          <span>इंस्टॉल × Bedroom — shelves, frames, lights</span>
          <span className="m">HUB</span>
        </a>
        <a href="/hi/contributors/sam/">
          <span>Sam की सभी गाइड्स</span>
          <span className="m">PROFILE</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 />);
