/* 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: "Speed square",   top: "8%",  right: "16%", rot: -4, side: "r" },
  { label: "Pry bar",        top: "30%", left: "8%",   rot: 6,  side: "l" },
  { label: "Impact driver",  top: "62%", right: "9%",  rot: 3,  side: "r" },
  { label: "Bench grinder",  top: "78%", left: "14%",  rot: -8, side: "l" },
  { label: "Chalk line",     top: "12%", left: "22%",  rot: 2,  side: "l" },
  { label: "Tin snips",      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="/">Home</a>
        <span>›</span>
        <a href="/contributors/">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's How To</h1>
          <span className="role">Contributor · No. 04 / Spring '26</span>
          <div className="sp-id-meta">
            <div className="cell">
              <span className="lab">Based in</span>
              <span className="v">A two-car garage</span>
            </div>
            <div className="cell">
              <span className="lab">Filed since</span>
              <span className="v">Spring '26</span>
            </div>
            <div className="cell">
              <span className="lab">Best at</span>
              <span className="v">Talking you off a ledge</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">
          Auburn curls.<br/>
          Denim jacket.<br/>
          <em className="doable">Stubbornly doable.</em>
        </h2>

        <div className="sp-bio-body">
          <p className="lede">
            Sam is the one who shows up with sawdust in <span className="sp-mark">her hair</span> and makes you believe you can tile your own bathroom. She doesn't do fancy — <strong>she does finished</strong>. Her garage is her studio, her weekends are her content, and every guide she writes comes from something she's actually done with her own hands.
          </p>
          <p>
            When she's not elbow-deep in a project, she's documenting the process so you can skip the mistakes she already made. No fluff. No filler. Just the part where you learn how to do the thing.
          </p>
          <p>
            She came to home improvement the long way around — art school, a thrifted teak chair, one YouTube rabbit hole, six wrong cuts, and somewhere around the seventh attempt it clicked. Now she works full-time on whatever's broken in the house and writes about whichever piece of it she figured out that week.
          </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">— Workshop stats</span>
          <div className="sp-stats-grid">
            <div className="cell">
              <div className="k">Guides written</div>
              <div className="v big">2</div>
            </div>
            <div className="cell">
              <div className="k">Projects this year</div>
              <div className="v big">23</div>
            </div>
            <div className="cell">
              <div className="k">Favorite tool</div>
              <div className="v">Impact driver</div>
            </div>
            <div className="cell">
              <div className="k">Weekend status</div>
              <div className="v">In the garage</div>
            </div>
            <div className="cell">
              <div className="k">Most-asked</div>
              <div className="v">"What stain is that?"</div>
            </div>
            <div className="cell">
              <div className="k">Always says</div>
              <div className="v">"It's fine, send it."</div>
            </div>
          </div>
        </div>

        <div className="sp-rule">
          <span className="lab">Sam's rule</span>
          <p>"If you can watch a 10-minute video and hold a drill, you can do this. I promise."</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="/en/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">On the bench right now</span>
          <h4>A 1970s teak side chair from a garage sale.</h4>
          <p>$12. Solid wood, hideous finish, surprisingly tight joints. Sanding starts Saturday.</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's top picks</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">Two she'd push on you first</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/en/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="Sam sitting in the refinished sage-green thrifted chair"
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge">Top pick</span>
            <h3>How to refinish a thrifted chair (and make it look like you paid full price)</h3>
            <p className="blurb">
              I found this chair at the thrift store for $12. Solid wood, good bones, absolutely hideous finish. Took it home, refinished it in an afternoon, now it lives by my front door and people ask where I got it.
            </p>
            <span className="read">Read guide →</span>
          </div>
        </a>

        <a href="/en/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">Pick #2</span>
            <h3>How to hang something heavy without asking anyone for help</h3>
            <span className="read">Read →</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* ===== ALL HOW-TOS ===== */
const SP_GUIDES = [
  {
    cat: "Repair",
    t: "How to refinish a thrifted chair",
    time: "3–4 hrs",
    diff: "Easy",
    href: "/en/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "Repair",
    t: "How to hang something heavy without asking for help",
    time: "45 min",
    diff: "Stubbornly doable",
    href: "/en/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("All");
  const cats = ["All", "Repair"];
  const list = filter === "All" ? 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>All how-tos by Sam <span className="count">{list.length} guides</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)",
                    }}
                  >
                    photo coming
                  </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: "Tried the thrifted-chair guide last weekend with a $20 dresser. Step 6 saved me — I was about to use the wrong stripper and would've ruined the veneer. Drawer fronts came out unreal.",
    reply: "Maya — please send a photo. I want to see the dresser.",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "I'm 47 and I have never owned a drill. Your 'just buy the cheapest one' essay convinced me to try, and I hung shelves in my daughter's room. She thinks I'm a wizard now.",
    reply: "James you ARE a wizard. Don't tell her the trick.",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "Question: I followed the floating-shelf guide but my walls are plaster and lath, not drywall. Different anchors? Or is the whole approach wrong?",
    reply: "Plaster gets its own guide — coming next month. Hold off, you're right to be cautious.",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>Letters <em>from readers</em></h2>
        <p>The mailbag — kept honest, kept short. If you've built something from one of Sam's guides, she wants to know about it (and probably wants to see a photo).</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>Got a project?<br/><em>Tell Sam about it.</em></h2>
        <p>
          If you've finished something thanks to one of these guides — or you got stuck halfway through and need a sanity check — she reads everything that comes in. No PR, no pitches, just the actual work.
        </p>
        <div className="ctas">
          <a href="/contact/" className="btn primary">Send a photo →</a>
          <a href="/contact/" className="btn ghost">Suggest a guide</a>
          <a href="https://instagram.com/sam.aiam" target="_blank" rel="noopener noreferrer" className="btn ghost">Follow @sam.aiam</a>
        </div>
      </div>
      <div className="sp-end-side">
        <span className="sig">— sam</span>
        <div className="row"><span>Filed</span><span className="v">Spring '26</span></div>
        <div className="row"><span>Issue</span><span className="v">Vol. III · No. 04</span></div>
        <div className="row"><span>Studio</span><span className="v">A two-car garage</span></div>
        <div className="row"><span>Coffee</span><span className="v">Black, second pot</span></div>
        <div className="row"><span>Status</span><span className="v">In the garage</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 />);