/* 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 / 2026春</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">2026春</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分钟的视频，能拿稳一把电钻，你就能做到。我保证。"</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="/zh/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="/zh/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="/zh/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: "/zh/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "维修",
    t: "如何独立挂起重物",
    time: "45 分钟",
    diff: "倔强可行",
    href: "/zh/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的全部指南 <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>邮袋——保持诚实，保持简短。如果你按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>
          如果你靠这些指南完成了什么——或者卡在中间需要个清醒判断——她会读所有寄进来的邮件。不接公关，不接推介，只看真实的活儿。
        </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">2026春</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">黑咖，第二壶</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 />);