/* 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: "Escuadra rápida",   top: "8%",  right: "16%", rot: -4, side: "r" },
  { label: "Pata de cabra",     top: "30%", left: "8%",   rot: 6,  side: "l" },
  { label: "Atornillador de impacto",  top: "62%", right: "9%",  rot: 3,  side: "r" },
  { label: "Esmeril de banco",  top: "78%", left: "14%",  rot: -8, side: "l" },
  { label: "Cordel de tiza",    top: "12%", left: "22%",  rot: 2,  side: "l" },
  { label: "Tijeras de hojalatero", 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="/">Inicio</a>
        <span>›</span>
        <a href="/contributors/">Colaboradores</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">El How To de Sam</h1>
          <span className="role">Colaboradora · No. 04 / Primavera '26</span>
          <div className="sp-id-meta">
            <div className="cell">
              <span className="lab">Ubicada en</span>
              <span className="v">Un garaje de dos autos</span>
            </div>
            <div className="cell">
              <span className="lab">Publicando desde</span>
              <span className="v">Primavera '26</span>
            </div>
            <div className="cell">
              <span className="lab">Mejor en</span>
              <span className="v">Hablarte para que no te tires del precipicio</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">
          Rizos castaños.<br/>
          Chaqueta de mezclilla.<br/>
          <em className="doable">Tercamente factible.</em>
        </h2>

        <div className="sp-bio-body">
          <p className="lede">
            Sam es la que aparece con aserrín en <span className="sp-mark">el pelo</span> y te hace creer que puedes poner los azulejos de tu propio baño. No le va lo elegante — <strong>ella termina las cosas</strong>. Su garaje es su estudio, sus fines de semana son su contenido, y cada guía que escribe viene de algo que de verdad ha hecho con sus propias manos.
          </p>
          <p>
            Cuando no está metida hasta los codos en un proyecto, está documentando el proceso para que tú te saltes los errores que ella ya cometió. Sin relleno. Sin paja. Solo la parte donde aprendes cómo hacer la cosa.
          </p>
          <p>
            Llegó al mundo de la mejora del hogar por el camino largo — escuela de arte, una silla de teca de segunda mano, un agujero de YouTube, seis cortes mal hechos, y como en el séptimo intento le cayó el veinte. Ahora trabaja a tiempo completo en lo que sea que esté roto en la casa y escribe sobre la parte que descifró esa semana.
          </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">— Estadísticas del taller</span>
          <div className="sp-stats-grid">
            <div className="cell">
              <div className="k">Guías escritas</div>
              <div className="v big">2</div>
            </div>
            <div className="cell">
              <div className="k">Proyectos este año</div>
              <div className="v big">23</div>
            </div>
            <div className="cell">
              <div className="k">Herramienta favorita</div>
              <div className="v">Atornillador de impacto</div>
            </div>
            <div className="cell">
              <div className="k">Estado del finde</div>
              <div className="v">En el garaje</div>
            </div>
            <div className="cell">
              <div className="k">Lo que más le preguntan</div>
              <div className="v">"¿Qué tinte es ese?"</div>
            </div>
            <div className="cell">
              <div className="k">Siempre dice</div>
              <div className="v">"Está bien, lánzalo."</div>
            </div>
          </div>
        </div>

        <div className="sp-rule">
          <span className="lab">La regla de Sam</span>
          <p>"Si puedes ver un video de 10 minutos y sostener un taladro, puedes hacer esto. Te lo prometo."</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="/es/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">En el banco ahora mismo</span>
          <h4>Una silla auxiliar de teca de los 70 de una venta de garaje.</h4>
          <p>$12. Madera maciza, acabado horrible, juntas sorprendentemente apretadas. El lijado empieza el sábado.</p>
        </a>
      </aside>
    </div>
  </section>
);

/* ===== TOP PICKS ===== */
const SPPicks = () => (
  <section className="sp-picks">
    <div className="sp-picks-wrap">
      <div className="sp-picks-head">
        <h2>Las recomendaciones de Sam</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">Las dos que te pondría primero en la mano</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/es/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="Sam sentada en la silla de segunda mano restaurada en verde salvia"
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge">Recomendación principal</span>
            <h3>Cómo restaurar una silla de segunda mano (y hacer que parezca que pagaste precio completo)</h3>
            <p className="blurb">
              Encontré esta silla en una tienda de segunda mano por $12. Madera maciza, buen esqueleto, acabado absolutamente horrible. La llevé a casa, la restauré en una tarde, y ahora vive junto a mi puerta principal y la gente me pregunta dónde la conseguí.
            </p>
            <span className="read">Leer guía →</span>
          </div>
        </a>

        <a href="/es/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">Recomendación #2</span>
            <h3>Cómo colgar algo pesado sin pedirle ayuda a nadie</h3>
            <span className="read">Leer →</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* ===== ALL HOW-TOS ===== */
const SP_GUIDES = [
  {
    cat: "Reparar",
    t: "Cómo restaurar una silla de segunda mano",
    time: "3–4 hrs",
    diff: "Fácil",
    href: "/es/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "Reparar",
    t: "Cómo colgar algo pesado sin pedir ayuda",
    time: "45 min",
    diff: "Tercamente factible",
    href: "/es/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("Todas");
  const cats = ["Todas", "Reparar"];
  const list = filter === "Todas" ? 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>Todas las guías de Sam <span className="count">{list.length} guías</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 en camino
                  </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: "Probé la guía de la silla de segunda mano el finde pasado con una cómoda de $20. El paso 6 me salvó — estaba a punto de usar el decapante incorrecto y habría arruinado el chapado. Los frentes de los cajones quedaron increíbles.",
    reply: "Maya — por favor mándame una foto. Quiero ver la cómoda.",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "Tengo 47 años y nunca he tenido un taladro. Tu ensayo de 'compra el más barato y ya' me convenció de intentarlo, y colgué unos estantes en el cuarto de mi hija. Ahora cree que soy un mago.",
    reply: "James, SÍ eres un mago. No le digas el truco.",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "Pregunta: seguí la guía del estante flotante pero mis paredes son de yeso y listón, no de tablaroca. ¿Anclajes diferentes? ¿O es el método entero el que está mal?",
    reply: "El yeso lleva su propia guía — sale el mes que viene. Espérate, haces bien en ser cuidadosa.",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>Cartas <em>de los lectores</em></h2>
        <p>El buzón — sincero y breve. Si has construido algo con una de las guías de Sam, ella quiere saberlo (y probablemente quiere ver una foto).</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>¿Tienes un proyecto?<br/><em>Cuéntale a Sam.</em></h2>
        <p>
          Si terminaste algo gracias a una de estas guías — o te quedaste atascado a la mitad y necesitas una opinión — ella lee todo lo que llega. Sin RP, sin pitches, solo el trabajo de verdad.
        </p>
        <div className="ctas">
          <a href="/contact/" className="btn primary">Mandar una foto →</a>
          <a href="/contact/" className="btn ghost">Sugerir una guía</a>
          <a href="https://instagram.com/sam.aiam" target="_blank" rel="noopener noreferrer" className="btn ghost">Seguir a @sam.aiam</a>
        </div>
      </div>
      <div className="sp-end-side">
        <span className="sig">— sam</span>
        <div className="row"><span>Publicado</span><span className="v">Primavera '26</span></div>
        <div className="row"><span>Edición</span><span className="v">Vol. III · No. 04</span></div>
        <div className="row"><span>Estudio</span><span className="v">Un garaje de dos autos</span></div>
        <div className="row"><span>Café</span><span className="v">Negro, segunda jarra</span></div>
        <div className="row"><span>Estado</span><span className="v">En el garaje</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 />);