/* 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">— سام</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="/ar/contributors/sam/">Sam</a>
      <span>/</span>
      <span>دليل</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>تعليق شيء ثقيل</span>
    </div>
    <div className="r">
      <span>العدد 04 · ربيع 26'</span>
      <span className="by">بقلم سام ✦</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>دليل</span>
          <span className="dot">●</span>
          <span>رقم 02</span>
          <span className="dot">●</span>
          <span className="sig">بقلم سام</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">ربيع 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>المرآة كانت تتنقّل</li>
          <li>ما تحتاجه فعلاً</li>
          <li>الخطوات الست</li>
          <li>آراء حادة</li>
          <li>ما كنت سأفعله بشكل مختلف</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          كنت تنقل تلك المرآة من غرفة إلى أخرى لمدة ثلاثة أسابيع لأنك لا تستطيع أن تقرر أين تذهب. قرّرت. <em>تذهب هناك.</em> على ذلك الجدار. اليوم.
        </p>

        <p>
          ولن تطلب من أحد أن يساعدك في فعل ذلك. لا تحتاج شخصاً ثانياً. تحتاج كاشف عوارض، الخابور المناسب، ميزان، والانضباط <strong>للتراجع قبل أن تقرر أنه مائل.</strong> المشروع كله يستغرق خمساً وأربعين دقيقة إن فعلته بشكل صحيح وساعتين إن اضطررت لترقيع ثقب — وسنفعله بشكل صحيح.
        </p>

        <div className="sa-pullquote">
          <p>
            الجبس وحده لن يثبت برغياً تحت أي حمل حقيقي. الجدار جص وورق. العوارض خشب. اعثر على الخشب، أو استخدم خابوراً حقيقياً.
          </p>
        </div>

        <p>
          تلك الجملة هي المقال كله. الباقي مجرد كيفية إيجاد الخشب، ما الذي يُعدّ خابوراً حقيقياً، ولماذا يجب أن تشتري ميزاناً بأربعة دولارات بدلاً من الثقة بعينيك.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">ملاحظة سام</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>ست عشرة بوصة من المركز.</strong> حالما تجد واحدة، يمكنك عادةً إيجاد التالية دون فحص. ضع علامة على كل واحدة بقلم رصاص حتى لا تفقد تتبّعها حين تبدأ الثقب.
        </p>
      </>
    ),
    tip: { lab: "الأصبع مقابل كاشف العوارض", 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: "ميزان · دقيقة واحدة",
    title: "استخدم ميزاناً.",
    flip: false,
    body: (
      <>
        <p>
          أعلم أنك تظن أنك تستطيع تخمينه بعينك. <em>لا تستطيع.</em> لا أحد يستطيع. <strong>استخدم الميزان.</strong> أنفق الأربعين ثانية الإضافية. ستحدّق في ذلك الشيء كل يوم وستعرف إن كان منحرفاً نصف درجة.
        </p>
        <p>
          الميزان بأربعة دولارات في أي متجر أدوات. إنه أفضل أربعة دولارات يمكن أن تنفقها على هذا المشروع. إذا كنت لا تملك واحداً بعد، اشترِ واحداً قبل أن تفعل أي شيء آخر في هذا المقال.
        </p>
      </>
    ),
    tip: { lab: "تطبيقات ميزان الهاتف", text: "تعمل، لكنها أبطأ من ميزان فقاعي حقيقي وتتطلب منك تثبيت الهاتف. الميزان الفقاعي أسرع، أدقّ، ولا يحتاج شحن. احصل على الميزان الفقاعي." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "شكل 03 · الميزان",
      cap: "أرخص تأمين ستشتريه.",
    },
    says: "ضع الميزان فوق إطار المرآة، لا على الجدار. المرآة هي ما سيراه الناس. الجدار ليس كذلك.",
  },
  {
    n: "04",
    phase: "ثقب · دقيقتان",
    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">آراء سام الحادة</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">قبل أسبوع</span>
        </div>
        <div className="body">
          <p>
            عمري 47 ولم أملك مثقاباً قط. مقالك «اشترِ الأرخص فحسب» أقنعني بالمحاولة، وعلّقت رفوفاً في غرفة ابنتي. الآن تظنني ساحراً.
          </p>
          <div className="sa-reply">
            <span className="lab">ردّت سام</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">قبل أسبوعين</span>
        </div>
        <div className="body">
          <p>
            سؤال — اتبعت هذا الدليل لكن جدراني من الجص والقصب، لا من الجبس. خوابير مختلفة؟ أم أن الأسلوب كله خاطئ؟
          </p>
          <div className="sa-reply">
            <span className="lab">ردّت سام</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">قبل شهر</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">— سام</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            أرسل صورة ←
          </a>
          <a href="/ar/contributors/sam/" className="btn ghost">
            المزيد من سام
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">اقرأ بعد ذلك</span>
        <a href="/ar/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="/ar/contributors/sam/">
          <span>كل أدلة سام</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 />);