/* 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">Sam का How To</h1>
          <span className="role">योगदानकर्ता · No. 04 / Spring '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">Spring '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">
            Sam वो है जो <span className="sp-mark">बालों में</span> चूरा लिए आती है और तुम्हें यकीन दिला देती है कि तुम अपना बाथरूम खुद टाइल कर सकते हो। वो दिखावा नहीं करती — <strong>वो ख़त्म करती है</strong>। उसका गैरेज ही उसका स्टूडियो है, उसके वीकेंड ही उसका कंटेंट हैं, और जो भी गाइड वो लिखती है वो किसी ऐसी चीज़ से आता है जो उसने अपने हाथों से असल में किया है।
          </p>
          <p>
            जब वो किसी प्रोजेक्ट में कोहनी तक डूबी नहीं होती, तब वो प्रक्रिया को दर्ज कर रही होती है ताकि तुम उन गलतियों से बच सको जो वो पहले ही कर चुकी है। कोई भरावन नहीं। कोई फ़िलर नहीं। बस वही हिस्सा जहाँ तुम काम करना सीखते हो।
          </p>
          <p>
            वो होम इम्प्रूवमेंट तक लंबे रास्ते से पहुँची — आर्ट स्कूल, एक थ्रिफ्टेड टीक की कुर्सी, एक YouTube रैबिट होल, छह गलत कट, और कहीं सातवीं कोशिश के आसपास बात समझ में आ गई। अब वो फुल-टाइम घर में जो भी टूटा है उस पर काम करती है और उस हफ़्ते जो भी हिस्सा वो समझ पाती है उसके बारे में लिखती है।
          </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">Sam का नियम</span>
          <p>"अगर तुम 10-मिनट का वीडियो देख सकते हो और drill पकड़ सकते हो, तो तुम ये कर सकते हो। वादा।"</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="/hi/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">अभी बेंच पर</span>
          <h4>गैरेज सेल से 1970 के दशक की एक टीक साइड चेयर।</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>Sam के टॉप पिक्स</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">दो जो वो सबसे पहले तुम्हें थमाएगी</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/hi/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="Sam रिफिनिश की हुई सेज-हरे रंग की थ्रिफ्टेड कुर्सी पर बैठी हुई"
              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="/hi/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: "/hi/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "मरम्मत",
    t: "बिना मदद माँगे भारी चीज़ कैसे टांगें",
    time: "45 मिनट",
    diff: "ज़िद्दी ढंग से मुमकिन",
    href: "/hi/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>Sam की सभी how-tos <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 डॉलर के एक dresser के साथ आज़माया। स्टेप 6 ने मुझे बचा लिया — मैं गलत स्ट्रिपर इस्तेमाल करने वाली थी और वेनियर बर्बाद हो जाता। ड्रॉअर के सामने वाले हिस्से ज़बरदस्त निकले।",
    reply: "Maya — फोटो ज़रूर भेजो। मैं उस dresser को देखना चाहती हूँ।",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "मैं 47 साल का हूँ और मेरे पास कभी drill नहीं रहा। तुम्हारे 'बस सबसे सस्ता वाला खरीद लो' निबंध ने मुझे आज़माने पर मजबूर कर दिया, और मैंने बेटी के कमरे में shelves टांगी। अब वो मुझे जादूगर समझती है।",
    reply: "James तुम जादूगर हो ही। उसे राज़ मत बताना।",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "सवाल: मैंने फ्लोटिंग-शेल्फ गाइड का पालन किया लेकिन मेरी दीवारें plaster और lath हैं, drywall नहीं। अलग एंकर? या पूरा तरीका ही गलत है?",
    reply: "Plaster की अपनी गाइड है — अगले महीने आ रही है। रुक जाओ, सावधान रहना सही है।",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>पाठकों की <em>चिट्ठियाँ</em></h2>
        <p>मेलबैग — ईमानदार, छोटा। अगर तुमने Sam की किसी गाइड से कुछ बनाया है, तो वो जानना चाहती है (और शायद फोटो भी देखना चाहती है)।</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">— Sam</span>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ===== END / SIGNOFF ===== */
const SPEnd = () => (
  <section className="sp-end">
    <div className="sp-end-wrap">
      <div>
        <h2>कोई प्रोजेक्ट है?<br/><em>Sam को बताओ।</em></h2>
        <p>
          अगर तुमने इन गाइड्स में से किसी की मदद से कुछ ख़त्म किया है — या आधे रास्ते में अटक गए हो और sanity check चाहिए — वो जो भी आता है सब पढ़ती है। कोई PR नहीं, कोई पिच नहीं, बस असली काम।
        </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">— sam</span>
        <div className="row"><span>दर्ज</span><span className="v">Spring '26</span></div>
        <div className="row"><span>अंक</span><span className="v">Vol. III · No. 04</span></div>
        <div className="row"><span>स्टूडियो</span><span className="v">दो-कार वाला गैरेज</span></div>
        <div className="row"><span>कॉफ़ी</span><span className="v">ब्लैक, दूसरा pot</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 />);