/* 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: "Schmiege",        top: "8%",  right: "16%", rot: -4, side: "r" },
  { label: "Brecheisen",      top: "30%", left: "8%",   rot: 6,  side: "l" },
  { label: "Schlagschrauber", top: "62%", right: "9%",  rot: 3,  side: "r" },
  { label: "Werkbankschleifer", top: "78%", left: "14%",  rot: -8, side: "l" },
  { label: "Schlagschnur",    top: "12%", left: "22%",  rot: 2,  side: "l" },
  { label: "Blechschere",     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="/">Start</a>
        <span>›</span>
        <a href="/contributors/">Mitwirkende</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">Sams How To</h1>
          <span className="role">Mitwirkende · Nr. 04 / Frühjahr '26</span>
          <div className="sp-id-meta">
            <div className="cell">
              <span className="lab">Standort</span>
              <span className="v">Eine Doppelgarage</span>
            </div>
            <div className="cell">
              <span className="lab">Dabei seit</span>
              <span className="v">Frühjahr '26</span>
            </div>
            <div className="cell">
              <span className="lab">Stärke</span>
              <span className="v">Dich vom Abgrund reden</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">
          Kupferrote Locken.<br/>
          Jeansjacke.<br/>
          <em className="doable">Sturköpfig machbar.</em>
        </h2>

        <div className="sp-bio-body">
          <p className="lede">
            Sam ist die, die mit Sägespänen <span className="sp-mark">im Haar</span> auftaucht und dich davon überzeugt, dass du dein eigenes Bad fliesen kannst. Sie macht's nicht schick — <strong>sie macht's fertig</strong>. Ihre Garage ist ihr Studio, ihre Wochenenden sind ihr Content, und jede Anleitung, die sie schreibt, kommt von etwas, das sie tatsächlich mit ihren eigenen Händen gemacht hat.
          </p>
          <p>
            Wenn sie nicht bis zu den Ellbogen in einem Projekt steckt, dokumentiert sie den Prozess, damit du die Fehler überspringen kannst, die sie schon gemacht hat. Kein Geschwafel. Keine Füllwörter. Nur der Teil, in dem du lernst, wie es geht.
          </p>
          <p>
            Sie kam auf Umwegen zur Heimwerkerei — Kunsthochschule, ein Trödel-Teakstuhl, ein YouTube-Kaninchenbau, sechs falsche Schnitte, und irgendwo beim siebten Versuch hat es klick gemacht. Jetzt arbeitet sie Vollzeit an dem, was im Haus kaputt ist, und schreibt darüber, welches Stück davon sie diese Woche herausgefunden hat.
          </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">— Werkstatt-Statistik</span>
          <div className="sp-stats-grid">
            <div className="cell">
              <div className="k">Geschriebene Anleitungen</div>
              <div className="v big">2</div>
            </div>
            <div className="cell">
              <div className="k">Projekte dieses Jahr</div>
              <div className="v big">23</div>
            </div>
            <div className="cell">
              <div className="k">Lieblingswerkzeug</div>
              <div className="v">Schlagschrauber</div>
            </div>
            <div className="cell">
              <div className="k">Wochenend-Status</div>
              <div className="v">In der Garage</div>
            </div>
            <div className="cell">
              <div className="k">Häufigste Frage</div>
              <div className="v">„Welche Beize ist das?"</div>
            </div>
            <div className="cell">
              <div className="k">Sagt immer</div>
              <div className="v">„Passt schon, mach."</div>
            </div>
          </div>
        </div>

        <div className="sp-rule">
          <span className="lab">Sams Regel</span>
          <p>„Wenn du ein 10-Minuten-Video schauen und einen Akkuschrauber halten kannst, kannst du das. Versprochen."</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="/de/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">Gerade auf der Werkbank</span>
          <h4>Ein Teak-Beistellstuhl aus den 1970ern vom Flohmarkt.</h4>
          <p>12 Dollar. Massivholz, scheußliche Lackierung, überraschend feste Verbindungen. Schleifen beginnt am Samstag.</p>
        </a>
      </aside>
    </div>
  </section>
);

/* ===== TOP PICKS ===== */
const SPPicks = () => (
  <section className="sp-picks">
    <div className="sp-picks-wrap">
      <div className="sp-picks-head">
        <h2>Sams Top-Empfehlungen</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">Zwei, die sie dir zuerst nahelegen würde</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/de/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="Sam sitzt im aufgearbeiteten salbeigrünen Trödel-Stuhl"
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge">Top-Empfehlung</span>
            <h3>Wie man einen Trödel-Stuhl aufarbeitet (und ihn aussehen lässt, als hättest du den vollen Preis bezahlt)</h3>
            <p className="blurb">
              Ich habe diesen Stuhl im Trödelladen für 12 Dollar gefunden. Massivholz, gute Substanz, absolut scheußliche Lackierung. Mit nach Hause genommen, an einem Nachmittag aufgearbeitet, jetzt steht er bei meiner Haustür und Leute fragen, wo ich ihn her habe.
            </p>
            <span className="read">Anleitung lesen →</span>
          </div>
        </a>

        <a href="/de/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">Empfehlung Nr. 2</span>
            <h3>Wie man etwas Schweres aufhängt, ohne jemanden um Hilfe zu bitten</h3>
            <span className="read">Lesen →</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* ===== ALL HOW-TOS ===== */
const SP_GUIDES = [
  {
    cat: "Reparieren",
    t: "Wie man einen Trödel-Stuhl aufarbeitet",
    time: "3–4 Std.",
    diff: "Einfach",
    href: "/de/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "Reparieren",
    t: "Wie man etwas Schweres aufhängt, ohne um Hilfe zu bitten",
    time: "45 Min.",
    diff: "Sturköpfig machbar",
    href: "/de/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("Alle");
  const cats = ["Alle", "Reparieren"];
  const list = filter === "Alle" ? 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>Alle How-tos von Sam <span className="count">{list.length} Anleitungen</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)",
                    }}
                  >
                    Foto folgt
                  </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: "Habe die Trödel-Stuhl-Anleitung letztes Wochenende mit einer 20-Dollar-Kommode probiert. Schritt 6 hat mich gerettet — ich war kurz davor, den falschen Abbeizer zu nehmen und hätte das Furnier ruiniert. Die Schubladenfronten sind unglaublich geworden.",
    reply: "Maya — schick bitte ein Foto. Ich will die Kommode sehen.",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "Ich bin 47 und habe noch nie einen Akkuschrauber besessen. Dein „Kauf einfach den billigsten"-Aufsatz hat mich überzeugt, es zu probieren, und ich habe Regale in das Zimmer meiner Tochter gehängt. Sie hält mich jetzt für einen Zauberer.",
    reply: "James, du BIST ein Zauberer. Verrate ihr nicht den Trick.",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "Frage: Ich habe der Anleitung für die schwebenden Regale gefolgt, aber meine Wände sind Putz und Lattung, kein Gipskarton. Andere Dübel? Oder ist der ganze Ansatz falsch?",
    reply: "Putz bekommt seine eigene Anleitung — kommt nächsten Monat. Halt dich zurück, du bist zurecht vorsichtig.",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>Briefe <em>von Lesern</em></h2>
        <p>Die Leserpost — ehrlich gehalten, kurz gehalten. Wenn du etwas aus einer von Sams Anleitungen gebaut hast, will sie davon wissen (und wahrscheinlich ein Foto sehen).</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>Hast du ein Projekt?<br/><em>Erzähl Sam davon.</em></h2>
        <p>
          Wenn du dank einer dieser Anleitungen etwas fertiggestellt hast — oder auf halbem Weg steckengeblieben bist und einen Realitätscheck brauchst — sie liest alles, was reinkommt. Keine PR, keine Pitches, nur die echte Arbeit.
        </p>
        <div className="ctas">
          <a href="/contact/" className="btn primary">Foto schicken →</a>
          <a href="/contact/" className="btn ghost">Anleitung vorschlagen</a>
          <a href="https://instagram.com/sam.aiam" target="_blank" rel="noopener noreferrer" className="btn ghost">@sam.aiam folgen</a>
        </div>
      </div>
      <div className="sp-end-side">
        <span className="sig">— sam</span>
        <div className="row"><span>Eingereicht</span><span className="v">Frühjahr '26</span></div>
        <div className="row"><span>Ausgabe</span><span className="v">Vol. III · Nr. 04</span></div>
        <div className="row"><span>Studio</span><span className="v">Eine Doppelgarage</span></div>
        <div className="row"><span>Kaffee</span><span className="v">Schwarz, zweite Kanne</span></div>
        <div className="row"><span>Status</span><span className="v">In der 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 />);