/* global React, ReactDOM */

// window.POST_DATA é injetado pelo build script (Fase 2) no HTML de cada post
const post = window.POST_DATA || {};

function Logo({ variant = "header" }) {
  return (
    <a href="../index.html" className={`logo logo--${variant}`} aria-label="VoiderBox">
      <img src="../assets/voiderbox-logo.png" alt="VOIDERBOX" />
    </a>
  );
}

function ArrowLeft() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M13 8H3M3 8L7 4M3 8L7 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function BlogPostTopbar() {
  return (
    <header className="case-topbar">
      <div className="container case-topbar__row">
        <a href="index.html" className="case-topbar__back">
          <ArrowLeft /> Insights
        </a>
        <Logo />
        <div className="case-topbar__crumb">
          <span className="case-topbar__study">{post.author || "VoiderBox"}</span>
        </div>
        <div className="lang-switch" aria-label="Idioma / Language">
          <span className="lang-switch__opt is-active">PT</span>
          <span className="lang-switch__sep" aria-hidden="true">|</span>
          {post.hreflangEn ? (
            <a className="lang-switch__opt" href={post.hreflangEn} hrefLang="en">EN</a>
          ) : (
            <span className="lang-switch__opt" style={{ opacity: 0.4 }}>EN</span>
          )}
        </div>
      </div>
    </header>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="divider-ornament" aria-hidden="true">
          <span className="line"></span>
          <svg width="10" height="10" viewBox="0 0 10 10"><path d="M5 0L10 5L5 10L0 5Z" fill="currentColor" /></svg>
          <span className="line"></span>
        </div>
        <div className="footer__logo">
          <Logo variant="footer" />
        </div>
        <p className="footer__text">
          VOIDERBOX é o ecossistema criado para expandir a criatividade humana e transformar intenções em obras que deixam marca.
        </p>
        <div className="footer__meta">
          <span>© 2026 VoiderBox</span>
          <nav className="footer__meta-links">
            <a href="#">Privacidade</a>
            <a href="#">Termos</a>
            <a href="#">Contato</a>
          </nav>
        </div>
      </div>
    </footer>
  );
}

function BlogPost() {
  const formattedDate = post.date
    ? new Date(post.date + "T00:00:00").toLocaleDateString("pt-BR", {
        year: "numeric", month: "long", day: "numeric",
      })
    : "";

  return (
    <>
      <BlogPostTopbar />
      <main className="blog-post">
        <div className="container blog-post__container">
          <article>
            <header className="blog-post__header">
              <p className="blog-post__meta">
                <time dateTime={post.date}>{formattedDate}</time>
                {post.author && <> · {post.author}</>}
              </p>
              <h1 className="blog-post__title">{post.title}</h1>
            </header>
            {post.cover && (
              <img className="blog-post__cover" src={post.cover} alt="" loading="eager" />
            )}
            <div
              className="blog-post__body"
              dangerouslySetInnerHTML={{ __html: post.bodyHtml || "" }}
            />
          </article>
        </div>
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<BlogPost />);