/* global React */
function BlogV6() {
  const posts = (window.POSTS || []).slice().sort((a, b) => b.date.localeCompare(a.date));
  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: 64, paddingBottom: 8 }}>
        <div className="wrap">
          <span className="eyebrow">Notes from the workshop</span>
          <h1 style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: "clamp(38px,5vw,60px)", lineHeight: 1.03, letterSpacing: "-0.03em", margin: "14px 0 0" }}>The blog.</h1>
          <p style={{ fontSize: 18, color: "var(--muted)", margin: "16px 0 0", maxWidth: 560 }}>
            Technical writing on chart types, Power BI internals, and the visuals we build.
          </p>
        </div>
      </section>

      <section className="sec" style={{ paddingTop: 40 }}>
        <div className="wrap">
          <div className="prods">
            {posts.map((post) => (
              <a key={post.slug} className="pcard" href={"post.html?slug=" + post.slug}>
                <div className="ptag-row">
                  <div className="ptag">{post.category}</div>
                  <span style={{ fontSize: 13, color: "var(--muted)" }}>{new Date(post.date).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</span>
                </div>
                <h3>{post.title}</h3>
                <p style={{ color: "var(--muted)", fontSize: 15, lineHeight: 1.55, margin: "8px 0 0" }}>{post.excerpt}</p>
              </a>
            ))}
          </div>
        </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.BlogV6 = BlogV6;