/* global React, ReactDOM */
const { useState } = React;

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 MenuIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M3 6H17M3 10H17M3 14H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

function CloseIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

function ArrowRight({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" fill="none">
      <path d="M3 9H15M15 9L10 4M15 9L10 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Header({ onMenuToggle, isMenuOpen }) {
  return (
    <header className="header">
      <div className="container header__row">
        <Logo />
        <nav className="nav" aria-label="Primary">
          <a className="nav__link" href="../cases.html">Estudos de caso</a>
          <a className="nav__link is-active" href="/blog/" aria-current="page">Insights</a>
          <a className="nav__link" href="../void-studio.html">VOID Studio <span className="nav__tag">em breve</span></a>
        </nav>
        <div className="header__actions">
          <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>
            <a className="lang-switch__opt" href="../en/blog/" hrefLang="en">EN</a>
          </div>
          <a className="btn btn--ghost" href="../quero-ser-um-voider.html">Quero ser um Voider</a>
          <button className="iconbtn" aria-label={isMenuOpen ? "Fechar menu" : "Abrir menu"} onClick={onMenuToggle}>
            {isMenuOpen ? <CloseIcon /> : <MenuIcon />}
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileMenu({ isOpen, onClose }) {
  return (
    <div className={`mobile-menu ${isOpen ? "is-open" : ""}`} aria-hidden={!isOpen}>
      <a className="nav__link" href="../cases.html" onClick={onClose}>Estudos de caso</a>
      <a className="nav__link is-active" href="/blog/" onClick={onClose} aria-current="page">Insights</a>
      <a className="nav__link" href="../void-studio.html" onClick={onClose}>VOID Studio <span className="nav__tag">em breve</span></a>
      <a className="btn btn--ghost" href="../quero-ser-um-voider.html" onClick={onClose}>
        Quero ser um Voider <ArrowRight />
      </a>
    </div>
  );
}

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>
  );
}

const posts = (window.BLOG_POSTS || [])
  .slice()
  .sort((a, b) => new Date(b.date) - new Date(a.date));

function BlogListing() {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <>
      <Header isMenuOpen={menuOpen} onMenuToggle={() => setMenuOpen((v) => !v)} />
      <MobileMenu isOpen={menuOpen} onClose={() => setMenuOpen(false)} />
      <main className="blog-listing">
        <div className="container">
          <header className="blog-listing__header">
            <h1 className="blog-listing__title">Insights</h1>
            <p className="blog-listing__sub">Direção criativa, campanhas e cultura visual.</p>
          </header>
          {posts.length === 0 ? (
            <p className="blog-listing__empty">Em breve.</p>
          ) : (
            <ul className="blog-listing__list">
              {posts.map((p) => (
                <li key={p.slug} className="blog-listing__item">
                  {p.cover ? (
                    <a href={`${p.slug}.html`} tabIndex={-1} aria-hidden="true">
                      <img className="blog-listing__thumb" src={p.cover} alt="" loading="lazy" />
                    </a>
                  ) : (
                    <div className="blog-listing__thumb-placeholder" />
                  )}
                  <time className="blog-listing__date" dateTime={p.date}>
                    {new Date(p.date + "T00:00:00").toLocaleDateString("pt-BR", {
                      year: "numeric", month: "long", day: "numeric",
                    })}
                  </time>
                  <h2 className="blog-listing__post-title">
                    <a href={`${p.slug}.html`}>{p.title}</a>
                  </h2>
                  <p className="blog-listing__excerpt">{p.excerpt}</p>
                  <a href={`${p.slug}.html`} className="blog-listing__read">
                    Ler <ArrowRight size={14} />
                  </a>
                </li>
              ))}
            </ul>
          )}
        </div>
      </main>
      <Footer />
    </>
  );
}

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