/* IMACX blog — index (listing) + post (reading) pages.
   Matches the editorial Swiss system: hairlines, index bars, acid accent. */

function catLabel(id) {
  const c = BLOG_CATS.find((x) => x.id === id);
  return c ? c.label : id;
}

/* ---- Article body renderer (structured blocks) ------------------- */
function ArticleBody({ body }) {
  return (
    <div className="bp-body">
      {body.map((b, i) => {
        if (b.h) return <h2 key={i} className="bp-h">{b.h}</h2>;
        if (b.p) return <p key={i} className="bp-p">{b.p}</p>;
        if (b.list) return (
          <ul key={i} className="bp-list">
            {b.list.map((li, j) => <li key={j}>{li}</li>)}
          </ul>
        );
        if (b.olist) return (
          <ol key={i} className="bp-olist">
            {b.olist.map((li, j) => (
              <li key={j}><b>{li.t}.</b> {li.d}</li>
            ))}
          </ol>
        );
        if (b.dl) return (
          <dl key={i} className="bp-dl">
            {b.dl.map((row, j) => (
              <div className="bp-dl-row" key={j}>
                <dt>{row.k}</dt>
                <dd>{row.v}</dd>
              </div>
            ))}
          </dl>
        );
        if (b.quote) return (
          <blockquote key={i} className="bp-quote">
            <span className="mark" aria-hidden="true">“</span>
            <p>{b.quote.t}</p>
            {b.quote.by ? <cite>— {b.quote.by}</cite> : null}
          </blockquote>
        );
        if (b.callout) return (
          <aside key={i} className="bp-callout">
            <span className="bp-callout-tag">{b.callout.title}</span>
            <p>{b.callout.body}</p>
          </aside>
        );
        if (b.table) return (
          <div key={i} className="bp-table-wrap">
            <table className="bp-table">
              <thead>
                <tr>{b.table.head.map((h, j) => <th key={j}>{h}</th>)}</tr>
              </thead>
              <tbody>
                {b.table.rows.map((r, j) => (
                  <tr key={j}>{r.map((c, k) => <td key={k} className={k === 0 ? "first" : ""}>{c}</td>)}</tr>
                ))}
              </tbody>
            </table>
          </div>
        );
        return null;
      })}
    </div>
  );
}

/* ---- Reusable article card --------------------------------------- */
function ArticleCard({ post, onOpen, compact }) {
  return (
    <article className={"bp-card" + (compact ? " compact" : "")} onClick={() => onOpen(post)}>
      <div className="bp-card-media">
        <img src={post.img} alt={post.title} loading="lazy" />
      </div>
      <div className="bp-card-body">
        <div className="bp-card-meta">
          <span className="cat">{catLabel(post.cat)}</span>
          <span className="dot" />
          <span className="num">{post.read} min</span>
        </div>
        <h3 className="bp-card-title">{post.title}</h3>
        <p className="bp-card-ex">{post.excerpt}</p>
        <span className="bp-card-go">Ler artigo {Icons.arrow}</span>
      </div>
    </article>
  );
}

/* ================================================================== */
/* BLOG INDEX                                                          */
/* ================================================================== */
function BlogPage({ go, openPost }) {
  const [cat, setCat] = useState("all");
  const featured = BLOG_POSTS.find((p) => p.featured) || BLOG_POSTS[0];
  const rest = BLOG_POSTS.filter((p) => p.id !== featured.id);
  const shown = cat === "all" ? rest : rest.filter((p) => p.cat === cat);

  return (
    <div className="hm">
      {/* Index bar */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule-l">
          <span><span className="sq" />O nosso blog · Conhecimento em brindes</span>
          <span>Estratégia · Produção · Sustentabilidade</span>
          <span className="o num">{BLOG_POSTS.length} artigos</span>
        </div>

        {/* Masthead */}
        <section className="bp-masthead">
          <h1>Ideias, técnicas e boas práticas sobre <span className="o">brindes corporativos</span>.</h1>
          <p>Escrevemos sobre o que fazemos todos os dias: escolher o produto certo, marcar bem um logótipo, controlar custos e desenhar campanhas que ficam na mão de quem importa.</p>
        </section>
      </div>

      {/* Featured */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span><span className="sq" />Em destaque</span>
          <span className="o">Leitura essencial</span>
        </div>
        <article className="bp-feat" onClick={() => openPost(featured)}>
          <div className="bp-feat-media">
            <img src={featured.img} alt={featured.title} loading="lazy" />
          </div>
          <div className="bp-feat-body">
            <div className="bp-card-meta">
              <span className="cat">{catLabel(featured.cat)}</span>
              <span className="dot" />
              <span className="num">{featured.read} min de leitura</span>
            </div>
            <h2 className="bp-feat-title">{featured.title}</h2>
            <p className="bp-feat-dek">{featured.dek}</p>
            <div className="bp-feat-foot">
              <span className="by">{featured.author} · <span className="num">{featured.date}</span></span>
              <span className="btn-accent">Ler artigo {Icons.arrow}</span>
            </div>
          </div>
        </article>
      </div>

      {/* Filter + grid */}
      <div className="hm-bleed">
        <div className="hm-idx hm-rule">
          <span><span className="sq" />Todos os artigos</span>
          <div className="bp-filter">
            <button className="bp-chip" data-on={cat === "all"} onClick={() => setCat("all")}>Todos</button>
            {BLOG_CATS.map((c) => (
              <button key={c.id} className="bp-chip" data-on={cat === c.id} onClick={() => setCat(c.id)}>{c.label}</button>
            ))}
          </div>
        </div>
        <div className="bp-grid">
          {shown.map((p) => <ArticleCard key={p.id} post={p} onOpen={openPost} />)}
        </div>
      </div>

      {/* CTA band */}
      <section className="hm-band">
        <div className="hm-bleed in">
          <div>
            <span className="e">— Da ideia à entrega</span>
            <h2>Já sabe o que precisa?<br />Vamos <span className="o">propor</span>.</h2>
          </div>
          <div className="r">
            <p>O blog é onde partilhamos o método. O orçamento é onde o aplicamos à sua campanha — com produto e personalização sempre discriminados.</p>
            <div className="hm-cta">
              <button className="btn-accent btn-lg" onClick={() => go("request")}>Pedir orçamento {Icons.arrow}</button>
              <button className="btn btn-lg" style={{ borderColor: "rgba(255,255,255,.35)", color: "#fff", background: "transparent" }} onClick={() => go("catalog")}>Explorar catálogo</button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ================================================================== */
/* BLOG POST                                                          */
/* ================================================================== */
function BlogPostPage({ post, go, openPost }) {
  const related = BLOG_POSTS.filter((p) => p.id !== post.id && p.cat === post.cat);
  const more = (related.length >= 2 ? related : [...related, ...BLOG_POSTS.filter((p) => p.id !== post.id && p.cat !== post.cat)]).slice(0, 3);

  return (
    <div className="wrapx bp-article">
      <div className="crumbs">
        <a onClick={() => go("home")} style={{ cursor: "pointer" }}>Início</a><span className="sep">/</span>
        <a onClick={() => go("blog")} style={{ cursor: "pointer" }}>Blog</a><span className="sep">/</span>
        <span>{catLabel(post.cat)}</span>
      </div>

      <header className="bp-hd">
        <span className="eyebrow accent">{catLabel(post.cat)}</span>
        <h1 className="bp-title">{post.title}</h1>
        <p className="bp-dek">{post.dek}</p>
        <div className="bp-byline">
          <span>{post.author}</span>
          <span className="sep">·</span>
          <span className="num">{post.date}</span>
          <span className="sep">·</span>
          <span className="num">{post.read} min de leitura</span>
        </div>
      </header>

      <figure className="bp-hero">
        <img src={post.img} alt={post.title} loading="lazy" />
      </figure>

      <div className="bp-layout">
        <div className="bp-main">
          <ArticleBody body={post.body} />

          {post.takeaways ? (
            <aside className="bp-takeaways">
              <span className="bp-callout-tag">Em síntese</span>
              <ul>
                {post.takeaways.map((t, i) => <li key={i}>{t}</li>)}
              </ul>
            </aside>
          ) : null}

          <div className="bp-end-cta">
            <div>
              <h3>Tem uma campanha em mente?</h3>
              <p>Conte-nos o produto, a quantidade e o prazo. Respondemos com uma proposta ajustada.</p>
            </div>
            <button className="btn-accent btn-lg" onClick={() => go("request")}>Pedir orçamento {Icons.arrow}</button>
          </div>
        </div>

        <aside className="bp-aside">
          <div className="bp-aside-sticky">
            <span className="eyebrow">A ler agora</span>
            <p className="bp-aside-title">{post.title}</p>
            <div className="bp-aside-share">
              <span className="lab">Partilhar</span>
              <div className="bp-share-row">
                <button aria-label="LinkedIn">in</button>
                <button aria-label="Copiar ligação">{Icons.spark}</button>
                <button aria-label="Email">@</button>
              </div>
            </div>
            <button className="btn btn-block" onClick={() => go("blog")}>← Todos os artigos</button>
          </div>
        </aside>
      </div>

      {/* Related */}
      <section className="bp-related">
        <div className="hm-idx hm-rule" style={{ paddingTop: 22 }}>
          <span><span className="sq" />Continuar a ler</span>
          <span className="o" style={{ cursor: "pointer" }} onClick={() => go("blog")}>Ver o blog →</span>
        </div>
        <div className="bp-grid">
          {more.map((p) => <ArticleCard key={p.id} post={p} onOpen={openPost} />)}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BlogPage, BlogPostPage, ArticleCard, ArticleBody });