// CoreBridge Advisory — Perspectives (blog) page
// Single-page hash router: blog.html shows the index, blog.html#slug shows that post.

function useHashSlug() {
  const [slug, setSlug] = React.useState(() => {
    if (typeof window === "undefined") return null;
    const h = window.location.hash.replace(/^#/, "").trim();
    return h || null;
  });
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#/, "").trim();
      setSlug(h || null);
      // Scroll to top when navigating between index and a post
      window.scrollTo({ top: 0, behavior: "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return slug;
}

function BlogIndex() {
  return (
    <React.Fragment>
      <section className="blog-hero" data-screen-label="Perspectives Hero">
        <div className="wrap">
          <div className="eyebrow-chip blog-hero__eyebrow">— Perspectives</div>
          <h1 className="blog-hero__title">Working <em>papers</em>, not press releases.</h1>
          <p className="blog-hero__lede">
            Long-form thinking from the CoreBridge advisory team on governance, strategy, and the institutions that shape public life. Written for the executives, councils and boards who actually have to make the call.
          </p>
        </div>
      </section>

      <section className="blog-list" data-screen-label="Perspectives Index">
        <div className="wrap">
          <div className="blog-list__items">
            {POSTS.map((p, i) => (
              <a key={p.slug} href={"#" + p.slug} className="blog-row">
                <div className="blog-row__num">№ {String(i + 1).padStart(2, "0")} · {p.date}</div>
                <div className="blog-row__main">
                  <div className="blog-row__meta">
                    <span>{p.tag}</span>
                    <span>{p.author}</span>
                    <span>{p.readTime}</span>
                  </div>
                  <h2 className="blog-row__title">{p.title}</h2>
                  <p className="blog-row__excerpt">{p.excerpt}</p>
                  <div className="blog-row__cta">
                    <span>Read paper</span>
                    <ArrowRight />
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function BlogPost({ slug }) {
  const post = POSTS.find(p => p.slug === slug);
  if (!post) {
    return (
      <section className="blog-hero">
        <div className="wrap">
          <div className="eyebrow-chip blog-hero__eyebrow">— Not found</div>
          <h1 className="blog-hero__title">This <em>paper</em> isn't here.</h1>
          <p className="blog-hero__lede">
            The link you followed doesn't match a published perspective. <a href="blog.html" style={{ color: "var(--accent)", borderBottom: "1px solid currentColor" }}>Return to the index</a> to find what you were looking for.
          </p>
        </div>
      </section>
    );
  }
  const idx = POSTS.findIndex(p => p.slug === slug);
  const related = [POSTS[(idx + 1) % POSTS.length], POSTS[(idx + 2) % POSTS.length]];

  // Render title with em-tag interpretation: any text wrapped in {{...}} becomes italic accent
  const renderTitle = (t) => {
    const parts = t.split(/(\{\{[^}]+\}\})/g);
    return parts.map((p, i) => {
      const m = p.match(/^\{\{(.+)\}\}$/);
      if (m) return <em key={i}>{m[1]}</em>;
      return <React.Fragment key={i}>{p}</React.Fragment>;
    });
  };

  return (
    <React.Fragment>
      <section className="post-hero" data-screen-label={"Post " + post.title}>
        <div className="wrap">
          <a href="blog.html" className="post-hero__back">
            <ArrowRight />
            <span>All perspectives</span>
          </a>
          <div className="post-hero__meta">
            <span>{post.tag}</span>
            <span>{post.date}</span>
            <span>{post.readTime}</span>
          </div>
          <h1 className="post-hero__title">{renderTitle(post.title)}</h1>
          <div className="post-hero__byline">
            <span>By {post.author}</span>
          </div>
        </div>
      </section>

      <section className="wrap" data-screen-label="Post Body">
        <article className="post-body">
          {post.body.map((para, i) => {
            if (para.startsWith("## ")) return <h2 key={i} className="post-h2">{para.slice(3)}</h2>;
            if (para.startsWith("### ")) return <h3 key={i} className="post-h3">{para.slice(4)}</h3>;
            if (para.startsWith("> ")) return <blockquote key={i} className="post-quote">{para.slice(2)}</blockquote>;
            return <p key={i}>{para}</p>;
          })}
        </article>
      </section>

      <section className="post-related" data-screen-label="Related">
        <div className="wrap">
          <div className="post-related__label">— Continue reading</div>
          <div className="post-related__grid">
            {related.map((r, i) => (
              <a key={i} href={"#" + r.slug} className="post-related__item">
                <span className="post-related__item-tag">{r.tag} · {r.readTime}</span>
                <h3 className="post-related__item-title">{r.title}</h3>
              </a>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function BlogApp() {
  useRevealOnScroll();
  const slug = useHashSlug();
  const [headerDark, setHeaderDark] = React.useState(false);

  // Set page title for share/SEO
  React.useEffect(() => {
    if (slug) {
      const post = POSTS.find(p => p.slug === slug);
      document.title = post
        ? post.title.replace(/\u2014/g, "—") + " · CoreBridge Advisory"
        : "Perspectives · CoreBridge Advisory";
    } else {
      document.title = "Perspectives · CoreBridge Advisory";
    }
  }, [slug]);

  return (
    <React.Fragment>
      <Header dark={headerDark} />
      <main className="blog-page">
        {slug ? <BlogPost slug={slug} /> : <BlogIndex />}
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<BlogApp />);