/* Sam's article — How to Refinish a Thrifted Chair
 * Renders into #render-target. Source content: scripts/insert-sam-chair-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('../thrifted-chair.png')",
      }}
    />
    <div className="sa-hero-wrap">
      <div>
        <div className="sa-hero-kicker">
          <span>دليل</span>
          <span className="dot">●</span>
          <span>رقم 01</span>
          <span className="dot">●</span>
          <span className="sig">بقلم سام</span>
        </div>
        <h1>
          كيفية تجديد <em>كرسي مستعمل</em> (وجعله يبدو وكأنك دفعت ثمنه كاملاً)
        </h1>
        <p className="standfirst">
          كرسي بـ12 دولاراً. مشروع بعد الظهر. لا أحد يحتاج أن يعرف من أين جاء. ست خطوات صادقة من المتجر إلى المدخل، مع كل الأخطاء التي ارتكبتها بالنيابة عنك.
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>الوقت</span>
          <span className="v">3–4 ساعات <span style={{opacity:0.5}}>+ 24 ساعة نضوج</span></span>
        </div>
        <div className="row">
          <span>التكلفة</span>
          <span className="v">$20–$35</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">
      $12. خشب صلب. <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">
          وجدت هذا الكرسي في Goodwill يوم ثلاثاء. اثنا عشر دولاراً. ساج صلب — النوع الثقيل الفعلي، لا النوع الذي يتظاهر بأنه IKEA-قشرة. وصلات ضيقة. مريح بشكل مفاجئ. وتشطيب شلّاك برتقالي 1972 عدواني لدرجة أنني كدت أُعيده.
        </p>

        <p>
          لم أُعِده. أخذته للبيت. جدّدته في فترة بعد الظهر بنحو ثلاثين دولاراً مواد. الآن يقف عند بابي الأمامي، يحمل أصيصاً على مقعده، ومرّتين في الشهر الماضي سألني أحدهم من أين اشتريته.
        </p>

        <div className="sa-pullquote">
          <p>
            الخشب الصلب بكل سعر تحت الألف دولار ميت. الكرسي الذي تجده في متجر مستعمل من 1972 الأرجح أن وصلاته حقيقية أكثر من الكرسي الذي ستشتريه جديداً بنفس الميزانية.
          </p>
        </div>

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

        <p>
          ما يلي مشروع كامل من ست خطوات في <strong>ثلاث إلى أربع ساعات من العمل الفعلي</strong>، إضافة إلى نافذة نضوج 24 ساعة قبل أن تجلس عليه. بطل هذا المقال منتج واحد اسمه <em>Rust-Oleum Chalked Paint</em> وسأبشّر به.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">ملاحظة سام</span>
        <h4>قبل أن تشتري كرسياً مستعملاً</h4>
        <p>
          اجلس عليه في المتجر. إذا اهتزّ، ابتعد. الوصلات المهتزة مشروع أكبر منفصل. نحن نُجدّد اليوم، لا نُعيد التغرية.
        </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>$20–$35</strong> مواد، إذا كنت لا تملك شيئاً مسبقاً. البطل رُبع غالون من Chalked Paint. كل شيء آخر صغير.
        </p>

        <div className="sa-need-dont">
          <span className="lab">لا تتعب نفسك بـ</span>
          <ul>
            <li>
              ترقيات «طقم تجديد الأثاث»
              <span className="why">إنه Chalked Paint وورق صنفرة. الطقم يدفع ثمن الصندوق.</span>
            </li>
            <li>
              فُرَش بشَعر
              <span className="why">تترك آثار فرشاة. الإسفنج لا يفعل. اشترِ إسفنج.</span>
            </li>
            <li>
              إزالة التشطيب الأصلي
              <span className="why">Chalked Paint يغطيه. الإزالة مقال مختلف وأطول.</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            Rust-Oleum Chalked Paint، رُبع غالون
            <span className="why">اللون عائد إليك. أخضر مريمي، فحمي، كريمي، تيراكوتا، أسود ناعم.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            ورق صنفرة، حُبيبة 120
            <span className="why">للتحضير. يخدش التشطيب الموجود.</span>
          </span>
          <span className="qty">×1 ورقة</span>
        </li>
        <li>
          <span className="item">
            ورق صنفرة، حُبيبة 220
            <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>
        <li>
          <span className="item">
            طبقة علوية شفافة (بوليكريليك مات أو شمع شفاف)
            <span className="why">البوليكريليك أمتن؛ الشمع له عمق أكثر. البوليكريليك للكراسي اليومية.</span>
          </span>
          <span className="qty">×½ نصف باينت</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>
          امسحه بقطعة قماش رطبة واتركه يجف تماماً. أي شحم أو غبار أو بقايا غامضة من المتجر ستُفسد التصاق الطلاء.
        </p>
        <p>
          هذه الخطوة تستغرق خمس دقائق ودائماً يتجاوزها الناس. <em>لا تتجاوزها.</em> الكرسي كان جالساً في قبو شخص ما، ثم مستودع، ثم أرضية متجر، ثم صندوق سيارتك. أياً كان ما عليه، لا تريد أن يُختم تحت طلائك.
        </p>
      </>
    ),
    tip: { lab: "نصيحة سام الكسولة:", text: "إذا كنت ترى انعكاسك في التشطيب الموجود، امسحه سريعاً بمزيل شحوم قبل الماء. كراسي المطبخ القديمة خصوصاً — امتصّت بصمات أصابع أربعين سنة." },
    fig: {
      img: "https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?w=1200&q=80",
      tag: "شكل 01 · المسح",
      cap: "خمس دقائق لا أحد يريد قضاءها.",
    },
    says: "أفعل هذا والكرسي مقلوب على غطاء واقٍ. يتيح لك رؤية كل سطح ويلتقط الغبار تحت الإطار الذي ينساه الناس.",
  },
  {
    n: "02",
    phase: "صنفرة · 15 دقيقة",
    title: "اصنفر بخفّة بحُبيبة 120.",
    flip: true,
    body: (
      <>
        <p>
          أنت <em>لا تزيل</em> التشطيب بأكمله — فقط تخدشه ليتمسك الطلاء بشيء. اضرب كل الأسطح المسطحة وامشِ مع اتجاه عرق الخشب. امسح الغبار بقطعة قماش رطبة خالية من الوبر حين تنتهي.
        </p>
        <p>
          الصنفرة كاملة يجب أن تستغرق نحو خمس عشرة دقيقة. الهدف هو نقل الكرسي من لامع وأملس إلى ضبابي قليلاً. <strong>إذا كان لا يزال يحسّ كالزجاج بعد الصنفرة، اصنفر أكثر.</strong>
        </p>
      </>
    ),
    tip: { lab: "لا تتعب نفسك بصنفرة المغازل", text: "التفاصيل المنحوتة يغطيها الطلاء على أي حال. اضرب فقط الأسطح المسطحة: قمة المقعد، واجهات الأرجل، قمم الأذرع. الأماكن التي سيستقر عليها الطلاء بصرياً." },
    fig: {
      img: "https://images.unsplash.com/photo-1565793298595-6a879b1d9492?w=1200&q=80",
      tag: "شكل 02 · الخدش",
      cap: "لامع ← ضبابي. هذا كل شيء.",
    },
  },
  {
    n: "03",
    phase: "طلاء · 30 دقيقة + جفاف",
    title: "الطبقة الأولى — رقيقة، بشعة، لا بأس.",
    flip: false,
    body: (
      <>
        <p>
          <em>لا تكوّمه.</em> ضربات رقيقة متساوية. سيبدو سيئاً بعد الطبقة الأولى وهذا طبيعي تماماً — Chalked Paint دائماً يفعل ذلك. مخطّط. مرقّع. سترى التشطيب الأصلي من خلاله. <strong>هذا صحيح.</strong>
        </p>
        <p>
          اتركه يجف. Chalked Paint يجف خلال نحو ثلاثين دقيقة، لكنني عادةً أنتظر ساعة كاملة احتياطاً. <em>قاوم رغبة إصلاح البقع غير المتساوية وهي رطبة.</em> ستُصلحها في الطبقة الثانية.
        </p>
      </>
    ),
    warn: { lab: "تنبيه", text: "إذا كان الطلاء يحسّ سميكاً عند خروجه من العلبة، حرّكه — لا تُضِف ماءً. Chalked Paint مصمم ليُطبّق بقوام العلبة. تخفيفه بالماء يقتل التغطية." },
    fig: {
      img: "https://images.unsplash.com/photo-1562259949-e8e7689d7828?w=1200&q=80",
      tag: "شكل 03 · الطبقة 1",
      cap: "البشاعة لا بأس بها. الصدق مطلوب.",
    },
    says: "الرولر الإسفنجي للمقعد والألواح المسطحة. الفرشاة الإسفنجية للمغازل وأسفل الأذرع والأجزاء المنحوتة.",
  },
  {
    n: "04",
    phase: "صنفرة · 5 دقائق",
    title: "اصنفر مرة أخرى بخفّة بحُبيبة 220.",
    flip: true,
    body: (
      <>
        <p>
          هذا ما يجعل التشطيب ناعماً بدلاً من خشن. مجرد مرور سريع — أنت تُسوّي آثار الفرشاة، لا تُزيل الطلاء. امسح الغبار بالقماش الخالي من الوبر.
        </p>
        <p>
          حُبيبة 220 ناعمة كفاية بحيث لا يمكنك إفساد ذلك إلا إذا ضغطت بقوة بصنفارة كهربائية. <em>باليد، ستكون بخير.</em>
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?w=1200&q=80",
      tag: "شكل 04 · التنعيم",
      cap: "خمس دقائق. خطوة جودة التشطيب.",
    },
  },
  {
    n: "05",
    phase: "طلاء · 30 دقيقة + جفاف",
    title: "الطبقة الثانية — هنا يبدأ الأمر يعمل.",
    flip: false,
    body: (
      <>
        <p>
          نفس الضربات الرقيقة المتساوية. معظم الكراسي تحتاج طبقتين فقط. <em>إذا بقيت بقع تظهر بعد جفاف الطبقة الثانية، ضع طبقة ثالثة.</em> لا عار في طبقة ثالثة. أفضل من طبقة ثانية سميكة تتقطّر.
        </p>
        <p>
          اتركه يجف ساعة على الأقل قبل العزل. الكرسي الآن يجب أن يبدو <strong>منتهياً</strong>، لا مغطّى بطلاء. إذا كان لا يزال يبدو ككرسي مدهون، فأنت بحاجة إلى طبقة أخرى.
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "شكل 05 · الطبقة 2",
      cap: "الآن إنه كرسي، لا مشروع.",
    },
    says: "تراجع ست أقدام بين الطبقات. الشيء يُقرأ مختلفاً تماماً من الجانب الآخر للغرفة عمّا يبدو من قرب. منظر الغرفة هو المهم.",
  },
  {
    n: "06",
    phase: "عزل · 15 دقيقة + 24 ساعة نضوج",
    title: "اعزله. ثم ابتعد.",
    flip: true,
    body: (
      <>
        <p>
          Chalked Paint يُخدش دون طبقة علوية. شمع شفاف أو بوليكريليك مات يصلحان. ضع طبقة رقيقة بفرشاة إسفنجية نظيفة، عاملاً مع اتجاه العرق. اتركها تنضج <strong>أربع وعشرين ساعة</strong> قبل أن تستخدم الكرسي فعلياً.
        </p>
        <p>
          هذا هو جزء الصبر. الكرسي تقنياً <em>منتهٍ</em> بعد الطبقة الثانية — لكن إذا جلست عليه قبل أن ينضج العازل، ستُهلك الطلاء خلال أسبوعين. أربعة وعشرون ساعة. <em>اضبط مؤقتاً.</em>
        </p>
      </>
    ),
    tip: { lab: "الشمع مقابل البوليكريليك", text: "الشمع له عمق أكثر — يبدو عتيقاً، يحسّ يدوياً. البوليكريليك أمتن — أفضل لكرسي تجلس عليه يومياً. لكرسي مدخل يحمل أصيصاً غالباً، شمع. لكرسي مطبخ، بوليكريليك." },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "شكل 06 · النضوج",
      cap: "الجزء الذي معظمه انتظار.",
    },
    says: "أضع ملصقاً عليه يقول لا تجلس وتاريخ بعد 24 ساعة. تعلّمت هذا الدرس شخصياً.",
  },
];

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 خطوات · ≈3 ساعات عمل · 24 ساعة نضوج</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>الطلاء الرشّاش بديلاً عن Chalked Paint</h3>
          <p>
            تشطيب مختلف، تغطية مختلفة، متانة مختلفة. الطلاء الرشّاش للمعدن والقطع الصغيرة. لأثاث الخشب الذي تلمسه يومياً، Chalked Paint بالفرشاة في كل مرة.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>اختيار لون «يطابق ديكورك»</h3>
          <p>
            الكرسي هو اللمسة المميزة. إذا طابق كل شيء في الغرفة، يختفي. اختر لوناً يناقض الغرفة قليلاً. أخضر مريمي في غرفة دافئة. تيراكوتا في غرفة باردة. فحمي في أي مكان.
          </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>: اشترِ الرولر الإسفنجي إضافة إلى الفرشاة الإسفنجية. الفرشاة تتعامل مع المغازل والتفاصيل المنحوتة، الرولر يتعامل مع الأسطح المسطحة في رُبع الوقت ويترك تشطيباً أنعم. ستة دولارات تُنفَق جيداً.
        </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">14 رسالة · معظمها خزائن</span>
      </header>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Maya R.</span>
          <span>Phoenix, AZ</span>
          <span className="when">قبل أسبوعين</span>
        </div>
        <div className="body">
          <p>
            جرّبت هذا عطلة الأسبوع الماضية بخزانة بـ20 دولاراً بدلاً من كرسي. الخطوة 6 أنقذتني — كنت على وشك استخدام مزيل التشطيب الخاطئ وكنت سأُتلف القشرة. واجهات الأدراج خرجت رائعة بشكل لا يُصدَّق. سأعود للطاولة الجانبية المطابقة.
          </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">Theo R.</span>
          <span>Oakland, CA</span>
          <span className="when">قبل 3 أسابيع</span>
        </div>
        <div className="body">
          <p>
            تجاوزت الطبقة العلوية. عدت لقراءة هذا المقال بعد شهر لأن المقعد كان يهترئ بالفعل. الدرس مفهوم. أُعيد التشطيب اليوم.
          </p>
        </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">Dale W.</span>
          <span>Toledo, OH</span>
          <span className="when">قبل 5 أسابيع</span>
        </div>
        <div className="body">
          <p>
            مدير عقارات هنا. أُجدّد كل كرسي نستبدله في إيجاراتنا قصيرة المدى بنفس هذه الطريقة بالضبط. خمسة وعشرون دولاراً مواد أرخص من كرسي جديد كل ستة أشهر. سأُحيل هذا لفريقي كله.
          </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-hang-something-heavy-without-asking-anyone-for-help/">
          <span>تعليق شيء ثقيل دون طلب المساعدة من أحد</span>
          <span className="m">45 دقيقة</span>
        </a>
        <a href="/en/decorate/kitchen/">
          <span>التزيين × المطبخ — مشاريع الطلاء والتشطيب</span>
          <span className="m">مركز</span>
        </a>
        <a href="/en/decorate/living-room/">
          <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 />);
