// Shared blog post detail renderer.
//
// Used by:
//   - blogs.html          (SPA — renders whichever post is open via ?post=)
//   - blog/<slug>/index.html  (standalone per-post pages with their own
//                            static <meta og:*> tags, so link-preview
//                            crawlers like LinkedIn's show the right photo)
//
// Both callers load components/blogs-data.jsx first so window.BLOG_POSTS
// is available, then this file, then render <window.TSBlogPostDetail
// post={...} onClose={...} onContact={...} />.

const TS_BLOG_CAT_COLOR = { Blog: "#FFB855", Guide: "#6976E7", Resource: "#2F3886" };

const TS_BLOG_RESOURCE_MAP = {
  "assets/logo-white.svg": "logo-white",
  "assets/tapscan-symbol.svg": "tapscan-symbol",
  "assets/blogs/blog_barcode_hero.jpg": "barcode-hero",
  "assets/blogs/blog_trade_hero.jpg": "trade-hero",
  "assets/blogs/blog_handshake_hero.jpg": "handshake-hero",
  "assets/blogs/blog_pdp_hero.jpg": "pdp-hero",
  "assets/blogs/blog_fifa_hero.jpg": "fifa-hero",
  "assets/blogs/blog_barcode_1.jpg": "barcode-1",
  "assets/blogs/blog_barcode_2.jpg": "barcode-2",
  "assets/blogs/blog_barcode_3.jpg": "barcode-3",
  "assets/blogs/blog_pdp_1.png": "pdp-1",
  "assets/blogs/blog_pdp_2.jpg": "pdp-2",
  "assets/blogs/blog_fifa_1.png": "fifa-1",
  "assets/blogs/blog_fifa_2.jpg": "fifa-2",
  "assets/blogs/katie-dennis.png": "katie-photo",
  "assets/blogs/terry-dennis.png": "terry-photo",
};
function tsBlogRes(url) {
  if (!url) return url;
  const id = TS_BLOG_RESOURCE_MAP[url];
  const resolved = (id && window.__resources && window.__resources[id]) || url;
  // Site-root-relative asset paths (e.g. "assets/blogs/x.jpg") need a
  // depth prefix when this file is used from a nested standalone page
  // like blog/<slug>/index.html — see TS_ASSET_PREFIX in shared.jsx.
  if (resolved.indexOf("assets/") === 0) {
    return (window.TS_PAGE_PREFIX || "") + resolved;
  }
  return resolved;
}
window.tsBlogRes = tsBlogRes;

function TSBlogPostDetail({ post, onClose, onContact }) {
  const { useEffect } = React;
  if (!post) return null;
  const color = TS_BLOG_CAT_COLOR[post.category] || "#2F3886";
  useEffect(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [post.id]);

  useEffect(() => {
    if (!post.sideEmbed) return;
    const run = () => { if (window.instgrm) window.instgrm.Embeds.process(); };
    if (window.instgrm) { run(); return; }
    let s = document.getElementById("ig-embed-js");
    if (!s) { s = document.createElement("script"); s.id = "ig-embed-js"; s.async = true; s.src = "https://www.instagram.com/embed.js"; document.body.appendChild(s); }
    s.addEventListener("load", run);
    return () => s.removeEventListener("load", run);
  }, [post.id]);

  return (
    <div style={{ fontFamily: "Montserrat", background: "#fff", paddingTop: 72 }}>
      {/* HERO */}
      <section data-screen-label={"Blog — " + post.title} style={{
        background: "#E5E7EC",
        position: "relative",
        height: 630, overflow: "hidden",
      }}>
        <image-slot
          id={"blog-hero-" + post.id}
          src={tsBlogRes(post.heroImage || post.image) || undefined}
          shape="rect"
          placeholder={"Hero photo for " + post.title}
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: "none", background: "transparent" }}
        />
        <div style={{ position: "absolute", left: 0, right: 0, top: 0, zIndex: 3, padding: "32px 64px 0" }}>
          <div style={{ maxWidth: 800, margin: "0 auto" }}>
            <button className="ts-blog-back-btn" onClick={onClose} style={{
              display: "inline-flex", alignItems: "center", gap: 10,
              background: "#fff", color: "#1C2250",
              border: "none",
              padding: "14px 22px", borderRadius: 8,
              fontFamily: "Montserrat", fontWeight: 700, fontSize: 14, cursor: "pointer",
              boxShadow: "0 6px 18px rgba(15,17,17,0.18)",
              transition: "all 180ms"
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#FFB855"; e.currentTarget.style.color = "#1C2250"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "#fff";    e.currentTarget.style.color = "#1C2250"; }}>
              <span style={{ color: "#FFB855", fontSize: 18, lineHeight: 1, fontWeight: 900 }}>←</span>
              Back to blogs &amp; resources
            </button>
          </div>
        </div>
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "32px 64px",
          background: "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%)",
          color: "#fff",
        }}>
          <div style={{ maxWidth: 800, margin: "0 auto" }}>
            <span style={{
              padding: "8px 18px", borderRadius: 999,
              background: "#FFFFFF",
              color: "#1C2250", fontWeight: 700, fontSize: 13,
              display: "inline-block", marginBottom: 18,
            }}>{post.category}</span>
            <h1 className="ts-blog-hero-title" style={{ fontWeight: 900, fontSize: 36, margin: 0, color: "#fff", lineHeight: 1.15, letterSpacing: "-0.015em", textShadow: "0 2px 8px rgba(0,0,0,0.3)", maxWidth: 1180 }}>
              {post.id === "connected-packaging" ? (
                <React.Fragment>The Barcode Is Changing<span style={{ color }}>.</span><br/>Is Your Packaging Ready?</React.Fragment>
              ) : post.id === "world-cup-blog" ? (
                <React.Fragment>The Biggest Stage in the World<br/>Has a Blind Spot<span style={{ color }}>.</span></React.Fragment>
              ) : post.id === "olg-fifa-world-cup" ? (
                <React.Fragment>Beyond the Logo:<br/>Turning Cultural Moments Into Connected Consumer Journeys<span style={{ color }}>.</span></React.Fragment>
              ) : (
                <React.Fragment>{post.title.replace(/\.$/, "")}
              <span style={{ color }}>.</span></React.Fragment>
              )}
            </h1>
            <div style={{ marginTop: 14, fontSize: 16, fontWeight: 600, color: "rgba(255,255,255,0.85)" }}>{post.summary}</div>
            <div className="ts-blog-meta-row" style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 16 }}>
              <span className="ts-blog-meta-date" style={{ fontSize: 15, fontWeight: 600, color: "rgba(255,255,255,0.85)" }}>{post.date}</span>
              <span className="ts-blog-meta-dot" style={{ width: 4, height: 4, borderRadius: 999, background: "rgba(255,255,255,0.5)" }} />
              <span className="ts-blog-meta-author" style={{ fontSize: 15, fontWeight: 700, color: "#fff" }}>{post.author}</span>
            </div>
          </div>
        </div>
      </section>

      {/* BODY */}
      <div className="ts-blog-pad" style={{ background: "#fff", padding: "56px 64px" }}>
        <div style={{ maxWidth: 800, margin: "0 auto" }}>
          <div style={{ display: "grid", gap: 24 }}>
            {(function () {
              const body = post.body || [];
              const render = (p, i) => {
                if (typeof p === "object" && p.divider) return <hr key={i} style={{ border: "none", borderTop: "1px solid #DDDFEE", margin: "8px 0" }} />;
                if (typeof p === "object" && p.note) return (
                  <React.Fragment key={i}>
                    <hr style={{ border: "none", borderTop: "1px solid #DDDFEE", margin: "8px 0" }} />
                    <p style={{ fontSize: 15, lineHeight: 1.7, color: "#5A5D72", margin: 0 }}><strong style={{ color: "#212331", fontWeight: 800 }}>{p.label}</strong>{p.note}</p>
                  </React.Fragment>
                );
                if (typeof p === "object" && p.list) return (
                  <ul key={i} style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                    {p.list.map((item, j) => {
                      const text = typeof item === "object" ? item.text : item;
                      const sub = typeof item === "object" ? item.sub : null;
                      return (
                        <li key={j} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                          <div style={{ display: "flex", gap: 10, fontSize: 16, lineHeight: 1.6, color: "#212331" }}>
                            <span style={{ width: 6, height: 6, borderRadius: 999, background: "#2F3886", flexShrink: 0, marginTop: 9 }} />
                            <span>{text}</span>
                          </div>
                          {sub && (
                            <ul style={{ margin: 0, padding: 0, paddingLeft: 26, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                              {sub.map((s, k) => (
                                <li key={k} style={{ display: "flex", gap: 10, fontSize: 15, lineHeight: 1.6, color: "#5A5D72" }}>
                                  <span style={{ width: 5, height: 5, borderRadius: 999, background: "#B0B4D4", flexShrink: 0, marginTop: 8 }} />
                                  <span>{s}</span>
                                </li>
                              ))}
                            </ul>
                          )}
                        </li>
                      );
                    })}
                  </ul>
                );
                if (typeof p === "object" && p.quote) return (
                  <blockquote key={i} style={{ margin: "8px 0", background: "#F5F6FF", borderLeft: "4px solid #FFB855", borderRadius: 12, padding: "24px 28px", display: "grid", gap: 14 }}>
                    <p style={{ margin: 0, fontSize: 18, lineHeight: 1.55, fontWeight: 700, color: "#1C2250", letterSpacing: "-0.005em" }}>&ldquo;{p.quote}&rdquo;</p>
                    {p.by && <p style={{ margin: 0, fontSize: 14, lineHeight: 1.5, fontWeight: 700, color: "#5A5D72" }}>&mdash; {p.by}</p>}
                  </blockquote>
                );
                if (typeof p === "object" && p.grid) return (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="ts-blog-grid-2x2">
                    {p.grid.map((cell, j) => (
                      <div key={j} style={{ background: "#F5F6FF", border: "1px solid #DDDFEE", borderRadius: 12, padding: "22px 24px" }}>
                        <div style={{ fontWeight: 900, fontSize: 19, color: "#212331", marginBottom: 8, letterSpacing: "-0.01em" }}>{cell.title}</div>
                        <div style={{ fontSize: 15, lineHeight: 1.6, color: "#5A5D72" }}>{cell.text}</div>
                      </div>
                    ))}
                  </div>
                );
                if (typeof p === "object" && p.h) return (
                  <React.Fragment key={i}>
                    {i > 0 && <hr style={{ border: "none", borderTop: "1px solid #DDDFEE", margin: "8px 0" }} />}
                    <h3 style={{ fontWeight: 900, fontSize: 22, margin: 0, color: "#212331", letterSpacing: "-0.01em" }}>{p.h}</h3>
                  </React.Fragment>
                );
                if (typeof p === "object" && p.img) return (
                  <div key={i}>
                    <div style={{ position: "relative" }}>
                      <img src={tsBlogRes(p.img)} alt={p.alt || ""} style={{ width: "100%", borderRadius: 12, display: "block", border: "1px solid #B0B4D4" }} />
                      {p.credit && <span style={{ position: "absolute", right: 10, bottom: 8, fontSize: 11, color: "rgba(255,255,255,0.75)", textShadow: "0 1px 3px rgba(0,0,0,0.6)", fontWeight: 500 }}>{p.credit}</span>}
                    </div>
                    {p.caption && <p style={{ fontSize: 13, color: "#7A7D8F", marginTop: 10, marginBottom: 0, fontStyle: "italic" }}>{p.caption}</p>}
                  </div>
                );
                if (typeof p === "string" && p.includes("{{BAKERYLINK}}")) return <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: "#212331", margin: 0 }}>{p.split("{{BAKERYLINK}}").flatMap((part, k) => k === 0 ? [part] : [<a key={k} href="https://www.bakeryandsnacks.com/Article/2026/07/21/the-global-evolution-of-smart-food-labelling/" target="_blank" rel="noopener noreferrer" style={{ color: "#2F3886", fontWeight: 600, textDecoration: "underline" }}>Bakery&amp;Snacks&rsquo; recent examination of global smart-labelling adoption</a>, part])}</p>;
                if (typeof p === "string" && p.includes("{{FOODBORNELINK}}")) return <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: "#212331", margin: 0 }}>{p.split("{{FOODBORNELINK}}").flatMap((part, k) => k === 0 ? [part] : [<a key={k} href="https://drjessicaknurick.substack.com/p/why-foodborne-illness-is-surging" target="_blank" rel="noopener noreferrer" style={{ color: "#2F3886", fontWeight: 600, textDecoration: "underline" }}>Why Foodborne Illness Is Surging</a>, part])}</p>;
                if (typeof p === "string" && p.includes("{{CAGLINK}}")) return <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: "#212331", margin: 0 }}>{p.split("{{CAGLINK}}").flatMap((part, k) => k === 0 ? [part] : [<a key={k} href="https://www.einpresswire.com/article/950771539/culture-advisory-group-announces-strategic-partnership-with-ahead-of-the-curve-group-for-connected-packaging-solutions" target="_blank" rel="noopener noreferrer" style={{ color: "#2F3886", fontWeight: 600, textDecoration: "underline" }}>Read the full announcement from Culture Advisory Group.</a>, part])}</p>;
                if (typeof p === "string" && p.includes("{{ACOSTALINK}}")) return <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: "#212331", margin: 0 }}>{p.split("{{ACOSTALINK}}").flatMap((part, k) => k === 0 ? [part] : [<a key={k} href="https://www.acosta.group/ai-is-becoming-a-shopping-channel/" target="_blank" rel="noopener noreferrer" style={{ color: "#2F3886", fontWeight: 600, textDecoration: "underline" }}>Acosta Group Shopper Community survey</a>, part])}</p>;
                return <p key={i} style={{ fontSize: 16, lineHeight: 1.75, color: "#212331", margin: 0 }}>{typeof p === "string" && p.includes("{{GS1LINK}}") ? p.split("{{GS1LINK}}").flatMap((part, k) => k === 0 ? [part] : [<a key={k} href="https://www.gs1us.org/industries-and-insights/by-topic/sunrise-2027" target="_blank" rel="noopener noreferrer" style={{ color: "#2F3886", fontWeight: 600, textDecoration: "underline" }}>GS1 Sunrise 2027</a>, part]) : p}</p>;
              };
              if (!post.sideEmbed) return body.map(render);
              const cut = post.sideEmbedAt != null ? post.sideEmbedAt : body.findIndex((b) => b && typeof b === "object" && b.h);
              const intro = cut < 0 ? body : body.slice(0, cut);
              const rest = cut < 0 ? [] : body.slice(cut);
              return [
                <div key="intro" style={{ display: "grid", gap: 24 }}>{intro.map(render)}</div>,
                <hr key="embed-hr-top" style={{ border: "none", borderTop: "1px solid #DDDFEE", margin: "8px 0", width: "100%" }} />,
                <div key="embed" className="ts-blog-split" style={{ display: "grid", gridTemplateColumns: "1fr 300px", gap: 32, alignItems: "center", padding: 0 }}>
                  <blockquote style={{ margin: 0, borderLeft: "3px solid " + color, paddingLeft: 20, display: "grid", gap: 12 }}>
                    <p style={{ margin: 0, fontSize: 17, lineHeight: 1.6, color: "#212331", fontWeight: 700 }}>Winner! 🏆 Gagnant!</p>
                    <p style={{ margin: 0, fontSize: 15, lineHeight: 1.7, color: "#5A5D72" }}>The excitement doesn’t stop on the pitch. The OLG activation at FIFA Fan Festival™ is keeping fans smiling, cheering, and celebrating every step of the way.</p>
                    <p style={{ margin: 0, fontSize: 15, lineHeight: 1.7, color: "#5A5D72" }}>Catch the final match on July 19 at the FIFA Fan Festival™ and witness the moment the tournament’s Winner! Gagnant! is crowned.</p>
                    <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "#7A7D8F", fontWeight: 600 }}>#WeAreToronto</p>
                    <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: "#7A7D8F" }}>FIFA World Cup 26 Toronto, July 17</p>
                    <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, color: "#7A7D8F" }}>@fwc26toronto</p>
                  </blockquote>
                  <div className="ts-ig-wrap" style={{ width: 326 }}>
                    <blockquote className="instagram-media" data-instgrm-permalink={post.sideEmbed} data-instgrm-version="14" style={{ background: "#fff", border: "1px solid #DDDFEE", borderRadius: 12, margin: 0, width: "100%", padding: 0 }}>
                      <a href={post.sideEmbed} target="_blank" rel="noopener noreferrer" style={{ display: "block", padding: "18px 20px", fontSize: 14, fontWeight: 600, color: "#2F3886" }}>View this post on Instagram</a>
                    </blockquote>
                  </div>
                </div>,
                <hr key="embed-hr-bottom" style={{ border: "none", borderTop: "1px solid #DDDFEE", margin: "8px 0", width: "100%" }} />,
                ...rest.map((p, i) => render(p, i + cut)),
              ];
            })()}
          </div>
          <div className="ts-blog-author-bar" style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 24, paddingTop: 24, borderTop: "1px solid #EEF0F8", flexWrap: "wrap" }}>
            <div style={{ width: 56, height: 56, borderRadius: "50%", overflow: "hidden", flexShrink: 0, border: "1px solid #DDDFEE" }}>
              <img src={tsBlogRes(post.authorPhoto || "assets/blogs/terry-dennis.png")} alt={post.author} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", transform: post.authorPhotoScale ? `scale(${post.authorPhotoScale})` : "none" }} />
            </div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 800, color: "#212331" }}>{(post.author || "").split(",")[0]}</div>
              <div style={{ fontSize: 13, fontWeight: 600, color: "#7A7D8F" }}>{(post.author || "").split(",")[1] ? post.author.split(",")[1].trim() : "Co-Founder"}</div>
            </div>
            <div className="ts-blog-author-divider" style={{ width: 1, height: 32, background: "#DDDFEE" }} />
            <a className="ts-blog-author-btn" href={post.authorLinkedIn || "https://www.linkedin.com/in/terry-dennis-44b4744/?skipRedirect=true"} target="_blank" rel="noopener noreferrer" aria-label={(post.author || "").split(",")[0] + " — LinkedIn"} style={{
              height: 40, padding: "0 16px", borderRadius: 999, border: "1px solid #DDDFEE", flexShrink: 0,
              display: "flex", alignItems: "center", gap: 8, color: "#2F3886",
              fontFamily: "Montserrat", fontWeight: 600, fontSize: 13, whiteSpace: "nowrap", textDecoration: "none",
              transition: "all 180ms",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#2F3886"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#2F3886"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#2F3886"; e.currentTarget.style.borderColor = "#DDDFEE"; }}>
              <span>View LinkedIn</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}><path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M8 17H5V10H8V17M6.5 8.7C5.5 8.7 4.7 7.9 4.7 6.9S5.5 5.1 6.5 5.1 8.3 5.9 8.3 6.9C8.3 7.9 7.5 8.7 6.5 8.7M19 17H16V13.4C16 12.5 15.3 11.8 14.4 11.8S12.8 12.5 12.8 13.4V17H9.8V10H12.8V11.2C13.3 10.4 14.4 9.8 15.3 9.8C17.3 9.8 19 11.5 19 13.5V17Z" /></svg>
            </a>
            <a className="ts-blog-author-btn" href={"mailto:" + (post.authorEmail || "Terry.Dennis@AheadoftheCurveGroup.com")} style={{
              height: 40, padding: "0 16px", borderRadius: 999, border: "1px solid #DDDFEE", flexShrink: 0,
              display: "flex", alignItems: "center", gap: 8, color: "#2F3886",
              fontFamily: "Montserrat", fontWeight: 600, fontSize: 13, whiteSpace: "nowrap", textDecoration: "none",
              transition: "all 180ms",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#2F3886"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#2F3886"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#2F3886"; e.currentTarget.style.borderColor = "#DDDFEE"; }}>
              <span>Contact {(post.author || "Terry").split(",")[0].split(" ")[0]}</span>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}><path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4M20 8L12 13L4 8V6L12 11L20 6V8Z" /></svg>
            </a>
          </div>
        </div>
      </div>

      {/* CTA */}
      <div className="ts-blog-pad" style={{ padding: "56px 64px", background: "#F5F6FF" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "32px 36px", background: "#fff", borderRadius: 16, border: "1px solid #DDDFEE" }}>
          <h3 style={{ fontWeight: 900, fontSize: 22, margin: 0, color: "#212331", letterSpacing: "-0.01em" }}>
            Want to see how TapScan could work for your brand<span style={{ color: "#212331" }}>?</span>
          </h3>
          <p style={{ fontSize: 15, lineHeight: 1.65, color: "#212331", margin: "10px 0 22px" }}>
            We&rsquo;re happy to walk through logistics and how TapScan can work for your brand from rollout shape to integrations, timelines, and what success looks like for your team.
          </p>
          <div className="ts-blog-cta-row" style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="ts-blog-cta-btn" onClick={() => { onContact && onContact(); }} style={{
              fontFamily: "Montserrat", fontWeight: 700, fontSize: 15,
              padding: "16px 28px", borderRadius: 8,
              background: "#2F3886", color: "#fff", border: "none", cursor: "pointer",
              transition: "background 180ms",
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = "#1C2250"}
            onMouseLeave={(e) => e.currentTarget.style.background = "#2F3886"}>
              Let&rsquo;s talk logistics</button>
            <button className="ts-blog-cta-btn" onClick={onClose} style={{
              fontFamily: "Montserrat", fontWeight: 700, fontSize: 15,
              padding: "16px 28px", borderRadius: 8,
              background: "transparent", color: "#212331", border: "1px solid #DDDFEE", cursor: "pointer",
              transition: "background 180ms, border-color 180ms, color 180ms",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#F4F5FB"; e.currentTarget.style.borderColor = "#B0B4D4"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.borderColor = "#DDDFEE"; }}
            >Back to blogs &amp; resources</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.TSBlogPostDetail = TSBlogPostDetail;