/* global React */
function PostV6() {
  const params = new URLSearchParams(window.location.search);
  const slug = params.get("slug");
  const posts = window.POSTS || [];
  const post = posts.find((p) => p.slug === slug) || posts[0];
  const product = post && post.relatedProduct ? (window.PRODUCTS || []).find((p) => p.id === post.relatedProduct) : null;
  if (!post) return <div className="wrap" style={{ padding: 80 }}>Post not found.</div>;

  return (
    <div>
      <header className="v4nav">
        <div className="v4nav-in">
          <a href="index.html" className="brand" aria-label="tcviz home"><window.Logo height={34} tone="pbi" /></a>
          <nav className="v4nav-links" aria-label="Primary">
            <a href="index.html#products">Catalog</a>
            <a href="gallery.html">Gallery</a>
            <a href="blog.html">Blog</a>
            <a href="index.html#specs">Why tcviz</a>
            <a href="about.html">About</a>
          </nav>
          <div className="v4nav-cta">
            <a href="contact.html" className="btn btn-ghost btn-sm">Contact</a>
            <a href="index.html#products" className="btn btn-sm">Browse visuals</a>
          </div>
        </div>
      </header>

      <section className="sec tight" style={{ paddingTop: 56, paddingBottom: 8 }}>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <a href="blog.html" style={{ fontSize: 14, color: "var(--muted)" }}>← Blog</a>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 18 }}>
            <span className="ptag">{post.category}</span>
            <span style={{ fontSize: 13, color: "var(--muted)" }}>{new Date(post.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: "clamp(30px,4vw,44px)", lineHeight: 1.1, letterSpacing: "-0.02em", margin: "14px 0 0" }}>{post.title}</h1>
        </div>
      </section>

      <section className="sec" style={{ paddingTop: 32 }}>
        <div className="wrap" style={{ maxWidth: 760 }}>
          <article style={{ fontSize: 17, lineHeight: 1.7, color: "var(--foreground)" }}>
            {post.body.map((block, i) =>
              block.h ? <h2 key={i} style={{ fontSize: 24, fontWeight: 700, marginTop: 36, marginBottom: 4 }}>{block.h}</h2>
              : block.ul ? <ul key={i} style={{ margin: "12px 0", paddingLeft: 22 }}>{block.ul.map((li, j) => <li key={j} style={{ marginBottom: 8 }}>{li}</li>)}</ul>
              : <p key={i} style={{ margin: "14px 0" }}>{block.p}</p>
            )}
          </article>

          {product && (
            <a href={"product.html?id=" + product.id} className="show-card" style={{ display: "flex", alignItems: "center", gap: 16, padding: 20, marginTop: 40, textDecoration: "none" }}>
              <div className="gw"><window.ProductGlyph id={product.id} size={32} /></div>
              <div>
                <div style={{ fontSize: 13, color: "var(--muted)" }}>Related visual</div>
                <div style={{ fontWeight: 700, fontSize: 17 }}>{product.name} →</div>
              </div>
            </a>
          )}
        </div>
      </section>

      <footer className="v4foot">
        <div className="wrap">
          <div className="v4foot-grid">
            <div>
              <window.Logo height={30} tone="pbi" />
              <p className="blurb">Enterprise-grade custom visuals for Power BI. Designed, documented and supported by TC.</p>
            </div>
            <div>
              <h5>Products</h5>
              <ul><li><a href="index.html#products">All visuals</a></li><li><a href="gallery.html">Gallery</a></li><li><a href="blog.html">Blog</a></li></ul>
            </div>
            <div>
              <h5>Company</h5>
              <ul><li><a href="about.html">About TC</a></li><li><a href="contact.html">Contact</a></li></ul>
            </div>
            <div>
              <h5>Legal</h5>
              <ul><li><a href="terms.html">Terms of Use</a></li><li><a href="privacy.html">Privacy</a></li><li><a href="mailto:support@tcviz.com">support@tcviz.com</a></li></ul>
            </div>
          </div>
          <div className="v4foot-bottom"><span>© 2026 TC · tcviz.com</span><span>All systems operational</span></div>
        </div>
      </footer>
    </div>
  );
}
window.PostV6 = PostV6;