/* Sam's contributor profile — production wiring
 *
 * Renders into #render-target. The #root element holds the prerendered
 * semantic body (left intact for crawlers + JS-disabled fallback).
 *
 * Two articles in production: Thrifted Chair + Hang Something Heavy.
 * Article URLs: /contributors/sam/<slug>/
 */

const { useState } = React;

/* ===== HERO ===== */
const SP_TOOLS = [
  { label: "زاوية السرعة",   top: "8%",  right: "16%", rot: -4, side: "r" },
  { label: "عتلة",           top: "30%", left: "8%",   rot: 6,  side: "l" },
  { label: "مفك صدمي",       top: "62%", right: "9%",  rot: 3,  side: "r" },
  { label: "جلّاخ مقعدي",    top: "78%", left: "14%",  rot: -8, side: "l" },
  { label: "خط طبشور",       top: "12%", left: "22%",  rot: 2,  side: "l" },
  { label: "مقص صفائح",      top: "48%", right: "26%", rot: 7,  side: "r" },
];

const SPHero = () => (
  <section className="sp-hero">
    <div className="sp-hero-bigtype" aria-hidden="true">SAM</div>

    {SP_TOOLS.map((t, i) => (
      <span
        key={i}
        className={`sp-tool ${t.side}`}
        style={{
          top: t.top,
          left: t.left,
          right: t.right,
          "--rot": `${t.rot}deg`,
          animationDelay: `${i * 0.7}s`
        }}
      >
        {t.label}
      </span>
    ))}

    <div className="sp-hero-wrap">
      <nav className="sp-hero-crumbs" aria-label="Breadcrumb">
        <a href="/">الرئيسية</a>
        <span>›</span>
        <a href="/contributors/">المساهمون</a>
        <span>›</span>
        <span className="cur">Sam</span>
      </nav>

      <div className="sp-hero-id">
        <div className="sp-portrait">
          <div className="sp-portrait-ring" aria-hidden="true"></div>
          <img src="sam.png" alt="Sam" />
        </div>
        <div className="sp-id-text">
          <h1 className="sig">طريقة سام</h1>
          <span className="role">مساهمة · العدد 04 / ربيع 26'</span>
          <div className="sp-id-meta">
            <div className="cell">
              <span className="lab">المقر</span>
              <span className="v">كراج لسيارتين</span>
            </div>
            <div className="cell">
              <span className="lab">تكتب منذ</span>
              <span className="v">ربيع 26'</span>
            </div>
            <div className="cell">
              <span className="lab">الأفضل في</span>
              <span className="v">إنزالك من حافة الانهيار</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ===== BIO ===== */
const SPBio = () => (
  <section className="sp-bio">
    <div className="sp-bio-wrap">
      <div>
        <h2 className="sp-bio-headline">
          تجعيدات كستنائية.<br/>
          سترة جينز.<br/>
          <em className="doable">ممكن بعناد.</em>
        </h2>

        <div className="sp-bio-body">
          <p className="lede">
            سام هي تلك التي تظهر ونشارة الخشب في <span className="sp-mark">شعرها</span> وتجعلك تصدّق أنك قادر على تبليط حمامك بنفسك. هي لا تتقن المظهر الفاخر — <strong>بل تتقن الإنجاز</strong>. كراجها هو استوديوها، وعطلات نهاية الأسبوع هي محتواها، وكل دليل تكتبه يأتي من شيء فعلته فعلاً بيديها.
          </p>
          <p>
            حين لا تكون منغمسة حتى مرفقيها في مشروع، تكون توثّق العملية حتى تتجاوز أنت الأخطاء التي ارتكبتها مسبقاً. لا حشو. لا زوائد. فقط الجزء الذي تتعلم فيه كيف تنجز الأمر.
          </p>
          <p>
            وصلت إلى تحسين المنزل بالطريق الطويل — مدرسة فنون، كرسي ساج مستعمل، حفرة يوتيوب واحدة، ست قطعات خاطئة، وفي المحاولة السابعة تقريباً نقرت الفكرة في رأسها. الآن تعمل بدوام كامل على أي شيء معطّل في البيت وتكتب عن أي جزء منه فهمته ذلك الأسبوع.
          </p>

          <a
            href="https://instagram.com/sam.aiam"
            target="_blank"
            rel="noopener noreferrer"
            className="sp-handle"
          >
            <span className="ig" aria-hidden="true"></span>
            @sam.aiam
          </a>
        </div>
      </div>

      <aside className="sp-bio-side">
        <div className="sp-stats">
          <span className="lab">— إحصاءات الورشة</span>
          <div className="sp-stats-grid">
            <div className="cell">
              <div className="k">الأدلة المكتوبة</div>
              <div className="v big">2</div>
            </div>
            <div className="cell">
              <div className="k">المشاريع هذا العام</div>
              <div className="v big">23</div>
            </div>
            <div className="cell">
              <div className="k">الأداة المفضلة</div>
              <div className="v">مفك صدمي</div>
            </div>
            <div className="cell">
              <div className="k">حالة عطلة الأسبوع</div>
              <div className="v">في الكراج</div>
            </div>
            <div className="cell">
              <div className="k">السؤال الأكثر تكراراً</div>
              <div className="v">«ما هذه الصبغة؟»</div>
            </div>
            <div className="cell">
              <div className="k">دائماً تقول</div>
              <div className="v">«لا بأس، أرسلها.»</div>
            </div>
          </div>
        </div>

        <div className="sp-rule">
          <span className="lab">قاعدة سام</span>
          <p>«إذا كنت تستطيع مشاهدة فيديو مدته 10 دقائق وحمل مثقاب، يمكنك فعل هذا. أعدك.»</p>
          <svg className="scribble" viewBox="0 0 60 60" aria-hidden="true">
            <path d="M8,30 Q15,12 30,18 T52,28 Q42,38 30,32 Q22,28 16,42" fill="none" stroke="#4A7F3A" strokeWidth="2" strokeLinecap="round"/>
            <circle cx="52" cy="28" r="3" fill="#4A7F3A"/>
          </svg>
        </div>

        <a
          href="/ar/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">على طاولة العمل الآن</span>
          <h4>كرسي جانبي من خشب الساج من سبعينيات القرن الماضي من سوق الكراج.</h4>
          <p>12 دولاراً. خشب صلب، تشطيب بشع، ووصلات ضيقة بشكل مفاجئ. الصنفرة تبدأ السبت.</p>
        </a>
      </aside>
    </div>
  </section>
);

/* ===== TOP PICKS ===== */
const SPPicks = () => (
  <section className="sp-picks">
    <div className="sp-picks-wrap">
      <div className="sp-picks-head">
        <h2>أبرز اختيارات سام</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">اثنان ستلحّ عليك بهما أولاً</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/ar/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="سام جالسة في الكرسي المستعمل المُجدَّد بلون أخضر مريمي"
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge">أبرز اختيار</span>
            <h3>كيفية تجديد كرسي مستعمل (وجعله يبدو وكأنك دفعت ثمنه كاملاً)</h3>
            <p className="blurb">
              وجدت هذا الكرسي في متجر للمستعمل بـ12 دولاراً. خشب صلب، بنية جيدة، وتشطيب بشع تماماً. أخذته للبيت، جدّدته في فترة بعد الظهر، والآن يقف عند بابي الأمامي ويسألني الناس من أين اشتريته.
            </p>
            <span className="read">اقرأ الدليل ←</span>
          </div>
        </a>

        <a href="/ar/contributors/sam/how-to-hang-something-heavy-without-asking-anyone-for-help/" className="sp-pick compact">
          <div className="img">
            <img
              src="https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=900&q=80"
              alt=""
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge alt">الاختيار رقم 2</span>
            <h3>كيفية تعليق شيء ثقيل دون طلب المساعدة من أحد</h3>
            <span className="read">اقرأ ←</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* ===== ALL HOW-TOS ===== */
const SP_GUIDES = [
  {
    cat: "الإصلاح",
    t: "كيفية تجديد كرسي مستعمل",
    time: "3–4 ساعات",
    diff: "سهل",
    href: "/ar/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "الإصلاح",
    t: "كيفية تعليق شيء ثقيل دون طلب المساعدة",
    time: "45 دقيقة",
    diff: "ممكن بعناد",
    href: "/ar/contributors/sam/how-to-hang-something-heavy-without-asking-anyone-for-help/",
    img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=900&q=80",
  },
];

const SPAllGuides = () => {
  const [filter, setFilter] = useState("الكل");
  const cats = ["الكل", "الإصلاح"];
  const list = filter === "الكل" ? SP_GUIDES : SP_GUIDES.filter(g => g.cat === filter);

  return (
    <section className="sp-all">
      <div className="sp-all-wrap">
        <div className="sp-all-head">
          <h2>كل أدلة سام <span className="count">{list.length} أدلة</span></h2>
          <div className="sp-filter">
            {cats.map(c => (
              <button
                key={c}
                className={filter === c ? "on" : ""}
                onClick={() => setFilter(c)}
              >
                {c}
              </button>
            ))}
          </div>
        </div>

        <div className="sp-all-grid">
          {list.map((g, i) => (
            <a key={i} href={g.href} className="sp-card">
              <div className="sp-card-img">
                <span className="sp-card-cat">{g.cat}</span>
                {g.img ? (
                  <img src={g.img} alt="" loading="lazy" />
                ) : (
                  <div
                    aria-hidden="true"
                    style={{
                      width: "100%",
                      height: "100%",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      fontFamily: "'Caveat', cursive",
                      fontSize: 18,
                      color: "rgba(95,117,68,0.4)",
                    }}
                  >
                    الصورة قادمة
                  </div>
                )}
              </div>
              <h3>{g.t}</h3>
              <div className="meta">
                <span>{g.time}</span>
                <span className="dot">·</span>
                <span>{g.diff}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===== LETTERS ===== */
const SP_LETTERS = [
  {
    who: "Maya R.",
    where: "Phoenix, AZ",
    text: "جرّبت دليل الكرسي المستعمل عطلة الأسبوع الماضية على خزانة بـ20 دولاراً. الخطوة 6 أنقذتني — كنت على وشك استخدام مزيل التشطيب الخاطئ وكنت سأُتلف القشرة. واجهات الأدراج خرجت رائعة بشكل لا يُصدَّق.",
    reply: "Maya — أرسلي صورة من فضلك. أريد أن أرى الخزانة.",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "عمري 47 ولم أملك مثقاباً قط. مقالك «اشترِ الأرخص فحسب» أقنعني بالمحاولة، وعلّقت رفوفاً في غرفة ابنتي. الآن تظنني ساحراً.",
    reply: "James أنت بالفعل ساحر. لا تخبرها بالحيلة.",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "سؤال: اتبعت دليل الرف العائم لكن جدراني من الجص والقصب، لا من الجبس. خوابير مختلفة؟ أم أن الأسلوب كله خاطئ؟",
    reply: "الجص له دليله الخاص — قادم الشهر القادم. تأنّي، أنتِ محقة في الحذر.",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>رسائل <em>من القرّاء</em></h2>
        <p>صندوق البريد — صادق ومختصر. إذا بنيت شيئاً من أحد أدلة سام، فهي تريد أن تعرف عنه (وعلى الأرجح تريد أن ترى صورة).</p>
      </div>

      <div className="sp-letters-grid">
        {SP_LETTERS.map((l, i) => (
          <article key={i} className="sp-letter" style={{ "--rot": `${l.rot}deg` }}>
            <div className="from">
              <span className="who">{l.who}</span> · {l.where}
            </div>
            <p>{l.text}</p>
            <div className="reply">
              {l.reply}
              <span className="sig">— سام</span>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ===== END / SIGNOFF ===== */
const SPEnd = () => (
  <section className="sp-end">
    <div className="sp-end-wrap">
      <div>
        <h2>لديك مشروع؟<br/><em>أخبر سام عنه.</em></h2>
        <p>
          إذا أنجزت شيئاً بفضل أحد هذه الأدلة — أو علقت في منتصف الطريق وتحتاج إلى فحص عقلي — فهي تقرأ كل ما يصلها. لا علاقات عامة، لا عروض، فقط العمل الفعلي.
        </p>
        <div className="ctas">
          <a href="/contact/" className="btn primary">أرسل صورة ←</a>
          <a href="/contact/" className="btn ghost">اقترح دليلاً</a>
          <a href="https://instagram.com/sam.aiam" target="_blank" rel="noopener noreferrer" className="btn ghost">تابع @sam.aiam</a>
        </div>
      </div>
      <div className="sp-end-side">
        <span className="sig">— سام</span>
        <div className="row"><span>التاريخ</span><span className="v">ربيع 26'</span></div>
        <div className="row"><span>العدد</span><span className="v">المجلد III · العدد 04</span></div>
        <div className="row"><span>الاستوديو</span><span className="v">كراج لسيارتين</span></div>
        <div className="row"><span>القهوة</span><span className="v">سوداء، الإبريق الثاني</span></div>
        <div className="row"><span>الحالة</span><span className="v">في الكراج</span></div>
      </div>
    </div>
  </section>
);

/* ===== APP ===== */
const SamProfile = () => (
  <div className="sp" style={{ paddingTop: 72 }}>
    <SPHero />
    <SPBio />
    <SPPicks />
    <SPAllGuides />
    <SPLetters />
    <SPEnd />
  </div>
);

ReactDOM.createRoot(document.getElementById("render-target")).render(<SamProfile />);