/* 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: "Esquadro de velocidade",   top: "8%",  right: "16%", rot: -4, side: "r" },
  { label: "Pé-de-cabra",        top: "30%", left: "8%",   rot: 6,  side: "l" },
  { label: "Parafusadeira de impacto",  top: "62%", right: "9%",  rot: 3,  side: "r" },
  { label: "Esmerilhadeira de bancada",  top: "78%", left: "14%",  rot: -8, side: "l" },
  { label: "Linha de giz",     top: "12%", left: "22%",  rot: 2,  side: "l" },
  { label: "Tesoura de funileiro",      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="/">Início</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">O How To da Sam</h1>
          <span className="role">Colaboradora · No. 04 / Primavera '26</span>
          <div className="sp-id-meta">
            <div className="cell">
              <span className="lab">Baseada em</span>
              <span className="v">Uma garagem para dois carros</span>
            </div>
            <div className="cell">
              <span className="lab">Publicando desde</span>
              <span className="v">Primavera '26</span>
            </div>
            <div className="cell">
              <span className="lab">Especialidade</span>
              <span className="v">Te tirar da beirada</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">
          Cachos ruivos.<br/>
          Jaqueta jeans.<br/>
          <em className="doable">Teimosamente fazível.</em>
        </h2>

        <div className="sp-bio-body">
          <p className="lede">
            Sam é a pessoa que aparece com serragem no <span className="sp-mark">cabelo</span> e faz você acreditar que pode azulejar seu próprio banheiro. Ela não faz chique — <strong>ela faz pronto</strong>. A garagem é o estúdio dela, os fins de semana são o conteúdo dela, e cada guia que ela escreve vem de algo que ela realmente fez com as próprias mãos.
          </p>
          <p>
            Quando ela não está enfiada até o cotovelo num projeto, está documentando o processo pra você pular os erros que ela já cometeu. Sem enrolação. Sem encheção. Só a parte em que você aprende a fazer a coisa.
          </p>
          <p>
            Ela chegou na reforma residencial pelo caminho mais longo — escola de artes, uma cadeira de teca de brechó, uma maratona no YouTube, seis cortes errados, e em algum lugar perto da sétima tentativa a ficha caiu. Hoje ela trabalha em tempo integral em qualquer coisa que estiver quebrada na casa e escreve sobre o pedaço que decifrou naquela 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">— Estatísticas da oficina</span>
          <div className="sp-stats-grid">
            <div className="cell">
              <div className="k">Guias escritos</div>
              <div className="v big">2</div>
            </div>
            <div className="cell">
              <div className="k">Projetos este ano</div>
              <div className="v big">23</div>
            </div>
            <div className="cell">
              <div className="k">Ferramenta favorita</div>
              <div className="v">Parafusadeira de impacto</div>
            </div>
            <div className="cell">
              <div className="k">Status do fim de semana</div>
              <div className="v">Na garagem</div>
            </div>
            <div className="cell">
              <div className="k">Pergunta mais frequente</div>
              <div className="v">"Que tinta é essa?"</div>
            </div>
            <div className="cell">
              <div className="k">Sempre diz</div>
              <div className="v">"Tá bom, manda ver."</div>
            </div>
          </div>
        </div>

        <div className="sp-rule">
          <span className="lab">A regra da Sam</span>
          <p>"Se você consegue assistir um vídeo de 10 minutos e segurar uma furadeira, você consegue fazer isso. Eu 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="/pt/contributors/sam/how-to-refinish-a-thrifted-chair/"
          className="sp-bench"
          style={{ display: "block", textDecoration: "none" }}
        >
          <span className="lab">Na bancada agora</span>
          <h4>Uma cadeira lateral de teca dos anos 70 de uma feira de garagem.</h4>
          <p>$12. Madeira maciça, acabamento horroroso, juntas surpreendentemente firmes. A lixadeira começa 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>Favoritos da Sam</h2>
        <span className="underline" aria-hidden="true"></span>
        <span className="pill">Os dois que ela empurraria pra você primeiro</span>
      </div>

      <div className="sp-picks-grid">
        <a href="/pt/contributors/sam/how-to-refinish-a-thrifted-chair/" className="sp-pick feature">
          <div className="img">
            <img
              src="thrifted-chair.png"
              alt="Sam sentada na cadeira de brechó restaurada em verde-sálvia"
              loading="lazy"
            />
          </div>
          <div className="body">
            <span className="badge">Favorita</span>
            <h3>Como restaurar uma cadeira de brechó (e fazer parecer que você pagou o preço cheio)</h3>
            <p className="blurb">
              Achei essa cadeira no brechó por $12. Madeira maciça, estrutura boa, acabamento absolutamente horroroso. Levei pra casa, restaurei em uma tarde, hoje ela mora ao lado da minha porta de entrada e as pessoas perguntam onde comprei.
            </p>
            <span className="read">Ler guia →</span>
          </div>
        </a>

        <a href="/pt/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">Escolha #2</span>
            <h3>Como pendurar algo pesado sem pedir ajuda</h3>
            <span className="read">Ler →</span>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* ===== ALL HOW-TOS ===== */
const SP_GUIDES = [
  {
    cat: "Consertar",
    t: "Como restaurar uma cadeira de brechó",
    time: "3–4 hrs",
    diff: "Fácil",
    href: "/pt/contributors/sam/how-to-refinish-a-thrifted-chair/",
    img: "thrifted-chair.png",
  },
  {
    cat: "Consertar",
    t: "Como pendurar algo pesado sem pedir ajuda",
    time: "45 min",
    diff: "Teimosamente fazível",
    href: "/pt/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("Todos");
  const cats = ["Todos", "Consertar"];
  const list = filter === "Todos" ? 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>Todos os guias da Sam <span className="count">{list.length} guias</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 a caminho
                  </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: "Tentei o guia da cadeira de brechó no fim de semana passado com uma cômoda de $20. O passo 6 me salvou — eu ia usar o removedor errado e teria estragado o folheado. As frentes das gavetas ficaram irreais.",
    reply: "Maya — manda foto, por favor. Quero ver a cômoda.",
    rot: -1.6,
  },
  {
    who: "James T.",
    where: "Brooklyn, NY",
    text: "Tenho 47 anos e nunca tive uma furadeira. Seu texto do 'compre a mais barata' me convenceu a tentar, e eu pendurei prateleiras no quarto da minha filha. Agora ela acha que eu sou um mago.",
    reply: "James, você É um mago. Não conta o truque pra ela.",
    rot: 1.2,
  },
  {
    who: "Priya K.",
    where: "Toronto, ON",
    text: "Pergunta: segui o guia da prateleira flutuante mas minhas paredes são de gesso e ripa, não drywall. Buchas diferentes? Ou a abordagem inteira está errada?",
    reply: "Gesso ganha o próprio guia — sai mês que vem. Espera, você está certa em ter cautela.",
    rot: -0.8,
  },
];

const SPLetters = () => (
  <section className="sp-letters">
    <div className="sp-letters-wrap">
      <div className="sp-letters-head">
        <h2>Cartas <em>dos leitores</em></h2>
        <p>A correspondência — mantida honesta, mantida curta. Se você construiu algo a partir de um dos guias da Sam, ela quer saber (e provavelmente quer ver uma 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>Tem um projeto?<br/><em>Conta pra Sam.</em></h2>
        <p>
          Se você terminou alguma coisa graças a um desses guias — ou empacou no meio e precisa de uma checagem de sanidade — ela lê tudo que chega. Sem PR, sem pitch, só o trabalho de verdade.
        </p>
        <div className="ctas">
          <a href="/contact/" className="btn primary">Mandar uma foto →</a>
          <a href="/contact/" className="btn ghost">Sugerir um guia</a>
          <a href="https://instagram.com/sam.aiam" target="_blank" rel="noopener noreferrer" className="btn ghost">Seguir @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>Edição</span><span className="v">Vol. III · No. 04</span></div>
        <div className="row"><span>Estúdio</span><span className="v">Garagem para dois carros</span></div>
        <div className="row"><span>Café</span><span className="v">Preto, segunda jarra</span></div>
        <div className="row"><span>Status</span><span className="v">Na garagem</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 />);