// IndieVertical — blog pages: index and individual post.

// ---------- blog index ----------
function IvBlog() {
  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="pagehead">
        <h1>Blog</h1>
        <p className="intro">Guides, announcements, and notes from the IndieVertical team.</p>
      </div>
      <div className="blog-list">
        {IV_BLOG_POSTS.map((post) => (
          <a key={post.slug} className="blog-card-link" href={"#/blog/" + post.slug}>
            <article className="blog-card">
              <div className="bc-tags">
                {post.tags.map((t) => (
                  <span key={t} className={"bc-tag" + (t === "Announcements" ? " warm" : "")}>{t}</span>
                ))}
                <span className="bc-time">{post.readingTime}</span>
              </div>
              <h2 className="bc-title">{post.title}</h2>
              <p className="bc-hook">{post.hook}</p>
              <div className="bc-foot">
                <span className="bc-author">{post.author}</span>
                <span className="bc-date">{post.date}</span>
              </div>
            </article>
          </a>
        ))}
      </div>
      <div style={{ height: 48 }}></div>
      <IvFooter />
    </div>
  );
}

// ---------- blog post ----------
function IvBlogPost({ slug }) {
  const post = IV_BLOG_POSTS.find((p) => p.slug === slug);

  if (!post) {
    return (
      <div className="pp dir-marquee">
        <IvHeader />
        <div style={{ padding: "60px 32px" }}>
          <IvEmptyState
            heading="Post not found"
            body="That post does not exist or has been moved."
            button="Back to blog"
            href="#/blog"
          />
        </div>
        <IvFooter />
      </div>
    );
  }

  return (
    <div className="pp dir-marquee">
      <IvHeader />
      <div className="blog-post">
        <div className="bp-tags">
          {post.tags.map((t) => (
            <span key={t} className={"bc-tag" + (t === "Announcements" ? " warm" : "")}>{t}</span>
          ))}
          <span className="bc-time">{post.readingTime}</span>
        </div>
        <h1 className="bp-title">{post.title}</h1>
        <p className="bp-hook">{post.hook}</p>
        <div className="bp-meta">
          <span>{post.author}</span>
          <span className="bp-sep">·</span>
          <span>{post.date}</span>
        </div>
        <div className="bp-rule"></div>
        <div className="bp-body">
          {post.body.map((para, i) => {
            // Bold markdown (**text**) → <strong>
            const parts = para.split(/(\*\*[^*]+\*\*)/g).map((s, j) => {
              if (s.startsWith("**") && s.endsWith("**")) {
                return <strong key={j}>{s.slice(2, -2)}</strong>;
              }
              return s;
            });
            return <p key={i}>{parts}</p>;
          })}
        </div>
        <div className="bp-rule"></div>
        <div className="bp-nav">
          <a className="bp-back" href="#/blog">← Back to blog</a>
          {(() => {
            const idx = IV_BLOG_POSTS.findIndex((p) => p.slug === slug);
            const prev = IV_BLOG_POSTS[idx + 1];
            const next = IV_BLOG_POSTS[idx - 1];
            return (
              <div className="bp-pn">
                {prev && <a className="bp-pn-link" href={"#/blog/" + prev.slug}>← {prev.title}</a>}
                {next && <a className="bp-pn-link" href={"#/blog/" + next.slug}>{next.title} →</a>}
              </div>
            );
          })()}
        </div>
      </div>
      <IvFooter />
    </div>
  );
}

Object.assign(window, { IvBlog, IvBlogPost });