/* 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: "Équerre de menuisier", top: "8%",  right: "16%", rot: -4, side: "r" },
  { label: "Pied-de-biche",        top: "30%", left: "8%",   rot: 6,  side: "l" },
  { label: "Visseuse à chocs",     top: "62%", right: "9%",  rot: 3,  side: "r" },
  { label: "Touret à meuler",      top: "78%", left: "14%",  rot: -8, side: "l" },
  { label: "Cordeau à craie",      top: "12%", left: "22%",  rot: 2,  side: "l" },
  { label: "Cisaille à tôle",      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="/">Accueil</a>
        <span>›</span>
        <a href="/contributors/">Contributeurs</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">Le How To de Sam</h1>
          <span className="role">Contributrice · N° 04 / Printemps '26</span>
          <div className="sp-id-meta">
            <div className="cell">
              <span className="lab">Basée à</span>
              <span className="v">Un garage deux places</span>
            </div>
            <div className="cell">
              <span className="lab">Publie depuis</span>
              <span className="v">Printemps '26</span>
            </div>
            <div className="cell">
              <span className="lab">Sa spécialité</span>
              <span className="v">Te raisonner au bord du gouffre</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">
          Boucles auburn.<br/>
          Veste en jean.<br/>
          <em className="doable">Obstinément faisable.</em>
        </h2>

        <div className="sp-bio-body">
          <p className="lede">
            Sam, c'est celle qui débarque avec de la sciure dans <span className="sp-mark">les cheveux</span> et qui te fait croire que tu peux carreler ta propre salle de bain. Elle ne fait pas dans le chic — <strong>elle fait dans le fini</strong>. Son garage est son atelier, ses week-ends sont son contenu, et chaque guide qu'elle écrit vient d'un truc qu'elle a réellement fait de ses propres mains.
          </p>
          <p>
            Quand elle n'a pas les bras dans un projet, elle documente le processus pour que tu puisses sauter les erreurs qu'elle a déjà faites. Pas de blabla. Pas de remplissage. Juste la partie où tu apprends à faire le truc.
          </p>
          <p>
            Elle est arrivée au bricolage par le chemin le plus long — école d'art, une chaise en teck de brocante, un terrier YouTube, six coupes ratées, et quelque part vers la septième tentative, ça a cliqué. Maintenant elle bosse à plein temps sur tout ce qui est cassé dans la maison et écrit sur le morceau qu'elle a compris cette semaine-là.
          </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">— Statistiques de l'atelier</span>
          <div className="sp-stats-grid">
            <div className="cell">
              <div className="k">Guides écrits</div>
              <div className="v big">2</div>
            </div>
            <div className="cell">
              <div className="k">Projets cette année</div>
              <div className="v big">23</div>
            </div>
            <div className="cell">
              <div className="k">Outil préféré</div>
              <div className="v">Visseuse à chocs</div>
            </div>
            <div className="cell">
              <div className="k">Statut du week-end</div>
              <div className="v">Au garage</div>
            </div>
            <div className="cell">
              <div className="k">Question la plus posée</div>
              <div className="v">« C'est quelle teinte&nbsp;? »</div>
            </div>
            <div className="cell">
              <div className="k">Toujours dit</div>
              <div className="v">« C'est bon, envoie. »</div>
            </div>
          </div>
        </div>

        <div className="sp-rule">
          <span className="lab">La règle de Sam</span>
          <p>« Si tu peux regarder une vidéo de 10 minutes et tenir une perceuse, tu peux le faire. Promis. »</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="/fr/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">Sur l'établi en ce moment</span>
          <h4>Une chaise d'appoint en teck des années 70 chinée en vide-grenier.</h4>
          <p>12 $. Bois massif, finition affreuse, assemblages étonnamment serrés. Le ponçage commence samedi.</p>
        </a>
      </aside>
    </div>
  </section>
);

/* ===== TOP PICKS ===== */
const SPPicks = () => (
  <section className="sp-picks">
    <div className="sp-picks-wrap">
      <div className="sp-picks-head">
        <h2>La sélection de Sam</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">Les deux qu'elle te pousserait en premier</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/fr/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="Sam assise dans la chaise de brocante rénovée vert sauge"
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge">Coup de cœur</span>
            <h3>Comment rénover une chaise de brocante (et lui donner l'air d'avoir été payée plein pot)</h3>
            <p className="blurb">
              J'ai trouvé cette chaise à la friperie pour 12 $. Bois massif, bonne structure, finition absolument affreuse. Je l'ai ramenée à la maison, rénovée en un après-midi, et maintenant elle vit près de ma porte d'entrée et les gens me demandent où je l'ai eue.
            </p>
            <span className="read">Lire le guide →</span>
          </div>
        </a>

        <a href="/fr/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">Sélection n°2</span>
            <h3>Comment accrocher un objet lourd sans demander d'aide à personne</h3>
            <span className="read">Lire →</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* ===== ALL HOW-TOS ===== */
const SP_GUIDES = [
  {
    cat: "Réparer",
    t: "Comment rénover une chaise de brocante",
    time: "3–4 h",
    diff: "Facile",
    href: "/fr/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "Réparer",
    t: "Comment accrocher un objet lourd sans demander d'aide",
    time: "45 min",
    diff: "Obstinément faisable",
    href: "/fr/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("Tous");
  const cats = ["Tous", "Réparer"];
  const list = filter === "Tous" ? 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>Tous les how-tos par 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 à venir
                  </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: "J'ai essayé le guide de la chaise de brocante le week-end dernier avec une commode à 20 $. L'étape 6 m'a sauvée — j'allais utiliser le mauvais décapant et j'aurais ruiné le placage. Les façades de tiroirs sont sorties dingues.",
    reply: "Maya — envoie une photo s'il te plaît. Je veux voir la commode.",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "J'ai 47 ans et je n'ai jamais possédé de perceuse. Ton essai « achète juste la moins chère » m'a convaincu d'essayer, et j'ai accroché des étagères dans la chambre de ma fille. Elle pense que je suis un magicien maintenant.",
    reply: "James, tu ES un magicien. Ne lui dis pas le truc.",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "Question : j'ai suivi le guide de l'étagère flottante mais mes murs sont en plâtre et lattes, pas en placo. Chevilles différentes ? Ou est-ce que toute l'approche est à revoir ?",
    reply: "Le plâtre a son propre guide — qui arrive le mois prochain. Attends, tu as raison d'être prudente.",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>Lettres <em>des lecteurs</em></h2>
        <p>Le courrier — gardé honnête, gardé court. Si tu as construit quelque chose à partir d'un des guides de Sam, elle veut le savoir (et veut probablement voir une 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>Un projet&nbsp;?<br/><em>Parle-en à Sam.</em></h2>
        <p>
          Si tu as fini quelque chose grâce à un de ces guides — ou si tu es coincé à mi-chemin et que tu as besoin d'un avis — elle lit tout ce qui arrive. Pas de RP, pas de pitchs, juste le vrai travail.
        </p>
        <div className="ctas">
          <a href="/contact/" className="btn primary">Envoyer une photo →</a>
          <a href="/contact/" className="btn ghost">Suggérer un guide</a>
          <a href="https://instagram.com/sam.aiam" target="_blank" rel="noopener noreferrer" className="btn ghost">Suivre @sam.aiam</a>
        </div>
      </div>
      <div className="sp-end-side">
        <span className="sig">— sam</span>
        <div className="row"><span>Publié</span><span className="v">Printemps '26</span></div>
        <div className="row"><span>Numéro</span><span className="v">Vol. III · N° 04</span></div>
        <div className="row"><span>Atelier</span><span className="v">Un garage deux places</span></div>
        <div className="row"><span>Café</span><span className="v">Noir, deuxième cafetière</span></div>
        <div className="row"><span>Statut</span><span className="v">Au 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 />);